How to change a <div> within a page using php without loading the page again |
How to change a <div> within a page using php without loading the page again |
oddcarout |
Feb 7 2012, 05:34 PM
Post
#1
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 7 2012, 06:19 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
With JavaScript, yes. It can also be done with CSS alone, but not with link clicks, only on hover.
|
Christian J |
Feb 7 2012, 06:57 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
What are you using the PHP for in the first place?
|
oddcarout |
Feb 7 2012, 07:45 PM
Post
#4
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 7 2012, 08:42 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Feb 7 2012, 10:12 PM
Post
#6
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 7 2012, 11:05 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 QUOTE 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 |
Feb 23 2012, 04:47 PM
Post
#8
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
QUOTE 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 Attached File(s) gen.html ( 1.08k ) Number of downloads: 270 |
oddcarout |
Feb 23 2012, 04:49 PM
Post
#9
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 23 2012, 06:26 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Feb 23 2012, 06:46 PM
Post
#11
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
Thank you,
I was rushing, will check after work today. |
oddcarout |
Feb 23 2012, 10:23 PM
Post
#12
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 23 2012, 10:25 PM
Post
#13
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
I removed the nested <div>'s
|
Christian J |
Feb 24 2012, 07:45 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
oddcarout |
Feb 24 2012, 04:02 PM
Post
#15
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 24 2012, 06:47 PM
Post
#16
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
In function hideDivs() you change the className of the DIVs, but there's no associated CSS rule.
|
oddcarout |
Feb 26 2012, 11:44 PM
Post
#17
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
Thanks, got it done.
|
oddcarout |
Feb 27 2012, 04:53 PM
Post
#18
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
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 |
Feb 27 2012, 07:12 PM
Post
#19
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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?
|
Lo-Fi Version | Time is now: 26th April 2024 - 06:42 AM |