I want the following behavior to happen.
1) User clicks on a link on my site
2) I show text which says the next page is loading
3) Then the user goes to the next page.
4) If the user clicks Back to go to the original page, the text which says loading is no longer there.
I don't know how to implement #4. I've tried window.onbeforeunload but couldn't get it to work properly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="loadingDiv" style="display:none;">
This should show when I click on link. This should not show when users leaves this page and then clicks back.
</div>
<script>
$(function() {
$('.button').click(function() {
$('#loadingDiv').show();
});
});
</script>
<br><br>
<a class="button" href="http://www.google.com">Open google</a>
</body>
</html>
It's radically different from what you have attempted, but with some modifications, you could have similar functionality to what I have achieved with this. It adds some nice little AJAX animations while changing pages;, triggering a dark but opaque overlay div and a loading div each with fixed positioning.
the jquery
$('a.animate').click(function(){
var href = $(this).attr('href'),
toLoad = href+' #main-content';
$('#overlay').show();
$('#loader').show();
$('#page-content').hide();
$('#main-content').load(toLoad,'', function(){
$('#main-content').show('fast',function(){
$('#loadingDiv').hide('slow',function(){
$('#overlay').hide();
});
});
});
window.location = href;
return false;
});
the html
<div id="loader" class="bubblingG">
<img src="your-ajax-img" style="height: 100%; width: 100%"/>
</div>
<div id="overlay"></div>
<div id="main-content">
<div id="page-content">
<!-- your page content goes here-->
</div>
</div>
the css
#loader {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
margin-top: -31.5px;
margin-left: -50px;
height: 63px;
width: 100px;
display: none;
}
#overlay{
position: fixed;
z-index: 995;
top: 0px; right: 0px; bottom: 0px; left: 0px;
background: #333;
opacity: 0.4;
display: none;
}
NOTE You can't nest #loader within #overlay or it will inherit the opacity from #overlay. This is a known problem with CSS, so you have to position it by itself with z-index and normal positioning methods to prevent opacity in your #loader div.
You can hide the loader with delay:
$('.button').click(function() {
// show just 2 sec
$('#loadingDiv').show().delay(2000).hide();
});
Related
I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:
I have two HTML documents, b.html contains c.html using an iframe.
On b.html I need to draw some DIV (in my example id=selector), which partially cover content of c.html visualized in the iframe.
I need to get the ID of a DOM element corresponding to the mouse coordinate under the DIV selector.
At the moment Using document.elementFromPoint() directly in in c.html works partially, as when the mouse it is on DIV selector I cannot identify the underling DOM element in c.html (in this example DIV c).
I would need to know:
Is it possible to select element under another, using document.elementFromPoint() or any other means?
What could be a possible alternatively solution possibly using DOM and native API?
Example here (Please look at the console in Chrome):
http://jsfiddle.net/s94cnckm/5/
----------------------------------------------- b.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>B</title>
<script type="text/javascript">
window.app = {
start: function () {
}
};
</script>
<style>
#selector {
position: absolute;
top: 150px;
left: 150px;
width: 250px;
height: 250px;
-webkit-box-shadow: 0px 0px 0px 5px yellow;
-moz-box-shadow: 0px 0px 0px 5px yellow;
box-shadow: 0px 0px 0px 5px yellow;
}
#iframe {
width: 500px;
height: 500px;
border: none;
}
</style>
</head>
<body onload="app.start();">
<div id="selector">SELECTOR</div>
<iframe id="iframe" src="c.html"></iframe>
</body>
</html>
----------------------------------------------- c.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C</title>
<script type="text/javascript">
window.app = {
start: function () {
document.querySelector('body').addEventListener('mousemove', function (event) {
//console.log(event.pageX, event.pageY, event.target.id);
var item = document.elementFromPoint(event.pageX, event.pageY);
console.log(item.id);
}.bind(this));
}
};
</script>
<style>
body {
background-color: lightslategray;
}
#a {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
#b {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: #ffd800;
z-index: 1;
}
</style>
</head>
<body onload="app.start();">
<h1>Content</h1>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
A possible soltion is the usage of pointer-events.
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events. When this property is unspecified, the same
characteristics of the visiblePainted value apply to SVG content.
When you apply
#selector {
/* ... */
pointer-events: none;
}
All content of #selector and the element itself are no more interactive. Content may not be selected and events like :hover or click are not applicable.
Here is the demo with the above css: http://jsfiddle.net/s94cnckm/6/
Another possible solution, is to capture the document coordinates of a mouse event fired on the masking item(DIV.selector), momentarily hide that masking item, and then ask the document what is under that coordinate position (using document.elementFromPoint(x,y)) before showing the masking item again.
The support for document.elementFromPoint() cover also old version of IE.
Unfortunately pointer-events has limited support for older version of IE.
Here a working example:
http://jsfiddle.net/s94cnckm/14/
document.getElementById('iframe').contentDocument.addEventListener('click', function (event) {
alert(event.target.id);
}.bind(this));
document.getElementById('selector').addEventListener('click', function (event) {
var selector = document.getElementById('selector');
selector.style.display = 'none';
var item = document.getElementById('iframe').contentDocument.elementFromPoint(event.pageX, event.pageY);
selector.style.display = '';
alert(item.id);
}.bind(this));
Regarding the use of pointer-events I link to mention some related article, included a work around for older version of IE.
How to make Internet Explorer emulate pointer-events:none?
https://css-tricks.com/almanac/properties/p/pointer-events/
http://davidwalsh.name/pointer-events
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
This solution was inspired by this article:
http://www.vinylfox.com/forwarding-mouse-events-through-layers/
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I've got some code similar to the following:
HTML
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
When I click a button, I give the divs the following properties:
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
So essentially I make darkOverlay dark-translucent and bring it to the front. And then I also show the white text and bring it to the (even more) front.
However, it seems that the darkOverlay still casts its translucency on top of my white text. This causes the white text not to appear as white as I need it to be. What should I do to make sure my white text stands out?
CSS [on page load]
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
If it's the white text that's at issue, it's because nothing ever sets the color to white.
$('#whiteText').css('color','white');
Or complete example:
<!DOCTYPE HTML>
<html>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<style>
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
</style>
<body>
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
<div style="position: relative">
<button id="clickme">clickme</button>
</div>
</body>
<script>
$("#clickme").click(function(e) {
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('color','white');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
});
</script>
</html>
I have am image on my page and i am changing its image source with java script.
All I need is to change this image with some beautiful sliding effect.
What I want is when i click on a button to change the image, the first image should disappear and another one should show in some some decent way (not like a jerk or blink)
You can put second image behind the first one, and then make fadeout() efect on the first image.
use this code
$(".firstimage_classname").fadeout();
$(".secondimage_classname").fadeIn();
you can give time interval as well.
otherwise try
$(".firstimage_classname").slideUp();
$(".secondimage_classname").fadeIn();
Try This Code
$(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
var $next = $(this).attr('src','http://abc.com/logo.png');
});
Hope it would helps you.
Enjoy
Here you go example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>