SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chanage Attribute of Element in another Window

    I want a script that does this:
    1. Creates a new window
    2. Modifies an arbitrary element in the new window

    For example, change the background color of a span in the new window from a script that is running from the old window.

    I'm just not really sure what the DOM says about this (i.e. how do I call the span? windowName.document.getElementById(mySpanId).style.background ? It's really the windowName part that I'm asking about)
    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is the object returned by window.open method you will use to open a new window.

    windowName = window.open(...) ;

  3. #3
    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)
    ok just made this for you prowsej

    PHP Code:
    <html>
    <
    head>
      <
    title>css vertical center</title>

    <
    style type="text/css">
    <!--
        
    body
          
    {
          
    font-size:25px;
          
    text-align:center;
          
    font-family:verdana,sans-serif;
          }
        
    input
          
    {
          
    color:white;
          
    font-size:10px;
          
    text-align:center;
          
    font-family:verdana,sans-serif;
          }
        
    select
          
    {
          
    color:white;
          
    font-size:10px;
          
    text-align:center;
          
    font-family:verdana,sans-serif;
          }
        
    table
          
    {
          
    color:#ffffff;
          
    font-size:25px;
          
    text-align:center;
          
    font-family:verdana,sans-serif;
          
    vertical-alignmiddle;
          }
        
    DIV.outer
          
    {
          
    position:absolute;
          
    left:50%;
          
    top:50%;
          
    width:300px;
          
    height:300px;
          
    margin-left:-150px
          
    margin-top:-150px;
          
    background-color:gray;
          }
          
        
    DIV.inner
          
    {
          
    position:absolute;
          
    left:50%;
          
    top:50%;
          
    width:100px;
          
    height:100px;
          
    margin-left:-50px
          
    margin-top:-50px;
          
    background-color:silver;
          }
          
     -->
    </
    style>

    <
    script>
    <!--
    /*
      by Andrew-J2000  
    */

        
    var altering="altering";        // innerHTML tag to change
        
    var locate="http://www.sitepoint.com";  // new location
        
    var count=10;                // number of seconds to redirect
        
    var alterDiv;

        function 
    countdown()
        {
            
    count--; 
            
    content(count+1);

            if (
    count>=0)
            {
                
    Id window.setTimeout("countdown()",1000);
            }
            else
            {
                
    window.open ('','newWIN','');
                
                
    x.document.write('<center><span id="mySPAN" style="background-color:black;color:white;">span tag</span></center>');
            }
        }    

        function 
    content(count)
        {
            
    msgstring="<p>" count "</p>";
            
            
    alterDiv document.getElementById(altering);
            
    alterDiv.innerHTML   msgstring;
            
    window.defaultStatus "opening in : " count " seconds";
            
    document.title       "opening in : " count " seconds";

        }
        function 
    errorsuppress()
        {
            return 
    true
        
    }
        
    window.onerror=errorsuppress;

        var 
    colors  = new Array;
        
    colors[0]   = 'black';
        
    colors[1]   = 'white';
        
    colors[2]   = 'orange';
        
    colors[3]   = 'purple';
        
    colors[4]   = 'yellow';
        
    colors[5]   = 'green';
        
    colors[6]   = 'LawnGreen';
        
    colors[7]   = 'Chartreuse';
        
    colors[8]   = 'Lime';
        
    colors[9]   = 'blue';
        
    colors[10]  = 'CornflowerBlue';
        
    colors[11]  = 'red';

    // -->
    </script>

    </head>

    <body onLoad="countdown();">

    <div class="outer">   
      <div class="inner">
        <table border = "0">
          <thead><tr><td></td></tr></thead>
          <tfoot><tr><td></td></tr></tfoot>
          <tbody><tr><td  id="altering"></td></tr></tbody>
        </table>
      </div>
    </div>

    <form name="form1">

    <input type="button" style="position: absolute;bottom:0px;left:0px;"   value="update window title" onclick="x.document.title='updated title';x.focus();"/>
    <input type="button" style="position: absolute;bottom:0px;left:165px;" value="update window statusbar" onclick="x.defaultStatus='updated statusbar';x.focus();"/>
    <input type="text"   style="position: absolute;bottom:0px;left:375px;color:orange" value="text span" id="txt" />
    <input type="button" style="position: absolute;bottom:0px;left:495px;" value="update span" onclick="x.document.getElementById('mySPAN').innerHTML=document.form1.txt.value;x.focus();"/>
      <select name="changeCOL" style="position: absolute;bottom:0px;left:605px;">
         <option style="color:black;" selected>Select color...</option>
           <script type="text/javascript">
             for (a=0,b=colors.length;a<b;a++)
             {
            if (colors[a] == 'white') document.write ('<option value="" style="color:' + colors[a] + ';background-color:black">' + colors[a] + '</option>');
            else                      document.write ('<option value="" style="color:' + colors[a] + '">' + colors[a] + '</option>')
             }
           </script>
      </select>

    <input type="button" style="position: absolute;bottom:0px;left:715px;" value="update span text color" onclick="x.document.getElementById('mySPAN').style.color=document.form1.changeCOL.options[document.form1.changeCOL.selectedIndex].innerHTML;x.focus();"/>
    </form>
    </body>
    </html> 
    hope you like it and it helps you solve your problem

  4. #4
    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)
    i just put it online so you can see.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you very much, Andrew-J2000, that's incredible! Much more than I was expecting. It's answered my questions - and more.

    And the countdown makes the page look really spiffy!


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
  •