Add class to shortest element - javascript

I have some JQuery that finds the height of the tallest element and adds that height to elements that are shorter. I need to add the class, main-nav-special-padding to the elements that are shorter using my existing Jquery. I took a stab but it didn't work. Any help is much appreciated. Here's what I have:
HTML
$(document).ready(function() {
var maxHeight = -1;
var element = $('.navbar-nav li a');
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
if (maxHeight < $(this).height()) {
element.addClass('main-nav-special-padding');
}
});
element.each(function() {
$(this).height(maxHeight);
});
});
.main-nav-special-padding {
padding-top: 1rem;
background-color: red;
}
a.nav-button:link {
color: #ffffff;
background: transparent;
padding: .5rem 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
text-decoration: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:visited {
color: #ffffff;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:hover {
color: #2fa4e7;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #2fa4e7;
margin: 2px 6px;
cursor: pointer;
transform: scale(1.05);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:active {
color: #0f395a;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav ml-auto">
<li><a href='Pending_Applications.aspx' class="nav-button" id="toPendingApps">Pending
Applications</a></li>
<li><a href='Pending_Contracts.aspx' class="nav-button" id="toPendingContracts">Pending
Contracts</a> </li>
<li><a href='Completed_Loans.aspx' class="nav-button-at" id="toCompletedLoans">Completed
Loans</a> </li>
<li>Dealer Listing
</li>
<li><a href='Corporate_Account_Profiles.aspx' class="nav-button" id="toCorporateAccounts">
Corporate
Accounts</a></li>
<li>Activity
</li>
<li>History
</li>
<li><a href='Sales_Staff_Promotions.aspx' class="nav-button" id="toSalesPromotions">
Promotions</a> </li>
<li>My Profile
</li>
</ul>

I copied your code over and got this (after changing the background colour):
I'm not sure what you mean by calculating the height as the height looks the same for every element. In case you mean the width you can add this css:
.navbar-nav{
width: 200px;
}
.nav-button{
width: 100%;
}
.navbar-nav li {
list-style-type: none;
}
Which gives you a 200px wide <ul> and each <li> will fill the width. It also takes of the Bullets on the <li> items. If you want the elements to line up to the left instead of center just do this:
a.nav-button:link,
a.nav-button:visited,
a.nav-button:hover,
a.nav-button:active {
text-align: center;
}
I'm not sure if this is solving your problem or not. I'm just confused by which 'height' you're trying to solve for. #huangism is correct that using flexbox would make much of your CSS unnecessary. But that's a topic for another time. Good luck!

about this :
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
if (maxHeight < $(this).height()) {
element.addClass('main-nav-special-padding');
}
});
maxHeight always >= $(this).height(). so element don't add class .
you can edit same as:
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
element.each(function() {
if (maxHeight > $(this).height()) {
element.addClass('main-nav-special-padding');
}
$(this).height(maxHeight);
});
add class to shorter elements.

Related

Transparent/Opaque Navigation Bar is Behind "div" with Class "transbox"

I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>
It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.
Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}

How can I animate border-radius of li element with jquery?

I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :
The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY
You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});
On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

js to determine responsive element width

I am new to js and have hit a brick wall with altering how I calculate an element width depending on the screen size. I started with only calculating the width by how many of the list items were set to "plan-visible". It works great on a laptop screen, but doesn't break at css media query widths when the screen is smaller. I then had the brilliant idea (haha) of attempting to this directly in the javascript with an if/else statement, which I have little experience with. The result was that it did absolutely nothing. I researched and researched and it looks (to me) like it should work, but I am obviously missing something. I have included the html, the original js that worked for a static element, and then my failed attempt at making it responsive. Thanks!
html:
<div id="product-table" class="clear">
<div class="plan-visible">
<h3>BALANCE<em>aap</em><img class="image aap" src="http://localhost:1400/images/baap.png"></h3>
<a class="sbutton aap" href="">Go to AAP</a>
<ul>
<li>Point and click your way through the preparation of your organization’s Affirmative Action plan.<br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>trak</em><img class="image trak" src="http://localhost:1400/images/btrak.png"></h3>
<a class="sbutton trak" href="">Learn More</a>
<ul>
<li>Manage your organization’s hiring process from start to finish.<br> <br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>hub</em><img class="image hub" src="http://localhost:1400/images/bhub.png"></h3>
<a class="sbutton hub" href="">Go to HUB</a>
<ul>
<li>Access a centralized compliance information center to view, publish, and share information from your BALANCEworks applications.</li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>pay</em><img class="image pay" src="http://localhost:1400/images/bpay.png"></h3>
<a class="sbutton" href="">Go to PAY</a>
<ul>
<li>Conduct detailed compensation analyses, identify potential pay discrimination, and design a compliant pay structure</li>
</ul>
</div>
</div>
original js:
$(document).ready(function() {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
});
new, broken js:
$(document).ready(function() {
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
$('#product-table').css('446', width);
} else {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
}
});
css:
#product-table {
margin: 100px auto;
text-align: center;
.plan-visible {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
position: relative;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
border-radius: 5px ; }
.plan-visible:nth-child(1) {width: 180px;}
.plan-visible:nth-child(2) {width: 180px;}
.plan-visible:nth-child(3) {width: 180px;}
.plan-visible:nth-child(4) {width: 180px;}
.plan-hidden {display: none;}
}
/* --------------- */
#product-table h3 {
font-size: 20px;
color: $mainBlue;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: $lightGrey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* product image settings */
#product-table .plan-visible .image {
display: block;
height: 100px;
width: 100px;
margin: 15px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#product-table .plan-visible .image.aap {
border: 3px solid $aap;
}
#product-table .plan-visible .image.trak {
border: 3px solid $trak;
}
#product-table .plan-visible .image.hub {
border: 3px solid $hub;
}
#product-table .plan-visible .image.pay {
border: 3px solid $pay;
}
/* --------------- */
#product-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#product-table li {
border-top: 1px solid $lightGrey;
padding: 20px 0 10px 0;
}
/* --------------- */
/* product table specific buttons */
.sbutton {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
padding: 8px 20px;
margin: 20px 0 0 0;
display: inline-block;
background-color: $mainBlue;
color: white;
border-radius: 4px;
border: 1px solid $mainBlue;
text-align: center;
text-decoration: none;
font-size: 14px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.sbutton:hover {
background-color: #94ae3c;
color: #fff;
border: 1px solid #94ae3c;
text-decoration: none;
}
.sbutton.aap:hover {
background-color: #6f2784;
border: 1px solid #6f2784;
}
.sbutton.trak:hover {
background-color: #5c89b4;
border: 1px solid #5c89b4;
}
.sbutton.hub:hover {
background-color: #b58f2e;
border: 1px solid #b58f2e;
}
.sbutton.pay:hover {
background-color: #94ae3c;
border: 1px solid #94ae3c;
}

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/
Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?
I want to add a CSS-style to the <div> when I hover on the <a> link.
Html:
<div id="meny" class="meny">
Home
</div>
Css:
a.linksM{
color: black;
display: inline-block;
padding: 10px;
margin: 0px;
font-size: 13pt;
font-family: "vandetta", "arial", sans-seriff;
font-weight: bold;
}
div.meny{
border: solid 4px;
border-color: #82b919;
background-color: #82b919;
border-radius: 5px;
border-bottom-color: #006600;
border-top-color: #006600;
border-top: 0px;
}
#home:hover{
border-left-color: #006600;
}
The best way to do this is via CSS. In particular, you can use the pseudoclass hover
div a:hover {
border-left: 1px solid blue;
}
It's also possible to do this in native JavaScript
var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
this.parentNode.classList.remove('new-border');
});
And in jQuery as well
$("div a").on("mouseover", function() {
$(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
$(this).parent().removeClass("new-border");
});
If you want to do it using jQuery then following code will help you.
$(document).ready(function(){
$("div a").mouseover(function(){
$("div").addClass("classname");
});
$("div a").mouseout(function(){
$("div").removeClass("classname");
});
});
You can use jQuery .parent() to target the div containing your link.
$('a').hover(function() {
$(this).parent().toggleClass('green-border');
});
Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/
I would recommend against using javascript to achieve this.
This can be achieved using CSS in several different ways.
Here is a jsFiddle
If you use a HTML strucure for a basic menu:
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
</ul>
</nav>
Then you can add CSS like this:
nav a {
text-decoration: none;
display: block;
padding: 6px 10px;
border-left: 2px solid transparent;
}
nav a:hover {
border-left: 2px solid red;
}
give the div 2 classes
HTML code
<div id="link-container" class="normal">
Link Name
</div>
CSS code
div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div.hover {
border-left: 5px solid purple;
margin: 0;
}
#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}
#link:hover {
font-weight: 900;
text-decoration: underline;
}
Javascript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching
$('#link').on('mouseover', function(){
$('#link-container').addClass('hover')}).on('mouseout', function() {
$('#link-container').removeClass('hover')
});
});
</script>

Categories