I am developing a super simple site using jQuery and bootstrap libraries but I would like the menu items to jump to the section (already done with anchors). But when I navigate back to the top the menu dropdown is still open. How would I setup up a toggle so it closes on clicking a menu item?
This is my initial code:
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<div class="menu">
<ul>
<li>Home</li>
<li>Jeff Anderson</li>
<li>Hand Built Frames</li>
<li>Bike Repairs and Maintenance</li>
<li>Frames and Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
Any help greatly appreciated. Thanks.
Anything that gets to the document will hide the dropdown
$(document).click(function(){
$("#dropdown").hide();
});
Clicks within the dropdown won't make it past the dropdown itself
$("#dropdown").click(function(e){
e.stopPropagation();
});
I believe adding these code will solve your problem.
Related
I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>
It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.
Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});
I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either.
Here is how I'm calling everything, I removed the extraneous code for brevity.
main page
<head>
<scripts -- jquery, jquery ui>
<script>
$(document).ready(function(){
$( "#site-preview" ).load( "/site/preview" );
});
</script>
</head>
<body>
<div class="draggable><img src=//etc/> </div>
//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>
<div id="site-preview"></div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</body>
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
This appends because you try to call the droppable on a non-existing element at that moment. To solve this, you could use the callback function that can be attached to the load function and run the rest after that.
$(document).ready(function(){
$("#site-preview").load("/site/preview", function() {
// Page loaded and injected
// We launch the rest of the code
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
});
You can find other information about the load function here. The callback can take arguments and can be used, for example to check if it's a 404 or not.
Well I was able to get it to work by adding the draggable/droppable code to the ajax loaded div itself.
So the above would be amended like so
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
And those script lines would be taken out of the main page
Ajax is Asynchronous. So if you call some ajax and then call some other command, the ajax will usually finish afterwards.
This is where callbacks are useful. Try adding a callback to the ajax load call as shown here: http://api.jquery.com/load/
Something like:
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
Side note: you should probably start using scripts instead of <script> tags.
I've researched many posts and I still did not find a solution, either all sliderboxes (a box which slideDown() on click) open simultaniously with $('[id^="sliderbox-"]') or I just simply dont understand how to apply the jquery code specifically to my slider.
This is my code:
$( "#open2" ).click(function () {
if ( $( "#sliderbox2" ).is( ":hidden" ) ) {
$( "#sliderbox2" ).slideDown( "slow" );
$( ".arrow2").delay(300).fadeIn(500);
$(".balken2").delay(500).fadeIn(500);
$( "#sliderbox" ).slideUp( "slow" );
$( ".arrow" ).fadeOut(100);
$( ".balken" ).fadeOut(100);
var y = $(window).scrollTop(); //your current y position on the page
$('html, body').animate({
scrollTop: y+150
},500);
} else {
$( "#sliderbox2" ).slideUp( "slow" );
$( ".arrow2" ).fadeOut(100);
$( ".balken2" ).fadeOut(100);
}
});
I guess you can already see the "2" cause this is the second sliderbox to be opened, there are also the arrows for the slider which fade in and a thick border in the button.
I have 20 sliders, and i dont want to repeate css and jquery code 20 times!
This is the html:
<img src="images/pfeilunten2.png" class="pfeilunten" style="margin-left:0;" id="open3"/>
<div id="sliderbox3" class="sliderbox">
<div id="carousel">
<div id="carousel_inner">
<ul id="carousel_ul3" class="carousel_ul">
<div id="zentriercarousel">
<li>...</li>
</div>
</ul>
</div>
<div class="scroll_left scroll">
<img src="images/arrowleft.png" class="arrow3" /> </div>
<div class="scroll_right scroll">
<img src="images/arrowright.png" class="arrow3" />
</div>
<input id="hidden_auto_slide_seconds" type="hidden" value="0" />
<div class="balken3"></div>
</div>
</div>
Ans as you can see, there is already code for the third slider, and i have to rename EVERYTHING. That really sucks! Your help would be so much appreciated, please answer specific on this code, thanks in advance!
The way I would approach this is to give all the links that open a slider a class, say "open", I would give them all a data-slider property, something like this:
Open Slider
You jquery function can then become generic:
$( ".open" ).click(function () {
var sliderNumber = $(this).data("slider");
if ( $( "#sliderbox" + sliderNUmber ).is( ":hidden" ) ) {
$( "#sliderbox" + sliderNUmber ).slideDown( "slow" );
$( ".arrow" + sliderNUmber).delay(300).fadeIn(500);
$(".balken" + sliderNUmber).delay(500).fadeIn(500);
$( "#sliderbox" ).slideUp( "slow" );
$( ".arrow" ).fadeOut(100);
$( ".balken" ).fadeOut(100);
var y = $(window).scrollTop(); //your current y position on the page
$('html, body').animate({
scrollTop: y+150
},500);
} else {
$( "#sliderbox" + sliderNUmber ).slideUp( "slow" );
$( ".arrow" + sliderNUmber ).fadeOut(100);
$( ".balken" + sliderNUmber ).fadeOut(100);
}
});
Now your slider function is more generic, and you can re-use it as many times as you want, just have to make sure you add the data-slider number to each link and make sure the sliding elements have the right IDs
Hope this helps.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I'm working on a project where it's an accordion with thumbnails inside and when you click on one a picture shows up next to the accordion. So far I've managed to get it to work using the following code:
HTML:
<!--thumbs--->
<a id="1a" href="#"><img src="../../images/thumb/1000.jpg" /></a>
<a id="2a" href="#"><img src="../../images/thumb/1001.jpg" /></a>
<a id="3a" href="#"><img src="../../images/thumb/1002.jpg" /></a>
<a id="4a" href="#"><img src="../../images/thumb/1003.jpg" /></a>
<a id="5a" href="#"><img src="../../images/thumb/1004.jpg" /></a>
<a id="6a" href="#"><img src="../../images/thumb/1005.jpg" /></a>
<!--large photos--->
<img class="hide1" id="1b" src="../../images/fullsize/1000.jpg" />
<img class="hide1" id="2b" src="../../images/fullsize/1001.jpg" />
<img class="hide1" id="3b" src="../../images/fullsize/1002.jpg" />
<img class="hide1" id="4b" src="../../images/fullsize/1003.jpg" />
<img class="hide1" id="5b" src="../../images/fullsize/1004.jpg" />
<img class="hide1" id="6b" src="../../images/fullsize/1005.jpg" />
CSS:
.hide1{
display:none;
}
.show{
display:block !important;
}
and the JS (under jquery UI):
$(function() {
$( "#1a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#1a" ).click(function() {
$( "#1b" ).toggleClass( "show", 0 );
return false;
});
$( "#2a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#2a" ).click(function() {
$( "#2b" ).toggleClass( "show", 0 );
return false;
});
$( "#3a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#3a" ).click(function() {
$( "#3b" ).toggleClass( "show", 0 );
return false;
});
$( "#4a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#4a" ).click(function() {
$( "#4b" ).toggleClass( "show", 0 );
return false;
});
$( "#5a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#5a" ).click(function() {
$( "#5b" ).toggleClass( "show", 0 );
return false;
});
});
Does anyone know a way I can shorten the JS? I have over 100 pics and don't particularly want to do that for all of them unless i have to.
Give the links a class:
<a id="1a" href="#" class="ThumbClick">
Then apply click with class and use of this:
$('.ThumbClick').click(function(){
var $id = this.id.replace('a','b');
$('.show,#'+$id).toggleClass('show',0);
return false;
});
Since you're toggling the same class you show be able to consolidate it into a comma-separated selector. Use of the class and this.id makes the function universal, but specific to link clicked.
Here is a working jsFiddle based on this logic.
The pictures haven't been uploaded obviously, but in Chrome developer tools you can see the classes change for the pictures appropriately. If you wanted to continue the bubbling but prevent the link action:
$('.ThumbClick').click(function(e){
var $id = this.id.replace('a','b');
e.preventDefault();
$('.show,#'+$id).toggleClass('show',0);
});
Just offering it as an alternative, either should work fine. Here is the jsFiddle for that logic.
This should be good enough
$(function () {
$("#1a , #2a, #3a, #4a, #5a").on('click', function () {
var newId = this.id.replace('a', 'b');
$('#' + newId).toggleClass("show", 0);
$(".show").toggleClass("show", 0);
return false;
});
});
Use this.id which is the id of the current element that is clicked.
Replace it with b and toggleClass for that..
I am learning jquery and css.
I have menu items which look like this. You can see css,html, jquery here http://jsfiddle.net/rZR2Y/
html
<div id="nav">
<ul>
<li>Home
<ul>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog1</li>
<li>Blog2</li>
<li>Blog3</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
jquery
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > li > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('li').addClass( 'selected' );
});
});
css
#nav .selected a{background:red;display:block}
What I would like to have is, when I click sub li items ie Home1/home2/home3, then parent li ie Home should be highlighted.
I am doing something wrong in selector selection. Also, any other better solutions are also welcome.
Thanks.
UPDATE:
I am sorry, my original markup was wrong. Closing sub li should naturally come after all submenu items.
Does this now change all jquery ?
Thanks for your answers.
I would very much appreciate some explanation, so that I also learn what I am doing wrong.
UPDATE2:
After updating my markup, and also css like this
#nav .selected > a{background:red;display:block}
even my original solution works. Just learnt few css and jquery stuffs. Thanks everyone.
Updated fiddle with updated markup and css and original jquery is here
http://jsfiddle.net/rZR2Y/26/
Your selector for sub-level li elements was incorrect, it should be #nav > ul > ul > li.
Try this:
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('ul').prev().addClass( 'selected' );
});
});
Example fiddle
Given your code, you could use:
$('#nav').on('click', 'li', function () {
$('#nav li').removeClass('selected');
$(this).parentsUntil('#nav', 'li').add(this).addClass('selected');
return false;
});
Though I have my doubts that this is what you're looking for. Maybe try also changing your css to:
#nav .selected > a{background:red;display:block}
demo: http://jsfiddle.net/F8dbG/2/
updated using a the additional selector for on to reduce number of event bindings. (thanks #diEcho)
You could do
$( document ).ready( function() {
$( 'li' ).click( function() {
$( 'li').removeClass('selected' );
var $this = $( this );
$this.addClass( 'selected' );
$this.parent().prev().addClass( 'selected' );
});
});
fiddle here http://jsfiddle.net/rZR2Y/22/