Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Content with styles applied won't display properly in tables

    Hi,

    I have written a javascript funciton to show and hide content within a table, which calls for align=center. The content is defined outside the table, as usual, and the navigation containing the funtion to show/hide is contained inside the cell. The function works properly, but the content seems to be displayed as align=left. Any ideas on how this can be remedied? Any feedback would be greatly appreciated.

    Here is the link to see what's happening: http://layshock.rwgusa.net/brent/center.html

    Here is the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>

    <script>

    var currPage = "" // the current Page

    function changePage(thisPage)
    {
    if (document.getElementById) // for newer versions of Netscape & IE
    {
    document.getElementById("page1").style.visibility = "hidden" // first hide the default visible "page 1"
    if (document.getElementById(currPage) != null)
    {
    document.getElementById(currPage).style.visibility = "hidden" // now make the current page visible
    }
    if (document.getElementById(thisPage) != null)
    {
    document.getElementById(thisPage).style.visibility = "visible"
    }
    currPage = thisPage // make thisPage the currPage
    }

    ///////////////////////////////////////////////////////////////////////////////////////////////////

    else if (document.layers) // for Netscape older versions
    {
    document.layers["page1"].visibility = "hidden" // first hide the default visible "Page6"
    if (currPage) // now hide the current Page
    {
    document.layers[currPage].visibility = "hidden"
    }
    document.layers[thisPage].visibility = "visible" // now make the current Page visible
    currPage = thisPage // make thisPage the currPage
    }

    ////////////////////////////////////////////////////////////////////////////////////////////////////

    else if (document.all) // for IE
    {
    document.all["page1"].style.visibility = "hidden" // first hide the default visible "Page6"
    if (currPage) // now hide the current Page
    {
    document.all[currPage].style.visibility = "hidden"
    }
    document.all[thisPage].style.visibility = "visible" // now make the current Page visible
    currPage = thisPage // make thisPage the currPage
    }
    }


    </script>
    <style>

    #page1
    {
    position : absolute;
    visibility : visible;
    }


    #page2
    {
    position : absolute;
    visibility : hidden;
    }

    </style>

    </head>
    <body>

    <table align=center valign=center>
    <tr align=center>
    <td align=center> <!-- the image does not render centered -->

    <a href="javascript:changePage('page1');">
    <img src="../brent/mouseovers/offzoombutton1.gif" name="zoombutton1" width=25 height=10 border=0></a>

    <a href="javascript:changePage('page2')">
    <img src="../brent/mouseovers/offzoombutton2.gif" name="zoombutton2" width=25 height=10 border=0></a>

    </td>
    </tr>
    </table>

    <!------------------ layers for the pages -------------------------->

    <div id="page1">
    <img src="../brent/images/page1.jpeg" width=838 height=700 alt="">
    </div>

    <div id="page2">
    <img src="../brent/images/page2.jpg" width=838 height=700 alt="">
    </div>
    </body>
    </html>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I don't see your problem... those two buttons are rendered center to me, at least vertically...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    maybe you want to make the layers page1 page2 to be centered? that align the divs... Or you want the buttons to be centered according to the layers page1 page2? That include all of them into a table and center the cell.

    Please, be more specific
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. The buttons are centered where they should be, and that is because their images are called out in the table cell and will always be visible. The problem is with the two larger images, each of which is rendered visible or hidden, depending on which button you click. The function responsible for swapping the images is contained in the table cell, but the div ids have to be defined outside the confines of the table cell. If they are put in the table cell, both images show up simultaneously. The function still works, but the effect I am trying to achieve is completely lost.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ok... i've made a lot of this kind of hidden/visible aplications so I might be able to help you, but right now I have no time, I'll do it tommorow. Myabe the script has something... I use to write some much more "tight" scripts, so I will do that for you, but give me a Personal Message, not to forget to do that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. If it doesn't work the way I have indicated, there is another approach I could take. I would prefer this method, but I have another idea in mind.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Ok, now I get your point. That's a simple way to solve this. Give both images the same x and y position... As you have an absolute position, those images will be the same as, say, layers in Photoshop (if you work with), one "above" eachother. In a short time I'll send you some examples, including a much more "optimized" script. That will help you later to use it as "a template" for any kind of DHTML concerning position, visibility and even motion of the objects.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Ok, here's the general way to build a function to rollover, to show/hide, to move objects. I begein with a simple one, a simple rollover. If you see the point, you may use the structure tu build complicate ones.

    First at all, build a browser detector and put him in a .JS file. Anyway, dont' forget that there are some style atributes that are not recognized by some browsers, or have some different keywords (backgroundColor, bcColor - for instance), or some tags that are not recognize by some older browsers (iframes, for instance)

    I use this, but you can choose a less sophisticated one if you want to :-)

    function Este() {
    agent = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
    this.ns2 = (this.ns && (this.major == 3));
    this.ns3 = (this.ns && (this.major == 3));
    this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
    this.ns4 = (this.ns && (this.major == 4) && (this.minor <= 4.80));
    this.ns6 = (this.ns && (this.major >= 5));
    this.ie = (agent.indexOf("msie") != -1);
    this.ie3 = (this.ie && (this.major < 4));
    this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1));
    this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1));
    this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1));
    this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
    }
    var este = new Este();

    As you may need that detector later, in other pages, it's easier to put him in a separate file, say browser.js, even in a distinct file, say /script, and put this in head:

    <script language="JavaScript" src="script/browser.js"></script>

    Now let's build the functions. First, a "setup" function, called on onload:

    function objectSetup() {

    zobject1 = new layerSetup("object1","visible",10,25);
    zobject2 = new layerSetup("object2","hidden",10,25);

    Now, using this.obj you can build that layerSetup function to expres the arguments you need (id, visibility and position from left and from top) and the difference beetween browsers syntax(the way each operate with id argument.

    function layerSetup(id,visibility,left,top) {
    if (este.ie5||este.ie55||este.ie6||este.ns6){
    this.obj = document.getElementById(id).style;
    this.obj.visibility = visibility;
    this.obj.left = left;
    this.obj.top = top
    return this.obj;
    } else if(este.ie4) {
    this.obj = document.all[id].style;
    this.obj.visibility = visibility;
    this.obj.left = left;
    this.obj.top = top
    return this.obj;
    } else if(este.ns4) {
    this.obj = document.layers[id];
    this.obj.visibility = visibility;
    this.obj.left = left;
    this.obj.top = top
    return this.obj;
    }
    }

    Note now that I have already specified some style atributes and values (id, visibility, x and y position), so [B] I don't need to specify them again in a CSS style script. Yet, we'll need to specify what kind of position (absolute or relative), so I'll make it later, either directly in a tag, or in a class, whichever.

    Why two functions? Be cause later you don't need to modify but the objectSetup function, to insert new objects. It is easier to control and modify that way.

    OK, now here are whichever functions you want to call on event. In our case, a rollover

    function rollover(){
    zobject1.visibility = "hidden";
    zobject2.visibility = "visible";
    }

    In special cases (tell you later when), you can use this syntax, also:

    function rollover(){
    zobject1 = new layerSetup("object1","hidden","","");
    zobject2 = new layerSetup("object2","visible","","");
    }

    Note that, in that case, i didn't modify the position, but I use"", a sort of "empty argument" because I have to keep the correspondence of the arguments! As the left and top position are already defined by the objectSetup() function, the values remain the same.

    What about onmouseout? Well, in our case, as it is a "coming back" to the genuine state, it is obvious that I need no other function than objectSetup(), right? :-)

    Your script is ready. We need some more things to do:
    - define the position with CSS
    - call the "setup" function on onload.

    Here's the BODY

    <body onload="objectSetup()">
    <div id="object1" style"position:absolute"><img src="imag1.jpg" onmouseover="rollover()" onmouseout="objectSetup()"></div>
    <div id="object2" style"position:absolute"><img src="imag2.jpg"></div>
    </body>

    I think my script is "lighter" than yours and I think it will help you more to build various actions...

    If any questions?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply and for taking the time to go through all this with me. I have copied your code into my HTML editor and I'm going to spend some time going through it to make sure I understand what you've developed. I'll let you know if I have any questions. Thanks again.

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Anyway, to solve quickly your problem using the script as it is, just give both pages the same x and y position in your CSS, like that

    <style>

    #page1
    {
    position : absolute;
    visibility : visible;
    left:2px; top:106px;
    }


    #page2
    {
    position : absolute;
    visibility : hidden;
    left:2px; top:106px;
    }

    </style>
    well, give whichever x an y you want, but make sure that are the same... Now you pages will switch one over each other
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The basis of my problem is that the two large images cannot have
    "fixed" top and left pixel parameters. Just as the two rectangular navigation buttons are centered in the table, and therefore float - but always remain centered in the window - when the browser window is expanded or shrunk, so must the two large images. The two large images must be contained in the table, and the problem seems to be that content which contains "hidden" and "visible" styles cannot be placed properly inside a table. The images will render inside the table cell, but the align=center attribute is completely ignored. The function which swaps the images can be placed in the table cell, and it will work, but the images do not render properly. They default to align=left in the cell.

    As I indicated in my original message, if you put the defintion for the div ids in the table cell, chaos will occur.

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's hard to tell from looking what you intend to use these graphics for: image map (the 'interactive' bit), simple background, splash page...which one might make all the difference. Your problem is in the mixing of CSS with HTML, and the (element) positioning considerations that come into play. You can't put two elements in the same 'space' without absolutely positioning them, and that alters your ability to use HTML centering attributes in the normal fashion. You could sidestep the problem with a simple image swap:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <base href="http://layshock.rwgusa.net/brent/">
    <script type="text/javascript">
    
    //simple preload
    var preloadObj = new Image(838,700);
    preloadObj.src = 'images/page2.jpg';
    
    </script> 
    </head>
    <body>
    <center>
    <table width="100%" align="center">
    <tr>
    <td width="100%" align="center"><a href="#" onclick="document.images.bigpic.src = 'images/page1.jpeg';return false;">
    <img src="../brent/mouseovers/offzoombutton1.gif" width="25" height="10" border="0"></a>
    <a href="#" onclick="document.images.bigpic.src = 'images/page2.jpg';return false;">
    <img src="../brent/mouseovers/offzoombutton2.gif" width="25" height="10" border="0"></a>
    </td>
    </tr>
    <tr>
    <td align="center"><img name="bigpic" id="bigpic" src="../brent/images/page1.jpeg" width="838" height="700" alt=""></td>
    </tr>
    </table>   
    </center>
    </body>
    </html>
    Without knowing what you had in mind for the page as a whole, pretty hard to specify a design approach. Anyhow, cheer up ()...nothing all that weird going on here. Basic layout is nothing to lose any sleep over.

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    yes, cheesebagpie... that reminds me that is very important to choose from the begining "who's gonna lead" the proprieties, HTML? CSS? JavaScript? That depends on what you want to do finaly. But that's another topic...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #14
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #15
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the replies. Cheesebagpie has told me what I have suspected for a while, now. That is, using hide/show in the style definitions will not work for my application. In addition to the approach that Cheesebagpie suggests, I have another idea which should work.

    Thanks again.


  •  

    Posting Permissions

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