SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist webfreebies's Avatar
    Join Date
    Apr 2003
    Location
    NYC
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    *Groan*- Netscape woes and JS

    I have done something that works perfectly in IE, but doesn't work at all in Netscape.

    I have a page of thumbnail images (Page A). When each thumbnail is clicked on, a small 300x 300 pop up (Page B) appears with a larger "preview." The preview image that appears in the small pop-up is dynamically created with the onClick/ image swapping method. (In other words, when a user clicks on a thumbnail on Page A, it swaps a transparent gif I have placed on Page B with the preview image).

    Now I've tested this on IE and it works perfectly. But in Netscape, not only does the image swap not occur (no preview image appears), but the height and width attributes I've designated for the pop up are ignored (the pop up is full screen instead of 300x300).

    What gives?? (Any help in this matter would be greatly appreciated.)

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We don't stand a chance here unless we can see the code (or the page in action)

  3. #3
    SitePoint Evangelist webfreebies's Avatar
    Join Date
    Apr 2003
    Location
    NYC
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops-- sorry about that. Will try and get a live version up ASAP. (Right now it's currently all on my hard drive.)

  4. #4
    SitePoint Evangelist webfreebies's Avatar
    Join Date
    Apr 2003
    Location
    NYC
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *Double groan*

    Couldn't get the stuff up live, so I will have to post the code/ more detailed explanation.

    (I figured out why the height/width attributes weren't working in Netscape; I forgot to add a comma between "height=300" and "width=300" in the window.open code.)

    I guess with my other problem, what's confusing me is how to get one window to refer to and change an image in another window. You see, I have a "main page" of thumbnails that when each item is clicked, creates a 300x300 pop-up and dynamically changes an image in this same new 2nd window. I tried doing it through the image swapping method, like so:

    In the head tag of the main window of thumbnails:
    <script language="javascript">
    function opener()
    {
    var newwin=window.open("blank.html,""yadda, yadda, yadda...")
    }
    </script>

    Then in each href tag which I want to open the new window:
    <a href="#" onClick="opener();newwin.document.image.src='image#1.gif";>thumbnailgraphic</a>.

    <a href="#" onClick="opener();newwin.document.image.src='image#2.gif";>thumbnailgraphic</a>.

    etc...

    Doesn't work in Netscape. (The image doesn't show up in the new window.) I think it has something to do with not setting up the variables for the new window correctly??

    I hope I'm making sense!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function opener()
    {
    var newwin=window.open("blank.html,""yadda, yadda, yadda..." )
    }
    The variable newwin only has function scope, because it is declared with 'var' inside a function. newwin needs to be global:
    Code:
    var newwin = null;
    function opener()
    {
      newwin=window.open("blank.html,""yadda, yadda, yadda..." )
    }

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we see the HTML file being loaded in the new window, too?
    Assuming that you have something like this in the new window:
    HTML Code:
    ...
    <img src="" id="image">
    ...
    I think you would need to change this:
    HTML Code:
    <a href="#" 
    onClick="opener();newwin.document.image.src='image#1.gif";>
    thumbnailgraphic</a>
    to something like this:
    HTML Code:
    <a href="#" 
    onClick="opener();newwin.document.getElementById('image').src='image#1.gif';">
    thumbnailgraphic</a>
    I should also point out that the "#" character is not valid in a filename in a URL, and should be replaced with "%23" (assuming that's not just a sample value inserted for demonstration purposes)

  7. #7
    SitePoint Evangelist webfreebies's Avatar
    Join Date
    Apr 2003
    Location
    NYC
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, okay, guys! Thanks for your help.

    Removed "var." So now I have:

    function opener()
    {newwin=window.open ('../preview.html','newwin', 'height=380, width=300');}
    Blufive, yes, the 'hash' was merely for demo purposes. In the html page of the pop up, I have:

    <img src="" name="preview">
    Which is why I had this in the href tag of the main page:

    onClick="opener();newwin.document.preview .src='nyc/times_jumbobl_preview.jpg';"
    When I do this, I get an error in Netscape that says "newwin.document.preview.src" is not an object. So I suppose I would have to change a href ="#" name=preview to id=preview, then change

    onClick="opener();newwin.document.preview .src='nyc/times_jumbobl_preview.jpg';"
    to

    onClick="opener();newwin.document.getElementById('preview').src='nyc/times_jumbobl_preview.jpg';"
    Okay, I'll try it!

  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)
    Why not this?
    HTML Code:
    function opener( imgPath )
    {
    	var newwin = window.open( "blank.html", "yadda", "yadda, yadda..." );
    	newwin.d[color=#000000]ocument.getElementById( 'preview' ).src = imgPath;[/color]
    	return false;
    [font=Courier][font=Verdana]}[/font] [/font]
    
    [font=Courier]...[/font]
    
    <a href="image1.gif" onclick="return opener(this.href);">link</a>
    You should always try to let your function(s) handle as much repeatable code as possible -- it must makes life easier!
    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




  9. #9
    SitePoint Evangelist webfreebies's Avatar
    Join Date
    Apr 2003
    Location
    NYC
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Beetle! I will try that as well. (I was wondering how to condense the code like that so I wouldn't have to keep writing it. Just didn't know how!)

    Thanks, everyone else, for your help.


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
  •