jQuery load causes body to turn white - javascript

I'm simply transitioning from a welcome page to a new page with content via jQuery's fadeOut/fadeIn and load functionality. Both pages have the same CSS and frameworks loaded, and both have black backgrounds. However, when it loads the second page, the background changes to white.
This is not a 'white flash' like the other questions asked on here. Literally, the body turns to white and stays that way. Any ideas why or what I'm doing wrong? I'm sure I've overlooked something very basic.
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$('#go').click(function() {
$('html').fadeOut(2500, function() {
$(this).load('second.html', function() {
$(this).fadeIn(2500);
});
});
return false;
});
})
});
</script>
</head>
<body>
<a id="go">Go!</a>
</body>
</html>
second.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body> </body>
</html>
style.css:
body {
background: #000000;
}

analysis...
$('#go').click(function() { // clicking go...
$('html').fadeOut(2500, function() { // html fade out....
$(this).load('second.html', function() { // html content changes...
$(this).fadeIn(2500); // this line can't run... cause entire html changes... including the <head> that has the script... this line is goodbye...
});
});
return false;
});
suggestion, only change the content of <body> tag...

Related

I have a following code to refresh the div, not a whole html page

After refreshing.....it goes on to the main page but not on the current page. What to do if it will be on the same page after refreshing. I have one index.html page but with 6 swiper slides...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#MyDIV").load("load.html");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>
I hope this would be helpful.
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="myDiv">Loading...</div>
</body>
<script src="script.js"></script>
</html>
script.js
<script>
setInterval(function(){
$("#myDiv").load("sample.html");
}, 1000);
</script>
Example: http://plnkr.co/edit/jgIMZ9Y1l167VHFg32Ik?p=preview

Why is my JavaScript code not working?

I have got some code that I got from JSFiddle
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }
that I am trying to replicate on my own website, however it is not working. It displays everything but when clicked on, nothing happens. This is my code.
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }
<!DOCTYPE html>
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
</script>
</head>
<body>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
</body>
</html>
NOTE: You can also see what the code is meant to do with the JSFiddle link.
You need to include the jQuery library, if you want it to work.
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
</script>
</head>
Also a suggestion is that place your script tag with your code just after all the HTML just before the closing of the body tag, so that the JS compilation does not interfere with browser rendering.

External Javascript doesn't load when called

Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>

without using iframe for lightbox popup form

This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"100%",scrolling:false});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
Now this is works fine, May i know, how to run this code for same output without using iframe?
Thanks in advance!!..
/ Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
// Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});
Or just make iframe false.
Details are given on their website. Colorbox.js

jQuery works in jsfiddle, but not in html file?

I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.

Categories