Response title
This is preview!
- Screen name: herboldracing
herboldracing's Profile
5 Posts
8 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 31-Oct-2016 01:21 PM
- Forum: Using jQuery UI
I did a search for "menubar target" and nothing came up.Is anybody else having problems with using the jQuery UI Menubar with anchors that have a target attribute?This is what I basically have for the HTML:- <ul id="menubar">
- <li>Stuff
- <ul>
- <li><a href="http://www.google.com" target="_blank">Google</a></li>
- </ul>
- </li>
- </ul>
And for the JS:- $("#menubar").menubar();
The expected behavior is for the anchor to open the google.com page only in a new tab, and to leave the current tab alone.What actually happens when I click on the Google item is the google.com page opens in a new tab AND in the current tab.I am using jQuery UI 1.11.4 with jQuery 1.11.3.jsFiddle showing the problem: https://jsfiddle.net/mherbold/xxzbuy13/- Has anybody noticed (I am using FF4) that using the mouse wheel to scroll up / down a page changes the selected state of some radio buttons (perhaps the last set you clicked on) ???! The state is changed on the form but is not reflected by the UI. This is truly annoying - my clients are submitting forms with radio buttons with values they did not select. I am able to reproduce this quite easily - just have a bunch of Yes / No radio buttons (maybe 50 lines of them) and just scroll vertically with the mouse wheel, switch some radio button values, scroll some more, switch some more, and submit. By default all my radio buttons are set to "Yes" and what I do to test is manually set them all to "No" except for 3 random ones left on Yes. I hit submit and usually anywhere between 4 and 6 values are set to Yes instead of 3. If I use the scroll bar on the side to scroll the page instead of the mouse wheel, I always get 3 Yes'es submitted. Using the mouse wheel to scroll I end up with more than 3, which leads me to suspect the mouse wheel is changing the values of the radio buttons on the form in FF4 that isn't being reflected in the UI. :-(I am not sure if this happens in other browsers.
- I've been using jQuery UI on my site for a while. I just updated to the latest version and the behavior of the datepicker has changed. I use the default functionality (click in the edit box to make it appear). This used to work just fine - but now when the page is first loaded the datepicker is visible at the bottom of the page. After I click in the edit box the datepicker moves to where it should be and behaves normally after that. Why is the datepicker initially visible now? It wasn't like this before... :-\Thanks for any insight.
- The UI Widgets demo page mentions that it is not possible to have multiple accordion sections open at the same time. But I really need to have multiple accordion sections open. Basically I want click on the header to open it, and click on the header again to close it. I do not want the sections to close automatically when a different header is clicked on.Does someone have a patch that I can use that will allow multiple accordion sections open at once?I am using autoHeight: false so the overall height of the accordion can change, not a problem.Thanks in advance,Marv
- While we are all waiting for the new menu widget to be released in 1.9, here is a temporary menu that will work in 1.8 that works with ThemeRoller...The CSS:
- #bar {cursor:pointer; height:30px; white-space:nowrap;}
- #menu {height:30px; padding:0 0 0 10px; position:relative; z-index:1000;}
- #menu ul {list-style:none; margin:0; padding:0;}
- #menu ul li {display:inline-block;}
- #menu ul li a {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
- #menu ul li span {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
- #menu ul li div.container {left:-9999px; padding:5px; position:absolute;}
- #menu ul li:hover {position:relative;}
- #menu ul li a:hover {position:relative;}
- #menu ul li a.submenu:hover {position:relative;}
- #menu ul li span:hover {position:relative;}
- #menu ul li span.submenu:hover {position:relative;}
- #menu ul li:hover > a {position:relative;}
- #menu ul li:hover a.submenu {position:relative;}
- #menu ul li:hover > span {position:relative;}
- #menu ul li:hover span.submenu {position:relative;}
- #menu ul :hover div.container {left:0px; position:absolute; top:30px;}
- #menu ul dl {list-style:none; margin:0; padding:0; width:auto;}
- #menu ul dl dt {margin:5px 0 0 0; padding:2px;}
- #menu ul dl dd {display:block; margin:0; padding:2px;}
- #menu ul dd a {display:block; font-weight:normal; margin:0; padding:0 10px; text-align:left;}
The HTML:- <div class=ui-widget" id="bar">
- <div class="ui-widget-header" id="menu">
- <ul>
- <li>
- <a href="/index.php">Home</a>
- </li>
- <li>
- <span class="submenu">Your Account</span>
- <div class="container ui-widget-content ui-corner-bottom">
- <dl class="ui-widget">
- <dd>
- <a id="item_1" href="/profile.php">Your Profile</a>
- </dd>
- <dd>
- <a id="item_2" href="/password.php">Change Your Password</a>
- </dd>
- </dl>
- </div>
- </li>
- </ul>
- </div>
- </div>
Run $('#item_N').button(); on all the menu items where "item_N" is the actual item id like item_1, item_2, and so on... the above demonstrates a menu bar with 2 top level items, one clickable (Home) and for the other one (Your Account) when you mouse over it will produce a drop down with 2 items in it. You can use the <dt> instead of <dd> tag to have non-clickable menu items in the drop down for whatever reason.And voila... you've got a simple themeable drop down menu bar. Not very pretty, but it works and should hold you over until 1.9 comes out!I hope this helps someone. Apologies for any error in the code - I typed it directly into this post.- «Prev
- Next »
Moderate user : herboldracing
© 2013 jQuery Foundation
Sponsored by and others.
