Javascript Changes Aren't Working.
free web hosting
Free Web Hosting > Computers & Tech > Programming > Scripting > JavaScript

Javascript Changes Aren't Working.

toby
Feb 24 2008, 05:27 PM
The link is where I got it from, the code is my attempt at changing it, which has the identical javascript, but it doesn't work. Can anyone fix it for me?

http://code.google.com/edu/client/samples/dhtmltest.html

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>example</title><style type="text/css">
body {font: 14px arial; color: #000066;}
#mytext {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }
</style>
<script type="text/javascript">
var texttop = 100;
var textleft = 400;
function vanish(flag) {
    var myObj = new getObj('myText');
    myObj.style.visibility = (flag) ? 'hidden' : 'visible'
}
function moveUpDown(amount) {
    var myObj = new getObj('myText');
    texttop += amount;
    myObj.style.top = texttop;
}
function moveLR(amount) {
    var myObj = new getObj('myText');
    textleft += amount;
    myObj.style.left = textleft;
}
function changeColor(color) {
    var myObj = new getObj('myText');
    myObj.style.color = color;
}
function changeStyle(style) {
    var myObj = new getObj('myText');
    myObj.style.fontStyle = style;
}
function getObj(name) {
    if (document.getElementById) {
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
    }
    else
        return;
}
</script>
</head>
<body>
<div id="mytext">change me!</div>
<ul>
<li><a class="page" href="java script:moveUpDown(40);">down</a></li>
<li><a class="page" href="java script:moveUpDown(-40);">up</a></li>
<li><a class="page" href="java script:moveLR(-40);">left</a></li>
<li><a class="page" href="java script:moveLR(+40);">right</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeColor('orange')">orange</a></li>
<li><a class="page" href="java script:changeColor('green')">green</a></li>
<li><a class="page" href="java script:changeColor('purple')">purple</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeStyle('italic')">italic</a></li>
<li><a class="page" href="java script:changeStyle('normal')">normal</a></li>
</ul>
<ul>
<li><a class="page" href="java script:vanish(1)">vanish!</a></li>
<li><a class="page" href="java script:vanish(0)">re-appear</a></li>
</ul>
</body>
</html>

 

 

 


Reply

TavoxPeru
Feb 24 2008, 08:28 PM
Well, one thing you must take in consideration is that if you define a div element with an ID you must use the same id name in your javascript code and in your CSS rules, in your case, you use mytext and myText, that's why it doesn't work. So, simply change:
CODE
#mytext {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }

To
CODE
#myText {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }

in your CSS code.

With that simple change your code almost works because if you test it with Firefox the moveUpDown and the moveLR functions do not work but if you test it with Internet Explorer these functions work fine. However, if you remove the DOCTYPE declaration and replace the html tag with the simplest <HTML> it works in both browsers.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

To
CODE
<html>

You can view it in action at DHTML Example.

Best regards,

 

 

 


Reply

toby
Feb 24 2008, 09:28 PM
Thank you. In Opera, if I change the doctype and html to an empty <html>, the text size changes a bit (quirks mode?), but it still doesn't work. With the doctype in, IE7 accepts it after the CSS change.

So its just Opera's quirks that break some js? It's a program bug?

Reply

mastercomputers
Feb 24 2008, 11:20 PM
This is probably not working because you've thrown the browser into quirks mode by not specifying the correct DTD.


It should be:
CODE
<!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">


I know this doctype declaration is correct as I only write in XHTML 1.1.

You could definitely clean up your Javascript a bit by making the element 'myText' a global variable and altering it by calling the functions, instead of continuing to make a new variable of it, each function call, eventually you'll run out of memory this way if too many requests are made.

Cheers,

MC

Reply

TavoxPeru
Feb 25 2008, 06:38 AM
toby: You're welcome, but i can't answer your questions and also i can't test the code with Opera right now because last friday i uninstall it, tomorrow when i reinstall Opera i will check it.

MC: You are right, that's the correct XHTML doctype declaration.

So what i do is to follow MC's instructions and change the code again, the new code that works perfectly with Internet Explorer 6 and Firefox 2.0.0.12 is the following:
CODE
<!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">
<head>
<title>DHTML Example</title>
<style type="text/css">
body {font: 14px arial; color: #000066;}
#myText {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }
</style>
&lt;script type="text/javascript">
var texttop = 100;
var textleft = 400;
//var myObj = new getObj('myText'); here don't work because the div don't exists on the dom.
function vanish(flag) {
    myObj.style.visibility = (flag) ? 'hidden' : 'visible';
}
function moveUpDown(amount) {
    texttop += amount;
    myObj.style.top = texttop+"px";
}
function moveLR(amount) {
    textleft += amount;
    myObj.style.left = textleft+"px";
}
function changeColor(color) {
    myObj.style.color = color;
}
function changeStyle(style) {
    myObj.style.fontStyle = style;
}
function getObj(name) {
    if (document.getElementById) {
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
    }
    else return;
}
</script>
</head>
<body>
<div id="myText">change me!</div>
<ul>
<li><a class="page" href="java script:moveUpDown(40);">down</a></li>
<li><a class="page" href="java script:moveUpDown(-40);">up</a></li>
<li><a class="page" href="java script:moveLR(-40);">left</a></li>
<li><a class="page" href="java script:moveLR(+40);">right</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeColor('orange')">orange</a></li>
<li><a class="page" href="java script:changeColor('green')">green</a></li>
<li><a class="page" href="java script:changeColor('purple')">purple</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeStyle('italic')">italic</a></li>
<li><a class="page" href="java script:changeStyle('normal')">normal</a></li>
</ul>
<ul>
<li><a class="page" href="java script:vanish(1)">vanish!</a></li>
<li><a class="page" href="java script:vanish(0)">re-appear</a></li>
</ul>
</body>
&lt;script type="text/javascript">
var myObj = new getObj('myText');
</script>
</html>

Best regards,

Reply

toby
Feb 25 2008, 09:35 AM
Thank you, I'm also used to Xhtml1.1, it's overlooked when I'm not paying enough attention.

Reply

TavoxPeru
Feb 26 2008, 01:35 AM
toby i jUst reinstall Opera today and the first thing i do is testing the code and it works perfect with Opera too.

Best regards,

Reply

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : javascript, arent, working,

  1. Javascript Help Needed : Alert(z) Works Fine But Document.write Not
    please (2)
  2. Settimeout() & Focus() Not Working With Firefox
    (1)
    Hi Friends, I am new to javascript. Just a few days back I had encountered a problem where focus()
    doesn't work well with FF, and Kravvitz showed me a workaround by using setTimeout(); Now I
    have a similar problem: 1. I open a new blank window using 'window.open()' 2. I alert the
    user that I am going to add some HTML to it. 3. I add the HTML to that new window, and 4. I bring
    focus to that new window. It works beautifully in IE7 but not in FF. var newWindow =
    window.open("", "myWindow", "width=300, height=300"); alert("Going to add html"); newWindow.docum....
  3. Fun With Javascript And Forms
    Lets have some fun with javascript! (2)
    I will post here every week with new and exciting things to do in javascript! After i finish 10
    of them , ill do Ajax(real-time) - 1.Alerting and documenting Forms Ever seen those dynamic sites
    where if you hove your mouse or type something bad..etc , it popups up or dynamically gets written
    onto the page? Well i am here to teach or rather help with all that stuff! Step 1:Get notepad
    out and make a form CODE <form name='test'> <input type='text'
    name='field1'> Text displays here: <div id='r'> &....
  4. Include Function For Javascript
    (7)
    I've been working on an include function for javascript. It works just fine in Firefox and IE,
    but for some reason, it doesn't result in the loading of the scripts for Safari. The code is as
    follows: CODE function include(url) {   // Include Guard   var scripts =
    document.getElementsByTagName("script");   for (var index = 0; index <
    scripts.length; ++index) {     if (scripts.src == url) {       return;     }   }      //
    Inclusion   var head = document.getElementsByTagName("head").item(0);   ....
  5. Problem With Javascript Alert();
    (9)
    Hi Everyone, i just need to know that this javascript code is formatted correctly: (A piece of
    code that it's written BESIDE an HTML code.) CODE <body onLoad="alert('My
    Text Here');">My body contents</body> |||Always keeps telling me that
    this was incorrect. ....
  6. Javascript: How Do I Create Embedded Pop-up Windows?
    (7)
    The post title summarises my query - how do I create pop-up windows that are embedded inside a page?
    Broadly, there are two kinds of JavaScript pop-ups.. one is that ultra annoying one, which pops
    out a new instance of a browser window and displays something there (usually an ad) - made infamous
    by all the warez and porn sites. Second one, which has come to be quite well-known of late is the
    kind you see in recent versions of WordPress (in the Visual Editor) as well as LightBox based
    galleries. Here a small window (or rather a div) pops-up embedded in the middle of t....
  7. Javascript Question
    Vertical Scroll Box (4)
    Alright well I've been working and modifying this template for about a year now I think and
    I've started used JavaScript in it (bad to use templates I know, but I can't design them
    x_x). So I'm trying to put a vertical scroll box in my side events panel to save space, but it
    won't recognize the script. It takes the horizontal one I have as you can see if you look at
    the site, but not the vertical. Actually it won't take anything in that little panel. So my
    question really is, what could cause a javascript code to not work on a certain webpage ....
  8. Add Text To Textarea
    I suppose it uses DOM and JavaScript?? (6)
    I am working on a web "application" thing that allows you to click a button to add text to a
    textarea. Similar to this forum when you click the BOLD button and it puts in {b}{/b} with the
    square brackets. I want a similar function like that. Also, I want it to add wherever the cursor is,
    not at the end. And after adding the thing, the cursor should be in between the tag or whatever that
    was added. All the extra stuff are extra priorities. For now I would like to get something that
    inserts text on click. The thing I came up with is: HTML html > head > <script ....
  9. Problems With Dynamically Loading Javascript
    As well as dynamically inserting HTML (2)
    Hello, I have started to try to create a JavaScript application (or rather, AJAX, but the
    JavaScript is the part I'm having trouble with). I have come across a roadblock, though. I try
    to load an external JavaScript file by editing the innerHTML of a div tag to contain <script
    src="URL" type="text/javascript"> (with a real URL). The problem is that it is not loading. I have
    used FireBug to check the dynamic HTML status, I get the following (with code removed): CODE
    <html> <head/> <body> <div id="status"/> <div id=....
  10. I Need Help With Javascript.
    help plz (7)
    Well, I want to learn to code in JavaScript, but when I try to view the page in Firefox, it
    dosen't work. Can anyone tell me why its not working? Do i need to use a different browser?....
  11. JavaScript Off Redirect Script
    How to redirect a browser when Javascrip (2)
    Hi, here's a trick that will redirect a browser when JavaScript is turned off. Why not redirect
    the ones that have JavaScript? It's because less than 10% of browsers have JavaScript turned
    off; therefore, is better to redirect less than 10% of visitors than over 90%. Simply paste this
    code into the HEAD section of your HTML document. CODE <script
    type="text/javascript"> <!-- /* Created by: Will Bontrager ::
    http://www.willmaster.com/ */ <noscript> <meta http-equiv="refresh"
    content="0; URL=ht....
  12. JavaScript Frames & Querystring
    (4)
    Hi, I actually want to create a HTML page which has the capablity of reading a QueryString
    (x.html?querystring=test) and then using a hidden frame pass on the data to an ASP Script on another
    server. For obtaining the QueryString i use the following:- CODE <script> function
    getQueryVariable(variable) {   var query = window.location.search.substring(1);
      var vars = query.split("&");   for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");     if (pair[0] == variabl....
  13. Vertical Marquee Using JavaScript
    by The JavaScript Source (0)
    Hi, i find this script and hope that will be useful for somebody. Text scrolls from bottom to top,
    pauses, then scrolls up and out of view. A link can be added, opening in a new window. Configuration
    is simple. First copy the following code in a new file and name it vertical.js CODE /* This
    script and many more are available free online at The JavaScript Source ::
    http://javascript.internet.com Created by: Mike Hudson ::
    http://www.afrozeus.com */ /* To change the values in the setupLinks function below. You will
    notice there are two arr....
  14. Create And Import JavaScript Modules For A Large Script
    (2)
    I have one main script which defines an object. I then have several other script files that define
    functions for that object. I have tried using the following setup to import the functions: HTML
    code snippet: <script type="text/javascript" src="/foo/mainbar.js"> <script
    type="text/javascript" src="/foo/modulebar.js"> Javascript code snippet: import
    Object.functionName; This works fine for Mozilla Firefox, but causes an error in Internet Explorer
    which causes the object to be undefined. I would like to know how better to import the functions
    into the m....
  15. Ever Needs To Find Out A Table Height Or With With JavaScript
    Well stop looking, here is the answer (CSS and JS) (2)
    Welcome everybody to this litle tutorial. by v.DragonEyE.n09 Introduction: Using
    javascript you can find the height and width of a table, cell, div, image, etc.. the more simple way
    is to ask for this... QUOTE id= "myElement" border= "0" cellpadding=
    "0" cellspacing= "0" style= " height : 300px ; width
    : 450px ; " > some
    fake text and images for the example some fak....
  16. JavaScript: Hide And Show Any Element With CSS
    From the simple way to the more advanced way (Javascript & CSS) (5)
    Welcome everyone, this is my first post. The first thing you need to know is... CSS
    has two special attributes, the first one is " display " and the second is " visibility ". The
    difference between these two goes like this. " display ": has many properties or values, but the
    ones we need are "none" and "block". "none" is like a hide value, and "block" is like show. If you
    use the "none" value you will totally hide what ever html tag you have applied this css style. If
    you use "block" you will see the html tag and it's content. very simple. " visibi....
  17. Javascript: Browser Detection Script
    Detect your visitors browser (0)
    If you want to detect your visitors browser, sebd them a message and redirect them use this script:
    CODE <script language="JavaScript"> <!-- var
    browserName=navigator.appName; if (browserName=="Netscape") { alert("Hi
    Netscape user!") window.location = "netscape.html" } else { if
    (browserName=="Microsoft Internet Explorer") {   alert("Hi Microsoft
    Internet Exlorer User!");   window.location = "MIE.html" }   else   {   
    alert("What are you....
  18. Calling Of Functions Between Mulitple External Javascript Files
    How do I use an external script to call a function from another script (2)
    I have a page that requires many Javascript functions. In order to make the coding easier to read
    and edit, I decided to seperate them into 3 Javascript files. Two files will each do a specific job.
    One file will have the shared functions that both other 2 files will need to use. They are all
    linked to a page using three <script> tags. The difficult part is that after the page calls a
    function in one of the special code files, that Javascript file will need to call the functions
    located in the common Javascript file. The file will call several functions, and it will....
  19. JavaScript: Simple Dropdown Menu
    Simple Dropdown Menu (1)
    This simple dropdown menu is flexible enough to be used in various ways. It can be placed and
    modified in the webpage as is.....
  20. Javascript: Simple Slidedown Menu
    Simple Slidedown Menu (2)
    This is a simple slidedown from the top menu. It can be placed on the Webpage as is. To modify it
    to a slideout menu, simply change the style and postion of the menu.....
  21. Downloads With Javascript?
    (7)
    Hi! I want to let people download .mp3's. But i don't want them tio have to right-click
    and "Save as". Is there a way with Java Script? Cheers!' Jens....
  22. Dynamicdrive: Good Site For JavaScript Codes
    (5)
    If anyone needs Javascript codes or similar items for their web page a great place to go is
    http://www.dynamicdrive.com . They have hundreds of codes that are good. I would reccomend them for
    all your javascript needs.....
  23. Unobtrusive Javascript Image Rollovers
    really cool & useful.. (0)
    i find this really cool..gr8 piece of code. image rollovers Create image rollovers for your
    navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to
    implement, even for beginners, and works across all browsers. Degrades nicely for visitors with
    JavaScript turned off. CODE <!-- Paste this code into the CSS section of your HTML
    document  --> img {border: none;} ul {list-style-type:none;} ul li
    {display:inline;} <!-- Paste this code into an external JavaScript file named:
    rollover.js  --....
  24. Javascript: Text To Texbox And Back To Text
    (2)
    i need some help i want to create a thing where when some one double clicks a certain text it
    changes into a texbox where they can edit the text and the they double click and it changes into the
    test they just typed in. I have found this function in javascript that does some of it but i needs
    to be simplified CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html> <head> <title>Span to Text Box - Demo - DOM</title> <scr....
  25. Best Way To Learn Javascript
    I would very much like to know. (9)
    Well, I know HTML, I know CSS, so the next step is learning Javascript. I have heard that it is sort
    of an easier way to do things than PHP, though I would very much like to learn PHP as well. So, I
    thought that if I learnt Javascript, I might find it easier to learn PHP when I get to that point.
    The problem though is actually finding out the best way to learn Javascript. I have been to
    websites and things, but every time I read through the tutorials and articles and things, I
    didn't learn anything. It when in one ear and out the other, you could say. So, that is wh....
  26. Need Help With Javascript Form Validation
    (2)
    Hello, I'm wondering if someone can help me with Javascript. I have created a form and the page
    in which the information submitted will be displayed (I will call these pages the form page and the
    submit page for easier reference). I want to know how to verify if a form is filled out correctly in
    the following manner: 1. Instead of placing the JavaScript form validation code on the form page, I
    want to add it on the submit page. 2. If there is an error from the filling out the form (i.e. the
    text field for "First Name:" was not entered), I want to display an error....
  27. Javascript: Disable Mouse Right-click In Browser
    (16)
    just copy and paste this on to your html site in the head tag CODE <script
    language="JavaScript"> <!-- /* */ var message="Hey YOU!\nStop
    Stealing my pictures or\nFACE THE PUNISHMENT!" function click(e) { if
    (document.all) { if (event.button == 2) { alert(message); return false; } }
    if (document.layers) { if (e.which == 3) { alert(message); return false; } }
    } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmouse....
  28. javascript vs java
    (12)
    in my opinion javascript is better then java becasue java requires more programing experecense
    then javascript and i think to that javascript is more reliable then java in some ways....
  29. How To Create A Popup Window With Javascript?
    (19)
    Please help me! I want to in popup massage suggest to visitors of my site to make my site their
    home page . Please note that I have some script code that visitors most click on a text to make my
    site their home page . Every one that can help me please send an email to soleimanian@noavar.com....
  30. Getting Screen Resolution using Javascript.
    (8)
    Is it possible to get the screen resolution of the users moniter using only javascript. No other
    external stuff, just pure javascript. I guess most of the people using JAVA for this. I also got
    some scripts regarding this which used SCREEN.WIDTH function or something, but they did not seem to
    work out. Any possible solutions. BTW, is it possible to get the resolution using PHP ( I guess it
    is not ) .......


      31. Looking for javascript, arent, working,

Searching Video's for javascript, arent, working,
Similar
Javascript
Help Needed
: Alert(z)
Works Fine
But
Document.wri
te Not -
please
Settimeout()
&
Focus() Not
Working With
Firefox
Fun With
Javascript
And Forms -
Lets have
some fun
with
javascript&#
33;
Include
Function For
Javascript
Problem With
Javascript
Alert();
Javascript:
How Do I
Create
Embedded
Pop-up
Windows?
Javascript
Question -
Vertical
Scroll Box
Add Text To
Textarea - I
suppose it
uses DOM and
JavaScript??
Problems
With
Dynamically
Loading
Javascript -
As well as
dynamically
inserting
HTML
I Need Help
With
Javascript.
- help plz
JavaScript
Off Redirect
Script - How
to redirect
a browser
when
Javascrip
JavaScript
Frames &
Querystring
Vertical
Marquee
Using
JavaScript -
by The
JavaScript
Source
Create And
Import
JavaScript
Modules For
A Large
Script
Ever Needs
To Find Out
A Table
Height Or
With With
JavaScript -
Well stop
looking,
here is the
answer (CSS
and JS)
JavaScript:
Hide And
Show Any
Element With
CSS - From
the simple
way to the
more
advanced way
(Javascript
& CSS)
Javascript:
Browser
Detection
Script -
Detect your
visitors
browser
Calling Of
Functions
Between
Mulitple
External
Javascript
Files - How
do I use an
external
script to
call a
function
from another
script
JavaScript:
Simple
Dropdown
Menu -
Simple
Dropdown
Menu
Javascript:
Simple
Slidedown
Menu -
Simple
Slidedown
Menu
Downloads
With
Javascript?
Dynamicdrive
: Good Site
For
JavaScript
Codes
Unobtrusive
Javascript
Image
Rollovers -
really cool
&
useful..
Javascript:
Text To
Texbox And
Back To Text
Best Way To
Learn
Javascript -
I would very
much like to
know.
Need Help
With
Javascript
Form
Validation
Javascript:
Disable
Mouse
Right-click
In Browser
javascript
vs java
How To
Create A
Popup Window
With
Javascript?
Getting
Screen
Resolution
using
Javascript.
advertisement




Javascript Changes Aren't Working.



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!" 		Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE