I have nested unordered lists to create a Jquery UI menu that expands when you hover over the first menu option. What I want to happen is for a menu selection to be displayed in the place of the first menu option you see once you select it. For some reason using .val or .html isn't working for me. Here is my code.
//this is where I try to take the selection and put it in in the <li> with the id 'input'.
<script>
$(function() {
$( "#menu" ).menu({
select: function( event, ui ) {
var selection = ui.item.text();
$("#input").html() = selection;
}
});
});
</script>
// the options below "Choose Activity" expand when you hover over "Choose Activity".
I want one of the selections
to take the place of "Choose Activity" once it is selected.
<ul id="menu">
<li>
Choose Activity?
<ul>
<li>Run Marathon</li>
<li>Weight lifting</li>
<li>Swimming</li>
<li>Boxing</li>
</ul>
</li>
<li>
//another line item
</li>
</ul>
.html() is a function which either gets/sets the innerHTML of the given element. Since it an function you need to pass the content as an argument to the function call.
It should be $("#input").html(selection); not $("#input").html() = selection;
Related
I am using a jQuery slider in a dropdown menu item. When I click on the menu item, a dropdown opens with a slider. User is expected to drag one of the slider handles. From that point onwards, any mouse movement on that page causes a slider event and a callback. This continues until I click someplace else on the page, effectively rolling back the menu dowpdown.
Is this behavior normal? How can I have the slider change events stop once the user has released the slider handle? I have a page that reloads from a database whenever the user changes the slider. This is causing excessive load on the database.
I am using jQuery UI with bootstrap. You can see example at http://jsfiddle.net/Sh5A5/2/
Here is the JS:
islide = 0;
$("#XYZ").text("DDDDDxD");
$("#XYZ").append("<b class=caret></b>");
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
alert("hello #" + ++islide);
$("#XYZ").html("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1) + " <b class='caret'></b>");
}
});
and html:
<div class="nav dropdown"> <a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"></a>
<ul class="dropdown-menu">
<li><a href="#">
<p>Range: 0 to Inf</p>
<div id="slider-range"></div>
</a>
</li>
</ul>
</div>
I tried the same without bootstrap. It looks ugly but behaves just the same. Is there a better alternative?
Thanks
What causing this behavior is this line:
alert("hello #" + ++islide);
When alert() is called inside the slide event handler the mouse is never released.
So you have to remove the call to alert() :
http://jsfiddle.net/Rusln/eKjCD/
We have this nested list:
<ul id="AllTopics" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search topic...">
<li>Polite Phrases<span class="ui-li-count">101</span>
<ul data-role="listview" data-inset="true" >
<li >Polite Phrases<span class="ui-li-count">101</span></li>
<li >At The End Of A Letter/Email<span class="ui-li-count">101</span></li>
</ul>
</li>
</ul>
The first <ul> with the id="AllTopics" is in the html documnet itself,
The inner <li><ul><li>... are loaded from Ajax call like:
on('pageinit'... event
... $("ul").append(...
I can get the event from the first new born <li> , like:
$('#AllTopics').on('click','li',function (event){...
But the inner <li> or <a> do not seem to fire events :-(
Ani ideas ?
Thank's in advance
The problem would be that the new content is loaded using an Ajax call, and you just setup the events before, so the new elements won't have them.
Try using delegate JQuery function:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on my links?!');
});
EDIT
Other solution is to assign the events once elements are added via Ajax call.
// This is an example, retrieve the data on your own form
$.get('mypage.php',function(data){
// Add content to your DOM elements
$('#AllTopics').append(data);
// Assign events
$('#AllTopics').on('click','li',function (event){
alert('Holy moly, you keep clicking on my links!');
});
});
Note: I just realized that your HTML elements have this composition:
<ul>
<li>
<a/>
</li>
<span/>
<ul>
<li>
</a>
</li>
</ul>
</ul>
So, OF COURSE that is only affecting the first one because there are two levels of li - a (you have an ul element inside another one). You can define an ID for your second group of li - a elements to trigger events successfully or keep doing it in this way:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on the first link?!');
});
$('#AllTopics').delegate('ul li a','click',function(){
alert('Stop clicking my children links!');
});
This may be a little difficult to explain, but I'll try my best. I have a product page with two tabs, full description and video. These are done using jQuery UI Tabs.
Above this section of the page I have a product image with thumbnails...but I want one of the thumbnails to be a link to see the video (which of course is contained in the video tab).
If I load the page as site.com/product#video it does load up the correct tab...but when the tab is not active, and I use a link outside of the #tab div, (ex: Video), it doesn't do anything.
How can I get a link to open the tab if it's not contained in the #tab div?
CODE
This code is outside of the tabs, and needs to open the #video tab
Open Video Tab
Tabs Code
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover">Full Description</li>
<li class="ui-state-default ui-corner-top">Video</li>
</ul>
<div class="product-collateral">
<div class="box-collateral box-description">
<div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
Content
</div>
<div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2 class="video">Video Content</h2>
</div>
</div>
</div>
</div>
What worked for me was this:
Html
Open Description Tab
Open Video Tab
<div id="tabs">
<ul>
<li>
Full description
</li>
<li>
Video content
</li>
</ul>
<div class="product-collateral">
<div class="box-collateral box-description">
<div id="description">
Content
</div>
<div id="video">
<h2 class="video">Video Content</h2>
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function () {
$('#tabs').tabs();
$('.open-tab').click(function (event) {
var tab = $(this).attr('href');
$('#tabs').tabs('select', tab);
});
});
So what this does is provide a link to both the description and video tabs, which are selected when the link is clicked.
From here we can see that when selecting a particular tab, we can use either a zero-based index or the href fragment which points to the tab we wish to display.
This is why the href attributes of the a elements match up with the Ids of the div elements - when one is clicked its href fragment is then used to set the selected tab.
Update for jQuery UI 1.11
As jQuery UI has evolved, so to has the API for setting the active tab. As of jQuery UI 1.11, the following code will select the active tab:
//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);
Now because we now have to provide a zero-based index, the code I initially provided will no longer work.
What we need now is an index that can actually be used. One approach is:
$('.open-tab').click(function (event) {
var index = $("selector-of-clicked-tab").index();
$('#tabs').tabs("option", "active", index);
});
Another is to use HTML5 data- attributes:
Open Description Tab
Open Video Tab
So you can do this when handling the click of these links:
$('.open-tab').click(function (event) {
$('#tabs').tabs("option", "active", $(this).data("tab-index"));
});
use jQuery:
$( "#tabs" ).tabs({ active: tabNumber });
Remember, that the indexation starts from 0
Using jquery, bind a click event to your link that opens the tab you want.
$('#tabopenlink').click(function() {
$('#tabs').tabs({active: tabidx});
});
I use mini plug-in.
(function($) {
$.fn.tabremote = function(options) {
var settings = $.extend({
panel: "#tabs",
to: "data-to",
}, options );
$this=$(this);
$panel=$(settings.panel);
$this.click(function(){
if($(this).attr("href"))
{var tos=$(this).attr("href");}
else
{var tos=$(this).attr(settings.to);}
to=tos.match(/\d/g);
$panel.tabs({active: to-1});
return false;
});
return this;
}
})(jQuery);
Opens the tab using href or any element.
id panel must contain the number of the panel. Example (1-tabs, tabs-2, ...)
Plugin subtracts 1 and open the panel. Tabs (active, (number of id -1))
Use
$("button.href").tabremote({panel:"#tabs",to:"data-href"});
panel:"#tabs" // container panel
to:"data-href" // attribute name with value
function openTabByLink(link) {
$("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
If you use twitter bootstrap instead of jquery ui, it will be very simple.
Just add data-toggle="tab" and put the link wherever you want in the page:
Open Video Tab
For jQuery UI 1.11
HTML:
<div id="tabs">...</div>
...
Open Video Tab
JS:
$('.open-tab').click(function () {
$("#tabs").tabs('option','active',$('#tabs a.ui-tabs-anchor[href="'+$(this).attr('href')+'"]').index('#tabs a.ui-tabs-anchor'));
});
I am trying to simplify a navigation tree with a jquery accordion style menu. With some help from other posts i feel like im missing something simple. What is getting me is that one category has a second sub list. I cant get it to to open.close correctly. the sample code I have here just does not expand "T1 sub b" item. What am I missing?
http://jsfiddle.net/9uvgs/203/
html:
<ul class='menu'>
<li>Tier1</li>
<ul>
<li>T1 sub a</li>
<li>T1 sub b</li>
<ul>
<li>T1 sub i</li>
</ul>
</ul>
<li>Tier 2</li>
<ul>
<li>T2 sub a</li>
<li>T2 sub a</li>
<li>T2 sub a</li>
</ul>
</ul>
Jquery
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu>li').click(function(){
$(this).next('ul').slideToggle();
});
});
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu li').click(function(){
$(this).next('ul').slideToggle();
});
});
I've done this and it looks like working just fine.
You are only applying the click event to the direct children of ul.menu a simple solution would be to change you selector to ul.menu li instead of ul.menu>li
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu li').click(function(){
$(this).next('ul').slideToggle();
});
});
I'm activating bootstrap.js tabs by specifying data-toggle="tab" in my navbar:
<li>Look Inside</li>
Then, returning the content of those tabs with:
<div class="tab-content">
<div class="tab-pane active" id="tab1">Content
</div>
</div>
I'm wondering how I can possibly return the same content to two separate places on the page, each in seperate div's. As of now, I add:
... for a second time after the first div had been closed (I have to close it because I have a horizontal navbar in between the top content and the bottom content) and it doesn't return content.
Is there any way I can call "tab-content" something else and still have it maintain twitter bootstrap functionality.
TY
Two ways to do this. One is pure CSS, taking advantage of the fact that the bootstrap dropdown will open any menu. For instance:
myvew.html.haml
%ul.nav.nav-pills
%li.dropdown
%a.dropdown-toggle{"data-toggle" => "dropdown"}
Foo
%b.caret
%ul.dropdown-menu{style: "position: relative; top: -10px;"}
%li Bar1
%ul.dropdown-menu
%li Bar2
What this will do is that when the "Foo" link is clicked, both "Bar1" and "Bar2" are shown.
However, I tend to prefer this approach: register an event listener onto the "Foo" link, and then the event listener toggles .show() or .hide() for the target divs.
$(document).ready(function() {
$('#myclickdiv').click(function() {
$('.mydivs').collapse("show");
});
});