Switch CSS styles of two elements with link click - javascript

I have two tab buttons at the top of this webpage I'm in the middle of building. There are two styles associated with the buttons a dark blue representing unselected, and light blue mean already selected and view able on the page. The problem I'm having is that I searched through SO for a simple easy JS function that would switch the CSS styles and the one I have currently does a good job. The problem I'm having and you'll see this when you look at the page is that both start up with the dark blue background and I only want one of the links called "Overview" to begin with the light blue BG and the "Features" link to have the dark blue BG. When clicked both will switch with the page content.
web link to page
jQuery
$(function() {
var links = $('.scrollerbtn li a.slt').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML
<div class="scrollernav">
<ul class="scrollerbtn">
<li><a class="slt" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
<li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>
</div>
CSS
.scrollerbtn li a.slt {
display: inline;
color: #FFF;
text-align: center;
background-image: url(../../../images/tabbtnselect.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
.scrollerbtn li a.slt.active {
display: inline;
color: #333;
text-align: center;
background-image: url(../../../images/tabbtn.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
How would I go about modifying this?

Add the active class to the 'Overview' tab.
<ul class="scrollerbtn">
<li><a class="slt active" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
<li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>

basically you need to do is change the active tab background image by clicking it right...?

Related

CSS3 Slight indentation when hovering over a nav item

When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>
This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/
Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.

Can't get NAV links to work, html code is correct

I'm building off a single page template. I decided to add a second page that mirrors the main page. I had to change the navbar link code to point to the main pages various sections (IE: instead of just #about, I made it index.html#about). These links are not working though. If I use "inspect" in Chrome and ctrl+click on the link in the code, it will work, so I'm thinking something in CSS is stopping this section from actually clicking the link.
The page with issues is www.homexphoto.ca/pricing.html
Nav HTML Code
<div class="sidebarnav hidden-sm hidden-xs">
<div class="logo">
<img id="topleftlogo" src="images/transparentlogowhite.png"> Home Expressions <br><em>Photography</em>
</div>
<nav>
<ul>
<li>
<a href="index.html">
<span class="rect"></span>
<span class="circle"></span>
Home
</a>
</li>
<li>
<a href="index.html#services">
<span class="rect"></span>
<span class="circle"></span>
Services
</a>
</li>
<li>
<a href="index.html#pricing">
<span class="rect"></span>
<span class="circle"></span>
Pricing
</a>
</li>
<li>
<a href="index.html#portfolio">
<span class="rect"></span>
<span class="circle"></span>
Portfolio
</a>
</li>
<li>
<a href="index.html#about">
<span class="rect"></span>
<span class="circle"></span>
About
</a>
</li>
<li>
<a href="index.html#contact">
<span class="rect"></span>
<span class="circle"></span>
Contact Us
</a>
</li>
</ul>
</nav>
Nav CSS
/* Sidebar navigation secondary pages */
.sidebarnav {
width: 22%;
float: left;
height: 100%;
position: fixed;
background-color: rgba(12,12,12,0.9);
z-index: 10;
}
.sidebarnav .logo {
position: absolute;
width: 100%;
height: 140px;
line-height: 26px;
background-color: #585858;
padding: 20px;
text-align: center;
}
.sidebarnav .logo a {
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: 525;
text-transform: uppercase;
letter-spacing: 0.5px;
height: 100px;
width: 100%;
display: inline-block;
border: 1px solid rgba(250,250,250,0.5);
border-radius: 15px;
padding: 9px 2px 0px 2px;
}
.sidebarnav .logo em {
font-style: normal;
font-weight: 300;
}
.sidebarnav nav {
position: relative;
top: 60%;
left: 60%;
-webkit-transform: translateX(-60%) translateY(-60%);
-moz-transform: translateX(-60%) translateY(-60%);
-ms-transform: translateX(-60%) translateY(-60%);
-o-transform: translateX(-60%) translateY(-60%);
transform: translateX(-60%) translateY(-60%);
}
.sidebarnav ul {
margin-left: 45px;
list-style: none;
padding: 0;
}
.sidebarnav li{
padding: 10px 0;
}
.sidebarnav span{
display: inline-block;
position: relative;
}
.sidebarnav nav a{
display: inline-block;
color: #fff;
margin-top: 5px;
text-decoration: none!important;
font-size: 15px;
letter-spacing: 0.5px;
text-transform: capitalize;
}
.sidebarnav nav a:focus {
color: #fff;
}
.sidebarnav nav a:hover, nav .active-section {
color: #fff;
}
.sidebarnav nav a:hover span, nav .active-section span{
background-color: #ddd;
}
.sidebarnav nav .active-section .rect{
width: 30px;
}
.sidebarnav nav .active-section .circle{
background-color: #fff;
}
.sidebarnav .social-icons {
position: absolute;
width: 100%;
bottom: 10px;
padding: 0;
margin: 0;
text-align: center;
}
.sidebarnav .social-icons li {
display: inline-block;
margin-right: 15px;
margin-top: 0px;
margin-bottom: 0px;
}
.sidebarnav .social-icons li:last-child {
margin-right: 0px;
}
.sidebarnav .social-icons li a {
font-size: 18px;
color: #fff;
transition: all 0.5s;
}
.sidebarnav .social-icons li a:hover {
color: #45489a;
}
Am I missing something simple here? The template Im using also has Javascript which Im trying not to touch as Im not there yet in skill. I'm hoping that isnt blocking this somehow.
Cheers
EDIT - if I right click the sidebar nav links and 'open in a new tab' they work! But the single click seems disabled?
When I right-click and choose "open link in new window", it works as expected, the new page opens, so the links are correct.
I would suspect that there is some javascript that contains "preventDefault()" for the links in order to perform a scrolling animation or something similar.
In fact, this seems to be a template for a one-pager - the links do work (using animated scrolling) on the index.html page...
So, have a look at the JS files and search for "preventDefault"...
Addition after comments: This piece of code has helped me to solve a similar problem a while ago:
jQuery(function ($) {
$(document).ready(function() {
if(window.location.hash) {
var hash = window.location.hash;
$( 'a[href=' + hash + ']' ).click();
}
});
});

creating menu header on a particular background color causing alignment to go wrong

I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?
So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.

How to change icon colour, text colour and add shadow of H3 tag onclick

New to this JavaScript stuff but i am trying lol. I have a toggle the colour of the text currently changes colour (Red) when i click on one, then changes back to black when i click on another, then the now selected toggles font is red. my question is, is there a way to change the background to white, still have the text change to red and to also add a drop shadow,then change back to the original settings once another google has been selected, and so fourth. Will this be compatible on most browsers?
I have tried altering my already working script but no luck.
$(document).ready(function() {
$('.header h3').on('click', function() {
$('.header h3').css('color', 'black');
$(this).css('color', 'red');
});
});
a#order::before {
content:'';
padding:0;
background: url("./Images/bell1.png") no-repeat !important;
width: 20%;
height: 20px;
display: block;
position: relative;
left: 0;
float: left;
margin-left: 30px;
/* margin-top: 5%;*/
margin-top: 8px;
/*padding-left: 15px;*/
}
/*restaurant icons*/
a#restt::before {
content:'';
padding:0;
background: url("./Images/knife_folk1.png") no-repeat !important;
width: 20%;
height: 20px;
display: block;
position: relative;
left: 0;
float: left;
margin-left: 30px;
/* margin-top: 5%;*/
margin-top: 8px;
font: Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
color: #8fb653;
font-weight: 400;
/*padding-left: 15px;*/
}
/*account icon*/
a#francc::before {
content:'';
padding:0;
background: url("./Images/icon.png") no-repeat !important;
width: 20%;
height: 20px;
display: block;
position: relative;
left: 0;
float: left;
margin-left: 30px;
/* margin-top: 5%;*/
margin-top: 8px;
/*padding-left: 15px;*/
}
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<a id="francc" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
Each has a icon which is not showing, but can be seen on the image before:
Try this:
$(document).ready(function() {
$('.header h3').on('click', function() {
$('a h3').css('color', 'black');
$(this).css('color', 'red');
});
});
fiddle here: http://jsfiddle.net/js55kr4c/
you can also add to your css this:
a h3{
color:black;
}
(so that all h3's are displayed in black color on load)
fiddle here: http://jsfiddle.net/js55kr4c/1/
hope it helps you and others, T.

Parallax image shows at top of page on load

For some reason I am having this weird CSS issue but I have no idea on how to fix it.
I'm using the Materialize CSS framework.
When the page loads, the parallax element appears on top of the page, strangely. It disappears when the user scrolls. Here's a picture of what I mean:
http://i.stack.imgur.com/ExRPq.png
Any ideas? Here's the code:
.main-container {
height: 88vh;
width: 100%;
padding: 0;
margin: 0;
display: -webkit-flex;
-webkit-flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 200;
font-family: Lato;
}
.main-container h1 {
margin-bottom: -5px;
margin-top: -15px;
}
.main-container h5 {
margin-bottom: 20px;
font-family: Roboto;
font-weight: 200;
}
#search-box {
height: 50px;
width: 500px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
resize: none;
}
#media screen and (max-width: 799px) {
.parallax-dsp {display: none}
}
And here's the HTML:
<nav class=" yellow darken-4" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
<ul id="nav-mobile" class="right side-nav">
<li><b>Sign in</b> or <b>register »</b></li>
</ul><i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
<h1>welcome to <logo></logo></h1>
<h5>Mxious is a social music discovery engine.</h5>
<input id="search-box" placeholder="type an artist, song, or album name to begin">
Thanks in advance!
From your picture, I assume you want the parralax image to be right below the nav right?… which I think is fixed. Well, just do a margin-top: to the main-container, and it will put it right below the nav.
Another way could be adding a new div class="top-fill" above main-container and make it the height of nav.
Edit: Looks like I haven't answered all your question, but I haven't worked with that framework, neither too much with parralax, so I don't know how to fix the dissapearing issue.

Categories

Resources