Highlight the navigation tab on current page with CSS? - javascript

I'm new to html/css stuff so please bear with me.
I have specific images that I want to use as a navigation menu.
My html,css basically look something like this:
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}
When I hover over the image it does get change to highlighted image but when I click on the link the tab goes back to normal image. I want it to stay highlighted when the user is currently on that page. Can anyone help me with this?
I tried "visited" but it doesn't seem to work and everything I found on Google search was a little bit different than what I'm trying to do.
Thanks in advance.

To answer the specific question, when a user clicks a link, they are taken to a new page. The links have no concept in and of themselves as to what page they exist on.
So you have a few options. The common solution is to use server-side code to send HTML with some indicator that that is the current link. You could add a class like 'current' for example. Furthermore, if that is the page you are on, there's no need for the link either, so one should not have that text linked.
But if you don't have access to the server, then you need to add this manually. You could either create a new style for .current and then on that page, apply that class to your active link.
However, perhaps you are including this menu as an include...meaning the code is the same for every single page. In that case, you will want to target the active link with your CSS. So on each page you'd have a custom bit of CSS on the page.
On the tips page, for example, you'd do this:
#tips {put your style here for active links}
To get a bit fancier/more automated, you could write some javascript that would:
parse the URL
figure out the file name of the page
match that filename up to something in your list of links
apply the class for you dynamically
PS. there is no real need to use the syntax of a#tips in your CSS. The reason is that if you are using an id, there can only be one id on the page, so the a is somewhat redundant.

There are many ways to do this. With PHP, JavaScript or pure CSS with some extra markup.
Since you said you are new to HTML/CSS I think the CSS way would be best for you?
So you have 3 pages with exact the same menu code? Just put this on each site:
For your main page:
<div id="navigation">
<a id="main" class="active" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your tips page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your news page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>
Add CSS:
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}

This example works fine for me...
Home Page
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
Second Page
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>

A way to highlight the navigation tab on the current page with CSS is to create an active class to append to the class of the tag you are currently on. Your active css class would detail how you want it to look when it's considered active. Then, depending on what tab you are on, you insert the active as class for that tab as seen below.
`
<html>
<head>
<title>Highlight Nav Tab of Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
background-color: purple;
font-size: 12px !important;
line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: purple !important;
background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li class = "active">About</li>
<li >More</li>
<li >Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
`
Image shows what nav highlight looks like

Related

Use the tab bar html/css/js from Material Design

I'm trying to use get this tab bar from Material Components: https://material.io/develop/web/components/tabs/tab-bar/
I'm having trouble following the installation steps. This is what I have so far:
tab.html:
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
<span class="mdc-tab__text-label">Favorites2</span>
<span class="mdc-tab__text-label">Favorites3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
tab.css:
<style lang="scss">
#import "#material/tab-bar/mdc-tab-bar";
#import "#material/tab-scroller/mdc-tab-scroller";
#import "#material/tab-indicator/mdc-tab-indicator";
#import "#material/tab/mdc-tab";
body{
background-color: blue;
}
#app
{
main
{
margin-top:65px;
}
div.mdc-layout-app--main-container{ display: block !important;}
div.mdc-layout-app
{
max-width: 1000px;
background-color: white !important;
margin: 0 auto;
}
header.mdc-top-app-bar
{
max-width: 1000px;
}
}
</style>
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
I want it to look like the demo, but right now it looks like something completely different. I was wondering if someone could break down these steps more for me as I'm extremely confused. Thanks. All help is appreciated.
This is what it looks like: enter image description here
I wanted it to look like this: enter image description here
Are you trying to run SCSS in the browser? If so, this is the problem. The "CSS" portion of your code is actually SCSS, a nested syntax that needs to be compiled down to regular CSS in order for the browser to be able to read it. For example:
SCSS (Browser cannot read)
#app {
main {
margin-top: 65px;
}
}
CSS (Works fine)
#app main {
margin-top: 65px;
}
Material should provide plain CSS version for you, otherwise you will need to use a compiler.
To add on Simran his answer:
I see no <script src="app.js"></script> in your HTML.
You need to compile the code below using babel and include the output file in your HTML.
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
If it is unclear how you do this re-read the Getting started
Step 3: Webpack with ES2015 is about compiling JavaScript using Babel

Create bullet list in mindmap selection using js-mindmap

I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/

Tab panels swipe-able in mobile view?

I have a tabbed menu and I want the tabbed menu (the ul class="tabs") to be swipe-able in mobile view.
EDIT: I found a snippet on using Slick JS, I never knew about this JS but I want it to apply this codepen on my current tabbed menu.
How to combine with my current tabbed menu properly? I tried to combine it but the current UI design of my tabbed menu getting messed up.
Here's my codepen of tabbed menu
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
If all you want to do is swipe horizontally on a menu, to reveal any other nav items not visible in the viewport, you can do that with css.
#media screen and (max-width: 768px) {
.tabs {
overflow-x: scroll;
white-space: nowrap;
}
}
Use jquery.mobile. This is ideal for your purpose. I wrote a sample of how it works. What you will have to do next is to bind the swipe event with your click tabs. I suggest you use next() for the right swipe and prev() for left swipe to target the tabs.
See this sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipeleft",function(){
alert('swiped left');
});
$("p").on("swiperight",function(){
alert('swiped right');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>
</div>
</div>
</body>
</html>

PHP file upload inside modal window

I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.

jQuery event parent trigger effect for child [duplicate]

This question already has an answer here:
Is there a way to combine $(this) with :nth-child?
(1 answer)
Closed 8 years ago.
My html code is as follows: (info on bottom)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link type='text/css' rel='stylesheet' href='style/style1.css'></link>
<script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
<script type='text/javascript' src='scripts/script1.js'></script>
</head>
<body>
<div id="title">
<h1>Welcome to My Site</h1>
</div>
<div id='menu_Bar'>
<div id='home' class='selector'>
<div class='back'>
<ul class='empty'>
<li>Home</li>
<div style='display: none'>
<li><a href=''>option 1</a></li>
<li><a href=''>option 2</a></li>
<li><a href=''>option 3</a></li>
<li><a href=''>option 4</a></li>
<li><a href=''>option 5</a></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
My jQuery is:
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this.'div ul div').slideToggle('slow');
});
Now I know the last part won't work (because I would be asking if it did). But I'm sure you see what I'm trying to do. I'm trying to make it so when the selector is hovered over it will open its set of links. I almost was going to use .options for the second part, but realized it would change (or effect) all in same class, which won't allow for similar buttons to be placed on the sides. So how would someone use the parent to affect the child of the parent?
The css:
div {
border: 1px solid black;
}
.empty {
list-style: none;
}
.options {
display: none;
background-color: lightblue;
}
.selector {
background-color: transparent;
}
It shoud be
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this).find('> div > ul > div').slideToggle('slow');
});
});
Demo: Fiddle

Categories

Resources