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>
Related
Following is the code that I am used to display full calendar view. But it is not working.
<html>
<head>
<link href="fullcalendar.css" rel="stylesheet" />
<link href="scheduler.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="jquery.js"></script>
<script src="fullcalendar.js"></script>
<script src="scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
You have to init fullcalendar in a script tag on the end of the body using
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
Also, are you sure the script and stylesheet files are on the same directory of your page?
You can find documentation on FullCalendar Docs
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
This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 8 years ago.
I'm trying to get a really simple to alert() to pop up as soon as a div loads. Unfortunately it is not working, and I can't figure out why.
Here is the code:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo" onload="pop_alert();">
<img src="mysiteLogo.png">
</div>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
And the JavaScript is just this:
function pop_alert(){
alert("This is an alert");
}
It cannot be used for div tags. This is the following list it can be used on:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">,
<link>, <script>, <style>
You can't attach onload to a div. Try putting it in the <body>:
<body onload="pop_alert();">
You can't use onload on a div. The best way to do this is to add a script element after the div to run the function.
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo">
<img src="mysiteLogo.png">
</div>
<script>
pop_alert();
</script>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
See How to add onload event to a div element?
OnLoad is used on body or windows not the div etc. If you want then use event handler to alert the pop up for example assign some id and use that to bind the event.
That is because onload is a document(body) event.
demo: http://jsbin.com/benosofo/1/
The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.
from: https://stackoverflow.com/a/4057251/2213706
onload is fired when the browser has loaded all content (including images, script files, CSS files, etc.)
http://www.w3schools.com/jsref/event_onload.asp
Poor source I know.
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
});
});
I've found that if I load a web page in iOS, then if that page uses JQueryMobile it takes about 2 to 3 seconds longer to initially load. For example, the following page loads almost instantaneously:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
However this one takes a few seconds to load:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Is there anything I can do to try to get rid of this delay?
Thanks
If it’s the scripts that are taking too long, you can move them to the bottom of the page:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
Then again, doing so will make it harder to predict exactly what happens and when it will happen. But the DOM should load and render before the blocking script tags load.
Now you just need to figure out how to deal with that.
jQueryMobile is not that famous for its responsiveness. Even after you have tried every optimization.
You could try loading the scripts via document.createElement() though. (Ideally, even this should go at the bottom)
function createScript(src){
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
What this effectively does is to start loading and executing the scripts only after the page has rendered. i.e. kind-of asynchronously.
If you have many like these.
var files = ['1.js', '2.js', '3.js'];
files.map(createScript);
Also, I would vouch for SenchaTouch(if that's an option you're willing to consider)
Try putting the JS at the bottom
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
You Can Try and Put The Script Tag in The Bottom of The Page
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</html>
and Everything Should Load Faster But The Scripts Gonna Take a 2-3 Seconds
JavaScript blocks the rendering of the page because the script may do document.write or do other modification that will invalidate the rendered page, so best practice is to put script tags at the bottom of the page. The drawback to this is that you won't be able to use jquery in the middle of the page, not even $(document).ready(). Instead you'll have to put all your scripts after jquery is loaded or you'd have to use native window.onload or write a lightweight handler to register your callbacks after jquery is loaded.