I tried already with muliple preloaders that can be found on the internet and with each of them I get the problem that they never show up. When I check what is going on, it always say that $.LoadingOverlay is not a function"
Been trying to implement this one but without any success
http://www.jqueryrain.com/?eKV1bCMa
my code:
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/loadingoverlay.js"></script>
<script src="js/loadingoverlay.min.js"></script>
</header>
This one below I've tried to put into multiple places, under closing body, after opening body or even in header
<script>
$( document ).ready(function() {
$.LoadingOverlay("show");
// Hide it after 3 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 3000);
});
</script>
It never worked out ;l
I need some help with it
I added the js minified in the js part and jquery 2.2.1 and it works like a charm, I think you should delete this
<script src="js/loadingoverlay.js"></script> from the header.
https://jsfiddle.net/o90psp2o/
I use the same function
$( document ).ready(function() {
$.LoadingOverlay("show");
// Hide it after 3 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 3000);
});
Related
I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
I'm using a short Jquery script to hide a div-element upon page load, which reappears under certain conditions. When a user scrolls down the page, new content will load with Ajax, containing that very same div-element that I want to hide. How can I fire that Jquery again upon said div-element being loaded?
<head>
<script type="text/javascript">
(function($) {
$(window).load(function() {
$( ".the_button" ).hide();
if (...certain condition is met...) {
$( ".the_button" ).show();
}
});
})(jQuery);
</script>
</head>
<body>
<div class="the_button"><button>Share</button></div>
<p>Ajax-loaded button:</p>
<div class="the_button"><button>Share</button></div>
</body>
The button shows on subsequent Ajax loads, but I want it to be hidden like the first one.
You can put both scripts inside "filename.js" - file and include it in your html with script tag.
Then just put your whole script inside function like this
$(window).load(function () {
function functionName(){
$(".the_button").hide()
if (...certain condition is met...) {
$(".the_button").show()
}
functionName()
(...calling it right after load...)
$.ajax({
(...ajax things goes here...)
})
.done(function(){
functionName()
(...call your function again here...)
})
}
})
This thing could help you handle ajax.
http://api.jquery.com/jquery.ajax/
on my php page I want to click a button on page load.
I have tested it with jQuery and JS.
While jQuery does not work, the JS works fine.
Any idea why this is the case?
jQuery:
<script>
$(document).ready(function() {
$('#button_id').click();
$('#button_id').trigger('click');
});
</script>
JS:
<script>
window.onload = function() {
document.getElementById('button_id').click();
};
</script>
The button I want to click has a data-filter inside. Might this be the problem?
<button id="button_id" data-filter=".parkett" class="sub">Button</button>
EDIT:
No errors in the console, libary is added at the top.
This is my console output if I log both buttons:
Screenshot of console
$("document").ready(function() {
setTimeout(function() {
$("#button_id").trigger('click');
},10);
});
$('#button_id').click();
You have defined no click handler - so nothing going to happen. You need to drop a function in there to use as the callback. Like this:
$( "#button_id" ).click(function() {
$(this).trigger('click');
});
Sounds like you haven't included the jquery script in your head
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
I have a Div Tag that has a php include to fill that div with information
what I want to do is make it so that the page is called every 15s so it can update the information there without having to reload the whole webpage.
I've tried to do this with JavaScript/jQuery and I just can't seem to get it to work
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
</script>
<div class="View"><?php include 'Small.php'; ?></div>
this is what I have after searching some, and what happens is, it loads the Small.php but it doesn't refresh it or update the info every 15 seconds.
please help!
I should add all my php arrays that should show up are all executed in the Small.php and the page I'm including it into is just so it's isolated.
EDIT: What No One noticed was that my first script referencing jQuery did not have a closing tag, and that was breaking my second script. after adding in a proper closing tag, the script was finally working, but the fadeIn does not show properly without first using a fadeOut.
Your code works, but the fadeIn doesn't, because it's already visible. I think the effect you want to achieve is: fadeOut → load → fadeIn:
var auto_refresh = setInterval(function () {
$('.View').fadeOut('slow', function() {
$(this).load('/echo/json/', function() {
$(this).fadeIn('slow');
});
});
}, 15000); // refresh every 15000 milliseconds
Try it here: http://jsfiddle.net/kelunik/3qfNn/1/
Additional notice: As Khanh TO mentioned, you may need to get rid of the browser's internal cache. You can do so using $.ajax and $.ajaxSetup ({ cache: false }); or the random-hack, he mentioned.
try this
<script type="text/javascript">
window.onload = function(){
var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
}
</script>
Your html is not updated every 15 seconds. The cause could be browser caching. Add Math.random() to avoid browser caching, and it's better to wait until the DOM is fully loaded as pointed out by #shadow. But I think the main cause is the caching
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php?' + Math.random()).fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
});
</script>
The code you're using is also going to include a fadeout effect. Is this what you want to achieve? If not, it might make more sense to just add the following INSIDE "Small.php".
<meta http-equiv="refresh" content="15" >
This adds a refresh every 15seconds to the small.php page which should mean if called by PHP into another page, only that "frame" will reload.
Let us know if it worked/solved your problem!?
-Brad
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<div class="View"><?php include 'Small.php'; ?></div>
<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
$.ajaxSetup({ cache: true });
});
</script>
I proved script. its works, but outside of .
I am not good on script. maybe its a simple problem.
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="http://0rochymugen.ucoz.com/scriptbestsite.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
basicly, script just show a when a mouse its over to image.
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
when I put script on head. simply, doesnt work.
In some cases, if you are trying to operate on items that are on the page, if you javascript loads and executes before the rest of the page has finished loading, you will get errors and/or your code will not appear to work.
This is one reason it is recommended to put links to javascript files at the bottom of the page.
Another good practice is to only run your when the document has finished loading, in jQuery is is normally done using the following syntax:
$(document).ready(function(){
// Your javascript
}
I think your code doesn't work because you're not running it when document's ready:
$(document).ready(function(){
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
$("#img2").mouseover(function () {
$('#p2').show("slow");
});
$("#p2").hover(function () {
$("#p2").hide("slow");
});
$("#img3").mouseover(function () {
$('#p3').show("slow");
});
$("#p3").hover(function () {
$("#p3").hide("slow");
});
$("#img4").mouseover(function () {
$('#p4').show("slow");
});
$("#p4").hover(function () {
$("#p4").hide("slow");
});
$("#img5").mouseover(function () {
$('#p5').show("slow");
});
$("#p5").hover(function () {
$("#p5").hide("slow");
});
});
Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)
The problem is that the elements you are referencing, don't exist yet.
To ensure they exist before using them, you have to put it's related code inside $(document).ready. So you have:
$(document).ready(function(){ //This ensures DOM elements are loaded
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
});
But, if you can't change that js file, to add a document.ready, you could load the script dynamically, as the following:
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$.getScript("http://0rochymugen.ucoz.com/scriptbestsite.js");
});
</script>
...
</head>
It's not mandatory for the js scripts (in general) to be on the head section, but it's a good practice IMHO. However, other people prefer to put it at the bottom of the page for performance reasons.
Hope this helps.