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/
Related
here is my code. i have a text. and a button for editing the text.i want to click the edit button then that time display a btn as name save . for saving the change that i have. what should i do? help me friends
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
<title>Untitled Document</title>
<script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
});
</script>
<style>
.editable{ background:#EAEAEA}
</style>
</head>
<body>
<div>Some text</div><br><br><button>Toggle editable</button>
</body>
</html>
Well you can just add one line code here:
DEMO
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
$(this).text('Save'); //Add this
})
UPDATE
UPDATED DEMO
To toggle it back just check for its text as below:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
if($(this).text()!="Save") //Add this condition
$(this).text('Save');
else
$(this).text('Toggle editable');
})
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().
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
I used a radio button to display the dropdown list with three options. I need to display a textbox when the user selects the blank option. If anyone has a suggestion that would steer me in the right direction, I would be grateful.
<!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=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="">
<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div5" />
</div>
<div id="div5" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers" onchange="if(this.selected index==blank){this.form['box'].style.visibility='visible'}else{this.form['box'].style.visibility='hidden'};">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
} }
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</form>
</body>
</html>
<select name="selWaiver" id="waivers" onchange='if ($(this).val()=="") {
$("#box").show(); }else{
$("#box").hide();}'>
I recommend JQuery because it will save you a lot of cross browser compatibility issues!
Are you using jQuery in this project. It is so much easier to perform DOM manipulation using the jQuery library. I would use the jQuery toggle() method for this (more info at http://api.jquery.com/css). You could do something like this on the click event for the blank option:
$('.hide').toggle();
Javascript version (untested) :
<select name="selWaiver" id="waivers" onchange='check(this);'>
<script>
function check(sel)
{
var value=frm1.selWaiver.options[frm1.selWaiver.options.selectedIndex].value;
//alert(value) to see if it works
var box=document.getElementById("box");
if (value=="")
box.style.display="block";
else
box.style.display="none";
}
</script>