How Would You Solve This Situation?

matak

Dec 18 2006, 06:33 AM

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...

QUOTE(hts @ Oct 24 2006, 08:29 PM)

it can be done much much simpler, no iframes or such:

CODE

<?php
echo "<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

AeonLan

Dec 18 2006, 07:37 AM

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.

Saint_Michael

Dec 18 2006, 07:50 AM

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/design/preview/id/2981

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

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta 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://www.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

CODE

#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.

2091

Dec 18 2006, 12:50 PM

try to filter the color like here:
http://en.selfhtml.org/css/eigenschaften/filter.htm

matak

Dec 18 2006, 05:43 PM

QUOTE(2091 @ Dec 18 2006, 01:50 PM)

try to filter the color like here:
http://en.selfhtml.org/css/eigenschaften/filter.htm

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..

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...

matak

Dec 18 2006, 06:54 PM

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

CODE

<?php
function myfunction(){
echo("<strong>I love PHP !</strong><br>");
}
?>

<a href="<?php echo("$PHP_SELF?execute=myfunction")?>">click to execute myfunction ! </a>
<p>
<?php
if ( isset($execute) ){
myfunction();
}
?>

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

I was thinking about something like this

CODE

$idname=nonactive

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

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

but since i have no idea how to correctly type this code, can someone help?!

Saint_Michael

Dec 18 2006, 09:10 PM

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

Dec 18 2006, 09:30 PM

QUOTE(Saint_Michael @ Dec 18 2006, 10:10 PM)

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

CODE

<?php $idname="sit1" ?>

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

this sets id to a on #sit1

ok now function

CODE

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

CODE

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

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

CODE

<?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!!!

Saint_Michael

Dec 18 2006, 09:45 PM

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

CODE

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

Dec 18 2006, 10:07 PM

QUOTE(matak @ Dec 18 2006, 10:30 PM)

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

CODE

<?php $idname="sit1" ?>

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

this sets id to a on #sit1

ok now function

CODE

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

CODE

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

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

CODE

<?php $idactive="sit1clicked" ?>

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

CODE

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

QUOTE(Saint_Michael @ Dec 18 2006, 10:45 PM)

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

CODE

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

just a couple more hours...

Finaly Success!!!

Latest Entries

FLaKes

Jan 2 2007, 05:02 PM

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.

2091

Jan 2 2007, 09:48 AM

QUOTE(element1988 @ Dec 20 2006, 08:21 AM)

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

CODE

<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

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

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

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

Latest Entries