|
JavaScript - Basic Js Create Element Problem
Hi, im new to Js and i have this code:
Code: var div = document.createElement("div");
div.id = field+count;
div.name = field+count;
div.class = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);
assuming that the variables are all correct and working, why is only this produced: Code: <div id="question_3"><p>Question 3</p></div> instead of: Code: <div id="question_3" name="question_3" class="bubble_green"><p>Question 3</p></div> and is there a solution? Similar Tutorialsvar newlink = document.createElement("a"); newlink.setAttribute("class", "mhs uiButton"); newlink.setAttribute("role", "button"); newlink.setAttribute("href", "http://www.facebook.com/#"); newlink.setAttribute("onlick","FriendBrowserCheckboxController.makeFriendRequest(this, '+javaedit.text+'); return false;"); alert(newlink.classname); why alert newlink.classname return as undefined ? i have set class = mhs uiButton already,should be return mhs uiButton? Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div>
<script type="text/javascript">
function loading(){
?
</script>
<input type="button" name="submit" id="submit" onclick="loading();"/>
How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "change.php",
data: params,
success: function(data){
$('#results').html(data).fadeIn("slow");
}
});
});
});
</script>
Can someone see what is wrong with this code: Code: frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)
It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() I'm stumped. I realise it's something basic... This works - i.e. beeps on mouseover: Code: <html>
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
</head>
...
<a href="#" onMouseOver="EvalSound('sound1')">Move mouse here</a>
...
<embed src="beep.mp3" autostart=false width=1 height=1 name="sound1" enablejavascript="true">
</body>
</html>
...but this doesn't work: (I get the error "undefined is null or not an object") Code: <html>
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
</head>
...
<script language="JavaScript">
<!--
EvalSound('sound1');
change_it1() // activates an external .js
//-->
</script>
...
<embed src="beep.mp3" autostart=false width=1 height=1 name="sound1" enablejavascript="true">
</body>
</html>
What am I doing wrong? Gotta make the second idea work... Thanks Code: <html>
<body>
<script type="text/javascript">
var Items = new Array
Items [0] = ["a", "b"];
Items [1] = ["c", "d"];
var i = 0;
if(Items [i++][0] == "c"){
document.write("hello");
}
</script>
</script>
<body>
</body>
</html>
so im trying to search an array with this function its not working i tried using firebug but it showed no errors. I think its the i++ part i want to increment i each time it tries it. WAIT SORRY I SOLVED IT I solved it you can put in Pistol or shotgun for name Code: <html>
<body>
<script type="text/javascript">
var Items = new Array
Items [0] = ["Pistol", "50", "2000"];
Items [1] = ["shotgun", "5000","1000"];
var i = 0;
function chek(){
if(Items [i][0] == document.getElementById("name").value){
document.getElementById("a").value = Items [i] [1];
document.getElementById("acc").value = Items [i] [2];
i=0;
}
else {
i++
}
}
</script>
</script>
<body>
Dammage<input type="text" id="a" />
<br/>
ACC<input type="text" id="acc" />
<br/>
Name<input type="text" id="name" />
<br/>
<input type="button" onclick="chek();" value="Chek" />
</body>
</html>
Is there anyway to make it more streamline so you dont have to click to increment? I have the following HTML code: Quote: <form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()"> <fieldset> <legend>Fill up this module</legend> Private <input id="private" type="radio" name="type" value="private" onclick="return addPrivate()"/><br/> Community/Organization <input id="organization" type="radio" name="type" onclick="alert('Organization')"/><br/> <br/> and the following javascript code: Quote: function addPrivate() { var root = document.getElementById('registration'); var label1 = document.getElementById('label'); label1.appendChild(document.createTextNode('First Name: ')); var label2 = document.getElementById('label'); label2.appendChild(document.createTextNode('Last Name: ')); var label3 = document.getElementById('label'); label3.appendChild(document.createTextNode('Address*: ')); var label4 = document.getElementById('label'); label4.appendChild(document.createTextNode('Profession: ')); var div = document.createElement('div'); div.appendChild(label1); div.appendChild(label2); div.appendChild(label3); div.appendChild(label4); root.appendChild(div); } but div tag is not added. Where is the problem? Code: function offPar(){
alert(this.offsetParent.id);
}
function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");
mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);
}
window.addEventListener('load', init, false);
HTML :
<div id = "content">
<div id = "mid">
<div id = "inner">
<p class = "par">
</p>
</div>
</div>
</div>
I can add an event listener to the #mid div but I can't to the #inner div. Anyone now why this is? Sorry I can't provide more info. That's all I Know! TTFN John I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element. I've been using the script from quirksmode but it can be hard to get working. Code: function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
I have a function that needs to work only when the parent is moused out of. I didn't make this script. It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)" in the html Code: function transition(ele,dirflag) {
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
ele.dirflag = dirflag; // changed name to dirflag, stored for reference
if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
if(dirflag) { // 1 or true = increment
// alter visibility here to make an invisible item visible before starting
ele.style.display='block';
ele.intrans= setInterval(function() {
if(ele.copac<ele.eopac ) { // if mods needed
ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
}
},intrval); // do it on intrval timeline
} else {
// 0 or false = decrement
ele.intrans= setInterval(function() {
if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.MozOpacity = ele.copac;
ele.style.KhtmlOpacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
// and make the item disappear here since it's done transitioning.
ele.style.display='none';
}
},intrval); // do it on intrval timeline
}
} // all done!
I tried to do this: Code: function transition(ele,dirflag,e){
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment
........
With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event) but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all. I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong. and please no script librarys. I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> Code: var bakaBanner;
bakaBanner = document.getElementById('head');
if (bakaBanner) {
var str=/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/;
document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png"));
}
Alright, here's the deal... This is a script to be used in Greasemonkey. The page this is for changes their banner every 5 minutes, the name changes and it could be either jpg or png. I'm fairly certain my regex itself: \/images\/banners\/[A-Za-z0-9_]+.[a-z]+ Is correct... Here's an example of what it's looking through: Code: <div id="head" style="background-image: url(/images/banners/kiminitodoke.jpg);" > <div id="header_left"> <div id="rss"> My guess is that it has something to do with this line: document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png")); I'm new with Javascript, so I don't really understand why it's not working... :/ Hi guys, I am currently stuck up on something.. check this page http://dev.andrewfopalan.com/new_slider.html Well for starters.. I am trying to mimic this effect.. http://www.vogue.com/ The slider on the very top.. A quick preview of what I did was.. I used this plugin.. easyslider().. And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that.. The first problem was how to make it center like the one on the vogue.. so it was done... Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser.. So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done.. My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through... here's the code for the next button: Code: // this gets the current location of the active slider on the list..
$("a#"+options.nextId).click(function(e){
var id= $('.active').attr('id');
//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..
$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');
// this is the plugin's animation to move to the next slide..
animate("next",true);
Heres' the code for the animate Code: function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p},
{ queue:false, duration:speed, complete:adjust,
}
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
heres the adjust code function Code: function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
I am very still new to this jQuery thing.. but I am trying my best to learn.. Hope someone could teach me and help me on this... Hello I am fairly new to Javascript. I have a function which takes a string which consists of key value pairs and sets a form control based on key being the form element name and value being the value to set. eg string could be "key1=orange;key2=2;key3=whetever" Here is the function: function processresponse(frm, serverResponse) { var items = serverResponse.split(";"); for(var i = 0; i < items.length; i++) { var item = items[i]; var eqchar = item.search("="); if(eqchar != -1) { var key = item.slice(0, eqchar); var value = item.slice(eqchar+1); var elemname = key; if(document.getElementById(elemname) != null) { var type = frm.elements[elemname].type; if (type=="checkbox") { value == "1" ? frm.elements[elemname].checked=true : frm.elements[elemname].checked=false; } else if (type=="text"){ //do processing for text (text input) frm.elements[elemname].value = value; } else if(type=="select-one"){ //only one is openformmode - default to [0] - true if(value == "0" || value.length == 0) { frm.elements[elemname].options[0].selected = true; } else { frm.elements[elemname].options[1].selected = true; } } else { alert("unknown ctrl type: " + type + " name: " + frm.elements[elemname].name + " val: " + value + " key: " + key); } } //if(frm.getElementById(elemname) } } } The problem line is: var type = frm.elements[elemname].type; elemname is case sensitive so if for example the form element is called dog and the string elemname is Dog, then the line fails with Error: 'elements[...].type' is null or not an object So my check if(document.getElementById(elemname) != null) is insufficient to guard against this. I realise I could do a try catch but there must be a more legant way than that. How can I test the formname more reliably? Any ideas would be very welcome. Angus Hi, I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text. The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call. I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below: The code below is PHP. The table mouseover (for reference): Code: echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
echo "<tr><th> </th><th> </th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";
The anchor mouseover: Code: echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
echo "</table>";
The function (javascript): Code: function updateHelpText(newText) {
document.getElementById("helpBox").innerHTML = "<h4> " + newText + "</h4>";
}
Any help with this would be great, thanks. The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! Hi, I have the script below working fine in IE but not FF, can any one help me?? The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF Live demo: http://hotelendenia.com/sandbox/ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<script type="text/javascript">
function extend(m, e){
var e = e || this;
for (var x in m) e[x] = m[x];
return e;
};
function create(type, opt, parent){
var el = document.createElement(type);
if (opt.style){
extend(opt.style,el.style);
}
delete opt.style;
extend(opt,el);
if (parent){
parent.appendChild(el);
}
return el;
}
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}
</script>
</head>
<body>
<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
</body>
</html>
please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"< I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program. In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px. Please help me~~T_T Code: <?xml version='1.0' encoding='UTF-8'?><!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" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
First post on the forum... I'm brand new to Javascript and I'm teaching myself using the Headfirst HTML5 book. One of the exercises early in the book is asking me to create a musical playlist where I can add songs that will show up on the screen and also be added to the DOM. However, I'm not able to get it to work or see where my error lies. Any feed back would be great. Here's my code: Code: <!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta charset = "utf-8">
<script>
function init() {
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
window.onload = init;
}
function handleButtonClick() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
var li = document.createElement("li");
li.innerHTML= songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
alert ("Button was clicked!");
}
</script>
<link rel = "stylesheet" href="playlist.css">
</head>
<body>
<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>
Can't seem to delete.
|
|||||||