Rowan Cottage : Div

Rowan

Cottage

About

iWeb

Div Switching in iWeb

OK, here we go - I'd been thinking about this for a bit and how to write such an article, and I know there are some of you who visit the site itching to see what's new and leaving disappointed. Well enough procrastination - I decided to take the plunge and write an article on div switching in iWeb.

If you need to know what this is, and whether you'd find it useful or not, please see these three pages on my site. Each employs some form of div switching to show or hide different elements on the page.

Blog page Click 'Click here for a demonstration'

Guestmap page Click 'Toggle our markers'

Home page Click 'Toggle visitor stats'

I use it to hide elements on the page because they'd take up too much room to be shown all the time, and by clicking a button, the element can be shown and then another click will hide the element and restore the page back to normal. The key factors in all of this are <div> tags and layering. iWeb itself makes mighty use of divs if you look at a HTML page it generates, so you can use this feature to make some changes for your own benefit.

If you think this would be useful on your site, read on.

A Simple Demo Only

Here, I am only going to show a simple demonstration of div switching. It is complicated enough to do in itself, let alone explain it in simple terms, so that's why I'm only showing a simple demonstration here, but once you get the hang of it, you can use this technique to switch in larger areas of a page, or use it to load in information from external sources, like in my Guestmap or Home page examples.

Check the demonstration above to see how it works.

Now let's see how we do it.

Initial Setup in iWeb

For my example, I have set up a picture as above to be shown when you toggle the div switch. This is located at path: http://www.rowan-cottage.co.uk/resources/images/divswitchpic.jpg

First create a textbox for the picture to the exact size as your picture. Put in some text, eg PIC_CODE_HERE. This is going to be replaced with the HTML code that loads the picture when you come to publish. For a detailed description of the HTML cut and paste technique, see my PayPal Buttons article here.

Send this picture textbox to the back. Arrange > Send to Back

Next create a textbox for the text. Put the text in, and format it how you wish. I've also put a link in mine just as a little bonus extra!

Now place this textbox over the picture textbox in the position that you want it.

Bring this textbox to the front. Arrange > Bring to Front.

Now add a textbox next to it all, put some text in it, for example 'DEMO', and make it into a hyperlink to say, one of your own pages. It doesn't matter what you make it link to, because we are going to change it later. This is going to be the link that toggles the ‘div switch’.

Publish.

Cut and Paste HTML Starts Here

Find your HTML page. If you are unsure where to find this page, see my PayPal Buttons article for some pointers.

Open it in TextEdit, and replace

PIC_CODE_HERE

with

THIS IS AN IWEB TEXTBOX

Here is some text. It’s just to demonstrate the div switching technique presented in this article.

Here is a link to our guestmap for you to sign if you like anything you see here, or if you find this article useful in any way!

THANKS!

HERE IS SOME TEXT

HERE IS A PICTURE

HERE IS A ‘DIV SWITCH’

Picture to illustrate div switching. Clicking will go to sitemap

THIS IS AN IWEB TEXTBOX

Here is some text. It’s just to demonstrate the div switching technique presented in this article.

Here is a link to our guestmap for you to sign if you like anything you see here, or if you find this article useful in any way!

THANKS!

DEMO

Visit our homepage!

IWEB ARTICLES
Main Articles Page
iWeb FAQ
iWeb and Site Help
Experimental Page
PayPal Buttons
iWeb Resources
Selective Uploads
Integrating a Guestmap
Graphics Tips
Autoplay Music
Hyperlinks in iWeb
Links in New Windows
Dropdown Menus
Div Switching
Favicons Meta Tags etc
Scrolling News Ticker
SimpleViewer Integration
iWeb Wish List
iWeb Discussion Point
Cool iWeb Widgets
More iWeb Widgets
iWeb Showcase

Now you can see in the code above, the image loaded up is from http://www.rowan-cottage.co.uk/resources/images/divswitchpic.jpg and the image itself also links to http://www.rowan-cottage.co.uk/Site/Sitemap.html (our sitemap page). I have also used absolute paths to the files so that you can see where exactly the link points to and where exactly the picture is loaded from. In setting up your own picture, you will be using your own paths, and you can make them relative once you know exactly where you are putting things (for instance, just sitemap.html rather than http://www.rowan-cottage.co.uk/Site/Sitemap.html) . Also bear in mind you are not forced to make the picture into a link at all, I am only doing it to show that you can do this amongst other things.

Save the file. If you open it up in your browser, you will see something like this:

As you can see, still not what it should be. Both layers are still visible there on the page.

Code in <head>

Now, I take no credit at all for writing the javascript function that actually performs the div switch. I have merely integrated the technique into my site. If you search on the internet for 'toggleLayer', you will find plenty of sites showing pretty much the same code. I got mine from Netlobo.com which gives a nice explanation and an example setup.

Go back to your HTML page.

You need to paste this code into the <head> section of the page. If you put it just before the </head> tag, you'll be fine.

The first bit within <script type="text/javascript"> and </script> is the javascript function called toggleLayer that does the div switching.

The second bit (coloured orange above) within the <style type="text/css"> and </style> is the CSS style that initially hides the layer called SwitchPic. This name is just the name I will give to the picture layer. You can change the name of your layer to anything you want as long as you use the same name for the div later on.

Another thing to note with the second bit is that this is the code that tells the browser that the layer called SwitchPic is not displayed by default (display: none;) and that the z-index value is 99 (z-index: 99;). The value is basically the number that governs how far forward an element is on the page - a higher number means it is further forward. So a value of 99 indicates that SwitchPic is right at the front of the page, but currently is not set to display.

Now that you understand that, all the function in the first bit does is set the display property of SwitchPic so that it is displayed. And because its z-index is going to be higher than anything else on the iWeb page, it will be at the front!

Code in <body>

1. Name the div

Now you need to identify the <div> tag that contains our picture so that we can name it SwitchPic in order that the function knows that this is the element on the page that needs displaying.

Because you made the HTML changes to load the picture in the first place (i.e., the bit where you replaced PIC_CODE_HERE), you should be able to recognise the correct div. In my case, this will be the div that contains the <a href="http://www.rowan-cottage.co.uk/Site/Sitemap.html"><img src="http://www.rowan-cottage.co.uk/resources/images/divswitchpic.jpg" width="200" height="200" border="0" /></a> code as shown above.

You need to identify the series of divs surrounding this div that will all be switched at once. The correct series will have an id and a z-index. They will look something like this:

            <div>

              <div class="graphic_textbox_layout_style_default">

              </div>

            </div>

</div>

As I said you need to name this div with the name SwitchPic so that the function knows this is the correct series of divs to switch. You do this by changing id="id1" to id="SwitchPic" in the first <div> tag. Also you need to get rid of the z-index: 1; bit because as we've discussed earlier, SwitchPic already has an z-index of 99 as defined in the <head> section of the page. So now it will look like this:

            <div>

              <div class="graphic_textbox_layout_style_default">

              </div>

            </div>

</div>

Notice particularly the position of all the inverted commas ". Make sure they are in the correct place otherwise it may not work.

HELP! I know you’re reading this and thinking, nah, this is far too difficult to continue with. Don’t worry! I’m only showing you all this code to illustrate the nested divs. Bear in mind you are only making changes to the first bit of this code, the enclosing div. There, that’s clear as mud isn’t it? :-) DON’T PANIC

2. Modify the hyperlink

Now we are going to change the DEMO link you set up in Initial Setup in iWeb above so that it calls the javascript function toggleLayer.

Find the DEMO link in the HTML page.

It should look something like this:

In this case, don't worry about the surrounding <div> tags, we're not interested in those at all.

Now change the above to this:

You can see I replaced the first Home.html (the link) with javascript:toggleLayer('SwitchPic'); so that this javascript function will be called whenever you click on the DEMO link. And the second Home.html (the tool-tip pop-up text) I replaced with Click here to see a demo of div switching! so that you will see this whenever you hover over the link. The rest of the link is unchanged.

Now save the HTML file.

If you look at the page now in a browser, it should look like my demo at the of the page.

Now try the link! It should work to switch between the picture and text.

If you get the hang of this technique, you can use it to swap in and out all sorts of things, including external sources in iframes, other pages from within your site or just another block of text. As you can also see, you can incorporate links into both layers in the switch. You can also make buttons and other images into toggle links and if you are feeling really adventurous you could embed a toggle link in each of the layers of the div switch so that clicking it would take you to the other layer!

Finally...

All these changes to your page are overwritten by iWeb on republish, so making the changes each time could get quite tedious and frustrating, so either save a local copy of the changed HTML file, and just replace the newly published file with your saved copy, or better still, set up a MassReplaceIt search to perform these changes with a few click of the mouse.

That's it! Don’t forget to sign our guestmap if you found any of this useful and wish to show a little appreciation. Why not check out our div switch on the guestmap page while you’re there?