Page within a div....

  maanse 23:02 30 Sep 2008


Whats the best way to get a link to change the content of a div rather than have the link display a completely different page? Preferably without using server side.


  Kemistri 02:09 01 Oct 2008

Easily done, with more than one solution. Before I post any code, I need more details:

Will this affect one content div on each page, or multiple divs?

If more than one, do they need to appear in the same place, which requires that showing any div must hide the previously displayed div or overwrite an existing div? Or will they be in different places?

Will you need to toggle the display on and off?

I'll check in tomorrow PM.

  maanse 14:11 01 Oct 2008

Hi Kemistri,

At the moment im only looking for the content of 1 div to be changed, for example, i have 3 div containers placed - Left, Right and middle. The left container houses the menu and the right container is for advertising etc, basically what i want is when a link from the menu in the left div is clicked i want the contentof the middle div to display the relevant info. I dont know about toggling, im not sure what it does so i assume i dont need it.

Thanks again.

  Kemistri 16:49 01 Oct 2008

Right, so what you will actually have here is multiple divs positioned in the same place. Effectively, showing one div hides the others by changing the display declaration.

As far as your mark up goes, you will need to write your content in each div and include them in the same document as if they were going to be displayed in the conventional way. Then you give each div an ID and a class, with the class being common to all of them.

The obvious way to make this effect is, of course, javascript, for which there are plenty of resources. If you want each link to be clicked, then JS is the only option, but if you would consider a system that responds to a hover, then CSS can do it as well. Which is obviously good for all sorts of reasons. JS can do either, largely by changing "onclick" for "onmouseover".

Rather than post a load of code here right now, I'll first point you to some useful and effective menu setups that you can copy and play with. For a JS menu that does what you want, click here. Ignore the fact the divs contain galleries, because it can use any content. This uses tabs, but the styling can be whatever you want it to be. For a CSS version, click here. The disadvantage of that is that it needs the pointer to stay over the link, which JS does not.

To be honest, I often pinch ideas from the site to which I've just linked! It's a great resource for this kind of stuff. If you browse through the menus available, you may find other variations that suit you better. If none of that works quite right for you, post back and I might have some methods of my own that work very well for me and might suit you.

  maanse 18:43 15 Oct 2008

Hi Kemistri, apologies for taking so long to reply got so many projects running at once, think my brain is going to explode.

I appreciate the help given above and think that the JS method is probably the way forward although having said that i dont want to use SSI i have now found out the the particular host does support PHP so that could be an alternative if it is possible.

To be honest though that gallery site seems to do exactly what im after only problem is its a bit too complicated for the level im at.

Any pointers would be greatly appreciated.

  maanse 19:06 15 Oct 2008

I have the page layout set up already its only the above im trying to get done, i can send the relevent files for you to have a look at if you want......

  Kemistri 02:59 18 Oct 2008

No, please don't send any files. I'm pretty busy with paying clients at the moment! Maybe if you can nail down some specific questions, I may be able to provide some specific answers. Provide a link to your project if possible, just for me to take a brief look to get a better picture of where you're at.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

AMD Ryzen news - release date, UK price, features and specifications

The 12 best apps for drawing and painting on your iPad

Mac power user tips and hidden tricks

Comment faire des captures d’écran sous Windows 10 ?