I have failed to find the answer in the following:
I have an html document that loads a couple of other htmls.
This is done perfectly.
However, in on one of the included htmls, the "navmenu.html", I would like, after everything is comlepetly loaded, to execute a script found in load() to modify "menu1" element's class, which is in the included "navmenu.html".
After the ready() function, the load() function is executed before the "navmenu.html" is really & completely included in the document, since I get the error message that the element "menu1" is not found.
If I pause the action by an alert() at the beginning of load() - then the menu1 element is found - since this delay caused by the alert() gives time to the ready() function to complete.
So, is there a way to solve this?
Thank you in advance.
<body>
<div id="navmenu"></div>
<div id="carousel"></div>
</body>
<script language="javascript" type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html');
$('#carousel').load('carousel.html');
});
$(window).load(function() {
var element = document.getElementById("menu1");
element.classList.add("active");
});
</script>
jQuery.load() has the following signature (url,data,callbackFunction).
You could try the followind :
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html',[],function(){
$('#carousel').load('carousel.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
});
});
Thank you so much Radu Toader for the reply.
It worked !!!
(I am not sure if this is the right way to answer, since it's my first question to the group.)
I also tried the following, since the element was in "navmenu.html" and had a separate line for the carousel.
$('#navmenu').load('navmenu.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
$('#carousel').load('carousel.html');
I also tried your answer where load.carousel was called by the load.navmenu and it also worked.
Do you suggest that I should use your "more complex" solution instead of the separated line for the carousel?
Thanks again.
Dimitrios
Related
So I'm trying to link up my html and javascript files in notepad++, but it isn't working properly.
I wanted to know how it is possible that it writes test, but doesn't remove the div. Can anyone explain this? Thanks in advance!
1, jQuery isn't linked. Meaning, you don't have <script type='text/javascript' src='myjQueryfile.js'></script> in your HTML, you'll want to put it before your script.
2:
Because the element with the ID of blue, doesn't exist yet. The DOM - basically the object of your HTML - has yet to be constructed when your script is run, which in this case is the top of the page, before blue comes into existence. You'll want to use an event to fix this, typically $(function(){ ... }); which will execute your code when the DOM is ready.
Also, document.write just writes code then and there, meaning exactly where the document.write calls is made, the HTML will be outputted.
You should have linked jquery. You're trying to use it without having it linked.
The script is loaded in the head. At the time the script executes the body of the document is not built, so nothing is removed. If you were to use the document.ready callback (and had properly included jQuery) it would work
$(function(){ $("#blue").remove(); });
A plain js version of this is
window.onload = function(){
var b = document.getElementById("blue");
b.parentNode.remove(b);
};
At the time the script runs, only the portion of the document up to the <script> tag has been loaded. You need to delay until the DOM has fully loaded before the script can target the DOM:
document.addEventListener("DOMContentLoaded", function(event) {
$("#blue").remove();
});
I'm trying to remove a div from the page (preferably prevent it from loading at all)
but for now I'm settling on removing it after the page loads.
When I try the following lines of code in jsFiddle, the #content div gets removed, as expected.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#content').remove();
});//]]>
</script>
However, I have also tried implementing it on an actual website, but in that case, the #content div isn't removed.
Any suggestions as to what might be wrong?
If you're sharing jQuery with another library that uses the dollar for its operation you need to guard against it like this, using an anonymous wrapper:
(function($) {
$(window).on('load', function(){
$('#content').remove();
});
}(jQuery));
Note that instead of .load() I'm using .on('load', fn).
Instead of on page load you could also bind your code on DOM ready; jQuery passes itself as the first argument to the inner function:
jQuery(function($) {
$('#content').remove();
});
Your $ variable does not point to jQuery for some reason.
<script type='text/javascript'>
window.$ = jQuery;
$(window).load(function()
{
$('#content').remove();
});
</script>
Try with this
<script type='text/javascript'>
$(document).ready(function(){
$('#content').remove();
});
</script>
or
$(function()
{
$('#content').remove();
});
It's because you have a javascript error when you call $(window).load().
Uncaught TypeError: Object [object global] has no method 'load'
Also, you should better use document.ready instead as the content will be removed faster (doesn't need to wait for all the images to load).
//shorthand for $(document).ready()
$(function(){
$('#content').remove();
});
TypeError: $(...).load is not a function
It is giving error above instead of below one as load is deprecated in new version of Jquery
$(window).load(function(){
});
use this code
$(function(){
// your code here
})
use this:
<script type="text/javascript">
var node = document.getElementById('content');
if(node.parentNode)
{
node.parentNode.removeChild(node);
}
</script>
Hope this help.
Case of jquery conflict. You have mootools framework too on the page.
Also I did a 'view source' of the page and I found out this line
$j = jQuery.noConflict(); //line 132
So try this
$j('#content').remove();
Or
jQuery('#content').remove();
You are using jQuery testing with onload,
so you have to add onload syntax in jquery, on your site the statement was not called onload, that why its not working
I have updated fiddle
http://jsfiddle.net/MarmeeK/FRYsJ/3/
The JS code under <script> tag, without adding in onload in page,
<script type="text/javascript">
$(document).ready(function(){$('#content').remove();});
</script>
this should work :)
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.
I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>
I have a very weird problem. I am using jQuery and i am using the $(function () to load functions when the dom is loaded. But with a unknown reason the code in the $(function () will run a second time. A preview is at: http://development.devhouse.nl/news/3/het-nieuwste-nieuwsbericht you will get 2 alert prompts, but there is only 1 written in a $(function () . The exact code is:
<script type="text/javascript">
$(function () {
alert('Test');
});
</script>
And the whole source can be found here(open the source in your browser): http://development.devhouse.nl/news/3/het-nieuwste-nieuwsbericht
Please help me. I am hopeless....
Tom
I suppose because the script is in your html body instead of in the head. Move it to the head, and it only fires once.
Is there a reason you have it there?
EDIT: For clarification, as Marcel Korpel noted, scripts can be nested in the body, and there can be performance reasons to have them at the end. But in this situation, the script was nested inside an element within the body. This works, but can lead to unexpected behavior if that element is manipulated in certain ways.
$().ready(function(){
alert('Test');
});