[ Learning Purpose ]
I'm Trying to use only javascript for this..
any advices with the simplest way is very appreciate it..
I Have explained what I need to do in the button functions with comments..
P.S: I'm not sure if this is done using CSS.. so please guide me if it does.
Seems Like I'm being misunderstood I'm look for this effect:
http://lokeshdhakar.com/projects/lightbox2/
<!DOCTYPE html>
<html>
<head>
<style>#mydiv{height: 250px; width: 250px; background-color:#34f;}</style>
<script>
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
var div = document.getElementById("mydiv");
var mybutton = document.getElementById("mybutton");
mybutton.onclick = function()
{
// center div
// gray out the rest
};
document.onclick = function()
{
// remove gray out effect to the page
};
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="mybutton"></button>
</body>
</html>
HTML:
<div id="mydiv" style="display:none"></div>
CSS:
#mydiv
{
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
top: 0px;
left: 0px;
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
}
JavaScript:
mybutton.onclick = function()
{
document.getElementById("mydiv").style.display = "";
};
document.onclick = function()
{
document.getElementById("mydiv").style.display = "none";
};
may be helps you.
Related
I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML.
Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...
Here is what I have done until now:
<!DOCTYPE html>
<html>
<head>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
<style>
#main {
position: relative;
width: 620px;
margin: 0 auto;
height: 1800px;
}
#left1{
position: absolute;
font-family: sans-serif;
left: 0px;
top: 10px;
height: 200px;
width: 300px;
background-color: #F6D565;
}
#right1{
position:absolute;
font-family: sans-serif;
top: 10px;
right: 0px;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
#right2{
position:absolute;
top: 320px;
right: 0px;
font-family: sans-serif;
height:300px;
width: 300px;
background-color: #DFFCC2;
}
#right3{
position:absolute;
top: 630px;
right: 0px;
font-family: sans-serif;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
</body>
</html>
DEMO
The DOM is not available when you are trying to access div with id left1.
So your first line var left1 = document.getElementById("left1"); will give error.
Instead Wrap your current code within window.onload
<script>
window.onload = function() {
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
console.log("calling scroll")
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
}
</script>
Else place your javascript just above the </body> tag
Yes, you can use onload to call a function after the page is loaded like so:
<script type="text/javascript">
function onLoad(){
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
}
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script>
and replace
<body>
with:
<body onload="onload()">
Note that you can still leave the script in the header of your page (between <head> and </head>).
You can use window.addEventListener() if you don't like <body onload="onload">, but IE won't support this. See "Hook a javascript event to page load" for details.
You have to load your script after the DOM is created. The time you are trying to parse var left1 =document.getElementById("left1"); DOM hasn't created yet so var left1 is null
TRY:
<!DOCTYPE html>
<html>
<head>
<style>
//YOUR CSS
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
</body>
</html>
EDIT:
By changing position you have to rearrange your item.
Try:
function onScroll(e) {
if (window.scrollY >= origOffsetY) {
left1.style.position = "fixed";
left1.style.left = "66px"
} else {
left1.style.position = "absolute";
left1.style.left = "0px";
}
}
DEMO
I have a VML shape in which I'm trying to prevent the browser from navigating to the href:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #b {
position: absolute;
top: 10px;
width: 100px;
height: 100px;
display: block;
}
#a {
left: 10px;
background: red;
}
#b { left: 120px; }
</style>
<script type="text/javascript">
(function() {
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');
window.onload = function() {
var a = document.getElementById('a');
a.attachEvent('onclick', function(e) {
console.log('A');
e.returnValue = false;
return false;
});
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
console.log('B');
e.returnValue = false;
return false;
});
};
})();
</script>
</head>
<body>
<a id="a" href="/foo"></a>
<v:rect id="b" href="/bar"><v:fill color="#0000ff" /></v:rect>
</body>
</html>
Run this sample in IE8. Clicking on the link (the red shape) properly prevents browser from going to /foo with returnValue = false/return false.
However, attempting to cancel the navigation on the <v:rect> does not work. The browser navigates to /bar!
Is there a solution to get around this?
This should work:
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
e.preventDefault();
});
I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br>[Close]
</div>
Show
</body>
</html>
CSS based solution to center:
You need to use these styles to make it appear dead-center:
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.
Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.
Just do this:
.body {
position: relative;
}
.popup {
position: absolute;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
no matters the screen or popup size. This will center the <div class="popup"></div>.
What you need is called a light-box.
To create it you should modify HTML,CSS and JS code.
Let's say your lightbox consist only of the string "login form". (You can put everything you want there) The HTML code should look like this:
<div id = "loginBox">login form</div>
Now, we need to hide it with CSS:
div#loginBox {
display: none;
}
Now our box is not visible. Lets modify our box as you want it to be 100px from the top:
div#loginBox {
display: none;
top: 100px;
}
We will worry about disabling the background later.
Our next job is to make a button that will display the box when we need it. Easy-peasy:
<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>
Note that we don't need the "href" attribute, because that will move the screen on clicking and other unwanted behavior.
Let's attach event handler on the button via JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
document.getElementsById("loginBox").style.display = "inline-block"; // or "inline"
}
window.onload = function() {
var login_box = document.getElementsById("loginBox");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
}
}
But you want it to be in the center of the screen? Then the function goes like this:
function display_box() {
var theBox = document.getElementsById("loginBox").style,
left = document.width / 2 - 50; // 150 because it is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
}
I would guess that you will want to close the window at some point and make the "disabled background" effect. To do so you can create a div class that extends on the whole screen, attach a "display" event on it, put some z-index in the css to be sure the loginBox is over the "disabled background", and attach a "close the loginBox" event on the "background" div. And now the final code looks like this:
Note that we care only about the placement of the login-button, because the other are hidden from view, and then modified by JS:
HTML:
<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>
CSS:
div#loginBox {
display: none;
top: 100px;
width: 300px; #it is important to know the width of the box, to center it correctly
z-index: 2;
}
div#backgroundDarkener {
background: #000;
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
# needless to say, you should play with opacity or if you want your
# css to validate - background image (because I suspect it won't
# validate for old versions of IE, Safari, etc.) This is just a suggestion
}
JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
var theBox = document.getElementsById("loginBox").style,
background = document.getElementsById("loginBox").style,
left = document.width / 2 - 150; // 150 is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
background.display = "inline-block";
}
function hide_box() {
document.getElementsById("loginBox").style.display = "none";
document.getElementsById("backgroundDarkener").style.display = "none";
}
window.onload = function() {
var login_box = document.getElementsById("loginBox"),
background = document.getElementsById("backgroundDarkener");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
background.addEventListener( "click", hide_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
background.attachEvent( "onclick", hide_box );
}
}
A quick Google search found this;
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
This is where flexbox comes rescue now!
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
You need to use these styles to make div center:
width:500px;
left:0;
right:0;
margin:0 auto;
Simple, margin: 100px auto;. There's no need to do calculations in JavaScript.
Live Example
I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'hidden';
document.getElementById('topbar').style.visibility = 'visisble';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'hidden';
document.topbar.visibility = 'visible';
}
else { // IE 4
document.all.layer.style.visibility = 'hidden';
document.all.topbar.style.visibility = 'visible';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'visible';
document.getElementById('topbar').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'visible';
document.topbar.visibility = 'hidden';
}
else { // IE 4
document.all.layer.style.visibility = 'visible';
document.all.topbar.style.visibility = 'hidden';
}
}
}
</script>
and css:
#topbar {
background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}
#show {
float: right;
padding-right: 40px;
padding-top: 10px;
}
#hide {
float: right;
padding-right: 40px;
}
#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}
using standard html links like:
Hide
Any help would be appreciated, cheers!
EDIT
okay switched to something completely new but it seems to not show after hiding
<script type="text/javascript">
$(function(){
$('#showhide').click(function(){
$('#layer').toggle();
$('#topbar').toggle();
});
});
and
Show/Hide
and
<div id="layer"></div>
You dont need jQuery for this.
Your functions could look like this:
function hideElement(elementId)
{
document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
document.getElementById(elementId).style.display = 'block';
}
Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.
This will probably help you: http://api.jquery.com/hide/ or the http://api.jquery.com/toggle/.
EDIT:
I am hoping that following example will help you.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#a").toggle();
$("#b").toggle();
});
});
</script>
</head>
<body>
<div id="a">
I am a.
</div>
<div id="b" style="display: none">
I am b.
</div>
<div id="button">
<button>Show/Hide</button>
</div>
</body>
</html>
I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We use this as a simple context sensitive help type popup. I did a quick browse but didn't see quite what I was looking for. I just need some text and a simple Close button/link, but I would like the page darkened below the popup, as it does with the Ajax modal control.
Can anyone suggest a nice JavaScript popup/help type solution that you've used?
I can provide you the code. Do your modifications as necessary, OK?
Page JavaScript:
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Now the HTML page, using the JavaScript file:
<html>
<head>
<script type="text/javascript" src="NAME OF THE PAGE!.js"></script>
<style>
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
</style>
</head>
<body>
<div style="background-color: red; width: 200px; height: 300px;
padding: 20px; margin: 20px;"></div>
<script type="text/javascript">
var pop = new myPop();
pop.popOut("Jose leal");
</script>
</body>
</html>
Hope that this can help.
I've used the simplemodal jQuery plugin and I've been quite happy with it. You can check it out here.
Maybe you are looking for something like this? [ui.jquery.com]
It's the simplest one, and can come bundled with a lot of other eye candy. Of course you could also look around the rest of the jQuery plug-ins page, specially the Windows and Overlays section.
I developed a javascript library called Msg. It allows to easily create a modal window / popup. It creates an overlay behind it that darkens the background. It has no close button but it can be closed by clicking the background overlay.