Develop Reference

Show logo if site has scrolled

I have a header with a logo. This logo should appear only if the site has been scrolled.
I tried this in javascript:
if(document.getElementById("div").scrollTop != 0){
document.write("<img src='logo.jpg'>");
}
But this did not work.
How to achieve it?

Use window.addEventListener('scroll', callback) and then set the value "block" to the img's property.
window.addEventListener('scroll', function(e) {
if (document.getElementsByTagName("html")[0].scrollTop > 5) {
document.getElementsByClassName('imgHeader')[0].style.display = "block";
} else {
document.getElementsByClassName('imgHeader')[0].style.display = "none";
}
});
.imgHeader {
height: 100px;
width: 100px;
display: none;
}
div {
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
}
<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>

Try this one
$(document).on("scroll", function() {
if ($(document).scrollTop() > 5) {
$(".below-top-header").addClass("show-class");
} else {
$(".below-top-header").removeClass("show-class");
}
});
.content {
height: 500px;
}
.show-class {
position: fixed;
display: block !important;
}
.hide-class {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="below-top-header hide-class">
Image
</div>
</div>

Unfortunately, I think you must use some JavaScript to make it work like you want.
Here is an easy snippet to show the principle I used:
Start with the logo already in the html, but with display: none in its CSS,
Use window.addEventListener('scroll', callback) to change display: none to display: block when the page is scrolled down (i.e. document.documentElement.scrollTop > 0).
var logo = document.getElementById('logo');
window.addEventListener('scroll', function(e) {
if (document.documentElement.scrollTop > 0) {
logo.style.display = 'block';
}else logo.style.display = 'none';
});
#logo {
display: none;
position: fixed;
top: 0;
background: #aaa;
}
#page {
background: #ddd;
height: 2000px;
}
<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>
Hope it helps.

You need to add an scrollListener to the window in order to execute code when the user scrolls.
Your code only gets executed on page load.
Informations on Eventlisteners: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
window.addEventListener('scroll', function(e) {
//do something as soon as the window was scrolled
});
Be aware that the event will be triggered each time the user scrolls.

How to make browser fullscreen (same like F11) using java script or action script?

i want to achieve exact same behavior like F11 key. when we press F11 key in windows the whole browser goes full-screen (with all open tabs).
how can i do that using JavaScript or ActionScript.
i have already tried element.requestFullScreen(). But i an not talking about this.using element.requestFullScreen() is not useful for me because pressing Esc exits full screen and i don't want that.

This was solved in this post: How to make the window full screen with Javascript (stretching all over the screen)
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
Newest solution, also posted there. Just modify it to apply it where you need it. This is opening a new window:
<script>
var popupScreenParameters = [ 'height='+screen.height, 'width='+screen.width, 'fullscreen=yes' ].join(',');
var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters); windowVariable .moveTo(0,0);
</script>

You can use native full-screen api, here an example. (Please create a HTML file to see it as if this code in pasted in an iframe, like jsfiddle full screen mode won't show up).
API:
Element.requestFullscreen()
Document.exitFullscreen()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Full-Screen</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body
{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
body {
margin: 10px;
}
p {
margin: 0 0 1em 0;
}
figure {
position: relative;
display: block;
width: 30%;
float: right;
padding: 0;
margin: 1em;
cursor: pointer;
}
figure img {
display: block;
max-width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
figure:-moz-full-screen img {
position: fixed;
}
figure:-ms-fullscreen {
width: auto;
}
figure:-ms-fullscreen img {
position: fixed;
}
figure:fullscreen img {
position: fixed;
}
</style>
</head>
<body>
<header>
<h1>Full-Screen Demonstration</h1>
</header>
<article>
<figure id="myimage">
<img src="http://dummyimage.com/600x400/000/fff" />
</figure>
<p>Click on image to go full screen</p>
</article>
<script>
if (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
var i = document.getElementById("myimage");
i.onclick = function() {
// in full-screen?
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
// exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
else {
// go full-screen
if (i.requestFullscreen) {
this.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
i.msRequestFullscreen();
}
}
}
}
</script>
</body>
</html>

Lightbox Effect : Gray out body using only Javascript

[ 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.

how do I center javascript css popup div, no matter what the screen resolution?

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

Javascript hide/show layers

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>