Okay so I've been studying the book JavaScript and jQuery interactive front end development by "Jon Duckett"
Im on page 210 "Previous and Next Sibling" how do i change the li.a attributes in the navigation drop down sub menu, i have removed all white space so that it does not pick up any unwanted textNodes in the HTML like so.
<ul>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
<li>
Prototypes
</li>
<li>
Fun Stuff
</li>
</ul>
I added the JavaScript from the book to change the value of the class attributes but I am having trouble with this, it does not work but when I change the id to the <li>, the previous and next siblings disappear. i am confused as the code looks correct and it works on a different web page when i give the <li> an id. But does not seem to be working here which is strange. Any help to get this working would be great thanks
/*Javascript
Previous and Next Sibling for portfolio subLinks,
=====================================================================*/
var startItem = document.getElementById('subGraph');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;
/*change the value of the siblings class Attributes
=====================================================================*/
prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';
/*CSS
============================*/
.checkIcon{
background-color: teal;
color:#FFF;
text-shadow: 2px 2px 1px #3b6a5e;
border-top:1px solid #7ee0c9;
border-top: 1px solid #3b6a5e;
content: '\f00c';
position: absolute;
font-family: fontAwesome;
right: 5px;
line-height:50px;
color:#FFF;
}
.altSubLinks1{
background-color: #FFF;
color: #000;
}
The fact that your markup is all packed up and unindented (due to the textNodes i know) makes it hard to see that the element you are matching has no siblings.
Take a look at the indented markup:
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Prototypes</li>
<li>Fun Stuff</li>
</ul>
Note that subGraph is the <a> tag that has no siblings. Only the <li> have siblings.
Therefore you must either set the ids on the <li> tags or navigate to them with parentElement.
Example with parentElement:
var startItem = document.getElementById('subGraph');
var prevItem = startItem.parentElement.previousSibling;
var nextItem = startItem.parentElement.nextSibling;
prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';
.checkIcon {
color:red;
}
.altSubLinks1 {
color:green;
}
<ul><li>Web Development</li><li>Graphic Design</li><li>Prototypes</li><li>Fun Stuff</li></ul>
I am attending an entry level HTML/CSS/JS course and our first assignment is to make a simple website about ourselves. We need to have a horizontal menu that when clicked displays certain information. For example, clicking "description" should display a short paragraph describing ourselves. From what I've researched it seems that my answer lies with using JQuery but I don't believe he expects us to know that nor utilize it this early. Is there another option that I may not be seeing?
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>
</head>
<body>
<img src="hwpic.jpg" alt="Me">
<div id="content">
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a class="selected" href="">Description</a></li>
<li>A form</li>
<li>Course List</li>
<li>Table</li>
<li>Contact Information</li>
</ul>
</div>
</body>
</html>
#header {
padding: 10px;
background-color: #6CF;
color: white;
text-align: center;
}
img {
position: absolute;
right: 7px;
bottom: 148px;
z-index: -1;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
My answer will assume your goal is to accomplish this task using basic Javascript instead of changing pages by navigating the user using the <a> elements. I understand that there are more efficient methods of performing this but I chose to present the information in a hopefully simple easily readable manner.
The way I would accomplish this is by changing your <a> elements:
<a class="selected" href="">Description</a>
To button elements and add the 'onclick' property with the function to call when the button is clicked:
<button onclick="displayDescription()">Click Me</button>
Now we need to create the elements that will be displayed upon clicking the button. For this we create some <div> other container that we can hide until the corresponding button is clicked.
<div id="description" style="display: none;">
Displayed when the description button is clicked.
</div>
Note** For every button we will need to create a <div style="display: none;"> to hide the information until its corresponding button is clicked.
Now we can create our Javascript function:
function displayDescription() {
var x = document.getElementById('description');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Note once again that in this method each Javascript function will map to a button in the same way each hidden will map to the same button.
If you need more help I recommend checking out w3schools and specifically for this problem here is a link to what you need to accomplish with your assignment.
http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I hope this was helpful as I just wrote this during one of my college classes I will probably formalize my answer more at a later time today.
I've got an Org Chart that will run on mobile devices nearly completely different from how it runs on desktop. Everything is as it should be with one minor problem. My Org Chart features the ability to click a person which then slides an accordion down to provide more information about that particular person along with contact information. This feature is great on desktop but when it runs to mobile, my connectors are based on fixed values in the CSS. I need the ::before height to be changed when the accordion is extended to counter this. I've provided photos below for further clarification.
Images of before and after: http://imgur.com/a/x7JSn
Now my main concern is that I've put myself in a position where I'll have to write totally different functions for each element in order for that particular element to connect.
Here's how my HTML is laid out:
<ul>
<li class="director">
<div id="ss_menu">
<a href="javascript:void(0);" class="ss_button">
<span class="title">Director </span><br/>
<span class="sm-hide">Name of Person</span>
</a>
<div class="ss_content">
<img src="img/person.jpg"
width="70px"
style="border: 1px solid #000;"/><br/>
Telephone: 555-555-5555<br/>
Email: emailaddress#email.com<br/>
Room: A123<br/>
Mail Stop: A123
</div>
</div>
<ul>
<li>
<div id="ss_menu">
<a href="javascript:void(0);" class="ss_button">
<span class="title">Assistant to the Director </span><br/>
<span class="sm-hide">Name of Person</span>
</a>
<div class="ss_content">
<img src="img/person.jpg"
width="70px"
style="border: 1px solid #000;"/><br/>
Telephone: 555-555-5556<br/>
Email: emailaddress#email.com<br/>
Room: A124<br/>
Mail Stop: A124
</div>
</div>
<ul>
<! -- THE CODE CONTINUES FOR A WHILE BUT IS LAID OUT THE SAME WAY -->
And then here is the general layout of the vertical lines using the ::before keyword:
.director::before {
content: "";
border-left: 1px solid #ccc;
position: absolute;
height: 165px;
margin-left: -30px;
z-index: -1;
}
.deputydirector::before {
content: "";
border-left: 1px solid #ccc;
position: absolute;
height: 1442px;
margin-left: -30px;
z-index: -1;
}
I'm essentially trying to increase the height of the vertical lines by the amount that the accordion opens.
Lastly here is the jQuery code I'm using for the accordion which I'd like to use as a catch-all for managing my vertical lines as well.
jQuery(function() {
jQuery('.ss_button').on('click',function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
I have a dropdown in HTML. When I hover on it, it expands. I added a new entry in the dropdown, and when I hover on it, I want my new entry visible completely (I added Comp3 in dropdown. I can see the upper part of it, but not completely Comp3). I tried various things like giving height to divs, increasing the height of the component in css, but nothing helped. Viewing the source code of that in the browser, this is the small code snippet of that particular dropdown:
<div class="optionsDropDown">
<p class="optionsDropDown collapseTrigger" id="userMenu">
Hello<em> User </em><span class="closed"></span>
</p>
<ul class="optionsDropDown collapseContent closed" name="userMenu">
<li>
<a class="optionsDropDown" href="javascript:showHelp();">
<span id="0">Comp1</span>
</a>
</li>
<li>
<a class="optionsDropDown" href="myAction.do?actionCode=3&page=controlPanel" target="view">
<span id="1">Comp3</span>
</a>
</li>
</ul>
</div>
Below is the javascript function that expands the dropdown:
$.fn.openMenu = function(menuContent){
$(menuContent).slideDown(200,function() {
$(menuContent).children().fadeTo('fast',1);
});
$('span', this).removeClass('closed');
};
And here is the dropdown class:
div.optionsDropDown {
float: right;
font-size: 11px;
height: 25px;
margin: 12px 32px 0 0;
position: absolute;
top: 0px;
right: 10px;
width: 120px;
z-index: 10000;
}
Please let me know if somehow height can be increased. Thanks in advance.
I believe your <div> and <ul> heights needs to be set to auto and the heights of each <li> needs to be adjusted.
Often times CSS becomes the practice of hit or miss when dealing with issues like these. First set everything to auto then systematically experiment with every permutation.
Good luck!
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;
}