I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.
One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.
While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.
Related
I have a pop-over modal that I am loading on my page on load, I would like to make it once it's closed to not show up again for that user. I've done similar things with localStorage(); but for some reason can't figure out the syntax to make this work.
I tried a solution where it sets a class, but on refresh it will reload the original element, so now I am trying this idea where I change the state of of the modal to "visited". Any ideas what I could be missing to get this to work in the same way I'm hoping?
localStorage function:
$(function() {
if (localStorage) {
if (!localStorage.getItem('visited')) {
$('.projects-takeover').show();
}
} else {
$('.projects-takeover').show();
}
$('.projects-close').click(function() {
$('.projects-takeover').fadeOut();
});
localStorage.setItem('visited', true);
return false;
});
Here is a jsfiddle with the code implemented as well, thanks for the help!
You javascript code is correct. Good thing you added a jsfiddle as the problem becomes very easy to identify - the modal's style is set in such a way that it is always visible. Simply change the display property to nonŠµ in the .projects-takeover class and it should work. Check out the updated fiddle
Try this ->
$(function() {
var pt = $('.projects-takeover'); //i just hate repeating myself.
if (localStorage) {
if (!localStorage.getItem('visited')) {
pt.show();
} else {
pt.hide(); //this bit was missing
}
} else {
pt.show();
}
$('.projects-close').click(function() {
pt.fadeOut();
});
localStorage.setItem('visited', true);
return false;
});
I'm having a few problems with a hide/show function in jQuery that I can't seem to figure out. I have a if/else statement which is checking against a data attribute in my HTML, it's then hiding/showing the element based on the results of it. I've been able to log the entire function and it's triggering the correct statements when they are supposed to, but the problem I'm having is getting the content to reappear again after it was hidden. It hides properly, but never comes back. Here is the code:
var bar = $("#alert");
if (!supressed) {
bar.animate({height:0});
bar.parent().animate({height:0}, function() {
$(this).hide()
});
}
if (supressed) {
console.log("Supressing");
bar.replaceWith(newBar);
bar.parent().animate({height: "45px"}, function() {
$(this).show()
});
bar.animate({height: "45px"});
}
The problem is occuring where the console.log("Supressing"); statement is. It logs it to the console so I know it's working, but for some reason the bar is not appearing at all.
If I do an inspect element I can still see that the parent of #alert still has style="height: 0px; display: none;" on it.
Where am I going wrong?
The problem is you're using the replaceWith function (first line after the else statement). Then you call bar.parent() after the element has been removed from the DOM.
Maybe you meant to say
newBar.parent().animate({height: "45px"}, function() {
$(this).show()
});
I have this code that makes a box with information follow the mouse. It's really simple, just checks the custom attribute "description" in the div that you hover over and puts that in the box. However, I want to make it so if that div also has a certain CSS class, then it would put other information in the box, in addition to the other code still working.
$(document).ready(function(){
$(".hover").mousemove(function(e){
if ("div").hasclass("item"){
alert("div hasclass item");
} else {
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
that's the code I have now. None of the hovers in my page work at all. This is the code that works. It's identical in every way, except no if statement.
$(document).ready(function(){
$(".hover").mousemove(function(e){
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
I've tried time and time again to get this to work, and through my testing, it would seem that simply adding an if statement breaks the entire thing. I have absolutely no idea how to proceed or how to fix it.
The culrpit..
if ("div")
Maybe you were trying
if($("div").something()){
}
if ("div").hasclass("item") {
Should be:
if ( $("div").hasClass("item") ) {
For some more you can also test:
if ( $("div").is(".item") ) {
Read about jQuery .is()
I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}
I'm seeing an issue regarding some jquery animation in chrome.
I'm wondering if anyone else has seen this.
I'm just trying to do some simple slide up to hide a div, or hide and then fade a div in.
The slide up animation on the div is not happening in chrome and the hide is lagging before the fade in kicks in; whereas in firefox the animation is immediate and smooth.
The thing is that I have a browser confirm wrapped around this stuff to only do this animation if the user confirms.
If I remove the confirms, the animation works fine in chrome.
Is that weird?
Here's an example. With the confirm I get no slide up. Without the confirm I get one.
That is, simply removing the if(confirm){} code block.
if (confirm('Are you sure you want to remove the item?')) {
dragbox.slideUp('fast', function () {
dragbox.remove();
WebService.RemoveItem(itemId,
//on success
function () {
if ($('.dragbox').length == 0) {
//remove columns
$('.column').remove();
}
},
//on fail
function () {
alert('Failed to remove the "' + itemName + '" item.');
}
);
});
}
In this example, with the confirm there's a lag after the div is hidden and before the fade in start so that the div is hidden longer than I would like. Without the confirm, ti behaves as I would expect.
if (confirm('Are you sure?')) {
$('#' + itemId).spin();
WebService.AddItem(itemId,
//onsuccess
function (r) {
var item = $('#' + itemId); //this is a div
item.unspin();
item
.hide()
.toggleClass('item-added')
.fadeIn('fast', function () {
// Create the DOM elements
$('<p><img class="item-added" src="images/item-added.png" />')
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo($('.contentInfo', item))
// Fades the new content into view
.fadeIn('fast');
});
},
//onfail
function () {
$('#' + itemId).unspin();
alert('Failed');
}
);
}
Can anyone confirm or disprove this notion based on my speculation and example?
What are some alternatives to the browser confirm?
EDIT: Yeah I'm not sure what's going on.
Are you using the newest version of jQuery UI? Have you got the jQuery UI stylesheet also?
It all looks fine. If you can't find an answer here, open up a bug report.
Updating Chrome fixes this. I'm now running version 15.0.874.120 and all is well. My word.
I was just experiencing the same thing with some code that worked when it was written a couple of years ago. Now it has an issues in webkit-based browsers.
I had several animations that were paused by using confirm() calls and the subsequent animations failed to display properly. I finally figured out that if I put a short delay before the animation, it started working properly.
if (confirm('Are you sure?')) {
dragbox.delay(10).slideUp('fast', function () { ...
I'm not quite sure why this works but my animations are now working again in Safari 6.0.3 and Chrome 26.0.1410.43