This question already has answers here:
Open and close side menu with same button
(4 answers)
How do you create a toggle button?
(18 answers)
Closed 5 years ago.
I want to open and close my menu with same button. here is my code.
<script>
$('#open-menu').click(function() {
$("#mySidenav").css("width" , "250px");
$("#l_m").css({"marginLeft": "250px", "position" : "absolute", "width" : "100%"});
// $(this).attr('id','close-menu');
});
$('#close-menu').click(function() {
$("#mySidenav").css("width" , "0");
$("#l_m").css("marginLeft" , "0");
});
</script>
Check this fiddle : https://jsfiddle.net/uyjogg5e/10/
(I tried to add the line that is commented but when I click on it, nothing happens)
You can set the css property in a class:
.side-nav-show{
width : 250px;
}
.l_m-show{
marginLeft:250px;
position:absolute;
width:100%;
}
and then toggle the classes on click of element:
$('#open-menu').click(function() {
$("#mySidenav").toggleClass('side-nav-show');
$("#l_m").toggleClass('l_m-show');
});
Working Demo
var a = 0;
$('#open-menu').click(function() {
if(a % 2 == 0){
$("#mySidenav").css("width" , "250px");
$("#l_m").css({"marginLeft": "250px", "position": "absolute", "width" : "100%"});
}
else{
$("#mySidenav").css("width" , "0");
$("#l_m").css("marginLeft" , "0");
}
a++;
});
Related
This question already has answers here:
jQuery when element becomes visible [duplicate]
(6 answers)
Closed 8 years ago.
How do I fire this function only at the time when I scroll down to "myTargetElement" and it becomes visible on the screen, and not immediately after page is loaded?
<script src="countUp.min.js" type='text/javascript'></script>
<script>
$(document).ready(function() {
var countOptions = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.'
}
var customerNumber = new countUp("myTargetElement", 0, 1635, 0, 7, countOptions);
customerNumber.start();
});
</script>
On scroll event check whether target element offset top and document scroll top is same, if same then trigger function
$(document).scroll(function(){
if($('.myTargetElement').offset().top == $(document).scrollTop()){
//Trigger function
}
});
The following script fires it as soon as it gets visible (http://jsfiddle.net/f1xbgy86/1/):
$(window).scroll(function() {
if(isElementVisible($('#yourElementID'))) {
$(window).off('scroll');
//Call From here
}
});
function isElementVisible(elem)
{
var visibleTop = $(window).scrollTop();
var visibleBottom = visibleTop + $(window).height();
return ((elem.offset().top + elem.height()) <= visibleBottom);
}
This question already has answers here:
jQuery.addClass not working
(9 answers)
Closed 8 years ago.
I am planning to add and remove background-image to a specific DIV but it seems that it's not working well
jQuery code :
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 340) {
$("#navcontainer").addClass("bg2");
} else {
$("#navcontainer").addClass("bg1");
}
});
});
here is the css code :
#navcontainer{
height: 70px;
width: 100%;
position: fixed;
z-index: 9999;
}
.bg2{
background-image: url(bg2.png);
}
.bg1{
background-image:url(bg1.png);
}
addClass and removeClass accepts one or more classNames without the period
$("#navcontainer").addClass("bg2");
It should be noted that jQuery has a toggleClass as well
$(window).scroll(function(){
$("#navcontainer").toggleClass('bg2', $(this).scrollTop() > 340);
});
You only need to write the classe name, like this :
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 340) {
$("#navcontainer").addClass("bg2");
} else {
$("#navcontainer").removeClass("bg1");
}
});
});
I have a menu that slides out on clicking the nav-toggle class.
Now I also want the nav-toggle class (the menu icon) to move along 226px from the right, so it moves at the same time as the #navigation menu. Then if clicked again it will collapse the menu (as it currently does) and go back to right:0 position.
See my commenting out in the third last line
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
jQuery('.nav-toggle').animate({
right: "226px"
// How do I make it so if it is at 226px when clicked
// it should then go to "right: 0", that toggle effect as above
});
});
Probably just like you did the #navigation one:
jQuery('.nav-toggle').animate({
right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
});
Just add a class to check if the nav is expanded/moved or not.
var navbar = $('.nav-toggle');
if (navbar.hasClass('expanded'))
{
$(navbar).animate({'right':'226px'}).removeClass('expanded');
} else {
$(navbar).animate({'right':'0px'}).addClass('expanded');
}
Note these numbers may need flipping.
I think you need to do something like this:
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
if ($('.nav-toggle').css('right') == '0px') {
$(".nav-toggle").stop().animate({right: '226px'}, 1000);
} else {
$(".nav-toggle").stop().animate({right: '0px'}, 1000);
};
});
This question already has answers here:
I want to move button left-right and right-left using jquery
(5 answers)
I have 10-15 buttons on page.I want to move 1 button left-right using iquery [duplicate]
(1 answer)
Closed 9 years ago.
I am able to move button once left-right. But I need to move it 2 times i.e left-right and again left-right.
Here is code:
$(document).ready(function () {
sayNoVisual(100);
});
function sayNoVisual(px) {
$('.stepback').animate({
'marginLeft': px
}, function () {
$('.stepback').animate({
'marginLeft': 1
});
});
}
<asp:Button ID="Button1" class="stepback" runat="server" Text="Button" />
You can recursive function in animate callback
To increase value you shoud use "+=" + value
CODE:
$(document).ready(function () {
sayNoVisual(100, 2);
});
function sayNoVisual(px, r) {
$('.stepback').animate({
'marginLeft': "+=" + px
}, function() {
if(--r > 0) sayNoVisual(px, r);
});
}
jsFiddle
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
open expand/ close back to original sizes a series of boxes with img fade
I'm struggling with this logic and i can't get it to work. I need to run through each box in order to get the original height and save it. Then i need to be able to click and expand and item while checking if any other is open and if it is, close it back to its original height and width (it's a set width). The only bit which i'm struggling with is this what I have at the start of the full script, I have commented it with my (i believe wrong) logic of what i'm trying to do. The code that follows this part is fine, if you want to double check it here it is a pastebin with the full script: http://pastebin.com/u72Q5Cqj
Basic html structre
<div class="box">
<img src="test.jpg" />
<div class="info"></div>
</div>
<div class="box">
<img src="test2.jpg" />
<div class="info"></div>
</div>
<div class="box">
<img src="test3.jpg" />
<div class="info"></div>
</div>
Jquery
//run the function for all boxes
$(".box").each(function () {
var item = $(this);
var thumb = $("a", item);
var infoBox = $(".info", item);
// save each box original height
$.data(this, 'height', $(this).height());
item.click(function(e) {
e.preventDefault();
// remove any box with class "opened"
$(".box").removeClass("opened");
// this is to empty ".info" which is a child div in which
// I load content via ajax into
$(".info").empty();
// here i'm saying if any box doesn't have a class "opened"
// fadeIn its `<a>`, i am fadingOut later in the code
$(".box a").not(".opened").fadeIn("slow");
//set back `.info`width and height to auto, is empty anyway
$(".box .info").not.css({
"width": "auto",
"height": "auto"
});
// in here i'm trying to set back any box without a class "opened"
// back to its original width which is a set width
$(".box").not(".opened").css("width", "230");
// in here i'm trying to set back any box without a class "opened"
// back to its original height saved at the beginning of the code
$.data($(".box"), 'height');
// now I add the class opened to this clicked item
item.addClass("opened");
// check if it has a class "opened" and if so do the rest
if (item.hasClass("opened")) {
var url = this.href;.................etc
Well, I've no way to try a solution but your code has a few errors.
You're declaring newHeight twice, iframe is not declared and you have an unexpected ; at the end of your if statement.
Then, why are you calling the click() event on $(this) inside each()? It seems unnecessary and it's probably no good for performance. You can declare your variables outside of the loop and the chain the click event.
$('.box').each().click();
And finally, I suggest you create a function for your load() and click() events to keep things DRY.
this is my final code which works:
$(function(){
//run the function for all boxes
$(".box").each(function () {
var item = $(this);
var thumb = $("a", item);
var infoBox = $(".info", item);
thumb.click(function(e) {
e.preventDefault();
$(".box").removeClass("opened");
$(".info").empty();
$(".box a").fadeIn("slow");
$(".info").css({
"width": "auto",
"height": "auto"
});
$(".box a").css("width", "230");
$(".box a").css("height", "auto");
$(".box").css("width", "230");
$(".box").css("height", "auto");
item.addClass("opened");
if (item.hasClass("opened")) {
var url = this.href;
thumb.fadeOut("slow");
infoBox.css({
"visibility": "visible",
"height": "auto"
});
infoBox.load(url, function () {
var newHeight = infoBox.outerHeight(true);
$(".readMore", item).click(function (e) {
var selector = $(this).attr('data-filter-all');
$('#container').isotope({
filter: selector
});
$('#container').isotope('reloadItems');
return false;
});
$('Close"').appendTo(infoBox).click(function (e) {
e.preventDefault();
$("html, body").animate({scrollTop: 0}, 500);
$('#container').isotope('reLayout');
});
item.animate({
"width": "692",
"height": newHeight
}, 300);
thumb.animate({
"width": "692",
"height": newHeight
}, 300);
infoBox.animate({width: 692, height: newHeight}, function () {
$('#container').isotope('reLayout', function () {
Shadowbox.setup();
item.removeClass("loading");
infoBox.css({
"visibility": "visible"
});
var videoSpan = infoBox.find("span.video");
iframe = $('<iframe/>', {
'frameborder': 0,
'class': 'tide',
'width': '692',
'height': '389',
'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
});
});
});
};
});
});
});