I created a intro for a website using jquery into the index.html file. I "fadeIn" and "fadeOut" some .jpg images in a row. So, after this ends, I want to load an html file which will be the "home page" and the browser url will change from "www.blabla.com" to "www.blabla.com/home.html" and if the user refresh the browser it won't play the intro again, just appear "www.blabla.com/home.html".
I use the code you see below to load the home.html after the intro ends, but it seems to appear from the beginning in the back of the page and if refresh the page intro plays again.
<script type="text/javascript">
$(function() {
$( document ).ready(function() {
$("#image1").delay(0000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#image2").delay(3000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#image3").delay(6000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#home").delay(10000).fadeIn("slow").load('home.html');
});
});
<div id="intro>
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
</div>
<div id=main></div>
How can i change this?
Just add a callback function to your final fadeOut and use plain Javascript to redirect the browser to home.html. Just make sure that that page actually exists.
I've also streamlined your code as all of the document ready bits weren't needed inside of $(function(){ ... });
$(function() {
$("#image1").delay(0000).fadeIn("slow").delay(3000).fadeOut("slow");
$("#image2").delay(3000).fadeIn("slow").delay(3000).fadeOut("slow");
$("#image3").delay(6000).fadeIn("slow").delay(3000).fadeOut("slow", function() {
window.location.href = "home.html";
});
});
});
Let me know if you have any questions.
Related
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/
I have noticed there are a few questions that have been asked on the above topic, however, there hasn't been one for embedded videos. I was hoping someone would be able to help.
Note: My first post - so apologies if i haven't provided the appropriate information!
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".container-fluid").on('click','#issuuclick',function(){
alert("it's working")
})
});
</script>
<div data-configid="26360926/39969074" style="width:525px; height:373px;margin: 0 auto;" class="issuuembed" id="issuuclick"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the above is my html embedded and javascript code. The aim here is to automatically open the publication in full spread when the page loads but only the alert is popping up at the moment (I have used a timer).
Would appreciate some assistance!
Try
$(document).ready(function(){
$("#issuuclick").trigger("click");
});
//or
window.onload = function() {
$("#issuuclick").trigger("click");
};
The first example fires as soon as the document is ready to work with and the second example fires when the page is ready and ALL resources are loaded
And attach a click handler to "#issuuclick" like
$(document).on("click", "#issuuclick", function(){
// do something
});
I want to load an external html to my actual html with load but not triggered by click. I want to load it on page on document ready event. I did like this but the jquery doesn't apply to the loaded content.
<script>
$(document).ready(function(){
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");
});
</script>
I mean content is loaded but the jquery from the main doc doesn't work for the loaded content. Example for script that should work on loaded content
<script>
$(".table").on("click", "td", function() {
$(this).closest("tr").siblings().removeClass("td_select");
$(this).toggleClass("td_select");
});
</script>
Ok then you might need to write it as below:
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php",function(){
$(".table").on("click", "td", function() {
$(this).closest("tr").siblings().removeClass("td_select");
$(this).toggleClass("td_select");
});
//Your other initialization here
});
i have checked it and there is not problem with your code its working fine just check that you have particular div with id rezervations.
$(document).ready(function(){
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rezervations">HELLO</div>
Regards
Example loading a header:
$(document).ready( function(){
$("header").load("http://localhost/js/header.html", function() {
$('body').trigger('headerReady');
});
});
From the api: https://api.jquery.com/trigger/ , then
$('body').on('headerReady', function(){
//do ur stuff here
});
I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});
In my html code i have this
<li class="register">Registreer</li>
and
<div id="content">
</div>
I try to load a html file into the div using the following code in the head
<script type="text/javascript" src="includes/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/js/navbar.js"></script>
navbar.js :
$(document).ready(function() {
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
});
I have copied signup.html all over my webpage folders. But it does not work.
However it does display test for 1/4th of a second.
I also tried putting my js code directly in the html file but that doesn't work either.
$(document).ready(function () {
$(".register").click(function(){
$("#content").load("/signup.html");
return false;
});
});
By returning false from the click event the hyperlink element will know not to perform its default action (which is why the page is refreshing).
You are repeating yourself:
$(document).ready(function() {
$(function(){ //same as $(document).ready(function() {
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
});
Try just doing this:
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
Also you might want to try stopping the default event of your link:
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
$(".register").on('click', 'a', function(e){
e.preventDefault(); //prevents action of the link
});
});
When using a relative URL, the URL is relative to the page on which the JavaScript is run. In your case, since you are using the string '/signup.html', It will look for the singup.html file up one directory from the directory of the page currently being viewed.
Use the F12 Development Console in IE or Chrome, FireBug, of Fiddler to view your AJAX requests and results to see whether your 'singup.html' is being loading from the appropriate directory. You can also view source after the load completes to see if there is HTML beiing loaded into your DIV.