I want to make the make the slideDown function onload of my page.
When i removed the line: $("#flip").click(function() in the following code in order to make the function execute onload of page not in click, it didn't work.
How can i call a function onload of page or when some condition happen?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Try something like this:
$(document).ready(function(){
$("#panel").slideDown("slow");
});
Simply change this
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
to
$(document).ready(function(){
$("#panel").slideDown("slow");
});
You need to call on the document load as well.
$(document).ready(function(){
// this will run on document load
$("#panel").slideDown("slow");
// this will run every time you click on the div and you can add your custom logic to slide it up or down here
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
Here is demon on js fiddle
The problem with your code is that you're invoking slideDown() only when someone clicks on your flip element but you wish to do it on page load, so you can use jQuery's document.ready handler itself do that
$(document).ready(function(){
$("#panel").slideDown("slow");
});
This will slideDown the panel when DOMContentLoaded event is fired which happens when all your scripts and markup are downloaded but your css and images are still downloading.
If you really want to slideDown the panel, only when the page is completely loaded i.e., markup,all scripts, images and css files are downloaded and processed, then you can listen for load event of the window like this
$(window).load(function(){
$("#panel").slideDown("slow");
});
Related
I want to add a preloader to my website untill the website is fully loaded images, js, fonts everything but I'm confused which should I use
window.addEventListener('DOMContentLoaded', () => {
// code
});
or
window.addEventListener('load', () => {
// code
});
And if I used load or DOMContentLoaded should I stop using defer for my script files?
And also if I have imported modules should it be outside the event? For example:
import { gsap } from "gsap";
window.addEventListener('DOMContentLoaded', () => {
// code
});
I use this preloader code for my website. You can check this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="preloader" style="position: fixed; left: 0; top: 0; z-index: 999; width:
100%; height: 100%; overflow: visible; background: #333 url('pre_loading.gif') no-
repeat center center;"></div>
<div id="container" style="display:none;">your page content here</div>
<script>
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
$('#container').show();
});
</script>
</body>
</html>
You can hide the preloader when the event you choose is triggered.
defer attribute
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.
You could also read the documentation...
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
I have the next code. What am trying to do is when i refresh or open the page, to add the class intro. But my main problem is in the part :
$("body").load(function(){
I want when the page is opened, then to add the class .intro. Instead of body, i have also tried html, and still doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").load(function(){
$("p").addClass("intro");
});
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
You should not use load() for this purpose.
load() function description : Load data from the server and place the returned HTML into the matched element.
You need just ready function to achieve that :
$(document).ready(function(){
$("p").addClass("intro");
});
//OR
jQuery(function($){
$("p").addClass("intro");
});
Hope this helps.
Try this instead:
$(document).ready(function(){
$(window).load(function(){
$("p").addClass("intro");
});
});
Load event attached to the window. If that is what you meant? Load on a DOM element like that doesn't make much sense.
Whilst this should work, you could pull it out of your ready() event.
$(document).ready(function(){
// Nothing to see here...
});
$(window).load(function(){
$("p").addClass("intro");
});
This waits for the load of the window, but if you just want to add the class as soon as possible when the DOM is ready, well, you won't need the load() at all:
$(document).ready(function(){
$("p").addClass("intro");
});
Bonus: You should use on() to attach all events going forward.
$(window).on('load', function(){
$("p").addClass("intro");
});
on() is the preferred method for events in future jQuery versions, as older methods are deprecated.
All the best.
Put your code inside $(document).ready callback.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass("intro");
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
$(window).on('load', function(){
$("p").addClass("intro");
});
I want the div to slide on the screen left to right i have a html file and a java script file shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DY Fitness</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="javascript" src="css/nav.js"></script>
</head>
<style>
#import "css/nav.css";
</style>
</head>
<body>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
</body>
</html>
<------------------ Javascript(nav.js)-------------------------->
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
ithink the code is correct but its not working for me any help is appreciated thanks
set position:absolute; to content, see code working: http://jsfiddle.net/mig1098/mnjxmfhr/ :
#content{
position:absolute;
/* ---- */
}
It's very difficult to help you because you don't give us that much clue. For exemple, what the console output ?
Anyway, by putting your script tag in the head you have to assume that the script will be loaded before the DOM has finished to be loaded. So your script can't find #right or #left element because they haven't been loaded in the DOM three.
You have 2 solutions :
First one :
Wrap your code in a load event like this :
$( document ).ready(function() {
//Your code here
});
or the shortcut :
$(function() {
//Your code here
});
Second one :
Put your script tag before the end of the body
<script type="javascript" src="css/nav.js"></script>
</body>
Also note that you can't have 2 <head> into another one.
You cannot attach click handlers to elements that have not yet been loaded to the DOM. There for you should wrap all event handler assignments in the $(document).ready function or $(window).load function. The first fires when the DOM is completely loaded. The second fires when all images and other resources have also loaded.
The first is:
$(document).ready({
.... code goes here ....
});
or you can use the shortcut for it:
$(function(){
.... code goes here ....
});
The second is:
$(window).load(function(){
.... code goes here ....
});
The window.load method is primarily used when getting the size of objects that might include images, since the size of a div will be misreported when getting its size before the image is completely loaded.
Try this and see if it helps:
$(function(){
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
});
IMPORTANT: Your #content element must be set to position: relative; in your css or this will not work. see this fiddle: http://jsfiddle.net/8gog742m/
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:
http://oxfordandregentstreet.com/
Now this is the code I made for it:
On the header I put this function
enter code here
On the header I put this function
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(){
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(){
jQuery(".vid1").hide();
});
});
</script>
enter code here
CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}
.videos{
position: relative;
display: none;
}
.play1{
position: relative;
bottom: 9em;
left: 8em;
}
enter code here
HTML code on the page:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<table border="0" align="center">
<tbody><tr>
<td><img src="/wp-content/uploads/2015/02/Constant-Contact- 290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt="" width="" class="play1"></td>
</tr>
</tbody></table></div>
<div class="videos">
<div class="vid1">Close X<iframe width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw" frameborder="0" allowfullscreen></iframe></div>
</div>
I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.
Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.
Thanks in advance :)
There's a few issues I can see:
CSS
Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:
.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
position: absolute;
bottom: -1.5em;
left: .3em;
display: none; /* added here */
}
Code
The play button class is play1 so, your code to show vid1 should be:
jQuery(".play1").click(function (e) {
e.preventDefault();
jQuery(".vid1").show();
});
The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:
jQuery(".vid1 .closevid").click(function (e) {
e.preventDefault();
jQuery(".vid1").hide();
});
Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(e){
e.preventDefault();
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(e){
e.preventDefault();
jQuery(".vid1").hide();
});
});
</script>
(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Ref: http://learn.jquery.com/about-jquery/how-jquery-works/
(2) Inside the jQuery document.ready wrapper, put an alert.
<script type="text/javascript">
jQuery(document).ready(function(){
alert("It works");
});
</script>
If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.
Make just that one thing work, then add back in the other parts, bit by bit.