Solved

Javascript (jquery) div question

Posted on 2013-05-15
10
387 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
 

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

707 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now