How do you combine JavaScript code and html code together?

How do you combine JavaScript code and html code together? - javascript

I am newer to Javascript and HTML. I want to check whether an image is loaded or not. I found this code on StackOverflow,but I don't know how to combine them into a finished piece:
Any one can tell me?
The js code:
<script language="JavaScript">
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
</script>;
The html code:
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td bgcolor="258cca"><td align="center" valign="middle">
<p>
<img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr></tr>
</table>
<BODY ondragstart="return false;" ondrop="return false;">
</div>
The CSS:
body {
background-color: #558CCA;
}
.STYLE1 {
color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
font-size: 21px;
}

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
body {background-color: #558CCA;}
.STYLE1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;}
.STYLE2 {font-size: 21px}
</style>
<title></title>
<script type="text/javascript">
window.onload=function(){
$("img").on("load", function() {
}).each(function() {
if(this.complete) $(this).load();
});
}
</script>
</head>
<body>
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tbody>
<tr>
<td bgcolor="258cca"></td><td align="center" valign="middle">
<p>
<img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Fiddle

The code you found is using jquery library so in order for it to work, you must first GET the jquery plugin in your page, just put this code anywhere in your document. For faster loading make it at the bottom of your page. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Secondly, put your jquery code UNDER this link, otherwise it won't work.

This is a basic starter html template
<html>
<head>
<script language="Javascript">
Function here
</script>
</head>
<body>
Html code here
</body>
</html>

Put the <script>...</script> block to the end of your page, before the </body> tag. If you have your scripts at the top of the page, it can cause mistakes sometimes.

A few errors in your code :
There should be no semicolon after the script tag
jquery has "on" method, its misspelled "one" here
When in one file the basic html page syntax goes as:
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
/* css styles go here*/
body {
background-color: #558CCA;
}
.STYLE1 {
color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
font-size: 21px;
}
</style>
<script type="text/javascript">
// javascript/jquery code goes here
$("img").on("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
</script>
</head>
<BODY ondragstart="return false;" ondrop="return false;">
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td bgcolor="258cca"><td align="center" valign="middle">
<p>
<img src="http://findicons.com/files/icons/1072/face_avatars/300/a05.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>

Related

JavaScript Element.length returns invalid length in Visulaforce

JavaScript Element.length returns invalid length while executing in Visualforce page.
I'm expecting body NodeList length to be 14. But after printing console.log('allDocElements length:: ',allDocElements.childNodes.length);
It return 10. how this is possible?
I'm executing it in Google Chrome.
View console output
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>JS Addignment 1</title>
<style>
body {
text-align:center;
font-size:30px;
}
.center {
width:70%;
margin:15% auto;
border-collapse:collapse;
border:2px solid #000000;
}
table td {
border:2px solid #000000;
}
</style>
<script>
let dateContainer, dayContainer, timeContainer;
let allDocElements = document.getElementsByTagName('body')[0];
console.log('allDocElements::',allDocElements.childNodes);
</script>
</head>
<body>
<table border="1" style="" class="center" cellpadding="20">
<tbody>
<tr>
<td><label>Date: </label><span id="dateContainer"/></td>
<td><label>Day: </label><span id="dayContainer"/></td>
</tr>
<tr>
<td colspan="2"><span id="timeContainer"/></td>
</tr>
</tbody>
</table>
</body>
</html>

Trouble with Show/Hide code, second level

I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>

You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>

codeMirror within an extendable <td> doesn't seem to disappear/appear when a button is selected

I am attempting to developing this system where you can edit code using the CodeMirror text area's and then the code is automatically run in an iframe.
On this system there will be a button that a lows the user to make the CSS textarea and the table column disappear. But for some reason I cant get it to work. Here is the code that I have got so far, as follows:
<script src="lib/codemirror.js"></script>
<script src="mode/clike/clike.js" type="text/javascript"></script>
<link href="lib/codemirror.css" rel="stylesheet" type="text/css" />
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="mode/xml/xml.js"><!-- needed for htmlmixed --></script>
<script src="mode/css/css.js"></script>
<link href="theme/default.css" rel="stylesheet" type="text/css" />
<link href="theme/mdn-like.css" rel="stylesheet" type="text/css" />
<style>
.CodeMirror {
border:none;
width:100%;
height:451px;
margin-left:100;
}
</style>
<table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="3"><button onClick="displayCSS()">Hide/Show CSS</button></td>
<tr>
<tr>
<td class="left">
<textarea id="code" name="code" style="padding-top:0px; border:none;" ><!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
</textarea>
<select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
<option value="volvo">index.html</option>
<option value="saab">another_page.html</option>
<option value="mercedes">placeholder_page.html</option>
<option value="audi">other.html</option>
</select>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "htmlmixed",
lineWrapping: true,
theme: 'default',
});
</script>
</td>
<td>1</td><td></td>
<td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
<textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >h2 {
visibility: hidden;
}
h2 {
visibility: hidden;
}
h2 {
visibility: hidden;
}
h2 {
visibility: hidden;
}
</textarea>
<select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
<option value="volvo">main.css</option>
<option value="saab">main2.css</option>
<option value="mercedes">main3.css</option>
<option value="audi">other.css</option>
</select>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/css",
lineWrapping: true,
theme: 'default',
});
</script>
</td>
<td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">
<iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
</td>
</tr>
</table>
I still need to make the code executed in the iFrame automatically, but for now I just want the user to be able to make the css textarea disappear and appear. Any help would be highly appreciated - thanks :)

I noticed there were three errors. The displayCSS function wasn't defined at all. You need to include jQuery. And the tr around the button isn't closed properly.
Here's the modified code:
<script src="jquery.min.js"></script>
<script src="codemirror.js"></script>
<link href="../css/codemirror.css" rel="stylesheet" type="text/css" />
<script src="htmlmixed/htmlmixed.js"></script>
<script src="xml.js"><!-- needed for htmlmixed --></script>
<script src="css.js"></script>
<style>
.CodeMirror {
border:none;
width:100%;
height:451px;
margin-left:100;
}
</style>
<table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="3"><button onclick="displayCSS()">Hide/Show CSS</button></td>
</tr>
<tr>
<td class="left">
<textarea id="code" name="code" style="padding-top:0px; border:none;" >
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
</textarea>
<select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
<option value="volvo">index.html</option>
<option value="saab">another_page.html</option>
<option value="mercedes">placeholder_page.html</option>
<option value="audi">other.html</option>
</select>
<script>
var editor1 = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "htmlmixed",
lineWrapping: true,
theme: 'default',
});
</script>
</td>
<td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
<textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >
h2
{
visibility: hidden;
}
h2
{
visibility: hidden;
}
h2
{
visibility: hidden;
}
h2
{
visibility: hidden;
}
</textarea>
<select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
<option value="volvo">main.css</option>
<option value="saab">main2.css</option>
<option value="mercedes">main3.css</option>
<option value="audi">other.css</option>
</select>
<script>
var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/css",
lineWrapping: true,
theme: 'default',
});
</script>
</td>
<td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">
<iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
</td>
</tr>
</table>
<script>
function displayCSS()
{
var cm = $('.CodeMirror')[1].CodeMirror;
$(cm.getWrapperElement()).toggle();
}
</script>
Edit
http://jsfiddle.net/aLwjhp1w/1/

Jquery "slideToggle()" function working fine in Adobe Dreamweaver, but doesn't work on browser

I have used a jquery "slideToggle" function in my html page, which will drop down a sublist as soon as I click a header named "Planning" on my webpage. Though this is working exactly I want it to, in Adobe Dreamweaver design mode, but this doesn't work when opened in the browser.Here is my complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.8.3.min.js">
</script>
<script>
$(document).ready(function(){
$("#planning").click(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<title>Ecommerce Information</title>
<style type="text/css">
<!--
a:link {color:#03F; text-decoration:none; text-emphasis:none; font-size:12px} /* unvisited link */
a:visited {color:#03F; text-decoration:none} /* visited link */
a:hover {color:#F30; text-decoration:none; font-size:14px} /* mouse over link */
.style2 {font-size: 13px;
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.style4 {
font-size: 18px;
font-weight: bold;
color: #FF6600;
}
.style6 {color: #000000}
.style7 {font-size: 8px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style23 {font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style45 {
background-color:#E8E8E8;
}
.style44 {
background-image:url('gray_jean.jpg');
}
#planning_panel
{
display:none;
}
-->
</style>
</head>
<body>
<div align="center">
<a href="../index.html">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"></a>
<div style="background-image:url(Heading%20Background.jpg); width:800px">
HOME
PLANNING
DESIGN & HOSTING
MARKETING
TECHNOLOGY
</div>
<table width="800" border="0" cellspacing="0" cellpadding="5" class="style44">
<tr><td><div id="planning_panel" style="position:absolute; left:295px;top:150px; background-color:#999; padding:5px;">
Electronic-Data- Interchange<br>
Web Site Analysis<br>
Web Ecommerce<br>
Streamline Web Pages<br>
Setting Up Blog<br>
Online Backup<br>
Introduction To Ecommerce<br>
Build eCommerce Sites<br>
Banned by Google<br>
Know Drop Ship Directories<br>
</div></td></tr>
<tr>
<td>
<div align="center">
</div></td>
</tr>
<tr>
<td width="514" valign="top"><div align="left">
<table width="99%" height="114">
<tr>
<td align="left" height="22"><div align="justify"><span class="style7">
<font color="navy" size="1" face="Tahoma"><h1 align="center">5 Minute Guide to Video Editing for Beginners</h1><br>
</font></span></div></td>
</tr>
<tr >
<td align="left" height="12"><span class="style2"><span>My text</span><hr size=-1>
<br>
</span></td>
</tr>
</table>
</div> <p align="left"> </p>
</td>
</tr>
</table>
</div>
</body>
</html>

I do not know if I understand your question correctly.
you dont have an href attribute set to the menu "Planing" (not sure if it is on purpose). If you wish to do is just open and close the panel (without going to a link) then this change to your code should help.
$(document).ready(function(){
$("#planning").click(function(e){
$("#planning_panel").slideToggle("fast");
e.preventDefault(); // prevent default behaviour
});
});

Can't print elements in a DIV tag

I am using a Drag-able and re-sizeable DIV's in this HTML file. Where the user will place the DIV tag to his desired place in a main parent DIV tag. Now I want to print this main DIV tag, but the problem is that the code which I'm using to PRINT this main DIV is printing in a sequence, like not the way user has arranged the DIV's. Also it doesn't take up the main DIV background IMAGE.
here is the code.
JAVASCRIPT & CSS
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
<script language="javascript" type="text/javascript">
function change(boxid,divtoaffect) {
content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>');
document.getElementById(divtoaffect).innerHTML = content;
}
function select1() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Sunset.jpg')";
}
function select2() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Blue hills.jpg')";
}
function PrintElem(elem)
{
Popup($(elem).text());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
// Print DIV
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
</script>
</head>
<body>
<style type="text/css">
#output1,#output2 ,#output3 {
width: 300px;
word-wrap: break-word;
border: solid 1px black;
}
</style>
HTML
<div style="width:650px;height:300px;" id="changeMe" >
<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
<tr>
<td><div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
</td>
</tr>
<tr>
<td><div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div></td>
</tr>
<tr>
<td><div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div></td>
</tr>
</table>
</div>
<tr>
<td align="center"><input type="button" value="Print Div" onClick="printContent('changeMe')" />
</td>
</tr>
here is the image to be more clearer

For Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}

Develop Reference

JavaScript is the programming language of the Web.

How do you combine JavaScript code and html code together? - javascript

This is a basic starter html template <html> <head> <script language="Javascript"> Function here </script> </head> <body> Html code here </body> </html>

Put the <script>...</script> block to the end of your page, before the </body> tag. If you have your scripts at the top of the page, it can cause mistakes sometimes.

Related

JavaScript Element.length returns invalid length in Visulaforce

Trouble with Show/Hide code, second level

codeMirror within an extendable <td> doesn't seem to disappear/appear when a button is selected

Jquery "slideToggle()" function working fine in Adobe Dreamweaver, but doesn't work on browser

Can't print elements in a DIV tag

Categories

Resources