This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel
Related
I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code
CSS
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display:none;
z-index: 999
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display:none;
height: 200px;
width:600px;
top: 60px;
}
JQuery Code:
function showModal(){
$('.overlay').show();
$('.modal').fadeIn(100);
}
HTML Code:
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
Now, it's showing below output.
I want to remove this disturbance from UI. But need to know why it's appearing?
Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?
This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.
There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.
I suppose that you want to achieve something like this:
$('.overlay').show(400, function() {
$(this).append($('.modal'));
$('.modal').fadeIn(1000)
});
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display: none;
z-index: 999;
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display: none;
height: 200px;
width:600px;
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
Okay, so I recently learned that the ViewRight web player from Verimatrix is a so called NPAPI plugin which can be overlayed with HTML elements using a technique involving a "dummy iframe".
Div on top of ViewRight-player
HTML on top of NPAPI plugin
Now, as far as I've been able to gather, Silverlight appears to be a NPAPI plugin as well (I may be mistaking). So I tried the same approach to display a DIV on top of a Silverlight web player from another website loaded inside an iframe.
Unfortunately it doesn't work... As soon as the Silverlight player loads it sits on top of everything else.
I know that setting the windowless param to true in the player would fix it. But since the player isn't hosted by me I can't edit any of the object parameters.
Here's a test scenario based on the "dummy iframe" method: http://jsfiddle.net/c7Hsp/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
.wrapperDiv {
position: absolute;
bottom: 200px;
left: 200px;
width: 200px;
height: 200px;
margin: 0 auto;
}
.dummyFrame {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background-color: red;
}
.contentDiv {
position: absolute;
top: 25px;
left: 25px;
width: 300px;
color: white;
font-family: Arial;
font-size: 18pt;
text-align: center;
background-color: green;
}
#silverFrame {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px;
background: transparent;
}
</style>
</head>
<body>
<iframe id="silverFrame" src="http://clubace.dk/silverlight.htm"></iframe>
<div class="wrapperDiv">
<iframe class="dummyFrame" frameborder="0"></iframe>
<div class="contentDiv">Weee!<br>I'm overlaying this<br>NPAPI plugin :D</div>
</div>
</body>
</html>
I hope somebody can help me make this work :-)
Thx
for your deleted question PHP: Get attribute value of a specific tag from HTML [duplicate]
you miss an S in the
document.getElementsByClassName('classname')
and you can then
.
.
$attr = $tag->item(15);
$percent = $tag.style.heigth
http://www.w3schools.com/jsref/prop_style_height.asp
First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;
First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.
try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}
I am very new to Javascript. I have been looking into using Javascript to edit css style properties. I have searched the web and looked at a lot of different problems. Even with all of that, it is probably my inexperience as to why I can't figure out what is wrong with my code. What adds to the problem is that there are so many ways to do this. Anyway here are the specifics.
What I want it to do:
When someone clicks on the link in the code, I want the hidden DIV (which will just be near the top of my waiting to be called on) to have its visibility switched to visible so as to create a new layer on the page.
My code:
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getelementbyid("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>
Now, I know there are a lot of ways to do this. But can someone show me what to tweak in the code I gave to make the way I am writing this work? Thanks so much for your time.
It is document.getElementById not document.getelementbyid
Working Demo
use this code
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getElementById("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>