How to add fade in effect to following js script? - javascript

I have a js script that shows loading image and than loads content into #content div.
It works fine, but I cant figure out how to make it so it fades in content once it is loaded?
function viewHome(){
$('#woodheader').load("inc/home.php");
$('#content').html('<span class="loader">Loading.. <img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php");
}
For example when .load("inc/home.php"); finishes, I would like to fade in the content of inc/home.php file with duration of 3 seconds. How can I do it?

function viewHome() {
$('#woodheader').load("inc/home.php");
var content = $('#content');
content.html('<span class="loader">Loading.. " +
"<img class="loaderimg" src="images/ajax_loader.gif"/></span>');
content.load("inc/home.php", function () {
content.hide().fadeIn(3000);
});
}

Use opacity:0 from css (and filter:alpha(opacity=0) for ie) to #content
and then add $("#content").fadeIn(duration) to your function

with jquery put your code into this
$(document).ready(function() {
    // put jquery fade call in here
});
Use the jquery function
$("#element").fadeIn(350);

Related

Fadein() effect to a function: how to?

I have this function that works well for lazy loading.
panel.find('img[data-src]').each(function(){
element = $(this);
element.attr('src', element.data('src'));
element.removeAttr('data-src');
How can I give a fadeIn() effect to that removeAttr function?
I tried:
element.removeAttr('data-src').fadeIn();
but it doesn't work. The img code looks like this and I simply want the dot.png to fadeOut and the original.jpg to fade in.
<img src="dot.png" data-src="original.jpg">
http://jsfiddle.net/7s1yb1un/6/
Thanks in advance
You cannot fade a src change on an img element. To acheive this you'll need two img elements. The second one will have a the src "original.jpg" and will have a higher z-index and start with display: none for a style. Then you can fade it in and it will fade in over the dot.
EDIT Given your new question, you could do the following:
Add an onload listener for the image
Just before changing the "src", fade the image out
Then change the "src" to "original.jpg"
In your onload function, do a fadeIn
Here is what I have done.
Added a fadeOut(5000), the img with original src will fadeout after 5 sec.
Called a function with timeout of 6sec, which changes the src with data-src and fadeIn(5000) in 5 sec, I hope this solves your problem.
JS code is below
var myVar;
function myFunction() {
myVar = setTimeout(function(){
var src = $("img.hide").attr("data-src");
$("img.hide").attr("src",src);
$("img.hide").fadeIn(5000);
}, 6000);
}
function myStopFunction() {
clearTimeout(myVar);
}
$(document).ready(function() {
$(".hide").fadeOut(5000);
myFunction();
});
The following code would fade out, change the src, then fade in.
JSFiddle
HTML
<div id="fullpage">
<div class="section">
<img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>
JS
$(function() {
$('img[data-src]').each(function(i, e) {
// cache element
original_img = $(e);
original_img
.fadeOut(function(){
original_img.attr('src', original_img.attr('data-src'))
})
.fadeIn();
})
});
Thanks guys. I found this script working (somehow), the images just blink sometimes. I don't know if semantically correct.
$(function() {
$('img').one("load", function() {
var e = $(this);
e.data('src', e.attr('data-src'));
e.animate({"opacity": 0}, 400);
e.data('src');
e.animate({"opacity": 1}, 400);
})
});
The following code would clone the images that have the data-src attribute, then hide the clone, update the clone src, position it over the original image, and fade in. Would this work for you?
JSFiddle
HTML
<div id="fullpage">
<div class="section">
<img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>
JS
$(function() {
$('img[data-src]').each(function(i, e) {
// cache element
original_img = $(e);
// get position of original image
offset_left = original_img.offset().left;
offset_top = original_img.offset().top;
// get data-src of
data_src = original_img.attr('data-src');
// clone original image
original_img.clone()
.hide()
// put it directly in the body, so it can be positioned
.appendTo('body')
// set the new src
.attr('src', data_src)
// place it over the original image
.css({
"left": offset_left,
"top": offset_top,
"position": "absolute"
})
.fadeIn(function(){
original_img.attr('src', data_src);
$(this).remove();
});
})
});

Getting a spinner working properly in Grails

I'm trying to get a spinner working properly in my grails app. The way I understand it, is it should work out of the box while waiting for an action to complete. It is not doing this.
I was able to get a spinner working based on some suggestions I found from google, and modified this solution: http://grails.1312388.n4.nabble.com/spinner-or-progress-indicator-td1363802.html , however this seems rather hacky to me, and not an optimal solution.
Which indicated I needed the following script:
<script type="text/javascript">
function showSpinner() {
document.getElementById('spinner').style.display = 'inline';
document.getElementById('error').style.display = 'none';
}
function hideSpinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('error').style.display = 'none';
}
function showError(e) {
var errorDiv = document.getElementById('error')
errorDiv.innerHTML = '<ul><li>'
+ e.responseText + '</li></ul>';
errorDiv.style.display = 'block';
}
</script>
Which I employed with a grails button as such:
<g:submitToRemote value="Validate Address"
url="[action: 'standardizedList', controller: 'address']"
update="addressList" after="showSpinner();" onSuccess="hideSpinner()"
class="btn btn-primary"/><br>
<img id="spinner" style="display:none;"
src="${createLinkTo(dir: 'images', file: 'spinner.gif')}"
alt="Spinner"/>
Now I put the javascript snippet into /layouts/main.gsp, but it appears I have to add the spinner image into each page where I want it, and if I put it in the div where I want it to show, it will be overwritten when the action completes and updates the div so I have to add the spinner in the page that is responding as well as inside the response body.
When I look at the given main.gsp it has the following code in it:
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
furthermore, found inside the web-app/js/ directory there is a file application.js which contains the code that I saw frequently which is supposed to add the spinner.
if (typeof jQuery !== 'undefined') {
(function($) {
$('#spinner').ajaxStart(function() {
$(this).fadeIn();
}).ajaxStop(function() {
$(this).fadeOut();
});
})(jQuery);
}
Now I have several places where I believe actions may cause a delay, and I want the spinner to tell the user it's working. So my question is two fold: 1) Am I understanding how it is supposed to be working? If so, 2) how can I make the out of the box code work properly?
Here's how I do it: make sure the following JavaScript is included in every page, e.g. by putting it in a .js file which is included in the layout:
$(document).ready(function () {
var showSpinner = function() {
$("#spinner").fadeIn('fast');
};
// Global handlers for AJAX events
$(document)
.on("ajaxSend", showSpinner)
.on("ajaxStop", function() {
$("#spinner").fadeOut('fast');
})
.on("ajaxError", function(event, jqxhr, settings, exception) {
$("#spinner").hide();
});
});
The functions above will be called every time an AJAX request is stopped, started, or returns with an error. Also include the following in the layout:
<div id="spinner" style="display:none;">
<g:img uri="/images/spinner.gif" alt="Loading..."/>
</div>
This is the content which is shown/hidden when an AJAX request starts/stops. In my case I apply the following styles, so that the spinner is shown in the center of the screen on top of any other content:
#spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px; // half width of the spinner gif
margin-top: -50px; // half height of the spinner gif
z-index: 5000;
overflow: auto;
}

Clever work-around for my current script?

I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.
Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});
Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">

Do not show social buttons (loaded via jquery) till they all are completely loaded

In my wordpress site, I am using social buttons gathered in a bar.
These buttons are dynamically updated when the content is updated via jquery-ajax.
function update_social(str)
{
$(".dd_outer").fadeOut("slow");
UpdateLikeButton(str);
UpdateTweetButton(str);
UpdatePlus1Button(str);
$(".dd_outer").fadeIn('slow')
}
where the str parameter is the ID of the post. and dd_outer is the wrapper div of the floating bar. I am calling update_social when I call the function responsible of dynamically loading post contents via AJAX.
Everything works like a charm, but the problem is that, sometimes the bar fades in before the social buttons are completely loaded. How can I make the total bar do not appear till all buttons are loaded?
I thought FadeIn and FadeOut are enough. Appreciated is your help.
Edit:
function UpdateLikeButton(str)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", "http://www.bag.com/Arabic/Arra2issia/"+str+"/");
elem.attr("send", "false");
elem.attr("layout", "box_count");
elem.attr("show_faces", "false");
$("#zzzz").empty().append(elem);
FB.XFBML.parse($("#zzzz").get(0));
}
function UpdateTweetButton(str)
{
var elem3 = $(document.createElement("a"));
elem3.attr("class", "twitter-share-button");
elem3.attr("href","http://twitter.com/share");
elem3.attr("data-url","http://www.bagh.com/"+str+"/");
elem3.attr("data-counturl","http://www.bagh.com/"+str+"/");
elem3.attr("data-count", "vertical");
elem3.attr("data-via", "#");
elem3.attr("data-text",str);
elem3.attr("data-lang","en");
$("#tweet").empty().append(elem3);
$.getScript("http://platform.twitter.com/widgets.js",function(){
twttr.widgets.load();
});
}
function UpdatePlus1Button(str)
{
var elem4 = $(document.createElement("g:plusone"));
elem4.attr("href","http://www.bagh.com/"+str+"/");
elem4.attr("size", "tall");
$("#plus1").empty().append(elem4);
$.getScript("https://apis.google.com/js/plusone.js");
}
Original buttons :
<div id="zzzz" ><fb:like href="<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div>
<div id="plus1"><g:plusone size='tall' href='<?php the_permalink();?>'></g:plusone></div>
<div id="tweet"></div>
Add return in your functions like this :
function UpdateTweetButton(str)
{
var elem3 = $(document.createElement("a"));
elem3.attr("class", "twitter-share-button");
elem3.attr("href","http://twitter.com/share");
elem3.attr("data-url","http://website/"+str+"/");
elem3.attr("data-counturl","http://website/"+str+"/");
elem3.attr("data-count", "vertical");
elem3.attr("data-via", "#");
elem3.attr("data-text",str);
elem3.attr("data-lang","en");
$("#tweet").empty().append(elem3);
return $.getScript("http://platform.twitter.com/widgets.js",function(){
twttr.widgets.load();
});
}
function UpdatePlus1Button(str)
{
var elem4 = $(document.createElement("g:plusone"));
elem4.attr("href","http://website/"+str+"/");
elem4.attr("size", "tall");
$("#plus1").empty().append(elem4);
return $.getScript("https://apis.google.com/js/plusone.js");
}
Call them like this :
function update_social(str)
{
$(".dd_outer").fadeOut("slow");
UpdateLikeButton(str);
$.when(UpdateTweetButton(str), UpdatePlus1Button(str)).done(function(){
$(".dd_outer").fadeIn('slow');
});
}
I think you might need to call the code in a callback from the fadeOut function, so that it doesn't run until the bar has faded out... Try
function update_social(str)
{
$(".dd_outer").fadeOut("slow");
UpdateLikeButton(str);
UpdateTweetButton(str);
UpdatePlus1Button(str);
//Make fadeIn wait 1 second before running to allow button functions to complete
setTimeout(function(){
$(".dd_outer").fadeIn('slow');
},1000);
};

jQuery show/hide div in body from inside another div

I have a fairly simple question (about those damn selectors!) regarding jQuery. I have 2 div's in my body that I had when the site loads. But I want them to show when a certain image is clicked. The problem is that the image is inside a few other elements (div's, ul, li).
I made this simple fiddle to show the div structure http://jsfiddle.net/MspYV/ . So the question is, how do I reach the div's #change_settings_container and .change_settings_translucent from a totally other div/element?
for the div's #change_settings_container it's as simple as $("#change_settings_container")
$("span.change_settings_close_button img").click(function(){
$('div.change_settings_translucent').hide();
});
$("span.toggle").click(function(){
$('div.change_settings_translucent, div#change_settings_container').toggle();
});
See an example here: http://jsfiddle.net/expertCode/K2znp/
<script>
$(document).ready(function () {
$(".small-image img").click(function () {
$(".main-image img").hide();
$(".small-image img").show();
var imgsrc = $(this).attr("src");
$(".main-image").addClass("img");
$(".img").css('background-image', 'url(' + imgsrc + ')');
});
});
</script>

Categories