I want the html are fully loaded then execute the inline javascript because this script stops the load of the html document.
To try to solve this problem I put the inline javascript code at the end inside a div then i use the jquery .append method
$("#subhimedia").appendTo("#himedia");
This works and appends the inline js that is located inside #subhimedia and takes it inside the #himedia div.
The probblem is that duplicate the #subhimedia div and in internet explorer it freeze the browser.
The inline javascript is:
<!--JavaScript Tag // Tag for network 258: Hi-Media Portugal // Website: Lifecooler // Page: HOME // Placement: HOME_MREC_300x250 (1653713) // created at: Aug 29, 2008 1:35:27 PM-->
<script language="javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/addyn|3.0|258|1653713|0|170|ADTECH;loc=100;target=_blank;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script><noscript><img src="http://adserver.adtech.de/adserv|3.0|258|1653713|0|170|ADTECH;loc=300;grp=[group]" border="0" width="300" height="250"></noscript>
<!-- End of JavaScript Tag -->
You could see the url here: http://www.niceoutput.com/jquery/
Thanks in advance for your help
Mário
Since you are using jQuery, wouldn't
$(document).ready(function(){
//your code to execute when HTML is fully loaded
});
work?
use
$(document).ready(function(){
// your code here
});
before writing any jquery codes..
Related
I would like to remove everything inside of an HTML-section, using JS, but there are <script>-tags inside of the section and JS does not remove them, why and how can I do this?
Code:
document.querySelector(".desktop_only").remove();
<section class="desktop_only">
The JS removes this text.
<script> alert("It does not remove the alert, why?"); </script>
</section>
The problem is HTML scripts are usually run first, then come any included scripts at the bottom of the HTML, so the alert script is probably removed after it already ran. It would be helpful if you added a codepen.io link!
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
I have the following script in my smarty template:
<script src="http://code.jquery.com/jquery-latest.js">
$(document).ready(myBookings);
</script>
However it doesn't work on page load. $(document).ready(myBookings); does work when I run it in Mozilla firebug console though. What am I doing wrong?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
Use another script block for your document-ready handler
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(myBookings);
</script>
I have an hmtl file which includes another javascript as
<script type="text/javascript" src="hello.js"></script>
<div>
something
</div>
This html file is loaded via de .load()
and it loads it in a div from the main page
This tells me that the first line is not well-formed
$(".flip").live("click", function() {
$(this).find("div.panel").slideToggle("slow")
});
$(".flip").live("mouseover", function() {
$(this).css('cursor', 'pointer');
});
If i remove this, it will tell me the next element is not well-formed and so on. If I include this javascript in a page which is not called via .load, it doesn't say any error. Is this because i'm calling this java script inside a div? and not in the head?
try to write the javascript code inde this function
$(document).ready(function(){
//Here insert your javascript code
});
I have some javascript which will create some sort of widget on a page. I will be giving this snippet to clients so I want them to have to do very little.
The most obvious solution which I have work right now looks something like this:
<div id="divContent"></div>
<script type="text/javascript">
MakeWidget('divContent');
</script>
Make widget basically looks for the divContent div and fill it with my widget's html.
Is there a better way to do this?
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
I would really like it if I could reduce the code down to only the MakeWidget function and it would replace itself and the script tag with the html the function generates.
Edit - I essentially want to generate HTML exactly where the MakeWidget function is called on the page.
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
Yes. When the <script> element is reached, assuming it is not a defer or async script, it will be the last script element in the page so far. So you can say, either inline or in an external script:
<script type="text/javascript">
(function() {
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
var div= document.createElement('div');
div.innerHTML= 'Whatever content is going to be inserted';
script.parentNode.insertBefore(div, script);
})();
</script>
You have to have MakeWidget defined somewhere, right? Presumably this is going to be in an external script. Why not just have the external script source just attach itself to the divContent using the window.onload method?
This would result in this code on your client's page:
<script src="http://foo.com/makewidget.js"></script>
Your makewidget.js code could then look like this:
window.onload = function() { MakeWidget('divContent') }
There may some issues with other scripts loading and probably some cross-browser compatibility issues but that should get you pointed in the right direction.
So you want to have a script element which replaces itself with div.
Your initial code is like this:
<div id="divContent"></div>
<script>
MakeWidget('divContent');
</script>
You can rewrite it like this (I am using JQuery):
<script id="scriptContent">
$('#scriptContent').after('<div id="divContent"></div>');
MakeWidget('divContent');
$('#scriptContent').remove();
</script>
I have not tried it though!
I would think it would be possible to do it as follows:
<div id="divWidgets">
<script type="text/javascript">
MakeWidgets("divWidgets");
</script>
</div>
The end result should be (if I understand your description correctly) that MakeWidgets will replace the contents of the DIV, which, in this case, is the script itself.