Two questions.
When i'm loading to div file via jQuery .load()
$('.class').click(function(){
$(this).load("file.php");
});
file.php is loading properly, but whenever i click on it (doesn't matter where, just in file.php zone), page is blinking. Something like page refresh on click. Is there a way to prevent that?
Also the position of this page is always relative to div. Why doesn't position: absolute; on body in seperate css file for file.php work for file.php? I want to reset the position of file.php to be on top of website (not z-index). Thanks.
Your code
$('.class').click(function(){
$(this).load("file.php");
});
says any time you click in that div, (re)load the contents.
You may want to use jQuery's one method instead
$('.class').one("click", function(){
$(this).load("file.php");
});
which will only execute the first time you click inside the div.
As to position, we'd need to see code. Possibly one of your parent elements has position: relative?
Easy way.
$('.class').one("click", function(){
$(this).load("file.php");
});
Also is better to use .ajax() for this to have more options and better control.
.load() sometimes can first destroy content and then load new one. If you load bunch amount of data, that can made blink effect.
Related
I insert some HTML code after a Ajax Call and in the Ajax-Callback I need the height of the added Div.
The problem is, in the HTML from the Ajax Call are elements like Images and other elements that have to be laoded first.
I did a simple example of the problem in jsfiddle: http://jsfiddle.net/qbwd663s/3/
As you can see when I add the code the console says 36, but if you click the div it says 242 (cause the image is loaded). Sometimes it works too if the image is allready in the cache, to test it reload the page with cleared cache.
What I need is something like $(document).ready() but only the elements that got called by ajax. Anyone have an idea how I could do that?
$("div *").one("load", function() {
alert($("div").height());
});
Fiddle: http://jsfiddle.net/aravi_vel/qbwd663s/6/
Use the load function as suggested by Harry
This function will handle the other kind of elements that you have listed (iframe etc.)
Greetings I'm working on a gallery script and would like to have it so when the page is loaded it is automatically positioned to the top of an anchor I have set. I've tried this code:
<script>location.href = "#trendnav";</script>
<a name="trendnav"></a>
And it doesn't seem to do anything. The more instantaneous this seems to the user, the better.
Try
window.location.hash = "#VALUE";
Fiddle Demo 1
Fiddle Demo 2
or
window.scrollTo
Or, using your original approach:
$('span#godown').click(function(){location='#anchor';});
See here http://jsfiddle.net/dxNKG/1/
. I assigned a clickable span with the task of being the button that triggers it.
Actually, your original syntax location.href='#anchor' is correct, but you should fire it only after the DOM has loaded completely. So, either put the <script> section at the end of your page or do something like
window.onload=function(){window.location.href='#anchor';};
see here http://jsfiddle.net/bUaTT/ (without jQuery)
or, since you are using jQuery:
$(function(){window.location.href='#anchor';})
What I'm doing is loading different content into a div each button. The code I'm using to do so:
$(function(){
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
document.getElementById("data").style.display = 'none';
});
});
This is an example of one code. I got another 8 like this, but I'm loading into #galleries a different php page everytime.
My problem is, it takes ages to load the second page. For example, on my first click on any button, it takes a second to load everything, doesn't matter what content it has. But whenever I press on another button to load another page, I have to wait for about 3-5seconds, and when I'm waiting, it shows nothing, no div is being shown, just the background.
Is it possible to fix this? Or maybe, is it possible inserting an LOADING image or text to let the user know that it's loading? so while the page is being loaded, the user sees : "LOADING.." or some loading icon.
This should get you going in the right direction.
Also I don't know what's with all of the different effects you have on $(this) either.
$(function(){
$(".loading-image").show();
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
$("#data").hide(); //replacing your getElementById
$(".loading-image").hide();
});
});
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.
Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.