• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • Last Modified:

Javascript (jquery) div question

I have a page that has a div based navigation menu on top
when you hover over the div the background color changes
and when you click on it it navigates to the page
what i would like is if you are in the page that the div corresponds to
for the anchor in the div to be disabled and for it to stay in hover class
is this possible?
0
leozayas
Asked:
leozayas
  • 5
  • 5
1 Solution
 
GaryCommented:
Nothing to do with jquery, when you render the page at the server you need to remove the href.
How you do this will depend on your backend logic/code.
0
 
leozayasAuthor Commented:
html:
<div id="container">
	<div id="nav-top">
		<div id="nav_home_page" a href = "index.php">Home Page</div>
		<div id="nav_cascata" a href = "cascata.php">Cascata</div>
		<div id="nav_contact" a href = "contact.php">Contact</div>
		<div id="nav_heaven" a href = "heaven.php">18 Holes of Heaven</div>
	</div>
..... more code not relevant
</div>

Open in new window


css:
#nav_home_page, #nav_cascata, #nav_contact, #nav_heaven {
	position: inherit;
	display: block;
	float: left;
	width: 125px;
	border: none;
	text-align: center;
	font-size: 1.3em;
	color: #FFF;
	padding: 5px;
	font-weight: bold;
}

#nav_cascata, #nav_home_page { margin-right: 10px; }

#nav_heaven {
	float: right;
	width: 200px;
}
.hover {
	background-color: #C39468;
	border: none;
}

Open in new window


js
			//mouse over functions
			$('#nav_home_page').mouseover( 
			function () {
				$(this).attr('class','hover');
				$(this).css('cursor', 'pointer');
  			});	

			$('#nav_cascata').mouseover(
			function () {
				$(this).attr('class','hover');
				$(this).css('cursor', 'pointer');
  			});	

			$('#nav_contact').mouseover(
			function () {
				$(this).attr('class','hover');
				$(this).css('cursor', 'pointer');
  			});	

			$('#nav_heaven').mouseover(
			function () {
				$(this).attr('class','hover');
				$(this).css('cursor', 'pointer');  			
			});	

			//mouseout functions
			$('#nav_home_page').mouseout(
  				function () {
      				$(this).attr('class','');
  			});	
					
			$('#nav_cascata').mouseout(
  				function () {
      				$(this).attr('class','');
  			});	
					
			$('#nav_contact').mouseout(
  				function () {
      				$(this).attr('class','');
  			});	
					
			$('#nav_heaven').mouseout(
  				function () {
      				$(this).attr('class','');
  			});	
					
		});

Open in new window

0
 
GaryCommented:
What are you using php, asp ....?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
leozayasAuthor Commented:
php although up to this point i have not inserted any lines of php code its just straight html and javascript
0
 
GaryCommented:
<?php
$this_page=$_SERVER['PHP_SELF'];
?>

<div id="nav_home_page" href="<?=$this_page=='index.php'?'':'index.php';?>">Home Page</div>
//and so on ...

Open in new window

0
 
leozayasAuthor Commented:
I think I might not have made myself very clear I apologize...
I do not have any problems with the navigation or the links they are all working fine
what i would like is that when a div is clicked and the browser navigates to the page for it to recognize they are in the page that corresponds to the div in the menu and that divs class set to hover and to disable any navigation when said div is clicked.....is that better?.....sorry
0
 
GaryCommented:
Not sure I understand you cannot set a div to a class of hover - hover is a state.
Do you want to specify an hover state for a menu link only if it is the current page?
The code above removes the link from the menu if it matches the current page - so you cannot click it (well you can click it but goes nowhere).
0
 
leozayasAuthor Commented:
well if you look at my css there i have a class call .hover when a user hovers over one of the nav divs then jquery adds that class to it and the background changes color, on mouseout it removes the class and goes back to regular state....

the code you offered is excellent for removing the href half of what i'm looking for ....the other half is when the browser navigates to say the homepage i want it to add the class .hover to it as well as remove the href....

thank you so much for your time and your responses GaryC i really appreciate it
0
 
GaryCommented:
<?php
$this_page=$_SERVER['PHP_SELF'];
?>

<div id="nav_home_page" class="<?=$this_page=='index.php'?'hover':'';?>" href="<?=$this_page=='index.php'?'':'index.php';?>">Home Page</div>
<div id="nav_home_page" class="<?=$this_page=='cascata.php'?'hover':'';?>" href="<?=$this_page=='cascata.php'?'':'cascata.php';?>">Home Page</div>
//and so on ...

Open in new window

0
 
leozayasAuthor Commented:
that's it Gary..... thank you so much....
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now