I know it's got to be a stupid simple problem, but it's been holding my back for too long...
I want to click the menu icon (picture) in the top right corner and have it display a transparent div menu over the entire screen. Then when I click the icon again, I want it to disappear.
JQuery is supposed to be hiding and showing a div on each click of the button. It shows the div the first time but after that, it doesn't register the click. I'm using transparent divs quite a lot on this project so my first guess is that something loads that is covering the button and that is stopping the click from "reaching" the button in question. But I've set a z-index to the button so it appears above everything else (also corroborated by the background color property) and yet when I click the button a second time, the div that it is supposed to hide stays there.
Here's my JQuery code:
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").fadeIn(400);
}
});
And here's my HTML:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<header>
<p class="homeLink">Company Name Here</p>
<div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
</header>
<div class="slider">
<div class="sliderPic"></div>
<div class="sliderText"><p>This is come content just chilling right here.</p></div>
</div>
</div>
<footer>
<div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
</footer>
<div id="menuOverlay" class="menuDiv">
<ul id="menu">
<li>Work.</li>
<li>About.</li>
<li>Careers.</li>
<li>Ideas.</li>
<li>News.</li>
<li>Events.</li>
<li>Contact.</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
And just in case it's relevant, here's my CSS:
html, body {
width: 100%;
height: 100%;
}
body, html, .non-footer {
height: 100%;
min-height: 100%;
width: 100%;
}
.footer {
height: 55px;
margin-top: -55px;
width: 100%;
}
#arrowJumper {
width: 100%;
height: 55px;
margin-top: -56px;
background: rgba(0, 0, 0, 0);
/*background-image: url('../images/greyArrow.png');
background-position: center -15px;
background-repeat: no-repeat;*/
text-align: center;
position: absolute;
}
header {
position: absolute;
width: 100%;
z-index: 90;
}
footer {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 90;
}
.slider {
position: absolute;
height: 100%;
width: 100%;
z-index: 5;
display: block;
background: blue;
}
.homeLink {
float: left;
margin-left: 40px;
margin-top: 50px;
color: #ff6633;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 26px;
}
#menuButton {
float: right;
margin-right: 40px;
margin-top: 50px;
}
#arrowJumper img{
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: -15px;
}
#arrowJumper:hover {
background-color: #ff6633;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
#arrowJumper:hover img {
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: 4px;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menuOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menuOverlay {
position: absolute;
z-index: 10;
display: none;
background: rgb(200, 102, 51); /* The Fallback */
background: rgba(200, 102, 51, 0.5);
text-align: center;
height: 960px;
}
#menuOverlay ul{
vertical-align: center;
position: absolute;
top: 10%;
transform: translateY(-50%);
width: 100%;
font-size: 56px;
font-weight: normal;
color: #fff;
}
#menuOverlay ul li{
margin: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#menuOverlay ul li:hover{
color: #ff6633;
background: #fff;
}
.displayIt {
display: block;
}
And here's a fiddle for convenience: http://jsfiddle.net/yv9mr/
I'm pretty new at all of this so I really appreciate your assistance. I'm sure it's something simple. Thanks all!
You need to add/remove class on each click like this in your if-else block
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
$("#menuOverlay").removeClass("displayIt"); //remove class
} else {
$("#menuOverlay").fadeIn(400);
$("#menuOverlay").addClass("displayIt"); //add class
}
But the simplest way would be to fadeToggle the required div , in order to hide/show:
$("#menuOverlay").fadeToggle();
I suggest you use jQuerys .fadeToggle() method. In my opinion cleaner to let jQuery manage the toggle effect:
$("#menuButton").click(function(){
$("#menuOverlay").fadeToggle(400);
});
Tested and works with your example: JSFiddle.
Try this:
var clicked = false;
$("#menuButton").click(function(){
if (clicked == true){
$("#menuOverlay").fadeOut(400);
clicked = false;
} else {
$("#menuOverlay").fadeIn(400);
clicked = true;
}
});
The issue is that you are not adding or removing the class. Your event listener is working correctly, but you should add
$("#menuOverlay").toggleClass("displayIt");
to the end of your javascript (after the if/else).
A class such as "expanded" would be more semantic.
Reason Function is called again but your condition if($("#menuOverlay").hasClass("displayIt")) is always true so else never executes.. You can do
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").removeClass("displayIt");
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").addClass("displayIt");
$("#menuOverlay").fadeIn(400);
}
});
Fiddle
Or Simply
var shown=false;
$("#menuButton").click(function(){
if(!shown)
{
$("#menuOverlay").fadeOut(400);
shown =true;
}
else
{
$("#menuOverlay").fadeIn(400);
shown=false;
}
});
Related
Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but I can't use this technique, because the background of my page consists of a stack of images. This causes the pixel height of the page to change dramatically on window resize due to the height needing to increase as the image gets wider
.
I guess it would be possible to do this with a bunch of media calls, but I'm trying to avoid this, and I'm not even sure it would work.
My main goal would be:
When a div is scrolled into view, the style (mainly color and font-weight) of the navigation bar and fixed footer change.
Also - This has to be in Vanilla JS.
If someone has a pure CSS solution, that's very acceptable as well, I just can't think of a way this would work.
Thank you!
How About Using This?
These are VanillaJS SpyScroll
https://github.com/cferdinandi/gumshoe
https://github.com/ederssouza/vanillajs-scrollspy
From Codepen zchee/pen/ogzvZZ
HTML
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home" class="section"></div>
<div id="portfolio" class="section"></div>
<div id="about" class="section"></div>
<div id="contact" class="section"></div>
SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
ul {
margin: 15px 0 0 0;
li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
}
}
.active {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
}
#portfolio {
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
JS
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
})();
I cant seem to figure out how to get left column to go over the top as an overlay... not move the whole table.
I've seen examples of where it overlays the whole page, but i just need it to overlay in the nested section, not the whole page.
Im not exactly sure what you call it when the left column slides over the top of the inner element, but ive seen examples of it sliding over the the whole page, i just need it to slide over the top of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".toggle-sidebar").click(function () {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
return false;
});
});
</script>
<style>
html,
body {
height: 100%;
}
.jumbotron {
margin-top: 30px;
}
#content,
#sidebar {
min-height: 500px;
}
#row-main {
overflow-x: hidden; /* necessary to hide collapsed sidebar */
}
#content {
background-color: lightyellow;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#content .btn-group {
margin-bottom: 10px;
}
.col-md-9 .width-12,
.col-md-12 .width-9 {
display: none; /* just hiding labels for demo purposes */
}
#sidebar {
background-color: lightgrey;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
display: none; /* hide it for small displays */
}
#media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%; /* same width as sidebar */
}
}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; font-size: 1.4em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.25em; }
</style>
</head>
<body>
<div class="container">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
side area
</div>
<div class="col-md-9" id="content">
<div class="btn-group" role="group" aria-label="Controls">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
<pre>Inner</pre>
</div>
</div>
</div>
</body>
</html>
Fiddle:- https://jsfiddle.net/nrqpay4k/
If you want the sidebar to go on top of the rest of the content you have to make its position: absolute.
You also should take it out of the table.
This is what you need:
#sidebar {
background-color: lightgrey;
width: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: transform 500ms ease-in-out;
}
.collapsed {
transform: translateX(-100%)
}
I also changed a little bit of the html to take the sidebar out of the row element.
____ update - close button added _____
To add a close button add the following html inside the sidebar container:
<button id="closeSidebar">x</button>
The css is the following:
#closeSidebar {
position: absolute;
top: 0;
right: 0;
padding: 3px 10px;
cursor: pointer;
}
And finally the Javascript is the following:
$("#closeSidebar").click(function() {
$("#sidebar").toggleClass("collapsed");
return false;
});
See if this is what you want:
https://jsfiddle.net/wnpv2got/2/
so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.
Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>
If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?
This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.
Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});
I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.
How that can be done?
JSFiddle Demo:
http://jsfiddle.net/9nPW9/
HTML:
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon"></div>
</div>
CSS:
.box{
position: relative;
width: 220px;
}
.search {
width: 200px;
padding: 5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: left;
}
.icon{
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
JS:
$('.icon').click(function() {
$('.search').toggle();
});
Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)
Below is some sample code, you will likely want to edit for your precise needs.
Demo Fiddle
JS
$('.icon').click(function() {
$('.search').toggleClass('expanded');
});
CSS
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width:0;
padding: 5px;
transition: all .5s ease;
position:absolute;
right:20px;
box-sizing:border-box;
opacity:0;
}
.search.expanded {
max-width:200px;
opacity:1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
You should use .slideToggle() or fadeToggle()
$('.icon').click(function() {
$('.search').slideToggle(500);
});
I am working on a menu using jQuery + CSS3.
I have an up arrow on the right side of the menu and when clicked the menu slides up and the image switches to a down arrow.
The only problem is that if you click the down arrow, it does't slide back down, even though I've provided a somewhat legit piece of code in order for it to work.
I am new to jquery so any help would be very much appreciated!
HTML:
<nav id="tfc-new-nav">
<div class="wrapper">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Shopping Cart</li>
<li>My Account</li>
</ul>
</div>
<div class="hide-menu menu-active"></div>
</nav>
CSS:
.wrapper {
display: block;
height: 100%;
width: 1000px;
position: relative;
margin: 0 auto;
}
#tfc-new-nav {
display: block;
height: 45px;
width: 100%;
background: #808E91;
position: relative;
top: 50px;
}
#tfc-new-nav ul {
list-style: none;
}
#tfc-new-nav ul li {
display: block;
height: 45px;
width: 10%;
float: left;
text-align: center;
line-height: 45px;
}
#tfc-new-nav ul li a {
display: block;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Felix Titling', serif;
cursor: pointer;
-webkit-transition: background .3s ease-in;
-moz-transition: background .3s ease-in;
-ms-transition: background .3s ease-in;
-o-transition: background .3s ease-in;
transition: background .3s ease-in;
}
#tfc-new-nav ul li a:hover {
background: #50798D;
}
#tfc-new-nav .hide-menu {
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
}
#tfc-new-nav .hide-menu.menu-active {
display: block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}
#tfc-new-nav .hide-menu.menu-hidden {
display: block;
background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}
JavaScript:
$(document).ready(function() {
$("#tfc-new-nav .hide-menu.menu-active").click(function() {
$("#tfc-new-nav").animate({
top: "30px"
});
$(this).removeClass("menu-active");
$(this).addClass("menu-hidden");
$(this).animate({
top: "35px"
});
});
$("#tfc-new-nav .hide-menu.menu-hidden").click(function() {
$("#tfc-new-nav").animate({
top: "95px"
});
$(this).removeClass("menu-hidden");
$(this).addClass("menu-active");
$(this).animate({
top: "20px"
});
});
});
LIVE DEMO
You should delegate your events, like
$("#tfc-new-nav").on("click", ".menu-hidden", function() {
...
});
DEMO
Use .live() instead .click()
Example:
$("#tfc-new-nav .hide-menu.menu-hidden").live("click", function() {
// Do stuff here
}
This takes into account updated manipulation of the DOM, tested and worked
You should be able to call $.slideToggle() to handle this and minify your code.
Here is a link to the manual entry: http://api.jquery.com/slideToggle/
This will animate and set display:none when the anitmation is complete.