I'm trying to use jQuery to change the value of the div 'dog' from blue (CSS) to red (javascript css code), but the javascript seems to not be functioning. CSS, JavaScript and jQuery are all linked properly (have checked).
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dog"></div>
</body>
</html>
CSS CODE:
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
JAVASCRIPT (jQuery) CODE:
$("#dog").css("background-color", "red");
but the javascript seems to not be functioning. CSS, JavaScript and
jQuery are all linked properly (have checked).
Ensure that you encapsulate the javascript within a $( document ).ready(). This should solve the problem if the script is loaded in the head element, where the HTML document has not been loaded fully yet.
However, an alternative solution is to use the script tag within the body element.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery
.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="dog"></div>
<script>
$("#dog").css("background-color", "red");
</script>
</body>
</html>
do this in your js file -
window.onload = function () {
$("#dog").css("background-color", "red");
}
The reason is this -
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
As you have a seperate js file, and you want the style to be changed when the page is loaded, so you have to do this.
For more understanding, you can refer this - Difference between onload and window.onload
Related
I am study in Codecademy all ready. But while i am learning in the codecademy I copy the code because I forget quickly.
This code I put in my program for make website. The problem is when I want to view the page in my PC(i dont have host). the code is not working.
My JavaScript:
$(document).ready(function(){
$('div').click(function(){
$(this).effect('bounce',{times:3} , 500);
});
});
The markup:
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div></div>
</body>
</body>
you can observe the code HTML have a two link in the that link are connecting the script
someone tell me i have to download the Jquery if i want to make the web in my computer is the link http://qunitjs.com/ but i dont know which file download.
what can i do ?
i did and nothing
<script type='text/javascript' src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<link href="css.css" rel="stylesheet" type="text/css">
<body>
<div ></div>
</body>
</body>
Create a directory name it: example01
In this directory create three files:
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
<script type='text/javascript' src='script.js'></script>
</body>
</html>
style.css
div {
width: 300px;
height: 300px;
background-color: red;
}
script.js
$(document).ready(function(){
$('div').click(function(){
$(this).effect('bounce',{times:3} , 500);
});
});
open index.html in browser and watch the result
add below code in the head tags
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
I've been following the lessons on Codecademy and I've finished the HTML/CSS and about half of the jQuery tutorials.
I figured I should try to test my knowledge by writing code and opening it in my web browser, which is Chrome (Version 34.0.1847.131 m).
I have the HTML and CSS working perfectly fine, but I can't seem to get the jQuery (script.js is the filename) code to work properly. Here is my code for all three files in my test project:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css
div
{
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
script.js
$(document).ready(function()
{
$('div').hide();
});
This code basically should instantly hide a div box I am creating. However, whenever I open the index.html page in chrome, it just shows the box in the upper left corner (thus, my $('div').hide(); isn't being run.
My files are all in the same location:
I'm writing my code in the Sublime Text 2 IDE.
I've seen multiple questions similar to this on SO but everyone's problem was that they have didn't wrap their js code in the $(document).ready() function.
Can someone tell me what I'm doing wrong?
You have not loaded jQuery.
Add this line to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Edit: If you are using this offline, you need to use http:// as it will default to file://
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Hosted by google. Source
try to include the jquery file before your final script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...your script....
You need to include jQuery before you include your javascript file, like so:
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
You have to attach a jquery library with your page in order to run it.
just add
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
in head section of your html
You need to include jquery library in your html file like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I'm trying to grab a specific div container of an external source. But unfortunately there are also div IDs inside this div container, which aren't needed.
The grabbing works, but the blocking doesn't. FYI: I'm new to JavaScript and searched already for a solution.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="LinkToExternal.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container');
});
document.getElementsByClassName('NotNeededClass').style.visibility = 'hidden';
document.getElementById('NotNeededID').style.visibility = 'hidden';
</script>
</head>
<body>
<div id="container">
<div id="article"></div>
<div id="article2"></div>
</div><!--container-->
</body>
The code you have for hiding the elements is firing right after the load function. The likely cause is that the elements you are trying to hide have not been loaded into the DOM. Place your code in a callback function of the load function, this will ensure that your elements have been loaded into the DOM.
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container',function(){
$('.NotNeededClass, #NotNeededID').hide();
});
});
</script>
I'm using Jquery Wookmark as an alternative to Masonry.js but I can't get it to work at all. What am I doing wrong here?
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<?php include("include/head.php"); ?> // CONTAINS JQUERY 1.9.1
<link rel="stylesheet" type="text/css" href="css/posts.css" />
<link rel="stylesheet" type="text/css" href="css/searches.css" />
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
</head>
<div id="postsHolder">
<div class="post singlePost">
<div class="postInner">
<div class="postTop">
<div class="postTopRow"><strong>Title</strong></div>
</div>
<div class="postContentHolder postNoteText">
Post Information
</div>
<div class="postOptions"></div>
</div>
</div>
x20 (or however many php script specifies)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
This is how it appears to tell you to do it on github but I can't get them to block up beneath each other without a huge gap. What do I need to change?
first include jQuery file
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
then add
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
Include Jquery and add css inside the head tag
<html>
<style>
.singlePost{
float: left;
width: 210px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
</html>
As jQuery is already included (as mentioned in comments), all you need to do is wrap your custom script in a $( document ).ready() function:
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Your CSS declaration at the top will do nothing if it's just plain text. CSS must be placed within the document's <head> and must be wrapped within the style element:
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
Your script is in head. And when it is executed maybe postsHolder div not exists. Replace it with function
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
EDIT: precise selector and add container. This work for me, and without float:left.
See container property
$(function() {
// Call the layout function.
$('#postsHolder .post').wookmark({
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('body'), // the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
});
});
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">