I am using a css preloader for apex web application. problem is that it takes a while to load after any click , so 1st 1 or 2 seconds it doesn't appear. i want it to b started at the moment when i click something. how to make it load immediately?
Code
<script type="text/javascript">
jQuery(document).ready(function($) {
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
try changing slow to fast like this
<script type="text/javascript">
jQuery(document).ready(function($) {
$(window).load(function(){.
$('#preloader').fadeOut('fast',function(){$(this).remove();});
});
});
</script>
or you can also use time duration, check this link for further reference..
Related
My aim is to reload a page at a certain interval and run a function.
I have read about storing the function in my localStorage and calling it when the page reloads via body onload. I wish to run this code on my console on a page so I don't think the <body> works. Correct me if I am wrong.
A good example would be, continued reloading of a Ebay page and it gets the prices of all toys, then it reloads and gets the price again and it continues to reload till I close the browser. But every time I reload I can't run my function.
All help is appreciated, for my understanding.
Small example:
var
ready = function() {
setTimeout(function() {
//alert('Yay!');
location.reload();
}, 3000); // 3000 ms => 3 seconds
};
<body onload="ready()">
<h1>Page!</h1>
</body>
You can do this with the setinterval function.
It will repeat something afer a certain amount of time.
For the reload, its not really needed as you can call a ajax request and just change the parts that is needed.
example :
setInterval(function () { alert("Hello"); }, 3000);
It will alert out Hello every 3 secounds
If I understand you correctly, you want to run some script at the third-party website (e.g. Ebay), reload page and do it all again.
You can use some browser extensions. For example, that one.
This extension detect page URL and runs any script you have written for it.So, your script automatically runs by extension, do some work, reloads page and then repeats all.
// script runs automatically by extension:
$( function() {
// do some work:
/* some work */
// and then reloads page:
location.reload();
} );
100% working. :)
<html>
<head>
<meta http-equiv="Refresh" content="10">
<script type="text/javascript">
var whenready = function() {
alert('It Works Man..!!');
};
</script>
</head>
<body onLoad="whenready()">
<h1>Page!</h1>
</body>
</html>
$(window).bind("load", function() {
// code here
});
I'm trying to have a price update in near realtime on my Wordpress site using Javascript. The script works fine when run on XAMPP, but as soon as I put it into Wordpress it doesn't load anything and just outputs... blank. A Javascript button pop up works fine so I know Javascript is working, just not my code.
The script I'm using is as follows:
//create the div
<div id="price"></div>
//include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
//the function
<script type="text/javascript">
$(document).ready(function() {
refresh();
$('#price').load('realtime/price-realtime.php');
});
function refresh() {
setTimeout( function() {
$('#price').fadeOut('slow').load('realtime/price-realtime.php').fadeIn('slow');
refresh();
}, 1000);
}
</script>
When visiting realtime/price-realtime.php, the price updates every 1000 milliseconds as is should, fading in and out. For the sake of this example, let's just say the entire contents of price-realtime.php is simply:
2.00
Essentially, I'd like to be able to include the price (a PHP output) on a webpage that doesn't need refreshing. If there's another way or better way of doing it I'd be more than happy to change my method. Hope this makes sense.
Thanks for your help..
I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?
Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/
You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
I'm brand new to jQuery (and javascript in general). I've been meaning to use it/learn it for some time, and nows the time.
So I'm going to use jQuery on this page to fade out the "under construction" warning at the top of the page on load. But I'm unfamiliar with any of the functions or selectors to use.
I found this basic article at jQuery which has a demo that seems to work perfect for what I'm doing, only it's set up to fade out on click.
What do I need to change to get it to fade out after a few seconds once the page has loaded, and can you point me where to look to find out more about those type of functions (specifically on jQuery's site, if you're familiar). And please don't say, "In the documentation." I'm a noob but not a dummy, thanks. I'm just trying to learn more about that particular area of the syntax responsible for functions for now (if that's what they're called).
New to jQuery 1.4 is the delay method. Using it for this purpose:
$("#myDiv").delay(3000).fadeOut("slow");
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#myDiv").fadeOut('slow');
}
Hey, the site looks cool. This should do it for you.
$(document).ready(function() {
setTimeout(fade, 2000);
}
function fade(){
$("#tempwarning").fadeOut(1000);
}
Here's a complete example.
Just paste this into an html file and save it.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 3000);
});
function fadeout(){
$('#tempwarning').fadeOut('slow', function() {
// Animation complete.
});
}
</script>
</head>
<body>
<div id="tempwarning">
<div class="wrap">
<span class="warning-icon">!</span>
<p>
Oops! Please pardon my appearance. I'm still under development. Please visit often.
</p>
</div>
</div>
</body>
</html>
EDIT:
This line of code:
$(document).ready(function() { });
Waits for the page to load before executing anything inside it.
$(document).ready(function(){
setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 1000);
});
function fadeout(){
$('.loader').fadeOut('fast', function() {
// Animation complete.
});
}
</script>
Perfect for a LoadingPage