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);
}
});
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');
});
Live site- http://www.arif-khan.net/other/toggle.html
Red bar on the left side is a switch to toggle a div. My problem is when you click it for first time it doesn't work, subsequent clicks it behaves as expected. I'm pretty sure that is because first time it hide div then show div. I need to fix that, so on first click it show corresponding div instead of hide it.
Code-
<script>
var speed = 300;
$('#close-bar').on('click', function(){
var $$ = $(this);
if( $$.is('.hide-bar') ){
$('#toggleBox').animate({left:-212}, speed);
$$.removeClass('hide-bar')
} else {
$('#toggleBox').animate({left:0}, speed);
$$.addClass('hide-bar')
}
});
</script>
var speed = 300;
$('#close-bar').on('click', function () {
if ($(this).hasClass('hide-bar')) {
$('#toggleBox').animate({left:0}, speed);
$(this).removeClass('hide-bar');
} else {
$('#toggleBox').animate({left:-212}, speed);
$(this).addClass('hide-bar');
}
});
DEMO
Could try removing the is portion and replacing with hasClass (http://api.jquery.com/hasclass/)
if($$.hasClass('hide-bar')){
}else{
}
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
I want to reduce my <div> size when I click on a <a> . But it doesn t work.
Javascript code
(divheight is a global variable)
function jamsho(id) {
var idd=id.substr(1);
alert(document.getElementById(idd).style.height);
if(document.getElementById(idd).style.height != 30) {
$(id).stop().animate({height:30}, 700);
divheight=document.getElementById(idd).style.height;
} else if (document.getElementById(idd).style.height == "30px") {
$(id).animate({height:divheight}, 700);
}
}
And call the function :
<div class="linkbox" id="linksbox">
<a id="Titr" onClick="jamsho('#linksbox')"> پیوند ها</a>
سایت روان آنلاین
</div>
ditch the onclick, ditch the vanilla js. It's as simple as follows:
jsFiddle Example
HTML
<div class="linkbox" id="linksbox">
<a id="Titr"> پیوند ها</a>
سایت روان آنلاین
</div>
jQuery
$('#Titr').click(function(e) {
e.preventDefault();
var par = $(this).parent();
par.animate({height:par.height()==30?'':30},700);
});
And if you want something more "dynamic":
$('.linkbox').on('click', 'a:first', function(e) {
e.preventDefault();
var par = $(this).parent();
par.animate({height:par.height()==30?'':30},700);
});
Keep in mind, last solution only works for jQuery versions 1.7 and above, for older version, replace .on with .delegate
You're sure that this condition document.getElementById(idd).style.height!=30 is satisfied?
I believe that the property height comes as string with the "px" sufix. See this.
So, to work it may be if (document.getElementById(idd).style.height!="30px").
BTW, is a best pratice to use only jQuery or pure Javascript, not mix them.
You could use jQuery for all of the function, instead of part of it:
function jamsho(id)
{
var $this = $(id);
alert($this.height());
if ($this.height() != 30)
{
$this.stop().animate({height:30},700);
divheight = $this.height();
}
else if ($this.height() == 30)
{
$this.animate({height:divheight},700);
}
}
I don't think you can apply jQuery animations to non-jQuery Objects
function jamsho(id) {
alert($(id).css("height");
if($(id).css("height")!=30)
{
$(id).stop().animate({height:30},700);
divheight=$(id).css("height");
}
else if ($(id).css("height")==30)
{
$(id).animate({height:divheight},700);
}
}
Try something like this:
var $div = $('#linksbox'),
divHeight = $div.height();
$('#Titr').click(function() {
if (!$div.hasClass('expanded')) {
$div.animate({height: 40}, 700, function() {
$(this).addClass('expanded');
});
}
else {
$div.animate({height: divHeight}, 700, function() {
$(this).removeClass('expanded');
});
}
});
http://jsfiddle.net/ZqEZ5/
A few notes:
no need to use document.getElementById with jQuery
don't use inline event handlers onClick.
Hope it helps.
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.