I am modifying an existing navigation system for the iphone which does not support the hover class. The menu should work on both a desktop computer and on iphone.
When I click on a menu item it shows and hides correctly. It also shows and hides on hover. Great. The problem is that when a user clicks on a link on the iphone and navigates to a different page, when the user comes back to the original page the menu is still open. It remains that way until the user dutifully clicks the menu again to hide it whichisi not acceptable.
Can anyone help on this? I have been at this a full day checking Stackoverflow with no results. My wife wants a divorce and my girl friend is unhappy too.
Here's the operative part of the css.
<div class="top_nav">
<ul id="nav" class="dropdown">
<li <span class="dir">Desserts</span>
<ul>
<li>Pie</li>
<li>Ice Cream</li>
<li>Toppings
<ul>
<li>Chocolate Sauce</li>
<li>Nuts</li>
<li>Whipped Cream</li>
</ul>
</li>
</ul>
</li>
<li>Dessert Wines</li>
<li>Brandy</li>
</ul>
</div>
$(document).ready(function(){
$('.top_nav').children("ul").children("li").click(function(e) { //this works with click
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
$('.top_nav').children("ul").children("li").children("ul").children("li").click(function(e){
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
});
Related
I am using Bxslider on a tabbed gallery with thumbnails
and it works great. the arrows and the tabs are working perfectly.
this is the JS I am using:
jQuery('#learni-features .bxslider').bxSlider({
mode: 'fade',
useCSS: false,
moveSlides: 1,
pagerCustom: '.tabs-links'
});
and this is the HTML:
this is for the tabs:
<ul class="tabs-links">
<li class="active">Curriculum <br>Control</li>
<li>Interactive <br>Classes</li>
<li>Social <br>Layer</li>
<li>Parent<br> App</li>
<li>Teacher <br>Community</li>
</ul>
and this is for the gallery:
<ul class="bxslider clearfix">
<li>
<img src="uploads/curriculum-screen.png" alt="">
</li>
<li>
<img src="uploads/interactive-screen.png" alt="">
</li>
<li>
<img src="uploads/social-screen.png" alt="">
</li>
<li>
<img src="uploads/parent-screen.png" alt="">
</li>
<li>
<img src="uploads/teacher-community-screen.png" alt="">
</li>
</ul>
I have another floating div with text:
<div class="info">
<ul class="slider2">
<li>
<h3>All Your Learning Tools in One Place</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
<li>
<h3>Access course books, Learnies</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
<li>
<h3>Create and begin your new class sessions</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
</ul>
</div>
this text needs to be also dynamic so when I click either on the tabs or the arrows it will change the text in that box too which basically belongs to each slide (information box). the thing is that this box is outside the "loop" of the slider.
is there a way I can trigger 2 sliders? the main gallery with the images and at the same time the text in the box.
Here is a fiddle I created
Notice the slider is working but there is another div at the bottom with a class of "info" and I want that div to be controlled from the the same main slider and change the text there..
THe button "Schedule a Demo" by the way is a stand alone button and stays there fixed.
any help will be appreciated
Thanks!
Assign your bxSlider to a variable:
var slider = $('#learni-features .bxslider').bxSlider({
mode: 'fade',
useCSS: false,
moveSlides: 1,
pagerCustom: '.tabs-links'
});
Then you can use onSlideNext and onSlidePrev as:
slider.onSlideNext(new function($slideElement, $oldIndex, $newIndex) {
//Your code here.
});
You can find out more information in the bxSlider documents founder here.
I have several links on a page. I want to create a modal alert window for each link letting people know they are leaving the site. (It's a requirement for our website.) The code I am using will only allow one modal open on a page. Can you help me figure out how to get a different modals to open for each link?
Here's the javascript:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
The HTML:
<p><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>
The HTML for the Modal:
<div id="overlay">
<div>
<p align="left">You are about to leave the website.</p>
<p align="left"></p>
<p align="left">Click here to <a href='#' onclick='overlay()'>cancel</a></p>
</div>
Hello this may be a little clean and green.
The current stack I am using is:
phonegap cordova
jquery mobile
and I am making a TODO app for IOS
the app works fine,
<ul id="todo_list" data-role="listview" data-autodividers="false" data-filter="true" data-theme="d">
<li id="'+i+'"><span style="white-space:normal;">'+todo+'</span></li>
</ul>
however what I would like to implement is edit on click, like jeditable. when the user click on the
<li>
element instead of popping a textbox.
i am making a website for mobile devices, in which i have a list of name and i need to bind click event to the list. i done this using jquery. in all webdevices (android, blackberry, nokia) when i click the list the result will come but nly in iphone the event is not triggering. how can i solve it.
<ol id="movie-list">
<li> Movie 1 </li>
<li> Movie 2 </li>
<li> Movie 3 </li>
</ol>
$('#movie-list li").live("click", function() {
console.log($(this).html());
});
http://bugs.jquery.com/ticket/5677 - Live Click Events Don't Register On MobileSafari (iPhone)
Apparently that's a jQuery bug. "The workaround is to add onclick="" to the element you are attaching to...."
On a different note though, .live() has been deprecated.
The link provides information on porting to newer methods. If using jQuery 1.7+:
$(document).on("click", "#movie-list li", function() {
console.log($(this).html());
});
Use jquery .on instead of .live
There is typo in your code '#movie-list li" should be "#movie-list li"
$(document).on("click", "#movie-list li", function() {
alert($(this).html());
});
EDIT:
Exact duplicate - How do I use jQuery for click event in iPhone web application
I am using jQtouch for my iPhone application,
I need to check box filed, in jQtouch we have the code below like this.
<ul>
<li>
Toggle The <span class="toggle"><input type="checkbox"/></span>
</li>
</ul>
By using this code we can display the
On-Off image, in the it will be by default off position.
But I need the 'On' position by default.
can you some one help me out for this.
The simplest solution is to add "checked" to the <input> tag:
Toggle The <span class="toggle"><input type="checkbox" checked/></span>
IF you want to handle programmaticaly:
$('toggle input[type="checkbox"]').attr('checked', true)
If you put that in your .Ready() (or page loaded function) the checkbox will be checked by default.
I would recommend that you give the Checkbox an id so that you can specify exactly which you want to change:
<ul>
<li>
Toggle The <span class="toggle"><input id="myCheckbox" type="checkbox"/></span>
</li>
</ul>
Then use:
$('#myCheckbox').attr('checked', true)