Show/create layer, load content into it & hide/destroy it

Hi!

I want to show a layer, and load different content into it, each time a different button on the main page is pressed.
What would be the best method:
- to make the layer in html, or to
- create it with javascript's create layer
?

On that note comes the question:

how would i load a page into the layer using the above, and

how would i hide or destroy ( depends on the best method ) the layer when users would click a button on the page included in the layer?

Thank you :)
Sal

LVL 2
SaLzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

WoodyRoundUpCommented:
you can use "div" with ID specified in the tag.

Then, to load with content: you can use this:
document.getElementById ('id_of_the_div').innerHTML = "all the HTML code content here";

to destroy, simply use:
document.getElementById ('id_of_the_div').innerHTML = "";

with this case, you will only need to use one layer instead of multiple layer.

alternatively, you can load all content into the div first.
so, each content  has one div, with the style="visibility:hidden";
then, when you click on one button, set the "visiblity:hidden" to all other div, and set the displayed page style="visiblity:show";

Please let me know which one you prefer.....
XxavierCommented:
Hi SaLz!! Its ia Xxavier here!!  :o)

    Is all the content from the same domain (ie basically the same server) or from different parts of the web. It will make a diference.

Xx

SaLzAuthor Commented:
Hiya :)

Well, the content in the layer should be loaded in from several different files ( depending on the button clicked ), and will be mainly loaded from the same server.

I would be glad to see both examples though.
One, and multiple layer,
 and content load from same and different server. :)
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

WoodyRoundUpCommented:
i'll be back with some HTML and javascript. :p
WoodyRoundUpCommented:
Method 1:

<script type="text/javascript">
      function setContent (idname, whichcontent)
      {
            var html = "";
            switch (whichcontent)
            {
                  case 'div1':
                        html = "<b>This is a sample block of code</b> for div 1";
                        break;
                  case 'div2':
                        html = "<b>This is a sample block of code</b> for div 2";
                        break;
            }
            
            document.getElementById(idname).innerHTML=html;
      }
</script>

<div id='mydiv'></div>
<br/>
<input type="button" name="show1" value="Show Div 1" onclick="setContent('mydiv','div1');"/><br/>
<input type="button" name="show2" value="Show Div 2" onclick="setContent('mydiv','div2');"/><br/>
<input type="button" name="clear" value="Clear" onclick="setContent('mydiv');"/><br/>


Method 2:

<script type="text/javascript">
      function setContent (idname, totallayer, whichlayer)
      {
            for (i=0; i<totallayer; i++)
            {
                  document.getElementById(idname+(i+1)).style.visibility="hidden";
            }
            if (whichlayer)
                  document.getElementById(idname+whichlayer).style.visibility="visible";
      }
</script>

<div id='div1' style='visibility:hidden;'><b>This is a sample block of code</b> for div 1</div>
<div id='div2' style='visibility:hidden;'><b>This is a sample block of code</b> for div 2</div>
<br/>
<input type="button" name="show1" value="Show Div 1" onclick="setContent('div',2,1);"/><br/>
<input type="button" name="show2" value="Show Div 2" onclick="setContent('div',2,2);"/><br/>
<input type="button" name="clear" value="Clear" onclick="setContent('div',2);"/><br/>
SaLzAuthor Commented:
cool, thank you Woody

One problem - instead of putting everything in this line:
 html = "<b>This is a sample block of code</b> for div 1";
I want to load an entire, seperate page like layerContent1.htm, layerContent2.htm into the layer. Is that possible or would i have to use an Iframe ?
WoodyRoundUpCommented:
that you will have to use iframe.

You can just replace:
<div id='div1' style='visibility:hidden;'><b>This is a sample block of code</b> for div 1</div>
<div id='div2' style='visibility:hidden;'><b>This is a sample block of code</b> for div 2</div>
to
<iframe id='div1' style='visibility:hidden;' src='layerContent1.htm'></iframe>
<iframe id='div2' style='visibility:hidden;' src='layerContent2.htm'></iframe>

See what happen.

Of course to make it beautiful, you will need to use CSS to set the style.

SaLzAuthor Commented:
i see. how about the iframe change with a single layer, how would be best doing it ?
SaLzAuthor Commented:
oh and how would i destroy/hide the layer from its iframe included page ?

thank you :)
WoodyRoundUpCommented:
That's not a very good idea to do use method 1 for iframe.
The reason being is because it will re-load the iFrame from the beginning when you click on the button.
The second method will be best for iframe.

And your last question, is that for the method 1 or method 2? If it's method 2, the way we destroy it is the same like what I have given you before. Just hide all iframe.

Hope this helps.
SaLzAuthor Commented:
Hi Woody!

you said:
That's not a very good idea to do use method 1 for iframe.
The reason being is because it will re-load the iFrame from the beginning when you click on the button.

is that because it won't look good seeing the iframe reload or any other reason ?

also won't there be too much to download if I load all the content to all the iframes ( using method 2 ) - wait time, slowing down the site ?
SaLzAuthor Commented:
also:

"And your last question, is that for the method 1 or method 2? If it's method 2, the way we destroy it is the same like what I have given you before. Just hide all iframe."

I ment it for method 1 :)
SaLzAuthor Commented:
hehe one more:

could you anyhow also show me how would be best to show the (one) layer with new content in iframe each time a different button is pressed please ? :)
WoodyRoundUpCommented:
Hi there.
Yes, That's right.
Not a very good idea because there will be loading time in between the click.

<script type="text/javascript">
     function setContent (idname, whichcontent)
     {
          var iframeSource = "";
          switch (whichcontent)
          {
               case 'div1':
                    iframeSource = "div1.html";
                    break;
               case 'div2':
                    iframeSource = "div2.html";
                    break;
          }
         
          document.getElementById(idname).src=iframeSource;
     }
</script>

<iframe id='mydiv'></iframe>
<br/>
<input type="button" name="show1" value="Show Div 1" onclick="setContent('mydiv','div1');"/><br/>
<input type="button" name="show2" value="Show Div 2" onclick="setContent('mydiv','div2');"/><br/>
<input type="button" name="clear" value="Clear" onclick="setContent('mydiv');"/><br/>

This is the method 1 that I mentioned it. It should answer all your questions.

Good luck.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SaLzAuthor Commented:
Thank you Woody! :)

I gave you the points :)

If I may ask just one more thing:

What would be the simplest way to show and hide layers by passing a layer id to the function ?

Greet's!
Sal
WoodyRoundUpCommented:
the way that I just showed you above. :p

Glad you got it working.
SaLzAuthor Commented:
cool, thank you Woody :)

btw, a lil out of the context, but do you know how to make the layer ( or image on it ) semi transparent ?
WoodyRoundUpCommented:
yeah, you can use opacity, i believe. It's from css. But I am not sure whether it does apply to an iframe.
SaLzAuthor Commented:
oh, damn, that's right, iframe could be the problem.

Thank you again for all your help :)
WoodyRoundUpCommented:
Not a problem. Glad I could be some help
SaLzAuthor Commented:
I have one more question if you don't mind :)

How could I change some text on the layer ( above the iframe ) depending on the button press ?
WoodyRoundUpCommented:
The same thing with the iframe, you just need to create an span element, give it an id, and call it the same way as you call the iframe.
Let's say, call it: div-text

eg.
<script type="text/javascript">
     function setContent (idname, whichcontent)
     {
          var iframeSource = "";
          var frameText="";
          switch (whichcontent)
          {
               case 'div1':
                    iframeSource = "div1.html";
                    frameText = "title for frame 1";
                    break;
               case 'div2':
                    iframeSource = "div2.html";
                    frameText = "title for frame 2";
                    break;
          }
         
          document.getElementById(idname).src=iframeSource;
          document.getElementById(idname+"-text").innerHTML=frameText;
     }
</script>

I hope you will open the next question in a new thread. :p

Good luck.
SaLzAuthor Commented:
hehe, I will.

Thank you Woody and have a nice day :)
SaLzAuthor Commented:
hmm but it doesnt seem to work :/
WoodyRoundUpCommented:
show me your code?
SaLzAuthor Commented:
strange, it works now. *scratching head*

maybe the browser still had the old .js file in cache.

well, all is good now! Thank you again :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.