learning javascript, why code will not work for javascript - 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.

Related

Common Header and footer error

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>

How to execute a simple jQuery Program?

i have created a simple jQuery program.i am new to jQuery technology..please provide me where am i wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script type="text/javascript" src="jquery-1.4.2.min.js">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>
The script you've written isn't supposed to go inside the jquery script tag. It needs to go in its own one.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
The first one is to load jquery itself - it's like saying "instead of me writing some javascript here, load it from this file instead", the second one is for your own code since you've put code between the script tags.
A script element can have one script. That script can go between the start tag and the end tag or it can go in another file and be referenced with a src attribute.
If there is a src attribute, then the content of the element will be ignored.
If you want two scripts, then you need two script elements.
<script src="jquery.js"></script>
<script>
// Your code
</script>
Example: Jsdiffle
This is a example with last library of Jquery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>

jQuery load() encoding for Korean (and Japanese) lang

I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!

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>

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