i've two menus in mobile view of my website. If you click on the hamburger bar, they should slide down/up. This is basically no problem for me.
My HTML looks like this:
...
<div class="foo">
<div class="trigger menu1">
..
</div>
<div class="trigger menu2">
...
</div>
</div>
...
<nav id="main-navi">
...
</nav>
<ul id="info-navi>
...
</ul>
...
At the moment I solved it via jQuery with click-events for every single trigger. Like this...
...
$(".trigger.menu1").click(function() {
...
$("#main-navi").slideDown();
});
$(".trigger.menu2").click(function() {
...
$("#info-navi").slideDown();
...
});
...
This works fine, but I want to use it more easier and without so much code. Isn't it possible to get just an event for the .trigger and refer it just to the class to trigger the menu to slide down?
I tried it with something like, but it doesn't work:
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
Is there a way to get this working?
Regards,
Markus
You already have solved your problem. Though there are other possible solutions to this, but this code works quite well for your purpose:
$(".trigger").on("click", function(e){
e.preventDefault();
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});//.trigger click
You can use HTML5 data-* attribute to achieve this:
$(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('#' + $(this).attr('data-target')).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">
<div data-target="main-navi" class="trigger">
Menu Opener 1
</div>
<div data-target="info-navi" class="trigger">
Menu Opener 2
</div>
</div>
...
<nav id="main-navi">
Menu Slide 1
</nav>
<ul id="info-navi">
Menu Slide 2
</ul>
You are heading in the right direction, but you had a small syntax error in your code. Try this:
$('.trigger').on('click', function(){
var isMenu1 = $(this).hasClass('menu1');
if(isMenu1){
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});
$this is incorrect, should have been $(this)
This might help you,
var clickedItem = $(".foo").find('div');
clickedItem.click(function(e){
e.prventDefault();
if($(this).hasClass('menu1')){
$("#main-navi").slideDown();
}else{
$("#info-navi").slideDown();
}
});
Why don't you use slideToggle() jquery function ?
You can find help here http://api.jquery.com/slidetoggle/ .
Related
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")
I'm working on an Drop-Down Menu but without success.
I want the same function like the Drop-Down menu by Sony.I have even tried to imitate this effect, but I had a few difficulties.
My HTML:
<div id="main_menu">
<div id="main_menu_container">
<div id="main_menu_links">
Startseite
<a id="drop_down_link1" class="main_menu_link">Events</a>
<a id="drop_down_link2" class="main_menu_link">Clan</a>
<a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
</div>
</div>
<div id="drop_down_container">
<div id="drop_down_content1" class="drop_down_content"></div>
<div id="drop_down_content2" class="drop_down_content"></div>
<div id="drop_down_content3" class="drop_down_content"></div>
</div>
jQuery:
$("#drop_down_link1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).slideUp();
});
FIDDLE
The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the
content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function.
So my question is:
How can I do this that I can move between the link and the 'content' with my mouse without 'content' close?
My code is very unprofessional. How do I make it so that I do not repeat myself when 'Events' and 'Clan' have the same function?
http://jsfiddle.net/PKvZ2/
Try with this code. I added :
$("#drop_down_link1,#drop_down_container").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
Or this
$("#drop_down_link1,#drop_down_container").hover(function (){
$("#drop_down_content1").stop().slideDown();
},function(){
$("#drop_down_content1").stop().slideUp();
});
http://jsfiddle.net/bT8Cp/
Very simple! Just handle both #drop_down_link1 and #drop_down_content1 mouseenter events as follows
$("#drop_down_link1,#drop_down_content1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
2.
$('#main_menu_container a.main_menu_link').each(function(index,item){
alert(index);
var $this=$(this),
$dropdownContent=$('#drop_down_container .drop_down_content')
[index];
......
});
I'm trying find a "tip" class in every "animate" class and then display their "animate" class with show() if there is a tip class found in it.
There seems to be something wrong with my code because it's not working at all.
My attempt:
if($('.animate').find('.tip').length === 1) {
$(this).show();
}
HTML
<div class="foobar">
<div class="animate">
<div class="tip">- This is a tip.</div>
</div>
<div class="animate">
<div>- This is not a tip.</div>
</div>
<div class="animate">
<div class="tip">- This is a tip.</div>
</div>
</div>
You need to consider each $('.animate') in turn;
$('.animate').each(function () {
if ($(this).find('.tip').length) {
$(this).show();
}
});
... although you could also use the has() selector to do this in one line;
$('.animate:has(.tip)').show();
However, I guess you'll also want to hide the elements which don't match the selector, so you can do that via (demo);
$('.animate').each(function () {
$(this).toggle(!!$(this).find('.tip').length);
});
... or (demo):
$('.animate').hide().filter(':has(.tip)').show();
I think that you are not getting the this issue right
$(".animate").each(function(){
if($(this).find(".tip").length===1){
$(this).show();
});
});
After searching through various tutorials i found something that almost fits my needs but i'm having trouble getting the menu to function how i really would like it too.
I set up a jsfiddle to show my efforts, i'm not very good at this even though i'm trying my best to understand.
http://jsfiddle.net/HZksH/2/
I would like some help on how i can get this menu , when in default to always show the content1 area, then if you toggle open the "Open/Close" buttom and menu1,menu2,menu3 appear , when i select any of the 3 , the content replaces the content1 and then closes the menu again
any ideas would be appreciated
<div class="menu">
<div class="submenu" id="menu" data-content="sort">menu1</div>
<div class="content" id="sort">content1</div>
<div class="submenu" id="menu1" data-content="1sort">menu2</div>
<div class="content" id="1sort">content2</div>
<div class="submenu" id="menu2" data-content="sort2">menu3</div>
<div class="content" id="sort2">content3</div>
</div>
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
});
Here refer to this fiddle: http://jsfiddle.net/HZksH/3/
I have modified your js a bit
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
//$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
$('.menu').slideToggle(1000);
});
});
I hope it solves your problem
It looks like even the bootstrap demo here doesn't work on iOS. You don't seem to be able to select an item from it on iPhone or iPad.
Is there a fix for this?
There is a quick fix as noted in many of the issue comments on github:
https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606
add this script just before your close html tag:
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
I have tested the above method on both ios5 and 6. It works like a charm
If you wish to modify the bootstrap javascript you could, instead of the fix above, remove touchstart.dropdown.data-api from the html binding for clearMenus near the bottom of the file.
just change this
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
to this
$('html')
.on('click.dropdown.data-api', clearMenus)
You need to add a customize jquery in your file.If you want to use that then use:
<div class="container">
<div class="btn-group lt category_bg">
<p>Adults</p>
<button class="btn btn-large" data-toggle="dropdown"><cite>0</cite> <span class="caret"></span></button>
<ul class="dropdown-menu ">
<li id='adult_0' onClick="flight_user(this.id)"><a href="#" >0</a></li>
<li id='adult_1' onClick="flight_user(this.id)"><a href="#" >1</a></li>
<li id='adult_2' onClick="flight_user(this.id)"><a href="#" >2</a> </li>
<li id='adult_3' onClick="flight_user(this.id)">3</li>
<li id='adult_4' onClick="flight_user(this.id)">4</li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script>
function flight_user(selected){
var value = jQuery("#" + selected).find('a').text();
jQuery("#" + selected).parent().parent().find('cite').html(value);
}
</script>
I can give you live demo for this if you want
This script solve this problem. Just add this code
$(document).on('click', 'a.your-drop-down-link', function(event){
event.stopPropagation();
event.preventDefault();
if(event.handled !== true) {
if ( $(this).parent().hasClass('open') ) {
$(this).parent().removeClass('open');
}else{
$(this).parent().addClass('open');
}
event.handled = true;
} else {
return false;
}
});