How Would You Solve This Situation? I think PHP is best - but maybe there are other ways

matak · December 18, 2006

Ok, I've been playing with CSS for that IHB project of mine, and this is the result

My Webpage

Now, when you hover those doors and left chair you can see how it changes. Ok, that is fine for me, but next thing i need to do is :active links.

When you press on the left chair and hold mouse you can see that it is different color, beacouse image is different.

Now when you click on it, index.html is reloaded and the chair looks the same as first time, which is normal.

I could put <a href="index_left_chair.html"> to be loaded and then the same for the right chair, but that would make things way to much complex.

Now since i already have that image which looks bit darker, can i use some piece of PHP code, that when i click on LEFT chair that it changes code so that it uses that picture :active as base picture so that it looks like you are sitting on a chair.

Hope you understand this question...

it can be done much much simpler, no iframes or such:
<?phpecho "<div class=\"content\">";$page=$_GET['page'];$page.="php";include($page);echo "</div>";?>
and your url`s will be like: index.php?page=about

this will include in index.php, the about.php page (if this is found in the same directory as index.php).
well, this piece of code has security problems, as the $_GET[] value is not sanitized...but that`s another story...just understand this and we`ll continue afterwards

Now this code looks ok to me. Could i use it for the question up, and how?

Here is another link i found that could be useful but i don't know how could i use it

Change CSS color with PHP

I wanted to add poll.. Hope i made it
Edited December 18, 2006 by matak (see edit history)

AeonLan · December 18, 2006

I pretty much bugged. First of all you have no questions. Secondly, I didn't see an opening or problem that you would like to be solve in the situation. :lol:

Saint_Michael · December 18, 2006

I think I Understand where going and I can say you don't need php whatsoever you just need a simple css code. What your asking is that you want the chair to look active in hte sense that the picture looks like the other well it is a simple css thing.

Here is an example of and active page link

http://www.oswd.org/

As you notice the about link is highlighted over the rest as you scroll through the links. Which means that link is currently active or the in the sense your looking at that page right now.

So all you do is put in a small css code for a current link and then set that link style and your set.

From the site I showed you the set up looks like so.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Welcome to webnia</title><link href="stylesheet.css" rel="stylesheet" type="text/css" /></head><body><div id="wrapper">  <div id="colLeft">	<div id="divlogo"> <span class="web">web</span><span class="ain">ain</span></div>	<div id="Navigation">	  <ul>		<li><a href="#"> home</a></li>		[b]<li><a href="#" class="current"> about</a></li>[/b]		<li><a href="#"> portfolio</a></li>		<li><a href="#"> contact</a></li>	  </ul>	</div>	<div id="menuTab">navigation</div>  </div>  <div id="colRight">	<div id="divBanner"></div>	<div id="divMainContent">	  <h2> Welcome to webain..</h2>	  <p class="allpara">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>	  <h2> About the author..</h2>	  <p class="allpara">I am a web designer and developer and have been creating bespoke contemporary web sites and web applications for three years. This is my first attempt at open source web design template. I hope you like it. </p>	</div>  </div>  <div id="footer">©your copy right     designed by <a href="http://webain.co.uk; target="_blank">M S Rahman</a> </div></div></body></html>

As you see that is the link style set up that you would place for that page.

Now for the actual nav CSS

#Navigation {	padding: 0px;	margin-top: 40px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	width: 175px;}#Navigation ul {	list-style: none;	margin: 0px;	padding: 0px;}#Navigation li {	display: block;}#Navigation ul li a  {	color: #FFFFFF;	display: block;	text-decoration: none;	font-size: 14px;	background-color: #32556B;	border-left-width: 5px;	border-left-style: solid;	border-left-color: #32556B;	height: 15px;	padding-top: 3px;	padding-bottom: 3px;	padding-left: 25px;	margin: 0px;	border-right-width: 5px;	border-right-style: solid;	border-right-color: #32556B;	padding-right: 10px;	border-bottom-width: 1px;	border-bottom-style: solid;	border-bottom-color: #3A5D73;	background-image: url(images/icons/arrow.gif);	background-repeat: no-repeat;	background-position: left;}[b]#Navigation ul li a:hover,  #Navigation ul li  a.current {	background-color: #365D7A;	border-right-width: 5px;	border-right-style: solid;	border-right-color: #FFFFFF;	border-left-width: 5px;	border-left-style: solid;	border-left-color: #365D7A;	color: #B4FF05;}[/b]

As you can see the nav menu is set up with a current code, so all you have to do is individual current css for your images and then when a user clicks on the page that image will remain highlighted, hopefully this isn't that to confusing if it is contact me at my yahoo or msn accounts and I can help you from there.

December 18, 2006

try to filter the color like here:
http://forums.xisto.com/no_longer_exists/

:lol:

matak · December 18, 2006

try to filter the color like here:http://forums.xisto.com/no_longer_exists/

well it's a joke i guess beacouse you probably know that dhtml doesn't work right in Firefox...

to Saint_Michael

is this ':current' property or a class. beacouse if i have like 5 links that i want to have current will it work for every one of them.. *edited not i don't want to change pages from index.html to about.html or like that, i want all of the user choices to stay in index.html. i know i'm asking to much, but hey you gotta ask somewhere.. hope u understand what i want.. :lol:

so you see, this is something that could easily be done with some simple php code...

you don't need to reply that. i'll try code and post back later.

i was more intrested in php code beacouse later i wanted to add dynamical page, in which users could "see" somebody else sitting on that chair, and maybe when they try to sit on it it will be unavailable. i think that making something like that is just impossible in CSS.

ok, i'm going to test this code of yours and post back soon...
Edited December 18, 2006 by matak (see edit history)

matak · December 18, 2006

sorry couldn't find a way to use that current.. but i found this

<?phpfunction myfunction(){echo("<strong>I love PHP !</strong><br>");}?><a href="<?php echo("$PHP_SELF?execute=myfunction")?>">click to execute myfunction ! </a><p><?phpif ( isset($execute) ){myfunction();}?>

Could i use it to onclick change ID, or CLASS of div tag?!

I was thinking about something like this

$idname=nonactive<?phpfunction myfunction(){echo($idname=current);}?><a id=$idname href="<?php echo("$PHP_SELF?execute=myfunction")?>">click to execute myfunction ! </a><p><?phpif ( isset($execute) ){myfunction();}?>

but since i have no idea how to correctly type this code, can someone help?!
Edited December 18, 2006 by matak (see edit history)

Saint_Michael · December 18, 2006

current is a class so it will work for all of them if you set the link style to that.But what your asking in order to stay on the index page you would have to set up a iframe like include in which it looks like a frame but doesn't act like one.I seen it done but I haven't found the coding for it yet.

matak · December 18, 2006

current is a class so it will work for all of them if you set the link style to that.
But what your asking in order to stay on the index page you would have to set up a iframe like include in which it looks like a frame but doesn't act like one.

I seen it done but I haven't found the coding for it yet.

ok.. here's the code i've tried

<?php $idname="sit1" ?><a id=<?php echo "$idname" ?> href=""></a>

this sets id to a on #sit1

ok now function

href="<?php echo("$PHP_SELF?execute=myfunction") ?>"

calls for myfunction when i click on link....

then i don't know how to setup that function...

i tried

<?php function myfunction(){ $idname = $idactive; } ?>

where $idactive is ID of a when clicked...

<?php $idactive="sit1clicked" ?>

sit1clicked is defined as sit1:active in css, but i removed sit1:active to see does the script work

but that doesn't work (well i guessed it wouldn't)

I would like to try function with $_GET['id'] but i don't know how to set it up...

Now the example given prints "I love PHP !" under the link, so it means that script is ok, now just the function that would replace $idname with $idactive would be great!!!
Edited December 18, 2006 by matak (see edit history)

Saint_Michael · December 18, 2006

Well I was able to find something about the $_GET['id']

if(!isset($_GET['id']) | !isset($_GET['rid'])

so you you have to set up a if statement of some sorts to finish off the script from the looks of it.

matak · December 18, 2006

ok.. here's the code i've tried
<?php $idname="sit1" ?><a id=<?php echo "$idname" ?> href=""></a>
this sets id to a on #sit1

ok now function
href="<?php echo("$PHP_SELF?execute=myfunction") ?>"
calls for myfunction when i click on link....

then i don't know how to setup that function...

i tried
<?php function myfunction(){ $idname = $idactive; } ?>
where $idactive is ID of a when clicked...
<?php $idactive="sit1clicked" ?>
sit1clicked is defined as sit1:active in css, but i removed sit1:active to see does the script work

but that doesn't work (well i guessed it wouldn't)

I would like to try function with $_GET['id'] but i don't know how to set it up...

Now the example given prints "I love PHP !" under the link, so it means that script is ok, now just the function that would replace $idname with $idactive would be great!!!

Hm..Or maybe it would be better to add function that would replace the whole a tag which is defined with id= $idname with a tag defined by $idactive ?!

Huh.. i totaly forgot on

<?phpif ( isset($execute) ){myfunction();}?>

Well I was able to find something about the $_GET['id']
if(!isset($_GET['id']) | !isset($_GET['rid']) 
so you you have to set up a if statement of some sorts to finish off the script from the looks of it.

yes you are right. I forgot on end part with that $execute thingy.. now i have to edit everything again. But by the looks of this script i feel it could be possible..

hm.. i could add totaly new div tag here.. but that is not the point.

i guess i must sleep on this, maybe tomorrow i'll wake up with solution :lol:

just a couple more hours...

Finaly Success!!!

Edited December 18, 2006 by matak (see edit history)

element1988 · December 20, 2006

umm...yeah, not trying to sound like a noob here but whats CSS? ive seen ppl talking about it alot, its driving me crazy :S

January 2, 2007

umm...yeah, not trying to sound like a noob here but whats CSS? ive seen ppl talking about it alot, its driving me crazy :S

this means "cascade style sheet" (dunno how to spell) and defines the layout for your page

like

<html><body bgcolor=black text=#FFA500><style type=text/css>body{background:#000000;color:#FFA500;}.democlass{background:#FFA500;color:#000000;}.democlass2{background:#00A500;color:#FF0000;}#demotable {background:#FF0000;color:#F0F0F0;}</style><table id=demotable><tr><td class="democlass" id='demoWindow' onMouseover=java script:switcher(this.id) onMouseout=java script:switcher(this.id)>try me</td></tr></table><script language="JAVASCRIPT">function switcher(item){if(document.getElementById(item).className == "democlass2")document.getElementById(item).className = "democlass";else document.getElementById(item).className = "democlass2";}</script></body></html>

you can write it directly in the html file or in a extra file...

mfg

FLaKes · January 2, 2007

I guess I came to late, I didnt see any problems, I guess it was already fixed. By the way, about the poll, its kind of confusing so I voted interesting as I am interested in ruby on rails, as soon as I can get some time on my hands I will try it out.

Sign In

How Would You Solve This Situation? I think PHP is best - but maybe there are other ways

You find this question... 4 members have voted

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information

You find this question...
4 members have voted