I have been trying to get this simple code to work for hours but need help as it does not seem to work.
I'm using toggleClass in a js file to switch class on the header. I´ve tried every possible way, also tried it in jsfiddle and it works sometimes and sometimes not even with the same code. So something is definitely wrong.
Here is my html code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="menystyle.css">
</head>
<body>
<header class="large">
<nav>
<ul>
<li>Home
</li>
<li>Posts
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<section class="stretch">
<p>Make menu small</p>
<p>End of the line.</p>
</section>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
And here is the script code in the js file:
$(document).on("scroll", function () {
$("header").toggleClass("small", $(document).scrollTop() > 100);
});
And here is the CSS:
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;}
section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; }
header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }
/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }
/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
In the head tags, include this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
It should work after that.
Include jquery.min.js in your code and then your code will work fine. See your code in working condition.
Related
I've been following a tutorial about nav bars and everything is good except when I make the window small and try the menu button and re-scale the window to normal size everything disappears.
I've tried adding an if statement in the JavaScript but that doesn't solve the problem.
https://codepen.io/diegopiscoya/pen/yZJWBy
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
</script>
I expected the script to work only when the window size is <900 but it works always, so when the menu button hides the nav bar it does it in full size as well.
So, let's understand what is happening on the code...
When $(".menu").click(...) is triggered, it fires $("nav").slideToggle(500);, the slide toggle method on its final action will add a inline css property on the nav element, it will be display: block; if nav was hidden, or display: none if nav was displayed.
Then when you open and close the mobile menu and you re-scale the window wider than 900px, the inline display: none still on the nav, so it is not displaying because the inline CSS is in effect.
The solution would be:
A workaround you can do is to "force" the CSS to apply display:block to your nav if the window is wider than 900px, by using the #media and setting the !important rule.
So:
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
This is a CSS solution, of course there is many different ways to do it by the CSS and Javascript. But I believe that is a simple one.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
body{
margin: 0px;
padding: 0px;
font-family: "Bree serif", serif;
}
#navegacion{
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
.logo{
margin: 0;
padding: 15px 20px;
float: left;
}
#nav-list{
padding: 0;
margin: 0;
float: right;
}
#nav-list li{
list-style: none;
display: inline-block;
padding: 20px 30px;
transition: .5s;
}
#nav-list li a{
color: black;
text-decoration: none;
}
.nav_li:hover{
background: rgba(0, 0, 0, 0.089);
}
.resp-menu{
width: 100%;
background:#fff;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.resp-menu a{
margin: 0;
padding: 3px 0;
float: left;
}
.resp-menu h4{
margin: 0;
padding: 5px 10px;
color: #fff;
float: right;
background: yellow;
text-transform: uppercase;
cursor: pointer;
}
#media(max-width: 900px)
{
#navegacion{
display: none;
padding: 0;
}
.resp-menu{
display: block;
}
.logo{
display: none;
float: none;
}
#nav-list{
float: none;
display: block;
}
#nav-list li{
display: block;
color: black;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(12, 8, 8, 0.1);
}
.resp-menu a{
display: block;
}
}
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
</head>
<body>
<nav id="navegacion">
<img src="wilphar_logo2.png" width="70">
<ul id="nav-list">
<li class="nav_li">Inicio</li>
<li class="nav_li">Nosotros</li>
<li class="nav_li">Productos</li>
<li class="nav_li">Contacto</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="resp-menu">
<img src="wilphar_logo2.png" width="70">
<h4 class="menu">menu</h4>
<div style="clear: both"></div>
</div>
</body>
</html>
could you help me improve this code below?! I´m trying to work a sidebar menu with jquery but i do´t know where I´m going wrong...
Here goes my codes:
html:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="css/style.css">
<link href="/js/jquery-3.2.0.min.js">
</head>
<body>
<div class="sidebar">
<ul>
<h2>Menu</h2>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="nav">
<img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/>
</div>
<script src="js/script.js"></script>
</body>
</html>
css:
body{
margin: 0;
}
.sidebar{
position: absolute;
width: 250px;
height:100%;
background: #333;
color: white;
font-family: arial;
outline: 1px solid #2a2a2a;
}
.sidebar h2{
text-align: center;
margin: 0;
padding: 10px;
background: #2a2a2a;
}
.sidebar ul{
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li{
outline: 1px solid #2a2a2a;
transition: all 0.3s;
}
.sidebar li:hover{
background: #444;
border-left: 5px solid #eee;
}
.sidebar a{
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
.nav{
width: 100%;
height: 100%;
position: absolute;
background: white;
padding: 30px;
transition: all 0.3s;
}
.menu-bar{
cursor: pointer;
}
.open{
transform: translateX(250px);
}
js:
$('.menu-bar').on('click', function(){
$('.nav').toggleClass('open');
});
I don´t know if the problem is the jquery link or something else...
Your code is not totally correct. From a semantic point of view, the h2 tag, and, nothing, should stay within the ul tag and outside a li tag.
Here simple example:
This example uses the css translate3d feature, that runs on GPU and not on CPU, this is a good thing for performance issues.
https://jsfiddle.net/c4hjhbp4/
html
<div class="nav">
<button id='show-hide-menu'>
Menu
</button>
</div>
<div class="sidebar-container">
<div class="sidebar" id='sidebar'>
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
javascript (jQuery)
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
css
body, html {
margin: 0;
padding: 0;
}
.sidebar-container {
position: relative;
width: 0;
height: 0;
}
.sidebar {
position: absolute;
width: 230px;
height: 400px;
background: #ccc;
transform: translate3d(-230px,0,0);
transition: transform 0.5s;
}`enter code here`
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
I've included here only the portion of my HTML that involves linking with the javascript. The javascript is in a folder called "js" that is in the same folder as the HTML document. I've tried both with and without quotation marks because often my HTML doesn't work when I reference images or links within quotation marks--although most online tutorials seem to say that one must use quotation marks.
Here's the rest of the code if you must peruse it:
function main() {
$(‘.main’).hide();
$(‘.main’).fadeIn(1000);
}
$(document).ready(main);
$(‘.main’);
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width: 800px;
padding-left: 150px;
position: absolute;
}
.main {
color: white;
font-size: 100px;
position: relative;
top: 150px;
background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 100%;
height: 900px;
padding-top: 90px;
text-transform: uppercase;
}
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width: 800px;
padding-left: 150px;
position: absolute;
}
.main {
color: white;
font-size: 100px;
position: relative;
top: 150px;
background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 100%;
height: 900px;
padding-top: 90px;
text-transform: uppercase;
}
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href=Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id=backs </div>
<div class=header>
<p>
<img src=http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id=g ecko>
</p>
<div class=navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<p>
How come you are noticing only the script not working. Does your stylish wet even work?
The missing "" in your style sheet link may be the reason for your script not work
It should be
<link rel="stylesheet" href="style.css" type="text/css">
Remember the quotes
Noticed your kind of quotes are not right in your script. Use These
$('.class') or $(".class")
And I just prefer you write your codes the normal way in your html by putting the quotes where they need to be and also there is no where you used the
.main
In your html code
What you need to do is append './' to your script src tag.
So your final file should look like this.
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
Doing this informs your HTML code to look for the 'js' folder in your current directory.
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/
My problem is when i resize the window(smaller) One of my divs just go through and on top of my navigation bar... Which is annoying, but i believe there is a easy way to fix it. I can give you the code, but should test it in your editor program - and then resize, youll see what i mean.
HTML CODE HERE:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>
</head>
<body>
<div id="upperblock">
</div>
<div class="topbar"></div>
<div id="pageContainer">
<div id="pageContainer2">
<div>
<div id="leftnavigation">
<ul>
<li> <h4> Navigation </h4> </li>
<li>Test text</li>
<li>Test text</li>
<li>Test text</li>
</ul>
</div>
<div id="mainContainer">
<div id="newsfeed"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
div {
display: block;
}
.topbar {
font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;
}
#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}
#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;
}
ul {
list-style-type: none;
}
h4 {
text-decoration:underline;
}
#mainContainer {
display: block;
width: 620px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;
}
#leftnavigation {
float: left;
height: 300px;
width: 120.5px;
text-align: left;
font-family: sans-serif;
font-size: 15px;
padding-right: 30px;
display:block;
}
#newsfeed {
}
make #leftnavigation AND #mainContainer div float:left
Set to the maincontainer div an overflow:auto; property. This will disable to overlap on floated elements.