I have 5 links which act as a bit of a navigation bar, they are a light blue to start with, when one of them is hovered over or clicked I would like them to change color and retain that color until another link is selected.
I have had a good search for a solution and there are many but they all seem to be for a particular case and I just can't seem to adapt them.
Any help would be greatly appreciated.
heres my html here, I have a css file making it look pretty as well.
<!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>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menu bar</title>
<style type="text/css" />
</style>
<link href="navPanelStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tabs">
<div id="topBar">
<ul>
<li>BOOKINGS</li>
<li>ROOMS</li>
<li>NEWS</li>
<li>SPECIALS</li>
<li>ABOUT US</li>
</ul>
</div>
<div id="content_Wrapper">
<div id="Booking">
<p>Bookings</p>
</div>
<div id="Rooms">
<p>Rooms</p>
</div>
<div id="news">
<p>news</p>
</div>
<div id="Specials">
<p>Specials</p>
</div>
<div id="About_us">
<p>About us</p>
</div>
</div>
</div>
</body>
</html>
If you can use Jquery to do this you can try this way, to retain a style for selected tab.
Demo
JS
$("#tabs").tabs({
event: "mouseover",
select: function (event, ui) {
$('.active').removeClass('active');
$(ui.tab).addClass('active'); // ui.tab in the select event will be currently selected tab.
// Do stuff here
}
});
Css
#tabs .active {
color:Blue;
}
if you want to apply over the entire tabe you can apply your styles to li tab element as follows:-
$(ui.tab).closest('li').addClass('active');
Demo2
You need to set up a piece of hover-over listener JavaScript code that removes active class from the element that was last activated and add it to the one that's hovered over.
Like the following:
$(".menuitem").hover(
function() {
$(this).addClass("active_menuitem");
},
function() {
$(this).removeClass("active_menuitem");
}
)
A menuitem can be anything that the CSS related to the active menu item class can be applied to
Related
I am using a PHP while loop to display all of the rows in my table. Each row has a title and a description. I am trying to make a list of the titles with a link around each one. When the link is opened I am trying to make a div appear that displays the title and the description inside of the div. My problem is the divs are not appearing when links are hit.
EDIT: I am using the answer's JSFiddle as my code now, which utilizes jQuery. This code however still doesn't open up the divs.
Here is my full page code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.light, .fade {
display: none;
}
</style>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="noticeboard">
<ul>
<li>title
<div class="light white_content">light<br /><br />descriptionClose</div>
<div class="fade black_overlay">fade</div>
</li>
<li>title
<div class="light white_content">light<br /><br />descriptionClose</div>
<div class="fade black_overlay">fade</div>
</li>
</ul>
<script>
$('.clicklinkshow').click(function() {
$(this.parentNode).find('.light, .fade').show();
});
$('.clicklinkhide').click(function() {
$(this.parentNode.parentNode).find('.light, .fade').hide();
});
</script>
</body>
</html>
Thank you for any help. All help is greatly appreciated.
Javascript:
// show
[].forEach.call(document.getElementsByClassName('light'), function(el) {
el.style.display='block';
});
// hide
[].forEach.call(document.getElementsByClassName('light'), function(el) {
el.style.display='none';
});
Jquery:
$('.light').show();
$('.light').hide();
the code below allows me to have 5 different items on a page, and then let me clone any item I drag to different area and allow me to drag the new clone item. However, when I try to move the clone item to different location, it again clone that item. what did i do wrong?
<blockquote>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 5px; height: 5px; padding: 0.5em; }
.arrow h3 { text-align: center; margin: 0; }
</style>
<script>
function DragClone(id) {
$('.' + id).draggable({helper: "clone"});
$('.' + id).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
}
</script>
</head>
<body>
<div id="test1" class="i1" onmousedown="DragClone('i1');">
<img src="img1">
</div>
<div id="test2" class="i2" onmousedown="DragClone('i2');">
<img src="img2">
</div>
<div id="test3" class="i3" onmousedown="DragClone('i3');">
<img src="img3">
</div>
<div id="test4" class="i4" onmousedown="DragClone('i4');">
<img src="img4">
</div>
<div id="test5" class="i5" onmousedown="DragClone('i5');">
<img src="img5">
</div>
</body>
</html>
</blockquote>
if i do, it works fine but i do not want to create 5 the same function with just different class name.
$(function() {
$('.chaser').draggable({helper: "clone"});
$('.chaser').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
});
so my main goal is to create one function and pass in the class name so it knows to clone that item only and only clone the original and not the clone. Then allow me to drag the item around and resize the new clone item. please advise. thank you
I hope this will help you, its not perfect i think but quite near jsfiddle
HTML
<div id="test1" class="cloneable" onmousedown="DragClone(this);">
<img src="img1.png">
</div>
<div id="test2" class="cloneable" onmousedown="DragClone(this);">
<img src="img2.png">
</div>
JS
DragClone = function(elem) {
if($(elem).hasClass('cloneable')) {
$(elem).draggable({helper: "clone"});
$(elem).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable().removeClass('cloneable'));
});
}
}
Update:
I update jsfiddle
I have created a listview in jquery with a listdivider with a filter. The filter works as expected but as soon as you collapse either of the list dividers, the search subsequently does not work at all,
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).bind("mobileinit", function () {
jQuery.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script>
<script>
var hide=0;
var dpwClone='';
$(function(){
$('[data-role="list-divider"]').click(function(element){
$(this).nextUntil('[data-role="list-divider"]').toggle();
$("#eServiceList").listview("refresh");
// $(this).nextUntil('[data-role="list-divider"]').toggle();
});
$( "#eServiceList" ).listview( "option", "filterCallback", searchList);
function searchList( text, searchValue, item ) {
var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
var show = false;
var hide = true;
if (result == -1 )
return hide;
return show;
};
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem nested list views</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
<li data-role="list-divider" id="dpw" >
DPW
</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider" id="custo">
Customs
</li>
<li>Friends</li>
<li>Work</li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Below is the JSfiddle link.
http://jsfiddle.net/jsfiddle_one/R8pZH/
Using .toggle() adds to the element an inline style attribute style="display: none;" or style="display: block;". List items are already enhanced with display: block; by jQuery Mobile. Hence, when using .toggle() - when it is visible again - the element will get display: block; twice, inline and in CSS style sheet.
To overcome this problem, use .toggleClass() classes rather than inline styling. I fixed your problem by adding a class
.hide { display: none !important; }
and I used it with .toggleClass('hide');
New code
Using custom CSS classes to override existing CSS is safer, and keep in mind that for jQuery Mobile, it's better to end each property with !important to force override.
I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:
Here is what I have so far:
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Veneer_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1 a', {
hover: true
});
</script>
<style type="text/css">
h1 a.selected {
color: red;
}
</style>
</head>
<body>
<div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
<div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
<div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
<div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
<div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
<div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
<script type="text/javascript">
$('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
</script>
</body>
</html>
So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red. Help is greatly appreciated.
jsBin demo
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
Since you are using Cufon text so you need to call Cufon.refresh(); after you change any class to Cufon text, otherwise it won't take effect.
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
You are using the ID selectors, instead you should be using the class selectors (since you have home-link etc assigned to class attribute and not id attribute of the div elements)
Try this:
var selected = "selected"; //Assuming you are storing it in a variable
$(function(){
var allLinks = $('.home-link,.hiw-link,.faq-link,.prize-link,.media-link,.rules-link');
allLinks.click(function(e){
allLinks.find("h1 > a").removeClass(selected);
$(this).find("h1 > a").addClass(selected);
});
});
JsFiddle: http://jsfiddle.net/JsNBt/1/
I am pretty new to css + html and am coding my first website. I have a navigation menu setup inside a div, but I want to change the font-weight of the clicked text from lighter to bold when the user clicks on an item in it (text). Please can you tell me how to do this?
Here is my code so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
iOS
Blog
About
Contact
</ul>
</div>
</div>
</body>
</html>
You need to add a click event listener each navigation item and change its font-weight style.
First, start by using an unordered list for your nav
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Then, place this script block just before the closing </body> tag
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = 'bold';
}, false);
}
</script>
</body>
here you have an example, you should do the same wih your div:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br />
<button type="button" onclick="displayResult()">Change font weight</button>
</body>
</html>