Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> How Would You Solve This Situation?, I think PHP is best - but maybe there are other ways
You find this question...
You cannot see the results of the poll until you have voted. Please login and cast your vote to see the results of this poll.
Total Votes: 4
Guests cannot vote 
matak
post Dec 18 2006, 06:33 AM
Post #1


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
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 smile.gif


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

This post has been edited by matak: Dec 18 2006, 06:31 AM

(list)

Go to the top of the page
 
+Quote Post
AeonLan
post Dec 18 2006, 07:37 AM
Post #2


Member [Level 3]
******

Group: Members
Posts: 96
Joined: 22-September 06
From: In Front of the Monitor
Member No.: 30,404
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. wink.gif

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 18 2006, 07:50 AM
Post #3


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,798
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
myCENT:READY[102.80]
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">&copy;your copy right &nbsp;&nbsp;&nbsp;&nbsp;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.

(list)

Go to the top of the page
 
+Quote Post
2091
post Dec 18 2006, 12:50 PM
Post #4


Member [Level 3]
******

Group: Members
Posts: 90
Joined: 8-October 04
From: vienna
Member No.: 1,509
try to filter the color like here:
http://en.selfhtml.org/css/eigenschaften/filter.htm

smile.gif

(list)

Go to the top of the page
 
+Quote Post
matak
post Dec 18 2006, 05:43 PM
Post #5


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
QUOTE(2091 @ Dec 18 2006, 01:50 PM) *

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

smile.gif

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

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

This post has been edited by matak: Dec 18 2006, 05:48 PM

(list)

Go to the top of the page
 
+Quote Post
matak
post Dec 18 2006, 06:54 PM
Post #6


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
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?!

This post has been edited by matak: Dec 18 2006, 06:57 PM

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 18 2006, 09:10 PM
Post #7


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,798
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
myCENT:READY[102.80]
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.

(list)

Go to the top of the page
 
+Quote Post
matak