SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    (newbie) Two windows interacting

    I'm new to javascript so this may be a dumb question.

    I have two windows, one, the 'main' window which contains a blog entry, and a 'child' window that contains item in an ordered list. Each item A-Z has a corresponding word a-z in the main window. Whever the user puts his mouse over, or clicks on a-z in the main window, I'd like the corresponding item in the child window to be brought to the top and highlighted.

    I haven't had much luck looking around for answer because I'm not sure what I should be looking for. Even just some search terms would be helpful (though I prefer a nice solution!).

    Thanks
    cwh

  2. #2
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi cowhead and welcome to Sitepoint.

    When you say you have two windows, do you mean two browser windows open?

    We will help you figure this one out.

    Regards,
    Jordan

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using your javascript to open a new window like popup.html, I'd think it would work if you gave each list item an ID and make your anchors point to those like popup.html#listItemID_1.

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, let me clarify. The user will be reading a blog entry ad click on a link that will spawn a new window (the 'child' window).

    I think I nkow what you mean tyssen, I'm going to test it out and I'll let you know if it worked.

    Thanks for the quick replies!

  5. #5
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The most common way to address the child window from the parent is by assigning the window.open statement to a variable as in: winX=window.open(etc.~

    Then one addresses the child window's objects as winX.document.etc~ or variables as winX.variable_name

    The problem is that as you click on the parent window, the child will lose focus and be subordinated. You may wish to pursue floating a div (you can simulate window chrome, if you desire, and I don't necessarily mean using the CSS property of float) in place of a secondary window.

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JVLB
    The problem is that as you click on the parent window, the child will lose focus and be subordinated. You may wish to pursue floating a div (you can simulate window chrome, if you desire, and I don't necessarily mean using the CSS property of float) in place of a secondary window.
    Can you expand on that a little? I'm not sure what you mean about a floating div.

    Btw, the put my problem in context. The whole idea is that someone is reading a blog entry that is annotated, and the user has the option of lauching a new window with all the references in it. So, if the blog says "Well done steak is rare [1]" the user can click on the [1] and that reference is highlighted in another window. Down the road I was thinking of making it so that the user has to enable this option by clicking something, and when he does his browser resizes so the new window with references is always visible.

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I messed around a little and came up with the code below. It doesn't work. Am I on the right track at least?

    parent window:
    HTML Code:
    <form>
     <ul>
        <li><input type="button" value="1" onclick="aTest.document.location.href='http://localhost/tests/popuptestpt2.html#1'" /></li>
        <li><input type="button" value="2" onclick="aTest.document.location.href='http://localhost/tests/popuptestpt2.html#2'" /></li>
        <li><input type="button" value="3" onclick="aTest.document.location.href='http://localhost/tests/popuptestpt2.html#3'" /></li>
        <li><input type="button" value="4" onclick="aTest.document.location.href='http://localhost/tests/popuptestpt2.html#4'" /></li>
     </ul>
    </form>
    
    <form>
      <INPUT type="button" value="New Window!" onClick="window.open('http://localhost/tests/popuptestpt2.html','aTest','width=300,height=50')">
    </FORM>
    </body>
    Child window:
    HTML Code:
    <ol>
      <li id="1">One</li>
      <li id="2">Two</li>
      <li id="3">Three </li>
      <li id="4">Four</li>
    </ol>

  8. #8
    SitePoint Zealot bensheard's Avatar
    Join Date
    Jun 2006
    Location
    Cape Town | South Africa
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. One or two things I noticed. Firstly, on your child window code, you have <ol> which I think should be <ul> (not that it will make much difference to it working or not). Secondly, I think you need to do this
    Code:
    <ul>
    <li><a name = "1"></a>One</li> <li><a name = "2"></a>Two</li> <li><a name = "3"></a>Three </li> <li><a name = "4"></a>Four</li> </ul>

    as this will create bookmarks which you can address by using the hash sign (#), which you are doing at the moment. And lastly, because your popup page at the moment is so small that it fits on one page (ie. the scrollbars are inactive), if you do get it working, nothing will happen on the popup window page. Maybe make bigger gaps between the 4 lines.


    Good luck!

    Ben Sheard
    -------------
    Log all your dives easily and quickly from anywhere in the world
    www.divinglogs.cafe150.com

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bensheard
    Hi. One or two things I noticed. Firstly, on your child window code, you have <ol> which I think should be <ul>
    That looks more like it should be an ordered list rather than an unordered list and so <ol> is probably far more appropriate than <ul>.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Zealot bensheard's Avatar
    Join Date
    Jun 2006
    Location
    Cape Town | South Africa
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry... wasnt thinking!!! I need to get to bed earlier!
    Ben Sheard
    -------------
    Log all your dives easily and quickly from anywhere in the world
    www.divinglogs.cafe150.com


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
  •