The <span> diet ( 6 Views )

1. In my attempt to get a generic dynaimic "click here" to reveal text on the fly without re-requesting to the server, I've started using spans.
   
   If you set a span's style's visibility to hidden, it seems that the browser still renders the SPACE where the SPAN takes up, just not the content. Is there a way so that when you make a span hidden, it doesn't use up the space of the span?
   
   Is it possible to switch span locations on the fly? That would be nice!
   
   
   (fth, Pitcairn)


2. what about using a <div> and setting the display to inline? Then use visibility:hdden. Works in all CSS1 compliant browsers.

   Edit:
   
   nevermind, it renders the space too...
   
   
   (NAZIM, Saint Helena)


3. Same link as above, but inside the frames: http://www.xs4all.nl/~ppk/js/index.h...s/display.html
   
   Means you don't get an "Upgrade to a version 5 browser" error when in using a version 7 or (version 1) browser...
   
   Douglas
   
   
   (ali, Moldova, Republic of)


4. Code:

   ---

   var supported = (document.getElementById || document.all);

if (supported)
{
        document.write("<STYLE TYPE='text/css'>");
        document.write(".para {display: none}");
        document.write("</STYLE>");

        var max = 7;
        var shown = new Array();
        for (var i=1;i<=max;i++)
        {
                shown[i+1] = false;
        }

}

function blocking(i)
{
        if (!supported)
        {
                alert('This link does not work in your browser.');
                return;
        }
        shown[i] = (shown[i]) ? false : true;
        current = (shown[i]) ? 'block' : 'none';
        if (document.getElementById)
        {
                document.getElementById('number'+i).style.display = current;
        }
        else if (document.all)
        {
                document.all['number'+i].style.display = current;
        }
}

The HTML:

<P CLASS="head">
<A HREF="#" onClick="blocking(1); return false">About JavaScript</A></P>

<P CLASS="para" ID="number1">
[The actual links]
</P>

   ---

   The above code is taken from this page
   http://www.xs4all.nl/~ppk/js/display.html
   go there for an explanation of how it works...
   
   but basically your first step could be to get rid of the show/hide thing, as it isn't necessary...
   unless you are supporting 1997 era browsers
   
   
   (osman, Djibouti)


5. Almost there guys!
   
   Ok, MSIE seems to be workin fine, but NN is having a problem. I'm using SHOW/BLOCK and HIDDEN/NONE for setting the property of the spans, and MSIE removes the span and content "condenses", just the way I want.
   
   In NN7 I load the page, it looks fine. I press the HIDE button, and the SPAN disappears but the content doesn't "condense". I press SHOW, and it the SPAN does not appear, but NOW the content "condenses" I press SHOW again and nothing. I press SHOW again and The SPAN shows up! From THAT point on, pressing SHOW and HIDE will both SHOW and HIDE the span like MSIE does (just acts quirky for the first couple presses)
   
   Should I be using SHOW/BLOCK or SHOW/INLINE for the SHOW function? My HIDE function uses HIDDEN/NONE. My Javascript is:
   
   

   Code:

   ---

   function show(id) {
        if (browserNew) {
                setIdProperty(id, "visibility", "visible");
  setIdProperty(id, "display", "block");
        }
        else {
                if (browserName == "NS") {
                        document.layers[id].visibility = "show";
  document.layers[id].display = "block";
                } else {
                        document.all[id].style.visibility = "visible";
  document.all[id].style.display = "block";
                }
        }
}
function hide(id) {
        if (browserNew) {
                setIdProperty(id,"visibility","hidden");
  setIdProperty(id,"display","none");
        }
        else {
                if (browserName == "NS") {
                        document.layers[id].visibility = "hide";
  document.layers[id].display = "none";
                } else {
                        document.all[id].style.visibility = "hidden";
  document.all[id].style.display = "none";
                }
        }
}

   ---

   
   
   (mitat, Suriname)


6. thanks paul, I was trying to keep it simple... and was willing to bet that one option would do...
   
   as for the second part of the question, using DHTML you could quite easily change positioning 'on the fly.'
   
   although (and correct me if I'm wrong) you would need to make your span a block level element to position it absolutely... not something I have done recently
   
   
   (fadsfd, Dominica)


7. display: block; will display it as a block level element.. <span> is inline so you may want display: inline; instead
   
   
   (YüSRa & MeLTeM, Cambodia)


8. to continue on from paul_C
   display:none; to hide(remove from flow)
   display:block; to bring it back
   
   
   (üüüü, Cote D'Ivoire)


9. Quote:

   Originally Posted by aaron.martone Is there a way so that when you make a span hidden, it doesn't use up the space of the span?

   display: none;
   
   
   (sinem , Virgin Islands, British)


10. Check into DHTML - Or try positioning the spans to be revealed as absolute then set the z-index to the top most value. Of course visibily is hidden, onClick make it visible
    
    
    (sezer, Tuvalu)


11. Ah! I got it to work with my script. Seems the problem was that I had initially set the span's display to inline rather than block. Once I changed it to block, and reloaded, NN showed/hid the span on the first clicks each time.
    
    MSIE6 / NN7 / Moz 1.3 / Opera 7 are now "on the same page". Sweet. Thx all. Display is a pretty powerful CSS feature.
    
    
    (MELÝKE, French Polynesia)

Related Topics ... (or search in 1.720.883 topics !)