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
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>
Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.
you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/
you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs
I am using the below script to autoslide two divs.
Below is my code.
The HTML:
<div id="gallery">
<div id="slider" style="width: 6000px; left: -500px;">
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
</div>
<span id="prev"></span>
<span id="next"></span>
</div>
<div id="galleryTwo">
<div id="sliderTwo" style="width: 6000px; left: -500px;">
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
</div>
<span id="prevTwo"></span>
<span id="nextTwo"></span>
</div>
The CSS:
/* Scolling review starts */
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:960px;
height:178px;
}
#slider{
position:absolute;
left:0;
height:278px;
}
#slider > div {
position:relative;
float:left;
width:960px;
height:178px;
}
#slider > div img{
width:100%;
}
/* buttons */
#gallery > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#next{
right:0px;
}
#gallery > span:hover{
opacity:1;
}
/* Scolling review ends */
/* Scolling review Two starts */
#galleryTwo{
position:relative;
margin: 0 auto;
overflow:hidden;
width:960px;
height:218px;
}
#sliderTwo{
position:absolute;
left:0;
height:278px;
}
#sliderTwo > div {
position:relative;
float:left;
width:960px;
height:178px;
}
#sliderTwo > div img{
width:100%;
}
/* buttons */
#galleryTwo > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#nextTwo{
right:0px;
}
#galleryTwo > span:hover{
opacity:1;
}
/* Scolling review Two ends */
The Script:
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('#slider > div'),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0, // a counter
intv;
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
function auto(){
intv = setInterval(function(){
$('#next').click();
}, 3000);
}
auto(); // start
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
////////////////////////////////////////////////////////////
var $galTwo = $('#galleryTwo'),
$sliTwo = $('#sliderTwo'),
$boxTwo = $('#sliderTwo > div'),
WTwo = $galTwo.width(), // 500
NTwo = $boxTwo.length, // 3
CTwo = 0, // a counter
intv;
$sliTwo.width(WTwo*NTwo);
$('#prevTwo, #nextTwo').click(function(){
CTwo = (this.id=='nextTwo' ? ++CTwo : --CTwo) <0 ? NTwo-1 : CTwo%NTwo;
$sliTwo.stop().animate({left: -CTwo*WTwo },800);
});
function autoTwo(){
intv = setInterval(function(){
$('#nextTwo').click();
}, 3000);
}
autoTwo(); // start
$('#galleryTwo').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
The fiddle link:
Fiddle link
The Issue:
I am creating an autosliding div by using two div ids #gallery and #galleryTwo. I need same functionality in both, so I have renamed their ids and used them at different places. It works fine, but on the fiddle (as well as on my workflow), when you hover your mouse on the autosliding div, the auto slide for the duplicated div i.e #galleryTwo stops which was sliding automatically initially. I am stuck up on this part of the code and need to make both of them auto slide even hover happens or not.
The variable intv is global, which is pointing to the interval set for the second slider. Whenever you hover either of the sliders, As you can see in the code below
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
$('#galleryTwo').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
You're clearing intv hence the second slider will stop. If you want to control them separately, you need to have to different variables pointing to each sliders intervals.
If you don't want to control the slider on hover, you can remove these hover listeners :)
I have to get the boxes to do the following:
Along the left hand side of the page have a number of boxes with different font names in them. When you click on those boxes have the font of the text in the middle box change. Do similar sets of boxes with changes associated for the right hand side and bottom of the page.
This is the coding I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</div>
<div id="box_group2">
<div id="box4">
Fourth box
</div>
<div id="box5">
Fifth box
</div>
<div id="box6">
Sixth box
</div>
</div>
<div id="box_group3">
<div id="box7">
Seventh box
</div>
<div id="box8">
Eighth box
</div>
<div id="box9">
Ninth box
</div>
</div>
<div id="box_group4">
<div id="box10">
Tenth box
</div>
<div id="box11">
Eleven box
</div>
<div id="box12">
Twelve box
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
I've done the task with jQuery which is more easier to maintain.Used functions to get desired data and manipulated them to create boxes dynamically.
HTML :
<div id="topDiv"></div>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="bottomDiv"></div>
CSS :
#topDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#leftDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#rightDiv div{
float : right;
padding:5px;
width:50px;
height:50px;
}
#bottomDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#topDiv{
padding-left : 33%;
}
#leftDiv{
padding-top : 30%;
}
#bottomDiv{
padding-top : 68%;
padding-left : 33%;
}
#rightDiv{
margin-top : -30%;
}
.changedFont{
font-size : 20px;
}
jQuery :
$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");
//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
$("#topDiv").append("<div id=Box" + i + "></div>");
$("#Box"+ i).css("background-color", colorArray[i-1]);
$("#Box"+i).text("Box" + i);
$("#leftDiv").append("<div id=Box" + i+1 + "></div>");
$("#Box"+ i+1).css("background-color", colorArray[i-1]);
$("#Box"+ i+1).text("Box" + i+1);
$("#rightDiv").append("<div id=Box" + i+2 + "></div>");
$("#Box"+ i+2).css("background-color", colorArray[i-1]);
$("#Box"+ i+2).text("Box" + i+2);
$("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
$("#Box"+ i+3).css("background-color", colorArray[i-1]);
$("#Box"+i+3).text("Box" + i+3);
}
//Define the handler for onclick events
$("#topDiv").children().click(function(){
$("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#topDiv").children().eq(1).addClass("changedFont");
});
$("#leftDiv").children().click(function(){
$("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#leftDiv").children().eq(1).addClass("changedFont");
});
$("#rightDiv").children().click(function(){
$("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#rightDiv").children().eq(1).addClass("changedFont");
});
$("#bottomDiv").children().click(function(){
$("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#bottomDiv").children().eq(1).addClass("changedFont");
});
});
jsFiddle Demo
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