SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Rollovers work with document.writeln?

    Im trying to include my nav bar via a .js file which has document.writeln lines for the menu.

    I can get the .js file to work in my .html files when using everything but javascript. I can insert images, text, tables, anything, but whenever I enter in my JS rollover code that is commonly used and works for me when embedded right into the .html doesnt work when used in the .js file.

    This all makes me believe that I cant have javascript written into my html files via a .js file. Is this true?

    If my work need to be posted just say so, Im new to this and have been working on it all night and go fed up with it and deleted my working files, I can recreate them easily though.

    Thanks for your help and making this the best webmasters forum out there.


  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you can have JavaScript wrtie into your HTML files via a .js file, and yes it would be useful if you could post an example of what is going on so we can try to fix it.
    Wavelan

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was quick, ok, here goes...


    My menu.js file
    Code:
    <!--
    document.writeln('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"><TR><TD><IMG SRC="images/topbar.jpg" WIDTH=776 HEIGHT=36 BORDER=0 
    ALT="SonicOnTheWeb.com"><IMG SRC="images/PC.gif" WIDTH=24 HEIGHT=36 BORDER=0 ALT="Sonic I Dual Processor PC Build Complete"><BR><A HREF="index.html" 
    onmouseover="a.src="images/home2.jpg"
     window.status='Home'; return true;"
      onmouseout="a.src="images/home1.jpg"; return true;"><img
       src="images/home1.jpg" width=34 height=14 name="a" border=0 alt="Home"></A></TD></TR></TABLE>');
    //-->
    Once the <A HREF> and the code past it is entered nothing is displayed from menu.js, before the entering of that info the two img src's before it display perfectly. Ive tried taking out unecessary spaces, splitting up the code and putting more document.writeIn's but nothing works. I dont think splitting up the code lines are good though, because in a regular html file keeping spaces out from between the lines puts all of the images right up against each other, but Im sure you knew that.

    See anything?

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.status=\'Home\';

    Try escaping the single quotes with a backslash, as I have done above, and let me know if that works.
    Wavelan

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!--
    document.writeln('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"><TR><TD><IMG SRC="images/topbar.jpg" WIDTH=776 HEIGHT=36 BORDER=0 
    ALT="SonicOnTheWeb.com"><IMG SRC="images/PC.gif" WIDTH=24 HEIGHT=36 BORDER=0 ALT="Sonic I Dual Processor PC Build Complete"><BR><A HREF="index.html" 
    onmouseover="a.src="images/home2.jpg"
    window.status=\'Home\'; return true;"
    onmouseout="a.src=""\'images/home1.jpg\'; return true;"><img
    src="images/home1.jpg" width=34 height=14 name="a" border=0 alt="Home"></A></TD></TR></TABLE>');
    //-->
    Didnt work.

    Dont know if this gives you any insight as to why I might be messing up, but this is where I heard about document.writeIn and where I learned it from.

    http://www.devwebpro.com/2001/0928.html

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This produces the look I want but without the rollover, the backslashes you suggested are included.

    Code:
    <!--
    document.writeln('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">');
    document.writeln('<TR>');
    document.writeln('<TD>');
    document.writeln('<IMG SRC="images/topbar.jpg" WIDTH=776 HEIGHT=36 BORDER=0 ALT="SonicOnTheWeb.com"><IMG SRC="images/PC.gif" WIDTH=24 HEIGHT=36 BORDER=0 
    ALT="Sonic I Dual Processor PC Build Complete"><BR><A HREF="index.html" onmouseover="a.src=""\'images/home2.jpg\' window.status=\'Home\'; return true;" 
    onmouseout="a.src=""\'images/home1.jpg\'; return true;"><img src="images/home1.jpg" width=34 height=14 name="a" border=0 alt="Home">');
    document.writeln('</TD>');
    document.writeln('</TR>');
    document.writeln('</TABLE>');
    //-->
    But the change to home2.jpg isnt happening.

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe try using document.write(); instead of document.writeIn();
    Wavelan

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, displays the same thing as the last bit of code I posted in post #6.

    Is document.write() a more recent version of the writeIn function? Just wondering on the side. Glad to see it works too, less text, smaller file size.

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe it is newer, but I don't really know.

    From what I know about document.writeIn() is that it makes a new line after it is finished and document.write() does not.

    For example:

    Code:
    document.write(A);
    document.write(B);
    document.write(C);
     
    Will produce:
     
    ABC
     
    document.writeIn(A);
    document.writeIn(B);
    document.writeIn(C);
     
    will produce:
    
    A
    B
    C
    At least that is how I understand it, if anyone else knows different feel free to correct me.
    Wavelan

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <!--
    var a = '';
    a += '<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">';
    a += '<TR>';
    a += '<TD>'
    a += '<IMG SRC="images/topbar.jpg" WIDTH=776 HEIGHT=36 BORDER=0 ALT="SonicOnTheWeb.com"><IMG SRC="images/PC.gif" WIDTH=24 HEIGHT=36 BORDER=0 ALT="Sonic I Dual Processor PC Build Complete"><BR><A HREF="index.html" onmouseover="a.src=""\'images/home2.jpg\' window.status=\'Home\'; return true;" onmouseout="a.src=""\'images/home1.jpg\'; return true;"><img src="images/home1.jpg" width="34" height="14" name="a" border=0 alt="Home">';
    a += '</TD>';
    a += '</TR>';
    a += '</TABLE>';
    document.write(a);
    //-->
    Wavelan

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. Still the same result. Does everything Id like it to do but change on rollover.

    I really appreciate your help. Personally Ive got a class in 5 hours and need to hit the sack. Thanks again.

  12. #12
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome, I am also going to go to bed and I will try to work on this again later and hopefully we can resolve this problem.

    Good night
    Wavelan

  13. #13
    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)
    Wavlelan, well, you misread that page you learned document.writeIn() from, because it's not writeIn() at all, it's writeln() (a lowercase l, not an uppercase I -- sonic has it right in his post)

    The two are mostly the same, but writeln will create a linebreak in the HTML output. So, realistically, there's no difference or benefit to using one over the other.

    You rollover looks mostly okay, but you are using IE-only references in your rollover code.

    Forget about putting the rollover on the link. that's only for support of really old browsers -- go ahead and put the rollover code right on the image -- that way you can get a reference easy
    Code:
    document.write('<img src="images/home1.gif" onmousover="this.src = \'images/home2.gif\';" onmouseout="this.src = \'images/home1.gif\';">');
    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




  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beetle, I tried your code alone outside the .js file and the rollover doesnt work. Am I supposed to change "this.src" to something different for my purposes? Dont know if I did it right, but even in the regular .html document what you provided didnt work for me. And when I include it in my .js file nothing from the .js file displays.

    BTW, my family has a beach house down in Matagorda, you live in a fairly peaceful area.

  15. #15
    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)
    Show me what you did.
    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




  16. #16
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wavlelan, well, you misread that page you learned document.writeIn() from, because it's not writeIn() at all, it's writeln() (a lowercase l, not an uppercase I -- sonic has it right in his post)
    Thanks for clearing that up beetle

    I only use write() and as you say there isn't much of a difference.
    Wavelan

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! I think it just took some cleaning up on my rollover code.
    Code:
    <!--
    document.writeln('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">');
    document.writeln('<TR>');
    document.writeln('<TD>');
    document.writeln('<IMG SRC="images/topbar.jpg" WIDTH=776 HEIGHT=36 BORDER=0 ALT="SonicOnTheWeb.com"><IMG SRC="images/PC.gif" WIDTH=24 HEIGHT=36 BORDER=0 
    ALT="Sonic I Dual Processor PC Build Complete"><BR>');
    document.writeln('<A HREF="home.html" OnMouseOver= "image1.src=""\'images/home2.jpg\'" OnMouseOut="image1.src=""\'images/home1.jpg\'">');document.writeln('<IMG 
    SRC="images/home1.jpg" NAME="image1" BORDER="0" HEIGHT="14" WIDTH="34" ALT="Home"></A><A HREF="sonic.html" OnMouseOver= "image2.src=""\'images/sonic2.jpg\'" 
    OnMouseOut="image2.src=""\'images/sonic1.jpg\'"><IMG SRC="images/sonic1.jpg" NAME="image2" BORDER="0" HEIGHT="14" WIDTH="38" ALT="Home"></A><A 
    HREF="autos.html" OnMouseOver= "image3.src=""\'images/autos2.jpg\'" OnMouseOut="image3.src=""\'images/autos1.jpg\'"><IMG SRC="images/autos1.jpg" NAME="image3" 
    BORDER="0" HEIGHT="14" WIDTH="38" ALT="Home"></A><A HREF="links.html" OnMouseOver= "image4.src=""\'images/links2.jpg\'" 
    OnMouseOut="image4.src=""\'images/links1.jpg\'"><IMG SRC="images/links1.jpg" NAME="image4" BORDER="0" HEIGHT="14" WIDTH="37" ALT="Home"></A><A 
    HREF="<A href="mailto:sonic@sonicontheweb.com">mailto:sonic@sonicontheweb.com" OnMouseOver= "image5.src=""\'images/contact2.jpg\'" OnMouseOut="image5.src=""\'images/contact1.jpg\'"><IMG 
    SRC="images/contact1.jpg" NAME="image5" BORDER="0" HEIGHT="14" WIDTH="51" ALT="Home"></A><IMG SRC="images/update.jpg" WIDTH=603 HEIGHT=14 BORDER=0 ALT="Check 
    back soon for more updates!"></TD></TR></TABLE>');
    //-->
    It displays perfectly! This is awesome, Ive been doing more and more work on different websites with many many pages and I dont have the time to learn any database code so I HAD to find a way to update many pages at once, and this is it! Im glad the rollover works with it. Now I move onto seeing if a drop down menu can be incorporated using a .js file. [img]images/smilies/smile.gif[/img]

    Thanks so much for everything. [img]images/smilies/smile.gif[/img]

    EDIT: Oops, need to change my ALT tags for each image though.

  18. #18
    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)
    Just so long as you know that the links in javascript-generated HTML cannot be spidered by search engines. If this is the main navigation system for your page, let it be known that you cripple the spiders' best avenue for traversing your site.
    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




  19. #19
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Fort Worth, TX
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Just so long as you know that the links in javascript-generated HTML cannot be spidered by search engines. If this is the main navigation system for your page, let it be known that you cripple the spiders' best avenue for traversing your site.
    There's always a downside to everything eh?

    So are you telling me it's possible that a search engine may find my .js file and try to point the search engine user to that file? Or are you saying that the content within the .js file isnt searchable and wont be recognized by search engines? Or do you mean that the search engine will simple become confused when the html document it is searching comes upon the script pointing to the .js file, which in turn discontinues the search on that page?

    The content of my menu doesnt contain any text, only images, so if its the second question I asked then I dont think Im losing anything since its not like a search engine will turn up my page because of a image anyway.

    Well, once again I reveal my ignorance in all of this and I appreciate your help and comments.

  20. #20
    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)
    Search engines won't crawl JS files or JS content looking for links. And it's not the text inside the link that's important (although it does help) -- it's the href itself. Picture this -- your homepage has nothing on it but this javascript menu. The googlebot comes crawling by and finds your domain. It sees your HTML, but doesn't find any links. Google just indexed your site as a one-page show. It doesn't matter how many pages you really have, if the spiders can't find them via the HTML, they might as well not be there as far as the search engine is concerned.

    So, it doesn't point the user to your JS, nor does it become confused by JS, it just simply skips it and relies completely on what it finds in the native HTML. Remember, a search-engine spider as a user-agent is basically a wussy text-reading browser, with no javascript or CSS support -- all it sees is your HTML.

    So, what can you do?
    • Live with this fact
    • Provide other links in your HTML (sometimes possible, sometimes not, you still may miss a page or two)
    • Don't use JS for your menu
    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




  21. #21
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Search engines won't crawl JS files or JS content looking for links. And it's not the text inside the link that's important (although it does help) -- it's the href itself. Picture this -- your homepage has nothing on it but this javascript menu. The googlebot comes crawling by and finds your domain. It sees your HTML, but doesn't find any links. Google just indexed your site as a one-page show. It doesn't matter how many pages you really have, if the spiders can't find them via the HTML, they might as well not be there as far as the search engine is concerned.

    So, it doesn't point the user to your JS, nor does it become confused by JS, it just simply skips it and relies completely on what it finds in the native HTML. Remember, a search-engine spider as a user-agent is basically a wussy text-reading browser, with no javascript or CSS support -- all it sees is your HTML.

    So, what can you do?
    • Live with this fact
    • Provide other links in your HTML (sometimes possible, sometimes not, you still may miss a page or two)
    • Don't use JS for your menu
    Best of luck [img]images/smilies/biggrin.gif[/img]
    Thanks beetle, this is one of the many pitfalls that people tend to do with javascript. Usuability is KEY to any successfull website and by removing usuability you end up with people turning away or not even finding your website.

    Use hyperlinks, and not the "window.location.href" redirect method to force redirection. If you are using this method you have obviously taken something away from users with javascript disabled, that is they are stuck on your homepage. Thus finding your site inaccessable, so whats there first action "HIT THE X" .

    This does not mean dont use JS for your menus, just think if your using the location method, your sites going to lose popularity not only from the people that have managed to find your site, but also the search engines. So first thing to do is avoid this...

    Code:
    <a href="javascript:func();" ...>
    use this instead...
    Code:
    <a href="#" onclick="func();" ...>

    Basically, javascript CAN be used to produce some cool effects for navigation, however you have to strictly assess whether it is appropriate and not causing an obstacle for the user at hand.

  22. #22
    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)
    Right. With the capabilities of JS and CSS today, it's completely possible to do whacky stuff to existing HTML. A basic example is my links page. It's a regular UL tree -- just look in the source and you can see it. No JS? No CSS? No problem! (okay, now I sound like a commercial) But seriously -- HTML 1st, fanciness 2nd.

    One of the coolest pieces of script-modified HTML I've ever seen is the column setup for the articles over at 13th Parallel. It'a all regular HTML, but the scripting breaks it up into columns on page load. Again, no JS or CSS and you can still see the content.

    Something to think about, for sure.
    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
  •