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.herr...@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
------------------------------------------------------------------------------
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
