#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Indianapolis, IN
    Posts
    14
    Rep Power
    0

    DHTML InnerHTML leaves behind a blank space when on innerhtml=""


    I'm just learning as of about a month ago
    mysql, php, curl, html, dhtml, and javascript.

    I want to make a list of query filters, whereas they
    can click a button, to bring up a query builder
    for each individual filter.
    I'm trying to use dhtml to do it.
    I can bring up the filter
    and have the variables processed into one filter string
    and inserted into the parent form.
    and also have the querybuilder disappear.
    but when it disappears, it leaves behind
    a blank line, and I don't want it to do that.
    I can't seem to figure out how to make it not do that.

    I am using divid.innerHTML="" to clear the innerhtml
    I can't find anything online for destroying an innerhtml object other than ="". Using this method leaves behind a blank line, it removes the entire content, brings the content underneath back up to where it was before, except it leaves behind a blank line.. I even used divid.style.width=0 and divid.style.height=0. then I checked it by selected the entire page.. there was no longer an empty character there, not a line of anything at all.. but the content was still down further on the page than it should have been.. I cannot use style tags to reposition it, because these lines will be built dynamically later by php, and I want them to be right underneath of each other.

    Any help you can provide will be greatly appreciated

    (PS, I am not going for cross browser compatibility, this code is written for IE 6)

    Thanks again for any helpful advice.

    Here is my code :


    <html>
    <head>
    <script>

    function showthing (layer, url) {
    eval(layer).innerHTML='<iframe src="makefilter.php" frameborder=0 style="width:540;height:200;"></iframe>';
    }

    function togglething (layer, url) {
    if (eval(layer).innerHTML=="")
    {showthing(layer, url);}
    else
    {hidething(layer);}
    }

    function hidething (layer) {
    eval(layer).innerHTML="";

    }

    </script>

    </head>
    <body>
    This is a Test of InnerHTML
    <br>
    This is Only a Test<br>
    <form name="mainform" method="post">
    <input type="button" name="show" style="font-size:11px;" onclick="togglething('wrap1','makefilter.php');" value="Data Filter">
    <input type="text" name="filter1" style="font-size:11px;width:300;" value="">
    <div id="wrap1" innerHTML="" style="position:relative;visibility:visible;">
    </div>
    <input type="button" name="show" style="font-size:11px;" onclick="togglething('wrap2','makefilter.php');" value="Data Filter">
    <input type="text" name="filter2" style="font-size:11px;width:300;" value="">
    <div id="wrap2" style="position:relative;visibility:visible;">
    </div>
    </form>

    <script>
    //document.mainform.show.click();
    </script>
    </body>

    </html>
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    here you go:

    Code:
    <html> 
    <head> 
    <script type="text/javascript"> 
    bb=0
    function contrl2(layer)
    {
    if(bb==0)
    {
    bb=1;
    eval(layer).style.display='block';
    }
    else
    {
    bb=0;
    eval(layer).style.display='none'
    }
    f2.src='blah2.php';
    }
    </script>
    <script type="text/javascript"> 
    cc=0
    function contrl(layer)
    {
    if(cc==0)
    {
    cc=1;
    eval(layer).style.display='block';
    }
    else
    {
    cc=0;
    eval(layer).style.display='none'
    }
    f1.src='blah.php';
    }
    </script> 
    
    </head> 
    <body> 
    This is a Test of InnerHTML 
    <br> 
    This is Only a Test<br> 
    <form name="mainform" method="post"> 
    <input type="button" name="show" style="font-size:11px;" onclick="contrl('wrap1')" value="Data Filter"> 
    <input type="text" name="filter1" style="font-size:11px;width:300;" value=""> 
    <br />
    <div id="wrap1" style="position:relative;visibility:visible;display:none;">
    <iframe id="f1" src=""></iframe> 
    </div> 
    <input type="button" name="show" style="font-size:11px;" onclick="contrl2('wrap2')" value="Data Filter"> 
    <input type="text" name="filter2" style="font-size:11px;width:300;" value=""> 
    <div id="wrap2" style="position:relative;visibility:visible;display:none;"> 
    <iframe id="f2" src=""></iframe> 
    </div> 
    </form> 
    
    <script> 
    //document.mainform.show.click(); 
    </script> 
    </body> 
    
    </html>
    you see, i used a simple display is none and then becomes block script instead of using innerHTML so it gets rid of the element completely and then shows it onclick and on a second click, takes it away completely again

    hope that helps
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Indianapolis, IN
    Posts
    14
    Rep Power
    0
    when it takes it away completely, does the content below come back up to where it was before the dynamic content was displayed?
  6. #4
  7. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    for me, yes it does....though i have ie 5.5....
    when the doc loads, there is nothing between the two lines and when you click, it shows the same cept with your iframe in between and when you click again, it goes back to its original state.
    isnt that what you needed?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Indianapolis, IN
    Posts
    14
    Rep Power
    0
    Yes thank you.. but I ended up using something a little different.. I load a table and dynamically add a cell/then add innerhtml.. then to delete it, I just delete the cell.. it happens very quickly.. now I'm faced with the task of learning how to preload an iframe.. I'm actually not sure if I can for this situation, because each filter is going to have a sub-panel for building the query, and will be compiled based upon the parent filter control number (so that it sends the end-result query string to the appropriate parent filter).. if I could make javascript number the filters, and then have php use an eval(javavariable) in the object name, I could maybe have php compile the query builder panel only once, and that one page would echo to the parent piece automatically by using a java variable in the object name maybe? My AIM name is Tacturnal, so is my Yahoo name.. If you want to see what I'm doing it might help you understand what I mean.. message me if you have time and I'll send you a link to my localhost

    thanks again for your time and help,

    --James

IMN logo majestic logo threadwatch logo seochat tools logo