SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Javascript Genius Needed

    Can anyone help with the below problem ...

    document.write("<td><a href=clips/"+genericname+".mpg onMouseOver=document."+genericname+".height='75'; document."+genericname+".dynsrc='clips/"+genericname+"mpg'; onMouseOut=document."+genericname+".dynsrc='"+genericname+".jpg'><img src=logos/"+genericname+".jpg name="+genericname+" border=0></a></td>");

    This line is meant to be used in conjunction with a loop routine in <script> brackets within the main <body>. What it should do is display a file pictures and then play its mpg file on a mouseover, for a generic filename that can be changed. That i can do. The problem is within the line ...

    onMouseOver=document."+genericname+".height='75'; document."+genericname+".dynsrc='clips/"+genericname+"mpg';


    Here i want to play the mpg and keep its height at 75. The problem is that it doesn't work. I think that the two document strings should be surrounded by "...

    onMouseOver= " document."+genericname+".height='75'; document."+genericname+".dynsrc='clips/"+genericname+"mpg'; "

    However because i'm using the "+genericname+" command within the line, i can't use " to surround the two document strings. I've tried to do it as a function, but i can't get it to work as a generic function.

    Can anyone PLEASE help me with this?
    Last edited by froggers; Oct 22, 2002 at 14:57.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you are experiecing is a fairly common delimiting problem. Rules to obey when delimiting & escaping...

    1. If you start with ' end with '. If you start with " end with "
    2. Use the opposite of your delimeter in place of the other inside the delimeted area
    3. If a '2nd' level is needed, use your delimiting character, but properly escape it with the backslash
    4. Pick a single/double quote scheme that makes sense with the HTML

    Ok, with these im mind, lets look at your code. Following rules #1 & #4, we'll start with double quotes for our attribute value, in this case the onMouseOver event
    Code:
    onMouseOver= ""
    Ok, now let's stick the code in...
    Code:
    onMouseOver= "document."+genericname+".height='75'; document."+genericname+".dynsrc='clips/"+genericname+"mpg'; "
    Ugh, a mess. Let's clean it up following rule #2.
    Code:
    onMouseOver= "document.getElementById(genericname).height='75'; document.getElementById(genericname).dynsrc='clips/'+genericname+'mpg';"
    Tada! All done!

    As you can see, using the proper references (such as using document.getElementById) make it easier on us. Note: you will need to make sure the image acutally HAS the id attribute, and not just a name
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got the delimiter problem sorted. My appreciation goes out to beetle, i didn't realise that you could swap the order of " & '.

    However, Beetle has introduced me to the getElementById command, something i've never come across before. I've had a look on the internet for getElementById attributes and all are telling me to add the ID within the <img> command as follows...

    document.write('<td><a href=clips/'+g+h+' onMouseOver= "document.getElementById('+g+').height='75'; document.getElementById('+g+').dynsrc='clips/'+g+'mpeg';" onMouseOut=document.'+g+'.dynsrc="'+g+'.jpg"><img src=logos/'+g+'.jpg name='+g+' id="'+g+'" border=0></a></td>');

    (g is the variable that was genericname)

    But it' not working ... can anyone help???
    Last edited by froggers; Oct 22, 2002 at 14:57.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It breaks when you get here

    height='75';

    For your script, you have chosed the ' as your delimiter. Using them here causes the script to break from the string and look for concatenation which, of course, there is none which is why you get the error.

    This problem is rule #3 that I stated above (which I have yet to provide and example for, so here goes..)

    height=\'75\';

    As you can see from reading rule #3, I used the delimiting character chosen, and escaped it with the backslash. This tells the code engine to ignore the ' as a delimiter and treat it as a literal.

    That *should* do it.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Beetle, it's gone 1 in the morning here and i hadn't (and probably wouldn't have) spotted those mistakes. Now the jpg is showing again and i've got no 'error' message showing in the bottom bar.

    However, the mpg still isn't playing when i mouseover it.

    Is / ' the same as \ ' that might explain why it isn't working? i.e. =\'clips/'+g+'mpeg\'

    Or is it something to do with the getElementById ID tag?

    document.write('<td><a href=clips/'+g+h+' onMouseOver= "document.getElementById('+g+').height=\'75\'; document.getElementById('+g+').dynsrc=\'clips/'+g+'mpeg\';" onMouseOut=document.'+g+'.dynsrc="'+g+'.jpg"><img src=logos/'+g+'.jpg name='+g+' id="'+g+'" border=0></a></td>');

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this

    document.write('<td><a href="clips/'+g+h+'" onMouseOver="document.getElementById('+g+').height=\'75\'; document.getElementById('+g+').dynsrc="clips/'+g+'mpeg" onMouseOut=document.'+g+'.dynsrc="'+g+'.jpg"><img src="logos/'+g+'.jpg" name="'+g+'" id="'+g+'" border="0"></a></td>');
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah, it didn't work. But i appreciate what you have done for me. I've learn't tonight more than i would in months.

    Cheers.

    P.S. You're a genius!

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand. There is an inherent problem with trying to write so much HTML to the page with document.write.

    Check out this thread to see the difference between the HTML-as-a-string way of doing things, vs. the DOM way of doing things.

    Best of luck
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •