Why I can not click on my function to show and hide? - javascript

Hey I am having difficulty rewriting a code, but it is not working when clicking to show. How can I fix this issue. The code works opens up 500 then is suppose to work by click. But it does not work. Here is the code:
var timer;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
}, 500);
});
$(".icon-menu-2").click(function show() {
$(".c_left").show.animate({ width: 200, marginRight: 30, display: 'toggle'}, 'slow');
$(".c_right").show.animate({ marginRight:215, display:'toggle'}, 'slow', function () {
clearTimeout(timer);
});
}, function hide() {
$(".c_left").animate({ marginRight: -155, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginRight:30, display:'toggle'}, 'slow');
});
http://jsfiddle.net/jL5hU/
How can I fix my code?

As bfvareto commented .show() is a function and you cannot call it with just .show
You had strange code here also: .click(function show() {. Not quite sure what you mean there, anyway try my code suggestion...
var timer; var open;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
open = false;
}, 500);
});
$(".icon-menu-2").click(function() {
if(open){
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
} else {
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow");
}
open = !open;
});
Demo here

Related

Jquery Error offset(...) is undefined

$('#add_to_cart_btn').unbind().on('click', function() {
//var cart = $('.cart_r');
var imgtodrag = $('#bzoom').find('img').eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top, left: imgtodrag.offset().left
}).css({
'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100'
}).appendTo($('body')).animate({
'top': $('.cart_r').top + 10, 'left': $('.cart_r').offset().left + 10, 'width': 75, 'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
//cart.effect('shake', { times: 2 }, 200);
}, 1500);
imgclone.animate({
'width': 0, 'height': 0
}, function () {
$(this).detach();
});
$("html, body").animate({ scrollTop: 10 }, 1000);
}
return false;
});
show this error TypeError: $(...).offset(...) is undefined all ready add jquery.min.js but not working on any browser . any one can help me . Thanks in Advance

Responsive javascript using if/else

I have wrote script to display a message at the top of the screen (hide automatically) with the following code:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
It works well.
Now I'm trying to adapt marginTop with different size of screens with
if/else like this pseudo code:
if (window.matchMedia("(min-width: 240px)").matches) {
marginTop: "20",
} else {
marginTop: "40", // pseudocode
}
I have tried
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
} else {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
But it seems not working. I'm new in javascript, and I think the setTimeout is too hard to integer for me.
Any solution ?
You have errors in your code "SyntaxError: Unexpected token ,".
To fix use this
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
} else {
$('#dialog2').animate({
marginTop: "40",
}, 700);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},2000);
}
},10000);
Hope this helps.
Ok, with Firebug I have found my error.
This following code works well:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
} else {
$('#dialog2').animate({
marginTop: "20",
}, 700);
}},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
console.log('12')
$('#dialog2').animate({
marginTop: "20"
}, 700);
} else {
console.log('11')
$('#dialog2').animate({
marginTop: "40",
}, 700);
}
}, 1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px"
}, 1500);
}, 10000);
});
I dont got your idea. maybe this is what you want?

Lightbox - Next and Prev buttons

So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/

Second Javascript function throws everything off

Hey I just have a simple javascript code in which I animate elements to appear on the page when the page loads. Everything is fine with the animating segment. However, when I try to add in a second javascript command for when I hover over the image, nothing else works. I am definitely sure it has to do with how I entered the code. Can someone help fix my code?
var main = function() {
{
$(".menu").animate({
"top": "0px"
}, 400);
};
{
$(".about h2").animate({
"right": "0px"
}, 500);
}; {
$(".about p").animate({
"bottom": "0px"
}, 580);
}; {
$(".resume").animate({
"bottom": "0px"
}, 650);
}; {
$("#image img").animate({
"right": "0px"
}, 600);
};
$("#image img").hover(function() {
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
});
}
$(document).ready(main);
This syntax is incorrect:
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
That's just two strings, not separated in any way, and therefore not a valid object. The correct syntax is propertyName : "value", so your code should be
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
See the docs for more info.
Also, as others have pointed out, you don't need all those {...} blocks. Your code can be simplified to this:
var main = function() {
$(".menu").animate({
"top": "0px"
}, 400);
};
$(".about h2").animate({
"right": "0px"
}, 500);
$(".about p").animate({
"bottom": "0px"
}, 580);
$(".resume").animate({
"bottom": "0px"
}, 650);
$("#image img").animate({
"right": "0px"
}, 600);
$("#image img").hover(function() {
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
});
$(document).ready(main);

JavaScript not working on dynamic content

I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?
For example on the parent page's javascript I have:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
and the 'child' page where HTML is loaded from
<li class="page">Home</li>
<li class="page">About Us</li>
<li class="page">Store</li>
<li class="page">News</li>
<li class="page">Contact</li>
Your help would be greatly appreciated!
try using 'delegate' method instead of 'on'.
jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead.
and when the new elements are loaded the action is already there.
jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
try using:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -120px)"
}, 750)
});

Categories