I've been messing with this code for awhile now and I'm stuck. I've done a lot of coding by hand but just now ramping up on the new things with HTML5, CSS3, and Javascript.
I'm trying to make a simple menu that slides up and down. I have a div that contains everything. The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. It can then animate in and out of the view box.
I've been trying to do it with a Javascript function but it sounds like it's easier to just use CSS3 transitions? Any advice?
My Javascript code is below. I can't quite figure out how to do it with CSS3 transitions. Any advice would be much appreciated.
Html
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;">Menu</div>
</div>
</div>
</div>
</nav>
</header>
Javascript
var startPosition = -100;
var endPosition = 0;
var speed = 2;
function moveMenuDown(){
// Get the element
menu = document.getElementById("mobileMenuWrapper");
// Grab the element's current CSS top position
currentPosition = Number(menu.style.top.substr(0,(menu.style.top.length-2)));
// Compare the position and move it
if(currentPosition <= endPosition){
// I'm stuck about the line below...how can I attach a CSS3 transition here? Or should I?
menu.style.MozTransition = ???;
// Here's my original code where I move the element manually
menu.style.top = (currentPosition + speed) + 'px';
moveMenuDown();
}else{
}
}
Updated entire HTML/CSS/JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menu test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.mobileMenu {
position: absolute;
height: 150px;
width: 250px;
top: 0px;
left: 50px;
overflow: hidden;
}
#mobileMenuWrapper {
margin-top:-100px;
transition: margin-top 0.5s ease;
}
#mobileMenuWrapper.show {
margin-top:0px;
}
</style>
<script type="text/javascript">
function moveMenuDown(){
menu = document.getElementById("mobileMenuWrapper hide");
if(menu.className=="mobileMenuWrapper hide"){
menu.className = menu.className.replace('hide','show');
}else{
menu.className = "mobileMenuWrapper hide";
}
}
</script>
</head>
<body>
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;">Menu</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
HTML: one additional class:
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a id="move" href="javascript:moveMenuDown();">Menu</a></div>
</div>
</div>
</div>
</nav>
</header>
CSS: (very simple)
#mobileMenuWrapper{
margin-top:-100px;
transition: margin-top 0.5s ease;
}
#mobileMenuWrapper.show{
margin-top:0px;
}
*just added class and transition.
JS, much simpler:
function moveMenuDown(){
menu = document.getElementById("mobileMenuWrapper");
if(menu.className=="mobileMenuWrapper hide"){
menu.className = menu.className.replace('hide','show');
}
else {
menu.className = "mobileMenuWrapper hide";
}
}
('toggle' functionality added)
Fiddle: http://jsfiddle.net/8u0eka5x/
Related
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/
<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already
There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.
I know how to use position: fixed; to get it to scroll with the page but my navbar is not at the top of the page it is under my header. I would like the navbar to remain directly under the header until the top of the page hits it then I want it to scroll down with the page. I have tried using JS to do this and using JSfiddle I am able to get it working http://jsfiddle.net/uaqh018d/78/
However, when I apply this to my site it does not work and I can't figure out why.
site code to follow:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Previews</li>
<li>Lets Plays</li>
<li>Forums</li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
If anyone can figure out the issue I would really appreciate it.
See the corrected fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
You were using classes in the HTML but accessing them as ID in jQuery.
Corrected JS should be
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});
This is a followup to my earlier question, Fade in/out js mouseover event.
I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.
My basic code is:
<style type="text/css">
.hidden{
display:none;
}
#container {
margin: 0%;
padding: 0;
width: 100%;
background-color: #222222;
}
#left, #right {
float: left;
margin: 0% 0 0% 0%;
padding: 0%;
background-color: #000;
}
#right {
float: right;
margin: 0% 0% 0% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
$ ("#products img").mouseover(function(){
$ (".description").stop(true, true);
var newSelected = $(this).attr("alt");
$ ("#" + oldSelected).fadeOut('normal',function(){
$ ("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
<body>
<div id="container" style="width: 974px; height: 200px;">
<div id="left" style="width: 200px; height: 200px;">
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
</div>
<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
.. content ..
</div>
<div class="description" id="services">
.. content ..
</div>
<div class="description" id="contact">
.. content ..
</div>
</div>
</div>
I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.
How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?
You can try .slideDown and .slideUp
or .show() .hide() with duration