Active hover and select menu buttons with php

pasqo83 · Post by **pasqo83** » Tue May 24, 2011 11:20 pm

Hi,

I am slightly confused in doing a php page, the best way to describe the problem is to follow it.
Please go to www.chatablog.co.uk/sj

The whole page is php, the main area where all the text is in the includes/content folder - everything outside is within the index.php that automatically includes to each page.

However the buttons have 3 actions, active, hover and select. - I can do the active and hover, but unsure how to get select to function as the buttons are called from the index.php page (which will only allow the 2 functions active and hover) as I would need to show it on the other pages. If I add it to the other pages it will duplicate it.

below is the code for the index.php (upto the <? php ?> and some codes shown on recruit.php page - just a little bit past the body)

Any help will be much appreciated.

index.php

<!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=utf-8" />
<title>Welcome To Spaghetti Johns</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/forms.css" rel="stylesheet" type="text/css" />
<link href="scripts/lightbox-0.5/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<link href="scripts/prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/li-slider/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="scripts/li-slider/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/li-slider/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="scripts/prettyphoto/js/jquery.prettyPhoto.js"></script>

<link href="scripts/li-slider/skins/Dark/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/li-slider/js/li-slider-1.1.js"></script>
<script type="text/javascript" src="scripts/li-slider/js/li-slider-animations-1.1.min.js"></script>
<link rel="shortcut icon" href="images/Page/testbg/sj_icon.ico" />

<script type="text/javascript"> 

    	$(window).load(	

			function() {

				$("#li-banner").sp_Li_Slider({						

					animation						: "Random",	// type of Animation: Regular, Random, Regular-Custom, Random-Custom, Regular-Exception, Random-Exception  			

					transitions					: 'None',				// None|transition_name(s) // List of custom animations - for full list please reference to the preview (works only with "Regular-Custom, Random-Custom, Regular-Exception , Random-Exception ")

					auto_play 					: true,   			// true|false - auto play on start

					repeat	 						: true,					// true|false|number - how many times to repeat all slides

					modalMode						:	'prettyPhoto',// lightBox|prettyPhoto|off

					goToSlideOnStart		:	1,						// value //any slide number starting from 1 or url?sp_slide=2

					timer								: 'no',// no|line_bottom|line_top|line_right|line_left

					pauseOnMouseOver		:	false,					// true|false

					tooltip							:	'image',			// none|text|image

					tooltipSize					: 20,						// value // % of slider dimentions from 0 to 100. Use 0 to disable it

					shuffle							:	false,				// true|false - randomize the images order

					delay     					: 4000,					// value // time period of a photos displaying /default - 3000 (3 sec)

					trans_period				:	2000,					// value // time period of chenging the photos /default - 1000 (1 sec)

					vert_sections				:	10,						// value // number of vertical sectors (only for Animation type Blind) /default - 15

					sqr_sections_Y			:	4,						// value // number of squeres by vertical (only for Animation type Sqr) /default - 5

					active_links				:	true,					// true|false //activate links of photos /default - true

					buttons_show				:	false,					// true|false //show all buttons 		/default - true

					play_pause_show			:	false,					// true|false //show Play or Pause buttons	/default - true

					next_prev_show			:	false,					// true|false //show Next or Prev buttons	/default - true

					auto_hide 					: true,					// true|false // auto hide buttons ot start (when auto_play is true)

					buttons_show_time		:	3000,					// value 			//time period befor displayins of the buttons 	/default - 100

					buttons_show_delay	:	500,					// value //time period for appearing of the buttons		/default - 300

					buttons_hide_time 	:	2000,					// value //time period befor disappearing of the buttons/default - 2000

					buttons_hide_delay	:	500						// value //time period for disappearing of the buttons	/default - 500

				});

			}

		);		

</script>

</head>

<body>
<div id="topcenter">
<div id="logo"><a id="logo" href="index.php?page=home"></a></div><!--LOGO -->
<div id="topspacer">
<div id="menu">
<a id="home-select" href="#" title="Welcome" alt="Welcome"></a>
<a id="menus-select" href="#" title="view our menu" alt="view our menu"></a>
<a id="reviews-select" href="#" title="read our reviews" alt="read our reviews"></a>
<a id="contact-select" href="#" title="contact us" alt="contact us"></a>
<a id="facebook" title="join us on facebook" alt="join us on facebook" href="http://www.facebook.com" target="_blank"></a>
<a id="twitter" title="tweet us on twitter" alt="tweet us on twitter" href="http://www.twitter.com" target="_blank"></a>
</div><!-- TOPSPACER -->
</div><!-- MENU -->
</div><!-- TOPCENTER -->

<div id="center">
<div id="bg1">
<div id="main">

    <?php
				include ('includes/content.php');
				?>

</div><!-- MAIN -->

RECRUIT.PHP

<!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=utf-8" />
<title>Welcome To Spaghetti Johns || Recruitment Page</title>
</head>
<script type="text/javascript">
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
</script>
</head>
<body>
<div id="slidepics">
<!-- Slider Start -->

		<div id="li-banner" class="li-banner" style="width:950px; height:150px;">

				<ul>

						<li><img src="images/Page/testbg/food.jpg" /></li>

						<li><img src="images/Page/testbg/food2.jpg" /></li>

						<li><img src="images/Page/testbg/food3.jpg" /></li>

				</ul>

		</div>

<!-- Slider End -->


</div><!-- SLIDEPICS -->
<div id="recruit-select"></div>
<div id="recruittop">

Silkenthread · Post by **Silkenthread** » Wed May 25, 2011 12:00 pm

Try adding this to your css file, change the colors as you need.

a#home-select {
	color:#c3c;
}
a#home-select:hover {
	color:#000;
}
a#home-select:visited {
	color:#c3c;
}
a#home-select:active {
	color:#3F3;
}

  
a#menus-select {
	color:#c3c;
}
a#menus-select:hover {
	color:#000;
}
a#menus-select:visited {
	color:#c3c;
}
a#menus-select:active {
	color:#3F3;
}

a#reviews-select {
	color:#c3c;
}
a#reviews-select:hover {
	color:#000;
}
a#reviews-select:visited {
	color:#c3c;
}
a#reviews-select:active {
	color:#3F3;
}

a#contact-select {
	color:#c3c;
}
a#contact-select:hover {
	color:#000;
}
a#contact-select:visited {
	color:#c3c;
}
a#contact-select:active {
	color:#3F3;
}

CodeCanyon items · Post by **Tino** » Wed May 25, 2011 1:16 pm

Or, since you're just unnecessarily repeating yourself there, just immediately apply it to all links...

a, a:visited { color: #c3c3c3; }
a:hover { color: black; }
a:active { color: #3f3f3f; }

I didn't even read the first post, so I'm not sure if this is even what you're looking for

pasqo83 · Post by **pasqo83** » Wed May 25, 2011 1:57 pm

Tino wrote:
a, a:visited { color: #c3c3c3; }
a:hover { color: black; }
a:active { color: #3f3f3f; }
I didn't even read the first post, so I'm not sure if this is even what you're looking for

Ah thanks, i'll try both of the examples and see if it works and what works best.

CodeCanyon items · Post by **Tino** » Wed May 25, 2011 2:33 pm

They both do the same. But my 'version' is better because you do not need to repeat yourself four times like Silkenthread did. You want your files to be as concise as possible, so what I did it better

pasqo83 · Post by **pasqo83** » Wed May 25, 2011 3:03 pm

Tino wrote:They both do the same. But my 'version' is better because you do not need to repeat yourself four times like Silkenthread did. You want your files to be as concise as possible, so what I did it better

Yeah your one is straight forward and will give it a go, just thinking off the top of my head though (stuck at work, really wish I could just carry on with the site) when it calls the .php file it will read the index.php file menu button <a id="menu"></a> instead of it being the active it will just be the "menu" and not the selected button.

My mind has gone doo-lally, been reading javascript and php codes and learning the basics, strings, array, variables.. I think I could be strung by a string!

Silkenthread · Post by **Silkenthread** » Wed May 25, 2011 6:02 pm

The way Tino described it is the correct way to set your links. Sometimes though you need to set a class to or an id, as you had a separate id set to each link and not knowing the rest of your styling I laid it out separately.

Hope you get it working

pasqo83 · Post by **pasqo83** » Wed May 25, 2011 10:33 pm

Silkenthread wrote:The way Tino described it is the correct way to set your links. Sometimes though you need to set a class to or an id, as you had a separate id set to each link and not knowing the rest of your styling I laid it out separately.
Hope you get it working

Ah ok, the way he's set that out though is if I was using text, i am using .png files for my buttons and each button has 3 different colours.

The way the index file is read is http://www.websitename/index.php?page="homepage"

so it puts everything from the index page (and then the main_text area is everything inside the includes).

Might have to revert it back to ordinary styling if I can't work at it php style

Post by **jacek** » Wed May 25, 2011 10:37 pm

pasqo83 wrote:Might have to revert it back to ordinary styling if I can't work at it php style

php has nothing to do with styling

Are you trying to show a different style on the button for the current page ?

pasqo83 · Post by **pasqo83** » Wed May 25, 2011 10:50 pm

jacek wrote:
pasqo83 wrote:Might have to revert it back to ordinary styling if I can't work at it php style
php has nothing to do with styling

Are you trying to show a different style on the button for the current page ?

my buttons are png, 1 buttons = 3 buttons - home (normal) - home (hover) & home (active)

My index reads (started from the body of the file)

<body>
<div id="topcenter">
<div id="logo"><a id="logo" href="index.php?page=home"></a></div><!--LOGO -->
<div id="topspacer">
<div id="menu">
<a id="home" href="#" title="Welcome" alt="Welcome"></a>
<a id="menus" href="#" title="view our menu" alt="view our menu"></a>
<a id="reviews" href="#" title="read our reviews" alt="read our reviews"></a>
<a id="contact" href="#" title="contact us" alt="contact us"></a>
<a id="facebook" title="join us on facebook" alt="join us on facebook" href="http://www.facebook.com" target="_blank"></a>
<a id="twitter" title="tweet us on twitter" alt="tweet us on twitter" href="http://www.twitter.com" target="_blank"></a>
</div><!-- TOPSPACER -->
</div><!-- MENU -->
</div><!-- TOPCENTER -->
<div id="center">
<div id="bg1">
<div id="main">
    <?php
                                include ('includes/content.php');
                                ?>
</div><!-- MAIN -->

My div where all my buttons go are in the div id="menu".
My div where all the text goes is in the div id="main" is my php part of it.
my files are read http://www.websitename/index.php?page=pagename

What I am trying to get at is how do I make my active button read so that it is able to say that is the page you are on. So I can do my first button and then hover button but unable to do my active button as I don't know how to insert it into each page as it is called from my index.php.

What I meant was in term of the php styling was insteda of me calling the <?php include ('includes/content.php') ;?> I would just do everything in like a HTML style where each page has all the buttons and all the other divs and I wont have my site read as http://www.websitename/index.php?page=pagename instead it would just simply be http://www.websitename/home.php

Hope that made sense

Its difficult to explain something on here sometimes so sorry if it didnt

Post by **jacek** » Thu May 26, 2011 8:23 am

pasqo83 wrote:What I meant was in term of the php styling was insteda of me calling the <?php include ('includes/content.php') ;?> I would just do everything in like a HTML style where each page has all the buttons and all the other divs and I wont have my site read as http://www.websitename/index.php?page=pagename instead it would just simply be http://www.websitename/home.php

That would make no difference if the code is the same

pasqo83 wrote:What I am trying to get at is how do I make my active button read so that it is able to say that is the page you are on. So I can do my first button and then hover button but unable to do my active button as I don't know how to insert it into each page as it is called from my index.php.

You can give the button for the current page a class...

<a id="home" href="#" title="Welcome" class="<?php if ($_GET['page'] === 'welcome') echo 'active'; ?>" alt="Welcome"></a>
<a id="menus" href="#" title="view our menu" alt="view our menu"></a>
<a id="reviews" href="#" title="read our reviews" alt="read our reviews"></a>
<a id="contact" href="#" title="contact us" alt="contact us"></a>

for example.

pasqo83 · Post by **pasqo83** » Thu May 26, 2011 1:28 pm

jacek wrote:

<a id="home" href="#" title="Welcome" class="<?php if ($_GET['page'] === 'welcome') echo 'active'; ?>" alt="Welcome"></a>
<a id="menus" href="#" title="view our menu" alt="view our menu"></a>
<a id="reviews" href="#" title="read our reviews" alt="read our reviews"></a>
<a id="contact" href="#" title="contact us" alt="contact us"></a>

for example.

Thanks Jacek, i will give it a go tonight or tomorrow and see what happens, should work

pasqo83 · Post by **pasqo83** » Thu May 26, 2011 11:06 pm

jacek wrote:

<a id="home" href="#" title="Welcome" class="<?php if ($_GET['page'] === 'welcome') echo 'active'; ?>" alt="Welcome"></a>
<a id="menus" href="#" title="view our menu" alt="view our menu"></a>
<a id="reviews" href="#" title="read our reviews" alt="read our reviews"></a>
<a id="contact" href="#" title="contact us" alt="contact us"></a>

for example.

I've just tried this and it dont work, looks like im just going to have to put code on every page and do it like that

thanks for the help

Post by **jacek** » Thu May 26, 2011 11:14 pm

pasqo83 wrote:I've just tried this and it dont work, looks like im just going to have to put code on every page and do it like that

Don't give up yet ! this method can work, I use it on my main site

What was the code you used ? and in what way did it not work ?

pasqo83 · Post by **pasqo83** » Thu May 26, 2011 11:19 pm

jacek wrote:
pasqo83 wrote:I've just tried this and it dont work, looks like im just going to have to put code on every page and do it like that
Don't give up yet ! this method can work, I use it on my main site

What was the code you used ? and in what way did it not work ?

What I did was use the code you gave me - my css which I am using for the home to be active is called #home-select - I changed it to .activeH .... I called the php file welcome.php (my home page), I then put the coding you gave me with the slight alterations.

href="index.php?page=welcome" title="Welcome" class="<?php if ($_GET['page'] === 'welcome') echo 'activeH'; ?>"

Im not sure what else to do as I have tried without the .activeH and changed it to activeH and #activeH with no joy

Post by **jacek** » Thu May 26, 2011 11:21 pm

oh right, I assumed you were using some kind of template system. If you actually have separate files that include the same header code you will just have to set the class manually for each one.

pasqo83 · Post by **pasqo83** » Thu May 26, 2011 11:27 pm

jacek wrote:oh right, I assumed you were using some kind of template system..

Yeah I am using a template system I have the 1 png file which has the 3 settings for the home button, that is found on my index.php. So I just need to call the last button when it goes to the new page. I think its better sticking to the one I normally do which is not calling the index.php file and just use it as a HTML (with the php extension) file so each page has exactly the same coding so I can edit each page.

Post by **jacek** » Thu May 26, 2011 11:28 pm

Hmm, okay

If it works I guess go with it

pasqo83 · Post by **pasqo83** » Sat May 28, 2011 12:17 pm

jacek wrote:Hmm, okay

If it works I guess go with it

Thanks Jacek, this is going to be my last website I do for a little while anyway as I plan to learn php alot better than what I do, I get the idea of a string and an array, but trying to set the rules up for it cofuses me, so I want to dedicate myself to it a little bit after this website

BetterPHP

Active hover and select menu buttons with php

Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php

Re: Active hover and select menu buttons with php