Solved

Javascript (jquery) div question

Posted on 2013-05-15
10
392 Views
Last Modified: 2013-05-15
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
Comment
Question by:leozayas
  • 5
  • 5
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39169771
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
 

Author Comment

by:leozayas
ID: 39169808
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
 
LVL 58

Expert Comment

by:Gary
ID: 39169819
What are you using php, asp ....?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:leozayas
ID: 39169915
php although up to this point i have not inserted any lines of php code its just straight html and javascript
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169935
<?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
 

Author Comment

by:leozayas
ID: 39169951
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
 
LVL 58

Expert Comment

by:Gary
ID: 39169957
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
 

Author Comment

by:leozayas
ID: 39170134
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39170202
<?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
 

Author Closing Comment

by:leozayas
ID: 39170207
that's it Gary..... thank you so much....
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question