JQuery.css("display", "block") still ends up inline - javascript

When I check how this piece of code below affect my html live, I see that the span#error is faded out and faded in with display: block but changes right-after to display: inline.
How can I prevent this from happening?
jQuery
$(function() {
$("#credentials .wrapper button").click(function() {
$("span#error").fadeOut(300);
$("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
});
});
JsFiddle

jQuery's fading methods automagically sets the display type that the element has by default.
If you're going to set it to something else, do it after the fading has completed, or use a method that doesn't set the display property, such as fadeTo or animate()
$(function() {
$("#credentials .wrapper button").click(function() {
$("#error").fadeOut(300, function() {
$(this).html('<b style="color: #ce1919;">(!)</b> TEST')
.fadeIn(300, function() {
$(this).css("display", "block");
});
});
});
});
The real answer would be to just use a block element
<div id='error'>Error</div>
FIDDLE

This occurs because the fadeIn-method sets the display variable after fading in. Use the complete callback of the fadeIn-method to set the display-property of the span to block.

When using fade in, the element will be displayed as his original state. Since you original state is none, jQuery will select the default display value of the element, which is in this case inline.
In you CSS, if you change the display value to block and hide the element in a DOM ready handle, everything work fine :
$(function() {
document.getElementById('error').style.display = 'none';
$("button").click(function() {
$("span#error").fadeOut(300);
$("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
});
});
http://jsfiddle.net/yfC2B/2/
I'm aware that using block element would be better, I am just telling why it doesnt not currently work.

I wouldn't even use fadeIn I would just use .animate(), since the documentation for fadeIn says that it just animates the opacity property, to prevent jQuery from messing with the display property at all:
$(function() {
$("button").click(function() {
$("span#error").fadeOut(300).stop();
$("span#error").stop().html('<b style="color: #ce1919;">(!)</b> TEST').css({'opacity':'0','display':'block'}).animate({opacity:1},1000,function(){});
});
});
http://jsfiddle.net/yfC2B/3/

Related

jQuery button click only working once

I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.
If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/
The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example
Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});
use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})

ToggleClass not on all divs

I'm working on a pricing table with some hover.
You can see it right here: http://lhit.nl/lucid/
As you see, when you hover on a pricing table all the divs toggle the classes.
And thats not what I want. I want it to be seprate ofcourse.
My jQuery:
$('.package').hover(function(){
$('.name').toggleClass('name-hover')
$('.price-container').toggleClass('price-hover')
$('.price').toggleClass('white-hover')
$('.month').toggleClass('white-hover')
});
The css is just to overwrite current colors:
.package .price-hover {
background: #008ed6;
}
.package .white-hover {
color: #fff;
}
I already tried to use $(this) but it doesn't work.
$('.package').hover(function(){
$(this).find('.name').toggleClass('name-hover')
$(this).find('.price-container').toggleClass('price-hover')
$(this).find('.price').toggleClass('white-hover')
$(this).find('.month').toggleClass('white-hover')
});
This can be simply achieved just by css. Why to add Js for this ?
package:hover .price-container{
background: #008ed6;
}
You could use each():
$('package').each(function() {
var _this = this;
$(this).hover(function() {
$(_this).find('.name').toggleClass('name-hover')
$(_this).find('.price-container').toggleClass('price-hover')
$(_this).find('.price').toggleClass('white-hover')
$(_this).find('.month').toggleClass('white-hover')
});
})
First you need to use find to only change the classes for elements
inside the currently hovered over .package, otherwise it will
change classes for all these elements.
Secondly, hover event takes
2 functions, one when mouse enters the hover area, second when cursor
exits the hover area. The way you are handling hover event, it toggles the classes twice, once on hover in, once on hover out, so in the end leaving it same as before.
Try this code:
$('.package').hover(function(){
$(this).find('.name').addClass('name-hover');
$(this).find('.price-container').addClass('price-hover');
$(this).find('.price').addClass('white-hover');
$(this).find('.month').addClass('white-hover');
}, function(){
$(this).find('.name').removeClass('name-hover');
$(this).find('.price-container').removeClass('price-hover');
$(this).find('.price').removeClass('white-hover');
$(this).find('.month').removeClass('white-hover');
});
$(".package").hover(function() {
$this = $(this);
$this.find(".name").toggleClass("name-hover");
$this.find(".price-container").toggleClass("price-hover");
$this.find(".price,.month").toggleClass("white-hover");
});
#Spartak Lalaj As of jQuery 1.4 the .hover() may have one parameter. See https://api.jquery.com/hover/

How could I show an hidden div when a page is loaded?

I have a view with a div that have a unique ID named "thumb" with display:none as style. Now on loading of another page I wish to show it, and also check if that div was already shown. I tried without success with this:
<div onload="music_player()">
--
</div>
<script>
function music_player() {
document.getElementById('thumb').style.display = 'block';
}
</script>
jQuery makes this pretty easy for you. Use .show() to show your element is your function in a .ready() handler. Additionally, the :visible pseudo-selector makes it easy to determine if an element is currently hidden.
$(document).ready(function() {
var isShown = $("#thumb:visible").length > 0;
if (!isShown) {
$("#thumb").show();
}
});
I like to take advantage of jQuery's .is() function whenever possible
So the previous answer could be shortened to:
$(document).ready(function () {
var $thumb = $('#thumb');
if (!$thumb.is(':visible')) {
$thumb.show();
}
});

get particular image with same class

i am currently implementing a system where I require to make a image layer on hover of a particular image. From jquery how is it possible to get and set visibility of a particular image only even if they have the same class.
This is my js code
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg').css('visibility','visible');
$('.hoverimg').css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg').css('visibility','hidden');
});
});
To make it more clear this is an example I made. http://jsfiddle.net/xwj4A/
As you can see atm when one hovers on a particular image both images visibility is set to visible (as they have the same class). Thanks for your help!
If i understand you right , you need this :
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg' ,this).css('visibility','visible');
$('.hoverimg' ,this).css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg' ,this).css('visibility','hidden');
});
});
JSFiddle: http://jsfiddle.net/xwj4A/8/
Replace:
$('.hoverimg')
with:
$(this).find('.hoverimg')
In order to only select the .hoverimg elements that exists within the hovered container.
You have to apply new styles to target element instead of all elements with same class.
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg', this).css({
visibility: 'visible',
opacity: 0.6
});
});
$('.imgclass').mouseout(function() {
$('.hoverimg', this).css('visibility','hidden');
});
});
$(this) refers to actual element which triggered event.

jQuery FadeOut function

I'm trying to add a fadeOut function which links to another. CLICK HERE At present I have a flashing logo. When the user clicks on the logo, the flashing stops, has a slight delay then slowly fades Out. Is there anyone out there that is able to correct me on the code I have pasted below?
<script>
$(document).ready(function(){
$("#center-gif").click(function(){
$('#center-gif').hide();
$('#center-img').show();
});
$('#center-img').click(function(){
$('#center-img').hide();
$('#center-img-gif').show();
});
$('flash-link').click(function(){
$('center-img').fadeOut(5000);
});
});
</script>
If you want to access element with class/id; you must always define . and # these at the begining, like css.
Some Examples:
$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true
Here is working jQuery for your question with less code:
$(document).ready(function(){
$("img").click(function(){
var takeId = $(this).attr('id');//takes clicked element's id
$('img').hide();//hides all content
$('#'+takeId).show();
//matches clicked element's id with element and shows that
});
$('#flash-link').click(function(){//define '#' id declaration here
$('#center-img').fadeOut(5000,//new function after fadeOut complete
function() {
window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
return false;
});
);
});
});
So I assume your problem is that that image does not fade out, right?
This could solve it:
First of all change your .click()-functions to that:
$().click( function(event) {
// cour code
event.preventDefault();
}
And than change the last one like that:
$('#flash-link').click( function(event) {
$('#center-img').fadeOut( 5000, function() {
window.location.href = 'jukebox/dancers.php';
});
event.preventDefault();
});
I didn't test that, but it should work. What it does is: It fades out the image and calls a function when ready. This functions then redirects to your next page.
The event.preventDefault(); will tell the browser not to delegate the click-event. If you don't put it there, the browser opens the anchor without waiting for any JavaScript to execute.
Note
When you want to select an element with an ID use this selector: $('#[id]')as this selector $('html')works only with HTML-elements.

Categories