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.
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');
});
I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});
I've searched a lot and am sure someone has needed to do this before so sorry if this is a duplicate. I took what I thought was a compilation of the best code I could find online and coudln't get anything to work.
I know the structure is probably way off, but does anyone know why this is wrong.
$(document).ready(function () {
$("select[name='selector']").change(function () {
$(this).children(':selected').hasClass('three') {
$("#mover").animate({
"left": "+=50px"
});
};
});
});
Live example.
A couple of things:
What you need is a conditional if statement, that's basic of the language.
The left CSS attribute is only taken into account when an absolute positioning is being used.
As for the code,
#mover {
position: absolute;
}
$(document).ready(function () {
var $selector = $("select[name='selector']"), $mover = $("#mover");
$selector.change(function () {
if ($selector.children(':selected').hasClass('three')) {
$mover.animate({
"left": "+=50px"
});
};
});
});
You can see it here.
$(document).ready(function() {
$("select[name='selector']").change(function() {
if($(".three:selected",this).length>0){
$("#mover").animate({"left": "+=50px"});
};
});
});
Here: http://jsfiddle.net/kpT3b/
$(document).ready(function() {
$("select[name='selector']").change(function() {
if($(this).find('option:selected').text() == "three"){
$("#mover").animate({"left": "+=50px"});
}
});
});
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 get a button to be toggled if a div contains a string of text. Something like:
$(document).ready(function(){
$(function() {
if ('$div#trackingnumber:contains('Hello')');') {
$("dinput#submitam").toggle()});
}
});
Does anybody know how to do this?
You are on the right way. I only see some syntax errors. Try this
$(document).ready(function(){
if ($("#trackingnumber:contains('Hello')").length != 0)
{
$("dinput#submitam").toggle();
}
});
Checkout this jsFiddle too.
Just do like this
$(document).ready(function(){
if ($("div#trackingnumber:contains('Hello')").length > 0)
$("dinput#submitam").toggle();
});
$(document).ready(function() {
if ( $("#trackingnumber:contains('Hello')").length > 0 ) {
$("#submitam").toggle();
}
});