How to change a <div> within a page using php without loading the page again Options

[oddcarout]

I have divided my site into several <div>'s all with different names using PHP how I was taught.

I have a <div id=main> that contains <div id= right> and <div id=left>

What I would like to do is have an <ul> in the "left" than changes the content in the "right".

I want to have a list like cup, plate, bowl, spoon on the left and when you click or scroll over the picture and a description come up on the right.

Is this possible without having a new page load every time?

Thank you

OCO

[pandy]

With JavaScript, yes. It can also be done with CSS alone, but not with link clicks, only on hover.

[Christian J]

What are you using the PHP for in the first place?

[oddcarout]

If you have a better tutorial on web building that is free and in video form please let me know.

I use what I know and know what I know.

[Christian J]

If you have a better tutorial on web building that is free and in video form please let me know.

There's nothing wrong with PHP, though I don't see why are you are using it from the description alone.

The reason I was asking about PHP is because you can use Ajax (a way to access other files or database records with javascript), but that's usually only useful if there's so much server-side content to choose from that it would be unpractical to send it all in a web page.

[oddcarout]

I always want to learn but have to use what I know.

What I would really like to do is have some pictures and text description that would come up with a mouseover or if I clicked on it. I would like to avoid reloading the whole page. I had someone help me with a similar type thing about 6 years ago but it really doesn't do what i want.

CJ is there a good video based js tutorial out there, i would love to learn more.

Thanks

[Christian J]

What I would really like to do is have some pictures and text description that would come up with a mouseover or if I clicked on it. I would like to avoid reloading the whole page.

That definately sounds like JS+CSS. There should be countless such scripts on the web, here's one: http://www.alistapart.com/d/eatcake/4.html

CJ is there a good video based js tutorial out there, i would love to learn more.

No idea about video based ones, sorry.

[oddcarout]

That definately sounds like JS+CSS. There should be countless such scripts on the web, here's one: http://www.alistapart.com/d/eatcake/4.html

Sometimes I am slow on the uptake and I am not versed in JS. I have tried to build this but I am not getting the hidden aspect of it. The divs are all showing. when I click on the link it will take me to the correct area but I was under the impression that i would not see the other divs. I am using chrome and IE9.

I am attaching my code and putting the JS in the next post.


Thanks for the help

This post has been edited by oddcarout: Feb 23 2012, 04:49 PM

[oddcarout]

function hideDivs (exempt)
{
if (!document.getElementsByTagName) return null;
if (!exempt) exempt = "";
var divs = document.getElementsByTagName ("div);
for (var i=0; i < divs.length; i++)
{
var div = divs[i];
var id = div.id;
if ((id !="header") &&
(id !="footer") &&
(id !="nav") &&
(id !="info") &&
(id != exempt))
{
div.style.display = "none;
}
}
}

window.onload = function ()
{
hideDivs ("");
}

function fixLinks ()
{
if (!document.getElementByTagName) return null;
var anchors = document.getElementsByTagName ("a");
for (var i=0; i< anchors.length; i++)
{
var a = ahchors[i];
var href = a.href;
if ((href.indexOf("#") != -1) &&
(href.indexOf("header") == + 1))
{
var index = href.indexOf(#) +1;
href = "java script:show('"+
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}

function show(what)
{
if (!document.getElementByTagName) return null;
showWhat = document.getElementById(what)'
showWhat.style.display = "block";
hideDivs(what);
}

[Christian J]

You can't nest DIV elements in the HTML with the ALA script (making a nested DIV visible doesn't matter if the outer DIV is still hidden).

Also make sure the nav menu is placed inside div#header so that it doesn't become hidden along with the content DIVs.

Also you should always use a Doctype (see the WDG FAQ).

Finally there are many typos in your copy of the JS file. Download the original again if you can't spot them.

[oddcarout]

Thank you,

I was rushing, will check after work today.

[oddcarout]

Still having problems: (I did not see anywhere to directly copy it from so i retyped it)

function hideDivs (exempt)
{
if (!document.getElementsByTagName) return null;
if (!exempt) exempt = "";
var divs = document.getElementsByTagName ("div");
for (var i=0; i < divs.length; i++)
{
var div = divs[i];
var id = div.id;
if ((id !="header") &&
(id !="footer") &&
(id !="nav") &&
(id != exempt))
{
div.className = "hidden";
}
}
}

window.onload = function ()
{
hideDivs ("one");
}

function fixLinks()
{
if (!document.getElementsByTagName) return null;
var anchors = document.getElementsByTagName("a");
for(var i=0; i < anchors.length; i++)
{
var a = anchors[i];
var href = a.href;
if (href.indexOf("#header") != -1) {
a.className = "alt";
} else if ((href.indexOf("#") != -1) &&
(href.indexOf("header") == -1))
{
var index = href.indexOf("#") + 1;
href = "java script:show('" +
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}

function show(what)
{
if (!document.getElementById) return null;
showWhat = document.getElementById(what);
showWhat.className = "";
hideDivs(what);
}

[oddcarout]

I removed the nested <div>'s

[Christian J]

I did not see anywhere to directly copy it from

The JS file's URL is in the HTML source.

[oddcarout]

I found the final.js file and copied it.

I changed the <div> names to the ones I have in my test.

I am still unable to get it to work.

You can see at www.oddcarout.com/test/gen.html

Thanks,

OCO

[Christian J]

In function hideDivs() you change the className of the DIVs, but there's no associated CSS rule.

[oddcarout]

Thanks, got it done.

[oddcarout]

OK one more question, let me know if this should be a new post, but is there a way to check to see if java scripts are blocked and put up a Non-js page instead?

Thanks,

[Christian J]

Not sure I understand. One of the key features of http://www.alistapart.com/d/eatcake/4.html is to work fine without javascript, by showing all content sections at once. How else would you want a non-JS page to look?