I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/
Related
I have some code that works just fine in a fiddle, but not in wordpress. Essentially, I want the div 'loading' to be hidden by default, but show for 3 seconds and then ease out on a button click.
My JS is loaded in the footer, and the 'loading' div, as well as the trigger are within a page. I have tried moving the JQuery into the header to see if that would help, but so far, no. I am sure the javascript file is being loaded. Can anyone help with what I'm doing wrong? Here is my code. Thank you very much.
<div id ="loading">
next page is loading
</div>
<span id="button">Button</span>
jQuery( function( $ ){
$("#bottom").on("click", function() {
$("#loading").show(0, function() {
$("#loading").fadeOut (3000);
});
});
$("#loading").hide();
});
#loading{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
}
i think it's just a simple typo.
in the HTML the ID is button
<span id="button">Button</span>
and in JS you refer to bottom
$("#bottom").on("click", function() {
You had spelled button wrong, so I am surprised it worked on JSfiddle.
$("#bottom").on(...
instead of:
$("#button").on(...
Full Code:
jQuery(function($) {
$("#button").on("click", function() {
$("#loading").show(0, function() {
$("#loading").fadeOut(3000);
});
});
$("#loading").hide();
});
#loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading" style="display: none !important;">
next page is loading
</div>
<span id="button">Button</span>
I have a button, when you click it shows a loading div and opens a new tab which loads an html. I want to hide this div when the html in the new tab loads. I've tried so many things to hide this but no one works, can I have some help? I'm new on html, javascript, ajax, jquery development.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
00% { transform: rotate(360deg); }
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("div").show();
var win = window.open("new2.html");
});
});
</script>
</head>
<body>
<button id="show">Show</button>
<center>
<div id="loadingImage" style="display:none;">
<div id="white-background"></div>
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</center>
</div>
</div>
</center>
</body>
</html>
You can not remove the loading if cause your browser IS in loading state. So you might ask google or mozilla to remove it ;) It just is shown cause your new window CAN NOT LOAD THE PAGE.To open a window is like open a new browser. Without "http://whatever" it will show a error 404 or in some case this "logo". So if you use a full qualified URL nothing is shown. Your code has some more issues.
1.) jquery is depriated and overkill
2.) do not use such libs untilyou has understand javascript at its base !
3.) you should use chrome as developement browser - with F12 it opens a nice IDE which can clean up also your messy HTML code ;) Ther was some divs not correctly nested. Will mix up javascript and css.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
00% {
transform: rotate(360deg);
}
}
#white-background {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox {
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head></head>
<body>
<button id="show" onclick="javascript:winopen('new2.html');">Show</button>
<div id="progress" style="display:none;">
<div id="white-background">
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</div>
</center>
</div>
</div>
<script>
//if you load or put scripts at the end the DOM (direct before </body>) the
//page html is already loaded so no need
// for onload tricks The page is already ready here.
var win;
var progress;
var baseurl = ""
baseurl = window.location.href;//current page location
//current url
url = baseurl.split("/");
//remove current filname by split to array
url.pop();
//remove last array element
baseurl = url.join("/");
// join rest of array
console.log(baseurl);
function winopen(page) {
progress = document.getElementById("progress");// get the div by its id
//i have put the file in the same directory. i gues you has to change "/" to "/YOUR_SUBDIRECTORY e.g. /test//"
var href = baseurl + "/" + page; //create new url for the window open thing
progress.style.display = "block";// show the progress info
win = (window.open(href)); // open the window
progress.style.display = "none;"; // it's loaded hide the progress info
}
//bonus trick:
function content_manager(showme_id,hideme_id) {
document.getElementById(hideme_id).style.display="none";
document.getElementById(showme_id).style.display="block";
}
</script>
</body>
</html>
You own me a beer ;) BTW: you might not see you loading stage. Its too fast to see. Comment out the hide part or use the chrome debugger to se whats going on :)
To center things : center a info box you might also read about the z-index css property. You can hide the whole page by a div with is width 100% height 100% , has a frixed position and has a z-index: 2; so you put your loading info over the page and hide the page completely. You might use as background-color: rgba(1,1,1,.5) to make it half transparent ;)
If you are on same domain then try with localStorage:
Add this script:
<script>
localStorage.setItem("ispageloaded",false);
function load(){
var func=setTimeout(function(){
if(localStorage.getItem("ispageloaded")){
clearTimeout(func);
//Then hide loading div here...
}else{
load();
}
},2000);
}
load();
window.open("nav2.html","_blank");
</script>
Add this script to nav2.html:
<script>
localStorage.setItem("ispageloaded",true);
</script>
Hope you are understood this script...
If you are using ajax code to populate that content, you can hide that div with a single line code.
I want to show the Google Ads on the bottom of my website, but I want it to appear only when the mouse hovers (or clicks) an arrow icon. I don't know if you understand what I mean. I want the AD to slide from nowhere when the mouse hovers an arrow on the bottom of the page.
Which JS and CSS codes do I need for that function?
My codes now:
HTML
<div id="footer"> <center><script src="http://fanscity.eu/ads/728x90.js"></script></center> </div>
CSS
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.69);
padding: 20px;
}
Thank you!
I think you need this
UPDATE :
HTML
<div id="footer">footer</div>
<img id="img" src="arrow.png"/>
CSS
#footer{
display:none;
height:40px;
background-color:#666;
position:absolute;
width:100%;
bottom:0;
left:0
}
#img{
position:absolute;
bottom:0;
right:0
}
JS
<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
var ishover = false;
$(document).on("mouseover",'#footer',function(){
ishover = true;
}).on("mouseleave",'#footer',function(){
$(this).stop().fadeOut();
ishover = false;
}).on("mouseover",'#img',function(){
$('#footer').stop().fadeIn();
}).on("mouseleave",'#img',function(){
if(!ishover)
$('#footer').stop().fadeIn();
});
});
</script>
I wrote a small snippet of a simple chat style program.
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").on("click", function(){
$('.inner').scrollTop($('.container')[0].scrollHeight);
var a = new Date();
$(".container").append("<p>"+a+"</p>");
if($(".container").height()>$(".inner").height()){
$(".container").css("bottom", "auto");
}
});
});
</script>
<style type="text/css">
.wrapper{
width:300px;
height: 500px;
overflow: hidden;
}
.inner{
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: #ccc;
position: relative;
}
.container{
position: absolute;
bottom: 0;
background-color: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="inner">
<div class="container">
<p>Hey buddy!</p>
</div>
</div>
</div>
<button>Try Me!</button>
</body>
</html>
The program is working now, but the scroll bar is not scrolled to the bottom. What have I done wrong? Please help me on jsfiddle.
You just have to scroll after you added the new html :
demo
$(function(){
$("button").on("click", function(){
var a = new Date();
$(".container").append("<p>"+a+"</p>");
if($(".container").height()>$(".inner").height()){
$(".container").css("bottom", "auto");
}
$('.inner').scrollTop($('.container')[0].scrollHeight);
});
});
You can also try like this,
$("button").on("click", function(){
$(document).scrollTop($(document).height());
});
nafischonchol, thank you so much for this answer, amazing I used it like this, and it keeps the scrollbar at the bottom all the time.
$(document).ready(function(){
var intervalId = window.setInterval(function(){
$(document).scrollTop($(document).height());
}, 200);
});
Just don't suggest me jquery ui modal because i don't know how to
modify and implement that thing! Alert box work perfect but it's little
ugly, i want to style it and i know that is not maybe possible because
it's system tool..i need help..that modal box need to be opened when
form was submitted, she need to contain message like "your message has
been sent!"..Thank you brothers
Code:
echo '
<!-- Poruka o NEuspiješnosti slanja -->
<script type="text/javascript">
alert("Greška!\nMolimo Vas ispravno popunite obrazac.");
</script>
<!-- Kraj -->'; } // Kraj.
You can use HTML Dialog element (www.w3.org), HTML Dialog element (html5rocks). You can style it with css, although it's not so widely supported now
somthing like this should work
$(document).ready(function()
{
$('#form').submit(function(e)
{
e.preventDefault();
modal();
});
$('.close').click(function()
{
$('#alertBox').fadeOut()
});
});
function modal()
{
$('#alertBox').fadeIn();
}
HTML
<div id="alertBox">
<div class="inner">
<div class="msg">your message has been sent!</div>
<div class="close">close</div>
</div>
</div>
<form id="form" method="post" action="">
<input type="submit"/>
</form>
CSS
#alertBox{
position:fixed;
top:50%;
left:50%;
width:400px;
height:200px;
margin-left:-200px;
margin-top:-200px;
border:2px solid #ccc;
background:#fafafa;
display:none;
font-size:18px;
text-align:center;
}
.close{
position:absolute;
top:5px;
right:5px;
cursor:pointer
}
.inner{
position:relative;
padding-top:50px;
}
http://jsfiddle.net/9BrUN/1/
in your case Echo
echo'
<script type="text/javascript">
$(document).ready(function(){modal()}});
<script>';
Simple Answer. No, You can't
Because Alertbox is system object, You cannot modify it with CSS or javascript.
The only way to do is, Use Jquery UI Dialog as you mentioned in your question.
You cannot modify the alert box.
Instead of alert, use something like:
jQuery:
$('body').append('<div class="error"><span class="error_close">×</span>Greška!<br>Molimo Vas ispravno popunite obrazac.</div>');
$('.error_close').click(function(){$(this).parent().hide();});
CSS:
.error { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 400px; height: 100px; }
.error_close { position: absolute; top: 5px; right: 5px; }