How does one style links for the current page differently from others? I would like to swap the colors of the text and background.
HTML:
<ul id="navigation">
<li class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
CSS:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
With jQuery you could use the .each function to iterate through the links with the following code:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
$("nav [href]").each ...
If you are using URL parameters, it may be necessary to strip these:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).
It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
There are a couple of restrictions:
If the page wasn't navigated to using one of these links it won't be
coloured;
The ids need to occur at the top of the page otherwise the
page will jump down a bit when visited.
As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.
Other in-page links (bookmarks) will also cause the colour to be lost.
JavaScript will get the job done.
Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.
JavaScript
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forEach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link'});
CSS
.current-link {
color:#baada7;
}
Other Notes
Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.
In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.
a:link -> It defines the style for unvisited links.
a:hover -> It defines the style for hovered links.
A link is hovered when the mouse moves over it.
include this! on your page where you want to change the colors save as .php
<?php include("includes/navbar.php"); ?>
then add a new file in an includes folder.
includes/navbar.php
<div <?php //Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
echo " class=\"navbargreen\" ";?> >
</div>
N 1.1's answer is correct. In addition, I've written a small JavaScript function to extract the current link from a list, which will save you the trouble of modifying each page to know its current link.
<script type="text/javascript">
function getCurrentLinkFrom(links){
var curPage = document.URL;
curPage = curPage.substr(curPage.lastIndexOf("/")) ;
links.each(function(){
var linkPage = $(this).attr("href");
linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
if (curPage == linkPage){
return $(this);
}
});
};
$(document).ready(function(){
var currentLink = getCurrentLinkFrom($("navbar a"));
currentLink.addClass("current_link") ;
});
</script>
Best and easiest solution:
For each page you want your respective link to change color to until switched, put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don't apply the feature to all accidentally. We'll use white as an example:
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
For all other attributes such as LINK, ACTIVE and HOVER, you can keep those in your style.css. You'll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css"><!--
.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
--></style>
</head>
<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">
<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>
<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">
<span class="class1" id="nav_menu">
<font face="Georgia" color="#0000FF" size="2"><b> Home </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> About </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font>
</span>
</td></tr></table></body></html>
Note: the style goes in between the head tag (<head> .... </head>) and the class="class1" and the id="nav_menu" goes in the ie: (-- <span class="class1" id="nav_menu"> --).
Then the last class attribute (class="current") goes in the hyper-link code of the link in the page that you want the active current link to correspond to.
Example: You want the link tab to stay active or highlighted when it's correspondent page is whats currently in view, go to that page itself and place the class="current" attribute by it's link's html code. Only in the page that corresponds to the link so that when ever that page is at view, the tab will stay highlighted or stand out different from the rest of the tabs.
For the Home page, go to the home page and place the class in it. example: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
For the About page, go to the about page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
For the Contact page, go to the contact page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
etc ......
Notice the example Table above;- Lets assume this was the Home page, so on this page, only the Home url link section has the class="current"
Sorry for any meaning-less error, am not a prof. but this worked for me and displays fine in almost all the browsers tested, including ipad, and smart phones. Hope this will help some-one out here because is very frustrating to want to and not able to. I had tried so had to get to this, and so far it's good for me.
#Presto
Thanks! Yours worked perfectly for me, but I came up with a simpler version to save changing everything around.
Add a <span> tag around the desired link text, specifying class within. (e.g. home tag)
<nav id="top-menu">
<ul>
<li> <span class="currentLink">Home</span> </li>
<li> About </li>
<li> CV </li>
<li> Photos </li>
<li> Archive </li>
<li> Contact</li>
</ul>
</nav>
Then edit your CSS accordingly:
.currentLink {
color:#baada7;
}
You do not need jQuery just to do this! All you need is a tiny and very light vanilla Javascript and a css class (as in all the answers above) :
First define a CSS class in your stylesheet called current.
Second add the following pure JavaScript either in your existing JavaScript file or in a separate js script file (but add script tage link to it in the head of the pages) or event just add it in a script tag just before the closing body tag, it will still work in all these cases.
function highlightCurrent() {
const curPage = document.URL;
const links = document.getElementsByTagName('a');
for (let link of links) {
if (link.href == curPage) {
link.classList.add("current");
}
}
}
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
highlightCurrent()
}
};
The 'href' attribute of current link should be the absolute path as given by document.URL (console.log it to make sure it is the same)
Use single class name something like class="active" and add it only to current page instead of all pages. If you are at Home something like below:
<ul id="navigation">
<li class="active">Home</li>
<li class="">Theatre</li>
<li class="">Programming</li>
</ul>
and your CSS like
li.active{
color: #640200;
}
You can add an id in addition to the class name. Styles referring to the id will override the styles referring to the class. You might call the id: #active and add it to the link of the html page you are currently on:
HTML of href="/" (Home):
<ul id="navigation">
<li id="active "class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
Css:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
#active {
color:#640200;
background-color:#000000;
}
So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS, then here is a simple solution.
I want to change the anchor text colour on my software page to light blue:
<div class="navbar">
<ul>
<li>Home</li>
<li>Useful Sites</li>
<li class="currentpage">Software</li>
<li>The Workbench</li>
<li>Contact</li></a>
</ul>
</div>
And before anyone says that I got the <li> tags and the <a> tags mixed up, this is what makes it work as you are applying the value to the text itself only when you are on that page. Unfortunately, if you are using PHP to input header tags, then this will not work for obvious reasons.
Then I put this in my style.css, with all my pages using the same style sheet:
.currentpage {
color: lightblue;
}
Related
I am struggling with a strange issue for last couple of days. I have href tag like below
<a id="opt" class="up" href="javascript:function(){e.preventDefault();}" onclick=" return shoptions(this.id);"></a>
And I am trying to apply another css class on click of this tag,in which i am trying to change the background image of the tag. The class is getting applied but the image is not displaying. Can anybody have an idea of this issue?
My javascript looks like below
function shoptions(obj) {
var a = $('#'+obj+'');
if (a.hasClass('up')) {
a.removeClass('up').addClass('down');
}
else {
a.removeClass('down').addClass('up');
}
return false;
}
And my css looks like below
a.up:link
{
background: #fff url(../egami/arrows_up.gif) scroll no-repeat left center !important;
padding: 2px 0 2px 16px !important;
}
a.down:link
{
background: #fff url(../egami/arrows_down.gif) scroll no-repeat left center !important;
padding: 2px 0 2px 16px !important;
}
Are you sure ":link" is the selector you want to use? My understanding is that this selector only applies to link which the user has not visited. You may want to try removing this and just having "a.up" and "a.down".
Since you are using jQuery, you can make everything more jQuery-style:
$('#opt').click(function(e) {
e.preventDefault();
$(this).toggleClass('down up');
});
And get rid of inline handlers in HTML:
<a id="opt" class="up" href="#"></a>
Demo: http://jsfiddle.net/3NYdF/
Why are using both onClick and href? Use only href:
<a id="opt" class="up" href="javascript:function(){e.preventDefault();};return shoptions(this.id);" ></a>
or only onClick:
<a id="opt" class="up" onClick="function(){e.preventDefault();};return shoptions(this.id);" ></a>
the problem is you use a.up:link & a.down:link
use only a.up & a.down
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Reference
I have a one list page with edit column. When he click on edit it will open one edit page with all data which have list of image in thumbnail format.
Now I put close icon to all images.each image have its unique id.
1) When I click on close icon it will hide remove respective image.
2) onclick of submit I want available image ids.
PHP Code:-
<div id="<?=$rw['id'];?>" style="height:68px; width:86px; margin-right:10px; float:left;">
<img src="img/icons/close.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:50px; width:70px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="group<?=$i;?>" href="<?=$img_gpath;?><?=$rw['upload_url'];?>" title="">
<img src="<?=$img_gpath.$rw['upload_url'];?>" style="height:50px; width:70px; z-index:999;" id="<?=$i;?>">
</a>
</div>
</div>
Please if you have any solution then share it with me.
add common class for div and dynamic id also
now you have only dynamic id;
if you use common class we can write jQuery like this
HTML
<div id="<?=$rw['id'];?>" class="common">
----elements
</div>
jQuery
jQuery('.common').on('click',function(){
var element_id=jQuery(this).attr('id'));// u will get dynamic id of div; after that u can do anything by using this id
});
An example fiddle is created. Please check.
Please give a class of remove-img to the remove buttons.
<img class="remove-img" src="url" />
Then you need to remove the parent division on click of the remove image like:
$('.remove-img').click(function(e) {
$( this ).parent().remove();
});
How do i change a div with another div using javascript??
I want to change the content of the div but it is all plain text and no style and i want it to be styled. is there a way to change the content or do i need to change the whole div and how? i have no clue!!
this is the site: http://www.websteam.nl/index2.html
thanks in advance!
what i have is this:
function wijzigTekst(inhoud) {document.getElementById('transbox').innerHTML = inhoud; }
And this is the html:
<ul id="nav">
<li id="nav-1">Home</li>
<li id="nav-2">School</li>
<li id="nav-3">Over Websteam</li>
<li id="nav-4">Contact</li>
<li id="nav-5">Project</li></ul>
Create CSS style, add the content to the div and it will take the style automatically
CSS
h1{
border:solid 2px #009;
padding:5px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#000;
color:#FFF;
}
JavaScript
function changediv(){
var div = document.getElementById("divData");
div.innerHTML = "<h1>Hello World</h1>";
}
HTML
Change Data
<div id="divData"></div>
or by using jquery :
CSS
#text {
/* style */
}
HTML
<div id="transbox">
<div id="text"></div>
</div>
JS
$('#transbox #text').html('your text');
I need to make linkable an entire <li> or <tr> element, someone suggest me to use javascript, with an onclick action.
function doNav(url)
{
document.location.href = url;
}
This do the job, the problem is that, in this way is impossible for the user, understand what url is going to. How to realize my need (completly clickable elements) without changing browser behaviour?
You don't need javascript for this. Add this css
ul li a {
display: block;
padding: 10px 20px;//more or less, to suit your needs
text-decoration: none;
}
This will make the entire <li> containing an anchor clickable
<li class="block">Text</li>
That lets you see the target. And then:
.block{
display:block;
text-decoration:none; //just so it isn't underlined
}
in the CSS will take care of the "whole thing needs to be clickable" problem.
HTML
<ul class="menu">
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
</ul>
CSS:
ul li.anchors{
text-decoration:underline;
color:blue;
list-style-type:none;
display: inline-block;
margin:2px 4px;
padding: 2px 4px;
}
ul li.anchors:hover{
color:navy;
cursor:pointer;
}
better way may be like this: http://jsfiddle.net/iamanubhavsaini/Cv2FM/1/
here, use content property and data- attribute to tell user before hand as what they are going to click on.
I am trying to create a drop-down select menu with custom css (similar to the drop-down selection of language at http://translate.google.com/#).
I have current html code:
<ul id="Select">
<li>
<select id="myId"
onmouseover="mopen('options')"
onmouseout="mclosetime()">
<div id="options"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</div>
</select>
</li>
</ul>
and the Javascript:
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
But document.getElementById returns null.
Though if I use the code with a div element that does not contain a select list the document.getElementById(id) returns proper div value.
How do I fix this? or is there a better way to create drop-down select menu like http://translate.google.com ?
You've got your div placed inside of the select tag. I'm not sure this is valid, try moving the div outside of the select tag. As far as a better way, the dropdown at the link you've provided isn't using a select tag at all. It is simply styled to look like a dropdown menu, and is using a hidden div with all of the links inside of it. I hope this helps! --> here's some free code to get you started. The CSS triangle trick comes at no extra charge ;)
<div id='fakeDropdown'>
<div class='triangle'> </div>
<div id='menu'>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
</div>
</div>
CSS
#fakeDropdown{
background-color: #888;
height: 30px;
width: 150px;
cursor: pointer;
}
#menu{
display: none;
background-color: #888;
height: 200px;
width: 800px;
position: relative;
top: 30px;
}
.triangle{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #000;
border-left: 10px solid #888;
border-right: 10px solid #888;
float: right;
margin-top: 5px;
}
JAVASCRIPT(assuming you're using jQuery)
$(document).ready(function(){
$('#fakeDropdown').hover(function(){
$(this).find('#menu').show('fast');
});
$('#fakeDropdown').mouseleave(function(){
$(this).find('#menu').hide('fast');
});
});
JSfiddle example
If you want a dropdown like Google Translate's, just look through the source code! There is no <select> element. It's almost entirely CSS.
http://jsfiddle.net/mattball/BA4v3/1/
That's because you can't nest a div tag within a select tag.
Google's fancy drop down is not a select tag at all, it's a set of div elements with the appropriate Javascript to accomplish something similar to a classic select element.
You'll need to change up your markup a bit for this to work out.
Here's a bunch of links to jQuery plugins/tutorials for creating custom drop-down menus.
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus/
http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html
http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
check the value of alert(id):
alert(id);
ddmenuitem = document.getElementById(id);