I want to fade in the page upon load. I looked at other forms on here and somehow it just isnt working for me...
Javascript file:
window.onload = init;
function init() {
$('#container').fadeIn('slow');
}
One of the pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apparel</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="effects.js"></script>
</head>
<body>
<div id="cart">
<img src="shopcart.jpg" height="30px">
</div>
<div id="container">
<div id="nav">
<p id="sb">Apparel</p>
<p id="about">HOME</p>
<p id="srv">OUTERWEAR</p>
<p id="srv">CLOTHING</p>
<p id="pjt">SHOES</p>
<p id="pjt">ACCESSORIES</p>
<p id="about">ABOUT</p>
<p id="cont">CONTACT</p>
</div>
<div id="imgcontainer">
<img src="homeimg.jpg">
</div>
</div>
</body>
</html>
Put
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
above
<script src="effects.js"></script>
This exposes the $ variable (aka the jQuery library) that you're using when you do $('#container')
You'd better replace the window.onload to $(function(){});
Here is the code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//window.onload = init;
$(function(){
init()
});
</script>
Enjoy it : )
Related
I just start to use JQuery and I want to add li element in my HTML when I click on a button.
My Html code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" onclick="test()">
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
</body>
</html>
And my js file :
function test() {
console.log("On clique");
$("<li>Coucou</li>").appendTo("<ul>");
}
Unfortunately, It doesn't work and I don't understand why.
Do you have any idea ?
The problem is because your selector is incorrect. appendTo('<ul>') is trying to create a new ul element in memory and append the li to that. You instead need to use appendTo('ul'), without the angle brackets.
I'd also suggest you use unobtrusive event handlers instead of the outdated onclick attributes. Here's the full example:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" />
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
</body>
</html>
jQuery(function($) {
$('#filtre1').on('click', function() {
console.log("On clique");
$("<li>Coucou</li>").appendTo("ul");
});
})
Try this:
function test() {
$('ul').append('<li>Hello!</li>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
<button onclick="test()">append</button>
append() will add an element at the end
function test() {
$('#liste > ul').append('<li>Coucou</li>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" onclick="test()">
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" />
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
</body>
</html>
This question already has answers here:
jQuery document.ready
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I wrote this very simple code to expand and collapse a text when pressing a button, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.expand').click(function(){
$('.content').slideToggle('slow');
});
</script>
</head>
<body>
<div class="sitesection">
<p class="expand">Click Here To Display The Content</p>
<p class="content">Hello World!"</p>
</div>
</body>
</html>
When I click on "Click here to display the content", nothing happens.
put your code to bottom or use DOM ready event
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="sitesection">
<p class="expand">Click Here To Display The Content</p>
<p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
$('.content').slideToggle('slow');
});
</script>
</body>
</html>
Try This
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="sitesection">
<p class="expand">Click Here To Display The Content</p>
<p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
$('.content').slideToggle('slow');
});
</script>
</body>
</html>
Or must call javascript after load document.
I`m trying to use Jquery-Steps but this doesnt even like is working or loaded, it only shows the h1 and div blocks, only the html is been loaded
Here is the code that I took from them, I dont know if I need to do something else.
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="jquery.steps.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
</body>
</html>
Try now ?
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
// Initialize wizard
var wizard = $("#wizard").steps();
// Add step
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
</body>
</html>
I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>
I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/