Yes, sorry, Angel. I did miss that. The code to change is in the js subdirectory -- coremenu.js. If you want to test, just rename your changes coremenu.z.js and put them in the j2s/core subdirectory.

When I wrote this, I barely understood anything about jQuery. What you see there is a series of optional loads of jQuery:

if (!jQuery.ui)
...
if (!jQuery.ui.widget)
...
if (!jQuery.ui.mouse)
...
if (!jQuery.ui.position)
...

if (!jQuery.ui.menu)
...

so there is nothing† there that I changed.

Where the problem could lie is right here:

;(function($){
††† var s = '<style>\
††† .jmolPopupMenu { position: absolute;min-width: 200px;background-color: rgb(220, 220, 220); z-order:10000;\
††† †font-family:Arial,sans-serif;font-size:8px;padding:2px;-webkit-box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);\
††† †-moz-box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);}\
††† .ui-menu .ui-menu-item {font-size:10px}\
††† .ui-state-disabled{cursor:default!important}\
....

††† </style>'
††† Jmol.$after("head", s);
})(jQuery);

I think any changes should be to the† jQuery styles in relation to .jmolPopupMenu.

So could you just give a comment about each of these? That first one is a bit of a mouth-full! I think there should be a much cleaner way of doing what we are trying to do here.


Bob


1062c1062
<†† Jmol.$after("head", "<style>\n.jmolPopupMenu{position:absolute;background-color:#dcdcdc;z-order:10000;padding:2px;box-shadow:1px 1px 5px rgba(50,50,50,0.75);}\n.jmolPopupMenu input[type='checkbox']{vertical-align:middle;}\n.jmolPopupMenu,.jmolPopupMenu .ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:none}\n.jmolPopupMenu .ui-menu{margin-top:-3px;position:absolute}\n.jmolPopupMenu .ui-menu-item{cursor:pointer;margin:0 2ex 0 0;padding:0;zoom:1;width:100%}\n.jmolPopupMenu .ui-menu-divider{margin:3px 1px;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}\n.jmolPopupMenu .ui-menu-item a{text-decoration:none;display:block;padding:1px .4em;white-space:nowrap;line-height:1.2;zoom:1;font-weight:normal}\n.jmolPopupMenu .ui-menu-item a.ui-state-focus,.jmolPopupMenu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px}\n.jmolPopupMenu .ui-menu-icons{position:relative}\n.jmolPopupMenu .ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em}\n.jmolPopupMenu .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;position:absolute;top:.2em;left:.2em}\n.jmolPopupMenu .ui-menu-icon{position:static;float:right}\n.jmolPopupMenu .ui-icon-carat-1-e{min-width:2ex;text-align:right;background-image:none;background-position:0 0}\n.jmolPopupMenu .ui-icon-carat-1-e:after{content:'>'}\n.jmolPopupMenu,.jmolPopupMenu .ui-widget{font-family:Arial,sans-serif;font-size:11px}\n.jmolPopupMenu input{font-family:inherit;font-size:1em}\n.jmolPopupMenu,.jmolPopupMenu .ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd bottom repeat-x;color:#222}\n.jmolPopupMenu a{color:#222}\n.jmolPopupMenu.ui-state-default,jmolPopupMenu .ui-state-default{border:1px solid #c5dbec;background:#dfeffc;font-weight:bold;color:#2e6e9e}\n.jmolPopupMenu.ui-state-default a,.jmolPopupMenu .ui-state-default a{color:#2e6e9e;text-decoration:none}\n.jmolPopupMenu.ui-state-hover,.jmolPopupMenu .ui-state-hover,.jmolPopupMenu.ui-state-focus,.jmolPopupMenu .ui-state-focus{border:1px solid #79b7e7;background:#d0e5f5;font-weight:bold;color:#1d5987}\n.jmolPopupMenu .ui-state-hover a:link{color:#1d5987;text-decoration:none}\n.jmolPopupMenu .ui-state-active{border:1px solid #79b7e7;background:#f5f8f9;font-weight:bold;color:#e17009}\n.jmolPopupMenu .ui-state-active a:link{color:#e17009;text-decoration:none}\n.jmolPopupMenu .ui-state-highlight{border:1px solid #fad42e;background:#fbec88;color:#363636}\n.jmolPopupMenu .ui-state-highlight a{color:#363636}\n.jmolPopupMenu .ui-state-disabled *{color:#d6d6d6!important;font-weight:normal;cursor:default}\n.jmolPopupMenu .ui-state-disabled a:hover{background-color:transparent!important;border-color:transparent!important}\n.jmolPopupMenu .ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}\n.jmolPopupMenu,.jmolPopupMenu .ui-corner-all{border-radius:5px}\n.jmolPopupMenu .ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}\n.jmolPopupMenu.ui-widget-shadow,.jmolPopupMenu .ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}\n</style>")
---
>†† Jmol.$after("head", "<style>\t.jmolPopupMenu { position: absolute;min-width: 200px;background-color: rgb(220, 220, 220); z-order:10000;\t font-family:Arial,sans-serif;font-size:8px;padding:2px;-webkit-box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);\t -moz-box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);box-shadow:1px 1px 5px rgba(50, 50, 50, 0.75);}\t.ui-menu .ui-menu-item {font-size:10px}\t.ui-state-disabled{cursor:default!important}\t.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}\t.ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%}\t.ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:none}\t.ui-menu .ui-menu{margin-top:-3px;position:absolute}\t.ui-menu .ui-menu-item{min-width: 200px;width: 200px;cursor:pointer;margin:0;padding:0;zoom:1;width:100%}\t.ui-menu .ui-menu-divider{margin:5px -2px 5px -2px;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}\t.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:2px .4em;line-height:1.5;zoom:1;font-weight:normal}\t.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px}\t.ui-menu .ui-state-disabled{font-weight:normal;margin:.4em 0 .2em;line-height:1.5}\t.ui-menu .ui-state-disabled a{cursor:default}.ui-menu-icons{position:relative}\t.ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em}\t.ui-menu .ui-icon{position:absolute;top:.2em;left:.2em}\t.ui-menu .ui-menu-icon{position:static;float:right}\t.ui-widget{font-family:Arial,sans-serif;font-size:1.1em}\t.ui-widget .ui-widget{font-size:1em}\t.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,sans-serif;font-size:1em}\t.ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd bottom repeat-x;color:#222}\t.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #4297d7;background:#5c9ccc;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}\t.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #c5dbec;background:#dfeffc;font-weight:bold;color:#2e6e9e}\t.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#2e6e9e;text-decoration:none}\t.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #79b7e7;background:#d0e5f5;font-weight:bold;color:#1d5987}\t.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#1d5987;text-decoration:none}\t.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #79b7e7;background:#f5f8f9;font-weight:bold;color:#e17009}\t.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#e17009;text-decoration:none}\t.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fad42e;background:#fbec88;color:#363636}\t.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}\t.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec;color:#cd0a0a}\t.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}\t.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}\t.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}\t.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}\t.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}\t.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}\t.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-khtml-border-top-left-radius:5px;border-top-left-radius:5px}\t.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;-khtml-border-top-right-radius:5px;border-top-right-radius:5px}\t.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;-khtml-border-bottom-left-radius:5px;border-bottom-left-radius:5px}\t.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-khtml-border-bottom-right-radius:5px;border-bottom-right-radius:5px}\t.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}\t.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa;opacity:.3;filter:Alpha(Opacity=30);-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}\t</style>")


1179,1180c1179
<†††††† var a = '<li id="' + this.id + '" class="' + (this.enabled ? "" : "ui-state-disabled") + '">';
< ††† ††† ††† if (this.text) { a += '<a>'; }
---
>†††††† var a = '<li id="' + this.id + '" class="' + (this.enabled ? "" : "ui-state-disabled") + '"><a href="#">';

This will probably fix the annoying feature that I noticed that on some machines dragging a separator bar adds "#" to the page and scrolls back to the top.


1182,1184c1181,1182
<†††††††† '<input id="' + this.id + '-cb" type="checkbox" ' + (this.selected ? "checked" : "") + ' /><label for="' + this.id + '-cb">' + this.text + "</label>" : this.isRadio ? a += '<input id="' + this.id + '-rb" type="radio" name="' + this.htmlName + '" ' + (this.selected ? "checked" : "") + ' /><label for=">' + this.id + '-rb">' + this.text + "</label>" : this.text ? a += this.text : this.icon || (a += '');
< ††† ††† ††† if (this.text && !this.icon) { a += '</a>'; }
<†††††† return a + '</li>'
---
>†††††††† '<label><input id="' + this.id + '-cb" type="checkbox" ' + (this.selected ? "checked" : "") + " />" + this.text + "</label>" : this.isRadio ? a += '<label><input id="' + this.id + '-rb" type="radio" name="' + this.htmlName + '" ' + (this.selected ? "checked" : "") + " />" + this.text + "</label>" : this.text ? a += this.text : this.icon || (a += "<hr>");
>†††††† return a + "</a></li>"




On Thu, Sep 26, 2013 at 2:35 PM, Angel HerrŠez <angel.herraez@uah.es> wrote:
May I resuscitate this?
It seems to have gone unnoticed.

The files are zipped at
https://docs.google.com/file/d/0B9MbaDbbYfcTTnpyZ1ZNcTB0c0U/edit?usp
=sharing



On 1 Sep 2013 at 11:43, Angel HerrŠez wrote:

> Dear Bob,
>
> I've worked on some retouching of the user interface of the JSmol pop-up
> menu.
> I couldn't find what is the source file that produces this menu, so I
> downloaded the production file,
> http://chemapps.stolaf.edu/jmol/jsmol/j2s/core/coremenu.z.js
> dated 19-Aug-2013_17:25
> and worked from that
>
> I am attaching
> - the original file (unpacked in some online `beautifierī)
> - my modified file (unpacked)
> - a Unix diff file between them, for guidance
> ** The attachment goes in a separate private message, since it was rejected
> by SF **
>
>
> I have tested in localhost and everything seems to behave well. A demo is
> available at
> http://biomodel.uah.es/Jmol/pop-up_menu/test_popupmenu.htm
> (see version 3)
>
>
>
> My motivations:
> - make the CSS rules isolated, i.e. applied only to jmolPopupMenu and not to
> other jQuery.menu instances that might be in the page
> - make it more compact (less tall, much less wide)
> - avoid the separators being visually active elements (on hover)
> - apply greyed-out style to disabled elements (rather than translucency), and
> make them visually inactive to mouse hover
> - avoid the # change in the url (by removing the href; this also seems to
> make the checkboxes more responsive) (Note)
> - added a ">" sign to expandable menu items
> - removed some css code that is not used by jmolPopupMenu
> - a more standard layout of html label tags, ie not surrounding the input tag
>
> The CSS is rather simplified, which should make easier for page developers
> to override some rules if they need (e.g. for finger-based devices). Still,
> there's quite a deal of mystery in some rules inherited from jQueryUI. I
> cleared up all that looked safe.
>
> Hope you can incorporate the changes. I think it feels quite better.
>
> --Note--:
> †I tried to replace the a tags by span with a specific class (after all, they are
> not hyperlinks nor anchors), but it does not work. Seems that other code in
> the js file (coming from JQuery UI menu I believe) relies on them being 'a'
> tags, and I'd rather not mess up with that code. A flat <a> seems to be fine,
> even if not semantically pure.
>
>
>
> ------------------------------------------------------------------------------
> Learn the latest--Visual Studio 2012, SharePoint 2013, SQL 2012, more!
> Discover the easy way to master current and previous Microsoft technologies
> and advance your career. Get an incredible 1,500+ hours of step-by-step
> tutorial videos with LearnDevNow. Subscribe today and save!
> http://pubads.g.doubleclick.net/gampad/clk?id=58040911&iu=/4140/ostg.clktrk
> _______________________________________________
> Jmol-developers mailing list
> Jmol-developers@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/jmol-developers



------------------------------------------------------------------------------
October Webinars: Code for Performance
Free Intel webinars can help you accelerate application performance.
Explore tips for MPI, OpenMP, advanced profiling, and more. Get the most from
the latest Intel processors and coprocessors. See abstracts and register >
http://pubads.g.doubleclick.net/gampad/clk?id=60133471&iu=/4140/ostg.clktrk
_______________________________________________
Jmol-developers mailing list
Jmol-developers@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/jmol-developers



--
Robert M. Hanson
Larson-Anderson Professor of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr


If nature does not answer first what we want,
it is better to take what answer we get.

-- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900