Hi i am trying to make my menu link go red when i am on that page and its not working.
Html:
<li><a id="home" onclick="changeClass('home')" href="index.php">Home</a></li>
CSS:
#topMenu li{
display:inline;
margin-right:60px;
font-size:12px;
font-weight:bold;
color:#000;
text-decoration:none;
}
#topMenu li a{
color:#000;
text-decoration:none;
}
#topMenu li a:hover{
color:#666;
text-decoration:underline;
}
.topMenuon{
color:#F00
}
Javascript:
function changeClass(id)
{
var element = document.getElementById(id);
element.className = element.className + ”topMenuon”;
}
Any ideas on how i could get this to work?
You might want to do that server side, but if for some reason you cannot
and you cannot use jQuery:
function changeClass (id) {
var el = document.getElementById(id);
if (el.href == location.pathname) el.className += 'topMenuon';
};
It's simpler to Include Jquery, and do this:
$('#home').on('click',function(){
$(this).addClass('topmenuon');
});
However, it won't work like that if you are going to another page. You must detect what page you are on somehow in javascript/jquery (using something in the url, or using identifier on the page such as the section title), and then add your class while you are on that page (or,do it server side and don't call it at all if server renders directly). Can't use onclick like that if you're leaving the page anyway, new page has no way of knowing if you are doing full postback rather than ajax!
Plain js
window.onload = function(){
document.getElementById("home").onclick = function(){
this.className +=" topMenuon" ;
}
}
Edit
You are probably going to a new page on the click of the link. Hence the above code would not change the class of the link since you are now on a new page.
You may need to add the class to the link using php(i assume you are using it).
Apply as
var element = document.getElementById('home');
element.setAttribute("className", newClass);
function changeClass()
{
var element = document.getElementById('home');
element.className += 'topMenuon';
}
<li><a id="home" onclick="changeClass();" href="#">Home</a></li>
use jquery - this in the <head>...
<script src="yourPath/jquery_1.8.0_min.js" type="text/javascript"></script>
then...
$(document).ready(function(){
$("#home").addClass('topMenuon');
}
that'll do it...
S
Related
I'm trying to make a button create new entries in a list that display similar to this:
"#1 new Click Me"
Except I want to make "Click Me" to show up as yellow text in a black box, and then I want to make the black box disappear and the text turn brown on mouseover. I've been able to make the list appear, but don't know how to edit the style of the text to make it appear the way I want to. The most code I think I need to give for this is this:
var li = document.createElement("li");
var liBody = document.createTextNode("#"+numOfNewCMs+
" new " + newClickMe);
li.appendChild(liBody);
And then I insert li into the list.
I figure I should make newClickMe a variable and edit that and then put it next to the rest of the text in the liBody variable, and I figure the HTML span element is the best way to do that, except I don't even know quite what the span element really does. How do I go about editing the style of that particular string? I can't get around to figuring out how (if I even can) make the text turn brown on mouseover until I do so.
Never met CreateTextNode, but i guessliBody.style.fontSize="12px"should help. And other properties such as 'fontWeight,color,fontStyle...'
HTML elements have a style property that can be used to apply CSS styles to them.
For example:
var newClickMe = document.createElement("span");
newClickMe.style.backgroundColor = "#000000";
newClickMe.style.color = "#FFFF00";
newClickMe.innerText = "Click Me";
var li = document.createElement("li");
var liText = document.createTextNode("#"+numOfNewCMs+
" new ");
li.appendChild(liText);
li.appendChild(newClickMe);
Will make the list item have a black background with yellow text.
For more details on the style property, MDN has a great section on it: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
And here is a reference page to translate CSS properties into their JavaScript equivalent: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
I'm assuming you want the styles to change on mouseOver. I just changed the styles using css' :hover. Is this what you had in mind?
var numOfNewCMs=1;
function generateLi(){
var li = document.createElement("li");
var liBody = document.createTextNode("#"+numOfNewCMs+
" new ");
var sp = document.createElement("span");
var spBody = document.createTextNode("Click Me");
sp.setAttribute("id", "sp"+numOfNewCMs);
sp.setAttribute("onmouseover", "highlight("+numOfNewCMs+")");
sp.setAttribute("onmouseout", "highlight2("+numOfNewCMs+")");
sp.style.backgroundColor='black';
sp.style.color='yellow';
sp.appendChild(spBody);
li.appendChild(liBody);
li.appendChild(sp);
lis.appendChild(li);
numOfNewCMs++;
}
function highlight(id){
var element= document.getElementById('sp'+id);
element.style.backgroundColor='white';
element.style.color='brown';
}
function highlight2(id){
var element= document.getElementById('sp'+id);
element.style.backgroundColor='black';
element.style.color='yellow';
}
li{
margin-bottom:20px;
}
li > span{
padding:5px;
margin-bottom:10px;
}
li:hover > span{
color:brown;
background-color:white;
}
<button onclick="generateLi()">Click me</button>
<div id="lis" style="margin-top:20px;"></div>
I am trying to style some buttons for my website
This is my html
<div>
<a class="page_numbers"><span>100</span></a>
<a class="page_numbers"><span>2</a></span></div>
this is my css
.page_numbers{
display:table-cell;
border:solid;
padding:0px;
border-radius:100px;
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
}
div {
display:table;
border-spacing:10px;
}
}
and finally this is my javascript
var obj=document.getElementsByClassName("page_numbers")
for (i in obj){
console.log(obj[i].children)
obj[i].children[0].style.color="black"
obj[i].style.borderColor="rgb(85,170,255)"
function jun(i){
obj[i].addEventListener('mouseenter',function(){obj[i].style.background="yellow";obj[i].style.color="red"},true)
//
obj[i].addEventListener('mouseleave',function(){
obj[i].style.background="white";
obj[i].style.color="rgb(12,31,22)";},true)
}
jun(i);
}
the background color changes on mouseleave and enter but not the font color...I suppose I am doing something wrong along the way or I am missing a fundamental concept
this is my jsfiddle link
http://jsfiddle.net/repzeroworld/boqv8hak/
advice please..still learning JS
Firstly, all of this should be in CSS and is trivial to do so
.page_numbers:hover
{
background-color: yellow;
}
.page_numbers:hover span
{
color: red;
}
Now the issue you are having is that on about the 4th line of your JS you explicitly set the color of the child element (the span) inside the .page_number element to be black. Now on you mouse enter you are setting the color on the page_number element, but since the child has a style applied directly to it (i.e. color: black) it does not inherit the parent style. Inline styles (i.e. style applied directly to the element with the style="" attribute, which is what JS does) always have the highest precedence. This is why it is generally not best practice to put inline styles on an element, as you have just seen, they are pretty much impossible to override. So change either the child to not have an explicit style, or on the mouse enter change the child not the parent
var obj = document.getElementsByClassName("page_numbers")
for (i in obj) {
console.log(obj[i].children)
obj[i].children[0].style.color = "black"
obj[i].style.borderColor = "rgb(85,170,255)"
function jun(i) {
obj[i].addEventListener('mouseenter', function () {
obj[i].style.background = "yellow";
obj[i].children[0].style.color = "red"
}, true)
//
obj[i].addEventListener('mouseleave', function () {
obj[i].style.background = "white";
obj[i].children[0].style.color = "rgb(12,31,22)";
}, true)
}
jun(i);
}
or
var obj = document.getElementsByClassName("page_numbers")
for (i in obj) {
console.log(obj[i].children)
obj[i].style.borderColor = "rgb(85,170,255)"
function jun(i) {
obj[i].addEventListener('mouseenter', function () {
obj[i].style.background = "yellow";
obj[i].style.color = "red"
}, true)
//
obj[i].addEventListener('mouseleave', function () {
obj[i].style.background = "white";
obj[i].style.color = "rgb(12,31,22)";
}, true)
}
jun(i);
}
but as I indicated all this should really be in CSS
You trying to change color of a instead of span
Try like this
obj[i].children[0].style.color = "red"
JSFIDDLE
Hi I'm new and not sure if I'm doing this correctly.
I use Javascript that will decorate an active link after it's been clicked.
Question is, how can I load the page with one of the menu items already active?
Example: http://moschalkx.nl/
Javascript code:
function hlite_menu(obj){
var lnk=document.getElementById('menu').getElementsByTagName('A');
for(var i in lnk){
lnk[i].className=(lnk[i]===obj)?'menu_active':'menu_idle';
}
}
function set_menu(){
var lnk=document.getElementById('menu').getElementsByTagName('A');
for(var i in lnk){
lnk[i].className='menu_idle';
lnk[i].onclick=function(){
hlite_menu(this);
}
}
}
window.onload=set_menu;
CSS:
a.menu_idle {color:#333333; text-decoration:none;}
a.menu_active {color:#333333; text-decoration:underline;}
a:visited {color:#333333; text-decoration:none;}
a:hover {color:#333333; text-decoration:underline;}
You already have your hlist_menu function that sets a particular link to be active, so I would just call that from your set_menu function for whichever link is supposed to be active to begin with
function set_menu(){
var lnk=document.getElementById('menu').getElementsByTagName('A');
for(var i in lnk){
lnk[i].className='menu_idle';lnk[i].onclick=function({hlite_menu(this);}}
if (lnk[i] /* ??? how do you know whether this is the link to activeate up front? */ ) {
hlist_menu(lnk[i]);
}
}
Also, this
lnk[i].onclick=function({hlite_menu(this);}}
can be simplified to just
lnk[i].onclick = hlite_menu;
assuming you change it to
function hlite_menu(){
var lnk= document.getElementById('menu').getElementsByTagName('A');
for(var i in lnk){
lnk[i].className = (lnk[i] === this) ? 'menu_active':'menu_idle';
}
}
in my code there's a css style Settings for all table headers - <th>
i did not make settings for Css my self but until now it was ok for me so i didn't try to edit those .
but now that i have to print the page, and font color set to #ffffff
it sure looks nice on a backGround but on print out it will not show
my css is made out like this
#TBLtime th , #TBLparam1 th , #TBLparam2 th
{
font-size:12px;
text-align:right;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
so id selector is per element , how do you make it easier to control /modify from javascript
say i need to alter color property . how will i be able to access it from javascript ?
function DocPrnt() {
document.getElementById(id).style.color = "black";
print();
}
is there a better option for a selector to be easy to access from JS or this is common approach ?
Well, for a pure JavaScript solution, this may work:
function DocPrnt() {
var headerCells = [],
i = 0;
headerCells = document.getElementsByTagName('th');
for (i = 0; i < headerCells.length; i += 1) {
headerCells[i].style.color = "#000000";
}
print();
}
Personally, I'd just add a new stylesheet for printing only:
<link rel="stylesheet" type="text/css" href="/print.css" media="print" />
i have the following CSS for a mouse hover event. Im not sure how to refer to the #tabs ul li a:hover from within the Javascript?
#tabs ul li a:hover
{
color: #000;
font-weight:bold;
background-color: #0ff;
}
and i wish to swap the background color line for this Javascript code:
<script type="text/javascript">
hex=255;
function fadetext(){
if(hex>0) {
hex-=11;
document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",50);
}
else
hex=255;
}
</script>
This:
document.getElementById("#tabs ul li a:hover")
isn't valid syntax, you only need to specify the id there:
document.getElementById("tabs")
You can change the style of an element on hover something like this:
var elem = document.getElementById("id");
elem.onmouseover = function(){
// your code
};
Let's suppose you have assigned the id myid to your link, you can do the stuff for that like this:
var elem = document.getElementById("myid");
elem.onmouseover = function(){
elem.style.backgroundColor = 'color value';
elem.style.color = 'color value';
};
Update:
Since in your code you are using loadit(this) in onclick event, you don't need to use document.getElementById because element is already referenced with this keyword, also you may want to use the onmouseover event instead of click event if you want to something to happen when element is hovered like:
<li><a href="tab-frame-workexperience.html" target="mainFrame" onmouseover="loadit(this)" >Work experience</a></li>
and then your function should look like this:
function loadit(elem)
{
elem.style.color = 'color value';
}
and/or you can create the two functions for two events if you want.
Note also that you can use jQuery to do it easily and in unobstrusive fashion with hover method:
$(function(){
$('#tabs ul li a').hover(function(){
$(this).css('color', '#ff0000'); // this fires when mouse enters element
}, function(){
$(this).css('color', '#000'); // this fires when mouse leaves element
}
);
});
Do you mean like this? This didn't work...
#tabs ul li a:hover
{
color: #000;
font-weight:bold;
<script type="text/javascript">
hex=255;
var elem = document.getElementById("tabs");
elem.onmousehover = function fadetext(){
if(hex>0) {
hex-=11;
elem.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",50);
}
else
hex=255;
}
</script>
}
One solution is to edit your stylesheet instead of changing the style of every element, this can be done with a simple one-liner:
document.styleSheets[0].insertRule("#tabs ul li a:hover{rgb(255, 255, 255);}", 0);
Where the second argument specifies that the rule should be inserted first in the stylesheet.
For IE this is done with the addRule function instead:
document.styleSheets[0].addRule("#tabs ul li a:hover", "rgb(255, 255, 255)");
Update:
In your case, it would mean replacing this row:
document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";
with
var ss = document.styleSheets[0]; //gets the first external stylesheet in your document
if(ss.insertRule) //checks browser compatibility
ss.insertRule("#tabs ul li a:hover{rgb("+ hex + ", " + hex + ", " + hex + ");}", 0);
else
ss.addRule("#tabs ul li a:hover", "rgb("+ hex + ", " + hex + ", " + hex + ")");