Common Header and footer error - javascript

I just learnt about common header and footer technique .. Below is the code i have written
I can't figure out what is wrong with this code ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div>
<script>
$("#header").load("header.html");
</script>
</body>
</html>

I tried your code with other jQuery library version and it was running to me.
I had use the jquery#1.10.1 library, and the header.html in the same directory.
You could see this running here.

you can do this easily using jquery. this is an alternative way that i use and works fine.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Related

learning javascript, why code will not work for javascript

I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.

Can document.write get me into troubles in this case?

I have a simple question. Basically I have index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
<script src="x.js"></script>
<script>
iny();
</script>
</body>
</html>
// x.js
console.log("x.js");
document.write("<script src='y.js'></script>");
// y.js
console.log("y.js");
function iny() {
console.log("iny");
}
As you can see, x.js loads a.js which, in turn, loads y.js. Here are the 2 scripts which live in 2 different files:
As you can see a.js syncronously loads y.js using document.write.
Now my question is: can document write get me into trouble in this case? My aim is to load y.js syncronously and that is the only reason why I am using the write. As far as I know there is no other way. Also it is not an option to have the code of y.js copy/pasted in to x.js. The 2 scripts must remain separate.
Thanks

Jquery based WYSIWYG with On-Air possibility

I have come across http://redactorjs.com which is a very nice wysiwig editor that has on air ability. In other words, in one single line you can turn a static div into an editable text area on the fly.
I -do not- want to pay for it (for some reasons I won't disclose) hence I am looking for an alternative.
Have you ever used a lightweight wysiwig jquery based editor that is easily usable on the fly?
I am looking for something I would use as follow:
$("#edit_btn").click(function({
$("#my_div").turnIntoEditor();
}));
$("#save_btn").click(function({
$("#my_div").post_content("http://target");
$("#my_div").turnIntoStatic();
}));
Please do not mind the post_content thingy and other function names as they are just given for reference to show the kind of usage I am looking after.
Thank you
I finally went for ckeditor. I could use it easily as follow (poc):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$( '.editable' ).ckeditor();
});
$("#save").click(function(){
var editor = CKEDITOR.instances['editor'];
if (editor) { editor.destroy(); }
alert($('#editor').html());
});
});
</script>
</head>
<body>
<span id="edit">EDIT</span> <span id="save">SAVE</span><br/><br/>
<div class="editable" id="editor">
Some useless content
</div>
</body>
</html>

Possible to find out what is interferring with jquery code that was operating fine earlier?

I have some basic jquery code sitting in the header of the header file for Wordpress. It was working until the client I handed it to added several plugins which I would prefer not to turn off yet if possible as that may cause issues within itself.
I am trying to determine if there is an easy way to work out what could possibly be interfering with the code (as a relatively new javascript developer I am still getting used to the console). A solution that works not just for this case, but for any other similar situations as well would be great!
When I say it doens't work, it just displays all the divs that should be hidden (as per the code). No errors appear in the console.
The code from the site is the following:
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabs").tabs("div.panes", {tabs:'li'});
});
</script>
I tested this in a basic HTML file earlier and it works fine;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabs").tabs("div.panes", {tabs:'li'});
});
</script>
</head>
<body>
<div class="tab_nav">
<ul class="tabs">
<li>Most Recent</li>
<li>Most Viewed</li>
<li>Most Comments</li>
</ul>
<div class="clear"></div>
</div>
<div class="tab_content panes">
CONTENT ONE
</div>
<div class="tab_content panes">
CONTENT TWO
</div>
<div class="tab_content panes">
CONTENT THREE
</div>
</body>
</html>
First try JQuery in the no-conflict mode.
http://api.jquery.com/jQuery.noConflict/
(you'll have to use jQuery instead of $)
and see if it works.
Remove the plugins, and re-add them one at a time until the problem re-appears.
Some Jquery files(possibly from the plugins that were added) might be conflicting with your code. Try to comment out some of the jquery files that were included by the WP plugins. It usually helps to start with a clean slate, and then add in the files one by one, this way you will find out which one is causing the problem.

jQuery / Mootools conflict error

I'm trying to do a basic web page which uses both jQuery and MooTools.
You can see a working example here: http://jsfiddle.net/DddQA/
However, anytime I try to reference MooTools, it borks my page.
Here is my current code that I am having issues with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1rc1.min.js"></script>
<script type="text/javascript">
<!-- remove this line below to make the hyperlink box work correctly -->
jQuery.noConflict();
//<![CDATA[
$(window).load(function(){
$(".affiliate-scheme").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});//]]>
</script>
<!-- remove this line below to make the hyperlink box work correctly -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
</head>
<body id="affiliate-scheme">
<div class="affiliate-scheme" style="background:red">
<h3>Affiliate Scheme</h3>
<ul>
<li>Promote Us</li>
</ul>
</div>
</body>
</html>
Many thanks for any help here. Very much appreciated.
RESOLVED:
http://jsfiddle.net/DddQA/2/

Categories