i was wondering if you could help me out, i'm trying to create if based interactions on my website but sadly the code does not work and i can't think of as to why. The idea is to click a button to move it left, then when another button is clicked at it's next set position it brings it back in again.
if($("#featImgOne").css("marginLeft")=='0px'){
$('#featNext').click(function(){
$('#featImgOne').animate({marginLeft:"-960px"});
});
}
else if($("#featImgOne").css("marginLeft")=='-960px'){
$('#featPrev').click(function(){
$('#featImgOne').animate({marginLeft:"0px"});
});
}
Just to note the first click works but the second wont, so i'm perplexed
Thanks in advance, hope someone can help
You have to move the if consitions inside click handler
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});
What you're expecting will not happen, because the second click event is never added, because at the beginning the margin-left is not that value. Fix this by removing the conditional statements:
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});
You are going to have to add some kind of a loop. Try a while Loop.**while**//add a condition
Related
I am trying to use simple animation with opacity css property:
$('#testAnimation').click(function (event) {
if ($(this).css('opacity') == 0) {
$('#animationTarget').animate({opacity: 1}, 'slow');
} else {
$('#animationTarget').animate({opacity: 0}, 'slow');
}
});
The first time, element is successfully hidden. But when I click button second time, $(this).css('opacity') returns value "1".
Debugging in browser clearly says that opacity is 0.
Can someone explain this behavior?
You are checking the opacity of this and changing the one of the #animationTarget.
This should do it:
$('#testAnimation').click(function (event) {
if ($('#animationTarget').css('opacity') == 0) {
$('#animationTarget').animate({opacity: 1}, 'slow');
} else {
$('#animationTarget').animate({opacity: 0}, 'slow');
}
});
Well, this was my fault.
For anyone who faces similar issue, be sure that you are checking property of the desired element:
if ($(this).css('opacity') == 0)
Should be replaced with:
if ($('#animationTarget').css('opacity') == 0)
Try using .fadeIn() and .fadeOut() to achieve what you are doing.
Less code to write. have a look at the :visible part as I don't remember if it is the correct syntax!
$('#testAnimation').click(function (event) {
if ($(this).is(':visible') {
$(this).fadeOut();
} else {
$(this).fadeIn();
}
});
Checking for $(this) within your click event handler you will refer to the element $('#testAnimation')
Instead you should check for $('#animationTarget') and also you can refactor your code like this:
$('#testAnimation').on('click', function (event) {
var $animationTarget = $('#animationTarget'),
opacity = $animationTarget.css('opacity') == 0 ? 1 : 0;
$animationTarget.animate({opacity: opacity}, 'slow');
});
My code below works only once. I couldn't figure out why, please help.
i really really bad need it plz help me
my problem : first of all plz click on the frist button from the top
and then click on the second one now do this all again without
refreshing page now u see it dosent work like the first time
$(document).ready(function() {
$('#goLeft').on('click', function() {
if ($(".myWorks").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
} else {
$('.myWorks').toggleClass("Visibility_to_Unvisible1");
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
}
});
$('#goRight').on('click', function() {
if ($(".about_me").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
} else {
$('.about_me').toggleClass("Visibility_to_Unvisible");
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
}
});
});
and this is my web page : https://jsfiddle.net/nn8b8w3e/
I can't reproduce what you're describing:
first of all plz click on the frist button from the top and then click
on the second one
After clicking the first button, the second button is no longer visible to click. Neither of the buttons on the new panel do anything.
However looking at your code, you're testing for which direction to slide, what to do, etc, based on opactiy of each panel:
if ($(".myWorks").css("opacity") == "0") {
But the code you've included never changes opacity on anything. You assign various classes, eg:
$('.about_me').toggleClass("Visibility_to_visible");
But the CSS you include does not show those classes. You either need to define those classes with an opacity, or instead specify opacity in the action, eg:
$('.about_me').toggleClass("Visibility_to_visible").css('opacity', 1);
Hellp friends i did it thanks for all of U this changes can fix this bug here's for U
just Put some .css("opacity",1) , .css("opacity",0) on it
$(document).ready(function(){
$('#goLeft').on('click', function(){
if($(".myWorks").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
else {
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',0);
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
});
////////////////////////////////////////////////////////////////////
$('#goRight').on('click', function(){
if($(".about_me").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
else {
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',0);
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
});
/////////////////////////////////////////////////////////////////
});
I have this:
$(function() {
if () {
$('#content').css('position', 'fixed');
});
});
So, now what I want:
If the 'top' of '#content' is 0, I want the css that is written down in the function to happen. But I don't know how to write that down in between the brackets after 'if'.
Maybe someone can help me with this basic if-statement?
Much thanks in advance!
edit-----------------------------
Seems to work better and better, still one problem though.. I now have this:
$(function() {
if ( $('#content').offset().top == 0) {
$('#content').css({'position' : 'fixed'});
}
else {
$('#content').css({'position' : 'relative'});
}
});
And this:
$(document).ready(function() {
$('#content').scrollTop('100%');
});
But now the div is immediately 'fixed'..
FIDDLE
Use $('selector').offset().top to get the numeric value of the top position.
if ($('#content').offset().top == 0) {
$('#content').css('position', 'fixed');
});
for more information you can see this
Also set your css in condition like this
$('#content').css({'position' : 'fixed'});
In case of your scroll to top you can do like this
$('#content').scrollTop(yourtopvalue); // your top value goes here.
For animated effects, you could do like this also
$('selector').animate({scrollTop:$('#content').offset().top}, 'slow');
You can mix up these stuffs like these ways using jQuery.
I would like to adjust the width of the div using jquery on click event, and i can't seem to figure out what the exact syntax is.
below is an example of what i tried so far.
$(function() {
$("#square").on("click", function(){
if($(this).css("width", "50")){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});
});
http://jsfiddle.net/4GGP8/
Thanks in advance.
In your if statement try $(this).width() == 50 instead, since first of all css(); functions retrieves the unit as well and second of all you're not making a comparison in the if statement like that, if anything you should do $(this).css('width') == "50px" to retrieve the width and compare it.
For future reference you can always use parseInt(); to get rid of the unit added by css
so doing this is also valid
if(parseInt($(this).css('width')) == "50")
The code:
$(function() {
$("#square").on("click", function(){
if($(this).width() == 50){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});
});
Here is the resulting fiddle
Try this -
jsFiddle
$("#square").on("click", function(){
if($(this).css('width') == '50px'){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});
I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});