For some reason my onclick function won't display the menu, here's my code:
function showmenu(){
document.getElementById("mobile-menu").style.display = "block";
}
#mobile-menu{
background:red;
height:160px;
display:none;
}
<div onclick="showmenu()" id="nav-toggle">MENU</div>
<div id="mobile-menu">
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
Related
I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.
var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
I'm trying to create my own modal overlay. If you don't know what that is, it is an effect where you if you activate a certain element by clicking on it an black opaque overlay will show up on your screen, and usually a message box will be in the center of the overlay. I think I have successfully done the modal overlay. However, whenever I click out of the overlay the overlay will become hidden but the message box will still be shown. I looked into my debugging tools and the css says the message box is supposedly hidden. However, I still see it on the screen.
CSS
div.overlay{ height:100%; width:100%; margin:0; padding:0; background:rgba(40, 0, 77,0.7); position:fixed;
z-index:100; top:0; left:0; display:none;}
div.rela{height:100%; width:100%; margin:0; padding:0; position:relative; z-index:101;}
div.rela span{ position:absolute; top:0; left:98%; font-weight:bold; font-size:36px; }
div.rela span a{ color:white; text-decoration:none; z-index:152;}
div#message{width:40%; height:20%; background:white; text-align:center;
border:1px solid black; font-weight:bold;display:none; z-index:102;}
div#message h5{font-size:18px;}
HTML
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
</div>
<div id="ex3"><h2>Example 3</h2><p></p><h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
Javascript
/* This is for clicking off the overlay */
(function removeOverlay(){
document.querySelector('div.overlay span a').onclick = function()
{
document.querySelector('div.overlay').style.display ="none";
console.log('I am closing')
};
document.querySelector('div.overlay').addEventListener('click', function(){
this.style.display ="none";
console.log('Im closing with overlay');
});
})();
document.querySelector('button#overlay-on').addEventListener('click',function(){
var overlay = document.querySelector('div.overlay');
overlay.style.display = "block";
var message = document.querySelector('div#message').outerHTML;
var relative = document.querySelector('div.rela');
document.getElementById('message').setAttribute('style','position:absolute; display:block; top:10%; ');
var text = document.createTextNode(document.getElementById('message').offsetWidth);
document.querySelector('div#message p').appendChild(text);
console.log(message);
relative.innerHTML = relative.innerHTML + message ;
});
You just need to put the message box inside the modal.
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
</div>
Or wrap the modal around the message box.
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
</div>
Fiddle
To briefly describe the intended design: I want a nav menu that, on hover, reveals content. But I am also seeking flexibility and simplicity. Because each nav element behaves in an identical way, I imagine that the javascript and css can be written once with variables that identify each nav element. So far, I have taken a number of different approaches, but the following has worked best for me. Admittedly, it is painfully redundant:
<div id="leftColumn">
<div id="nav1"
onmouseover="
document.getElementById('nav1').style.backgroundColor = 'black';
document.getElementById('nav1').style.color = 'white';
document.getElementById('content1').style.display = 'block';"
onmouseout="
document.getElementById('content1').style.display = 'none';
document.getElementById('nav1').style.color = 'black';
document.getElementById('nav1').style.backgroundColor = 'white';">
DECONSTRUCTIONS
</div>
<div id="nav2"
onmouseover="
document.getElementById('nav2').style.backgroundColor = 'black';
document.getElementById('nav2').style.color = 'white';
document.getElementById('content2').style.display = 'block';"
onmouseout="
document.getElementById('content2').style.display = 'none';
document.getElementById('nav2').style.color = 'black';
document.getElementById('nav2').style.backgroundColor = 'white';">
CONSTRUCTIONS
</div>
<div id="nav3"
onmouseover="
document.getElementById('nav3').style.backgroundColor = 'black';
document.getElementById('nav3').style.color = 'white';
document.getElementById('content3').style.display = 'block';"
onmouseout="
document.getElementById('content3').style.display = 'none';
document.getElementById('nav3').style.color = 'black';
document.getElementById('nav3').style.backgroundColor = 'white';">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
And the relevant (also redundant) CSS:
#nav1 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav2 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav3 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1 {display:none;}
#content2 {display:none;}
#content3 {display:none;}
To reiterate, I want to keep everything as simple as possible, but flexible for future editing - for adding future nav elements and corresponding content. I have searched for solutions and tried other approaches, but each time the javascript/jQuery quickly becomes complicated and beyond my abilities to understand and modify to my liking. Any tips, advice, solutions, explanations, resources... will be much appreciated. Thanks!
You can create two separte functions for mouseover and mouseout event, and can add the naviagtion menu in html, as many as you want.
Here is the complete solution for you.
<html>
<style type="text/css">
/*we can combine the selectors with comman if same css values available for all*/
#nav1, #nav2, #nav3{padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1, #content2, #content3 {display:none;}
</style>
<script>
function displayContent(div, contentId){
/*div is reffering the current mouseovered div*/
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}
function hideContent(div, contentId){
document.getElementById(contentId).style.display = 'none';
div.style.color = 'black';
div.style.backgroundColor = 'white';
}
</script>
<body>
<div id="leftColumn">
<div id="nav1" onmouseover="displayContent(this, 'content1')" onmouseout="hideContent(this, 'content1')">
DECONSTRUCTIONS
</div>
<div id="nav2" onmouseover="displayContent(this, 'content2')" onmouseout="hideContent(this, 'content2')">
CONSTRUCTIONS
</div>
</body>
<div id="nav3" onmouseover="displayContent(this, 'content3')" onmouseout="hideContent(this, 'content3')">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
</html>
Instead Of java script to change color.CSS have the property :hover to change when hover happens on some element and for onmouseover and onmouseout pass the function with arguments so to display and hide contents.I have attached the complete code for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#nav1 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#nav2 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#nav3 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#content1 {
display:none;
}
#content2 {
display:none;
}
#content3 {
display:none;
}
CSS for hover to change color
#nav1:hover, #nav2:hover, #nav3:hover {
background:black;
color:white;
}
</style>
JavaScript
<script>
function display(contentID) {
document.getElementById(contentID).style.display = 'block';
}
function hide(contentID) {
document.getElementById(contentID).style.display = 'none';
}
</script>
</head>
<body>
<div id="leftColumn">
<div id="nav1" onmouseover="display('content1')" onmouseout="
hide('content1');
">DECONSTRUCTIONS</div>
<div id="nav2" onmouseover="display('content2')" onmouseout="
hide('content2');
">CONSTRUCTIONS</div>
<div id="nav3" onmouseover="display('content3')" onmouseout="
hide('content3');
">OBSERVATIONS</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
</body>
</html>
Thanks in advance for any possible help.
Basically I was looking to create drop down div panels that are activated by a function toggleSlider, where the panels are hidden when the page is initially loaded. The first two links "resume" and "work" function like I had hoped, where you click on one and the corresponding div drops in, and when you click on the same link again or one of the other links the content is retracted. The third link is not working like the others, when you click on it the corresponding div drops in covering the other contents, and can only be retracted on by clicking on the same link again. Here's what it looks like....
http://www.visuallypersuasive.com/jason/test.html#
And here is the javascript
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").fadeIn();
});
}
}
function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides2").slideDown(600, function(){
$("#contentThatFades2").fadeIn();
});
}
}
function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
$("#contentThatFades3").fadeOut(600, function(){
$("#panelThatSlides3").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides3").slideDown(600, function(){
$("#contentThatFades3").fadeIn();
});
}
}
And here is the html
<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
While I feel I have a solid basic to intermediate understanding html and css, javascript is pretty much Greek to me. Ideally I would like use this technique to nest another drop down div within the work link/div with more than three links if I could get this to work.
Thanks again to anyone who can help.
Test It I make a little change on Your Code
HTML:
<div class="navbar">
<div id="resume" class="navmenu"><a class="nav" href="#" >resume</a>
<div class="panelThatSlides" style="position:relative; left:250px; display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work" class="navmenu"><a class="nav" href="#" >work</a>
<div class="panelThatSlides" style="position:relative; left:-420px;display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact" class="navmenu"><a class="nav" href="#" >contact</a>
<div class="panelThatSlides" style="position:relative;left:-550px;display:none;background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
</div>
js That Must Put it After Html code
$(".navbar").find(".nav").bind("click",function(e){
if($(e.target.parentNode).find(".panelThatSlides").is(":visible")){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
}
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
$(e.target.parentNode).find(".panelThatSlides").slideDown(600, function(){
$(e.target.parentNode).find(".panelThatSlides").find(".contentThatFades").fadeIn();
});
return false;
});
now You Can Add Nav Without Problem
As soon as I click on 'Hide' link below, my page goes to the bottom. How can I make it go to the place from where it opened?
My code:
<li>How do I maximize battery life?</li>
<div id="basic2" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
<p>Wadfasfsafasfas</p>
Hide</li>
<div id="basic2" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
</div>
<p> </p>
<hr />
</div>
Function:
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
Whenever you have an onClick in a link (like onclick="ReverseDisplay('basic2');" you want to make sure it returns false.
Something like this should work : onclick="ReverseDisplay('basic2');return false;"
You've got duplicate element ids "basic2"
Edit
I think what you're looking for is something like this. Where "Hide" toggles the parent element:
<li>How do I maximize battery life?</li>
<div id="basic1" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
<p>Wadfasfsafasfas</p>
Hide</li>
<p> </p>
<hr />
</div>
<script>
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>