I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends
If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});
That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>
I am fairly new to javascript and have a small problem with the addEventListener function.
I am trying to build some buttons that look like they have been "pressed down" after you click on them. In general this works great, except for one thing:
the eventListener only works after the first click on the element has been done (this means it won't fire on the first, but the second click):
<div id="sidebar">
<p class="Lebenslauf" id="btn1" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Studium</span></p>
<p class="Lebenslauf" id="btn2" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Arbeit</span></p>
<p class="Lebenslauf" id="btn3" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Freizeit</span></p>
<p class="Lebenslauf" id="btn4" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Referenzen</span></p>
</div>
<script>
function addBtnListeners(){
for (var i=1;i<=4;i++){
btn=document.getElementById("btn"+i);
btn.addEventListener("click",function(){
if(this.style.boxShadow=="0px 0px 15px"){
this.style.boxShadow="0px 0px 0px";
}else{
this.style.boxShadow="0px 0px 15px";
}
},false);
}
}
addBtnListeners();
function mOver(obj){
obj.style.backgroundColor="#F1F1F1";
}
function mOut(obj){
obj.style.backgroundColor="#CCCCCC";
}
</script>
and the css:
.Lebenslauf{
text-align:center;
background-color:#CCCCCC;
border-radius:100px;
height:80%;
width:10%;
box-shadow:0px 0px 15px black;
float:left;
margin-right:1em;
margin-left:1em;
display:table;
}
I would appreciate any tips or hints on what might be the problem or what topics I should look into.
Best regards
Edit: inserting
btn.style.boxShadow="0px 0px 15px";
right before I add the eventListeners solves the problem!
The style property represents the inline style set on an element so this.style.boxShadow will initially be "" because the style is coming from a stylesheet and not a style attribute.
The first click hits the else branch and explicitly sets the inline style to match the style that is cascaded from the stylesheet. The second click then matches the first part of the if statement.
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;
}
I have an array of links that when clicked will bring up a hidden div with information related to it. Each link, when clicked, will bring up a different div associated with it. I'm trying to make an image (closelabel.png) on every div with the class 'countystats' act as a close button to hide the divs. I can't get the image in every div to act as a clickable link yet. More importantly, when I click on link one nothing happens. When I open up two hidden divs and try to close one, the opposite one closes (if I click on 'one' and 'two' to make the divs appear, and then I lick on the "a" (for purposes of a closing link) the opposite div is closed. So the button for two closes one.
<style type="text/css">
.county{
color:blue;
display:block;
}
.countystats{
background-image:url('../../../../../closelabel.png') ;
background-position:top right;
border:3px black inset;
background-repeat:no-repeat;
background-color:#ccc;
display:none;
right:250px;
margin: 5px 5px 5px 5px;
padding:5px 5px 5px 5px;
width:200px;
}
</style>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black; overflow-x:hidden;">
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
<a class="county" href="#">three</a>
<a class="county" href="#">four </a>
<a class="county" href="#">five</a>
<a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<p>woot</p><a class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv" href="#">a</a></div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>
<script type="text/javascript">
$('a.county').each( function(e){
$(this).bind('click', function(e){
var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250);
});
});
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250);
});
});
</script>
jsfiddle demo
Your problem is a bit of confusion about what this is in the click handler in here:
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index();
$('.countystats').eq(toClose).hide(250);
});
});
You're calling index on the <a> that you're using to hide the <div> rather than on the <div> itself.
The simplest solution is, as other people have noted, to use closest:
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
No one else noticed what the real root of your problem was so I thought I'd mention it.
You are trying to bind event handlers incorrectly (for what you want the code to do). Also, just use .closest() to figure out which element to hide.
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
http://jsfiddle.net/mattball/tbNvn/4/
Just use parent():
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).parent().hide(250);
});
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);