We Keep Coding

Dropdown javascript block

I have a problem with javascript dropdown clicking menu.
I need show some content after clicking header of box.
HTML
<div id='cookiemenu'>
<div class='cookiemenu_header' onclick='ShowCookieBox()'>
Test
</div>
<div id="cookiemenu_dropwdown" class='cookiemenu_content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
</div>
</div>
CSS
#cookiemenu {
width:100%;
overflow: hidden;
display:block;
}
#cookiemenu div.cookiemenu_header {
width:100%;
display:block;
margin-top: 0px;
background-color: #0B3954;
color:#FFFFFF;
text-align: center;
height: 25px;
font-size: 20px;
line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
cursor: hand;
text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
display:block;
border:2px solid #red;
}
JS
<script>
function ShowCookieBox() {
document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}
</script>
It's not working at all. Can someone tell me why?
And the second question. Is there any chance to change the JS so It could save "status" of box (showed or hidden) in cookies? So user can leave it, close page and on the next visit it stays as he leaved it?

You have two typos.
The id of the div should be cookiemenu_dropdown on the div, but it is currently cookiemenu_dropwdown.
Also the color is just red not #red.
function ShowCookieBox() {
document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}
#cookiemenu {
width:100%;
overflow: hidden;
display:block;
}
#cookiemenu div.cookiemenu_header {
width:100%;
display:block;
margin-top: 0px;
background-color: #0B3954;
color:#FFFFFF;
text-align: center;
height: 25px;
font-size: 20px;
line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
cursor: hand;
text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
display:block;
border:2px solid red;
}
<div id='cookiemenu'>
<div class='cookiemenu_header' onclick='ShowCookieBox()'>
Test
</div>
<div id="cookiemenu_dropdown" class='cookiemenu_content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
</div>
</div>

Change your CSS rules to
div.cookiemenu_content.ShowCookieBox {
display: block;
border:2px solid red;
}
div.cookiemenu_content {
display: none;
}
The display: block from .ShowCookieBox was being overwritten by display: none from the div.cookiemenu_content rules when the ShowCookieBox class was applied.
Check the jsfiddle

Display a Modal on button click using Jquery

I want to display my Modal on button click. Below is my code.
<input type="button" id="button1" value="Button" onclick="myFunction()"/>
<div id="openModal" class="modalDialog">
<div>
X
<h2>
Modal Box</h2>
<p>
Hello world</p>
</div>
</div>
This is my unfinished script.
<script type="text/javascript">
$(document).ready(function () {
});
</script>

show openModal div on button1 click.
$('#button1').on('click', function() {
$('#openModal').show();
});
No need of onclick="myFunction()" on button

Let's try...
Simple popup model created by using jquery, HTML, and CSS.
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 500px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 20px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Model </h2>
<p>Model content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>

Change show() to modal.show();
$('#button1').on('click', function() {
$('#openModal').modal('show');
});

You probably have to set visibility:hidden; to the div, and set it to visible onclick

How to add a hover effect with text

So I'm working on this site http://wiafe.github.io/Love-Nonprofits/index.html and near the bottom there are divs that hold messages. And I would like to add an hover effect that will display two buttons and a link over it. And everything I have tried has failed so checking to see if there is a way to do it. I took out the html portions I had and kept the css classes. Have been messing with it all day and it's breaking my brain right now.
HTML:
<div class="message">
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>
</a>
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>
</a>
</div>
CSS:
.message-content:hover {
text-decoration: none;
}
.message-content p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: relative;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
.message-content:hover small {
opacity: 0;
}
.message-content:hover .show-description p {
height: 100%;
}
.message-content .show-description small {
opacity: 1;
}
JS:
$('.message-content').hover(function() {
$(this).toggleClass('show-description');
});

Use this CSS:
.box > .appear {
opacity: 0;
transition: all 0.5s;
}
.box:hover > .appear {
opacity: 1;
}
Add class .appear to whatever you want to display on hover over .box.
JS Fiddle

Menu Popping up and down HTML [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
[I can't use JQuery, if you wanted to know.]
I'm trying to make my Menu come up and down. (Duh) I don't know how else to explain it, I want so if you put your cursor near the top of the screen, the menu will slide down from the top, (like an animation), and it will go back up when you move your cursor away from the top of the screen.
Code:
body {
background-color: #eeeeee;
}
Rounded {
padding: 17px 17px;
padding-top: 50px;
background: #dddddd;
border-radius: 25px;
}
Header {
font-style: arial;
font-size: 20px;
font-weight: 3px;
font-size-adjust: bottom;
color: #ededed;
}
Black {
color: 000000;
}
Backer {
}
Bod {
padding 15px 15px;
padding-left: 150px;
}
<html>
<head>
<title>Games-rade</title>
<link rel="stylesheet" href="CSS/Style.css">
<script src="Javascript/Java.js"></script>
</head>
<body>
<center>
<header>
<rounded><Black>---------------------------------- </Black>Main<text> | </text>About<text> | </text>Buy <Black>---------------------------------- </Black></rounded>
</header>
</center>
<br>
<br>
<br>
<Bod>
<h3> Hello. </h3>
</Bod>
</body>
</html>
Any Suggestions?

You can use CSS transitions on block elements to move your header in and out of view.
Below is a rough example using most of your code.
As an aside, you should really avoid using non-standard html elements (such as rounded) while learning; instead, add classes to standard elements. One last note, from looking at some of your CSS rules, I would recommend looking into the difference between display types, specifically block and inline, and what styles you can apply to each.
A good intro can be found here: http://learnlayout.com/display.html
body {
padding:0;
margin:0;
}
rounded {
padding: 17px;
background: #dddddd;
border-bottom-left-radius: 17px;
border-bottom-right-radius: 17px;
}
header{
font-size: 20px;
color: #ededed;
display:inline-block;
}
header rounded {
display:block;
transform:translateY(-100%);
transition:transform .5s ease;
}
header:hover rounded {
transform:none;
}
Black {
color: #000000;
}
Bod {
display:block;
padding 15px 15px;
padding-left: 150px;
}
<title>Games-rade</title>
<link rel="stylesheet" href="CSS/Style.css">
<script src="Javascript/Java.js"></script>
</head>
<body>
<center>
<header>
<rounded><Black>---------------------------------- </Black>Main<text> | </text>About<text> | </text>Buy <Black>---------------------------------- </Black></rounded>
</header>
</center>
<br>
<br>
<br>
<Bod>
<h3> Hello. </h3>
</Bod>

I did a simple example to you using jquery:
(function(){
var top_menu = $(".animation");
$(".menu").on("mouseenter", function(){
top_menu.slideDown();
});
$(".menu").on("mouseleave", function(){
top_menu.slideUp();
});
})();
Hope it helps.

I'm not too familiar with the language myself but Codecademy has a tutorial on making interactive webpages and I believe it covers just this. Plus, it's a good way to learn CSS/jQuery.
The course is at http://www.codecademy.com/en/skills/make-an-interactive-website/

I agree that you want to get away from non-standard tags. I would also suggest using CSS transitions. Assuming that you want your menu to be accessible once you've scrolled down the page I've used a fixed position container. Hopefully the simplicity of the code will help you understand what is happening.
<div class="menu-container">
<nav>Item 1 | Item 2 | Item 3</nav>
</div>
<div class="content">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
CSS
.menu-container {
width: 100%;
height: 30px;
position: fixed; /* Allows you to stick the container in place */
top: 0; /* Stick it to the top of the page */
left: 0; /* Make sure it's all the way to the left as well */
}
nav {
width: 100%;
height: 30px;
background-color: #ccc;
line-height: 30px; /* Easy way to vertically center single line text when you know the height of the container */
border-radius: 0 0 10px 10px;
text-align: center;
position: relative; /* Allows you to adjust placement of element */
top: -31px; /* Move up 30px from its normal position */
transition: all 1s; /* */
}
.menu-container:hover nav {
top: 0; /* When menu-container is hovered move nav to top 0 from -31px */
}
.content {
margin-top: 35px; /* Using this so that your content doesn't start behind the menu */
}

Preventing content visibility underneath a transparent fixed navigation bar

I have a semi-transparent navigation bar that has a fixed position at the top of the window, and content underneath it.
I'd like to make it so that the #content isn't ever visible underneath the navigation bar. Setting the top margin of the content to the same height as the navigation bar works, when the user is at the top of the page. However when the user scrolls down, the content becomes visible underneath the navigation bar.
Basically I'm trying to push/clip the top of the content div, so none of its content is ever visible underneath the navigation bar.
The navigation bar's transparency is particularly important, so simply having an opaque gray background won't work for what I need.
Any suggestions for accomplishing what I'm trying to do?
Code:
http://jsfiddle.net/NAMka/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="content"></div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#content {
margin-top: 60px;
}
JS:
// This is a little cleaner than just manually repeating the p tags.
for (var i = 0; i <= 20; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
Some mock-ups of what I'm trying to do
This is what the fiddle will look like if you scroll down a little bit. Notice how the content is visible underneath the navigation bar.
Ideally, I'd like the content to be clipped, so it isn't visible underneath the navigation bar.
Update:
Although not ideal, I figured out a somewhat hackish way to achieve what I want involving some JS and the overflow:hidden CSS setting. It seems to work well enough for my purposes.
http://jsfiddle.net/NAMka/4/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="container">
<div id="veil">
<div id="content"></div>
</div>
</div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#container {
background: yellow;
margin-top: 60px;
z-index: -1;
position: relative;
}
#veil {
background: red;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
overflow: hidden;
}
#content {
background: blue;
position: absolute;
left: 0px;
bottom: 0px;
}
JS:
for (var i = 0; i <= 6; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
var height = $('#content').height();
$('#container').height(height);
$('#veil').height(height);
$(window).scroll(function() {
$('#veil').height($('#content').height() - $(window).scrollTop() );
});

You can add a white div that sits beneath the navbar but above the content.
http://jsfiddle.net/naLz7/
HTML
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="bottom"></div>
<div id="content"></div>
CSS
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#bottom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
z-index: 0;
}
#content {
margin-top: 60px;
}