Please help me. I have spent good amount of time to fix this without any success. The following loading modal box works fine in all browsers except FireFox. In firefox it shows static gif image instead of animated loading spin.
Html:
<input type="submit" name="SubmitPayment" value="Complete Order" class="square checkout button" onclick="ShowProgressAnimation();" />
<div id="loading-div-background">
<div id="loading-div" style="display:none"><img style="margin:30px;" src="images/loading.gif" alt="Loading.."/>
<p align="center" valign="middle" style="color:##1a0980; font-size:24px; font-weight:normal; text-align:center">Please Wait While We Are Processing Your Order....</p>
</div>
</div>
Java Script:
<script type="text/javascript">
$(document).ready(function () {
$("#loading-div-background ").css({ opacity: 0.8 });
});
function ShowProgressAnimation() {
$("#loading-div-background").show();
var pb = document.getElementById("loading-div");
pb.innerHTML = '<img style="margin:30px;" src="images/loading.gif" alt="Loading.."/>';
pb.style.display = '';
}
</script>
Css:
#loading-div-background
{
display:none;
position:fixed;
top:0;
left:0;
/* background:black; */
background-color: #EDF1F4;
width:100%;
height:100%;
z-index: 10000;
}
#loading-div
{
width: 400px;
height: 200px;
background-color: #EDF1F4;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-200px;
margin-top: -100px;
}
Related
Hi Im trying to overlay a pdf, rendered using adobe-reader plugin for IE11, with a div. Here is a jsfiddle describing my problem. The div is positioned behind the embedded pdf for some reason. Is there a solution to this problem? The problem occours in IE11.
The pdf is embedded like this with the div below it
<object id="pdf">
<embed src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"/>
</object>
<div id="overlay" />
Here os the css:
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1000;
}
#pdf {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks for your help.
Update! I managed to make the div overlay the pdf using an iframe. But I can't make the div transparent.
<iframe style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:9;" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"></iframe>
<div id="overlay" style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:10;"></div>
<iframe ALLOWTRANSPARENCY="true" style="position:absolute; left:0; top:0; width:50px; opacity: 0.0;
height:150px; z-index:9;"
srcdoc="<html><body style='background-color:transparent;'></body></html>"></iframe>
css remains the same.
A new js fiddle can be foudn here
hi guys im new with web programming using html, css, javascript and jquery. i have this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My test Site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssTest.css">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id = "divMain">
<div id="div1">
<img src = "1.jpg" disabled="disabled">
<img src = "2.jpg" disabled="disabled">
<img src = "3.jpg" disabled="disabled">
</div>
<div id="div2">
<img src = "4.jpg" disabled="disabled">
<img src = "5.jpg" disabled="disabled">
</div>
</div>
<div id="div3">
<div class="myCanvas" width=100% height=100%; ></div>
</div>
</body>
</html>
JS :
$(document).ready (function(){
$("a").click(function(){
$(".myCanvas").fadeIn();
$(".myCanvas").html ($(this).html());
});
});
CSS :
body{
background-color: grey;
}
#div1,#div2{
border:solid;
border-color: red;
}
#div1 img{
position: relative;
border: solid;
border-color: blue;
margin:5px;
z-index:1;
}
#div2 img{
position: relative;
border: solid;
border-color: blue;
z-index:1;
}
#div3{
background-color:black;
position: relative;
position-align: center;
top:-500px;
z-index:2
}
.myCanvas{
position: relative;
background: solid;
background-color: grey;
opacity: 0.5;
width:100%;
height:100%;
display: block;
z-index:3;
}
what I am trying to do is whenever i click on an image i would like to make the image appear in the middle with an opaque background that will be covering the other images.
Thank you guys for the help and sorry for the noob question.
You could consider using Fancybox; it gives you the functionality you're looking for.
HERE you can find the solution :)
jsFiddle
HTML
<div id="privacy">OPEN ME</div>
<div id="bgrprivacy"></div>
<div id="privacyopen">
I'M OPEN!!
</div>
CSS
#privacy{
text-decoration:none;
color:#999;
font-size:12px;
cursor:pointer;
}
#privacyopen{
display:none;
background:white;
height:30%;
width:50%;
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:101;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
padding:20px;
}
#bgrprivacy{
display:none;
background-color:rgba(0,0,0,0.4);
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:100;
width:100%;
height:100%;
cursor:pointer;
}
jQuery
jQuery(document).ready(function($){
$("#privacy").click(function(){
$("#privacyopen").fadeIn();
$("#bgrprivacy").fadeIn();
$("body").css("overflow", "hidden");
/*$("header").css("z-index", "1");*/
});
$("#bgrprivacy").click(function(){
$("#privacyopen").fadeOut();
$("#bgrprivacy").fadeOut();
$("body").css("overflow", "auto");
/*$("header").css("z-index", "1");*/
});
});
Ps: it contains some code that you don't need it because I forgot to delete it :) ( I did this for my website! )
So I have a set of 4 divs at the bottom of my page. I intend for the top of these divs to look like tabs, and when the div (tab) is clicked on, that div's height will increase and thus appear like a hidden page is rising from the bottom of the window.
Here is my code so far:
---Css---
tab1 {
float: left;
width: 400px;
height: 100px;
background: red;
position: absolute;
left: 300px;
bottom: 0px;
clear:both;
}
tab2 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 400px;
bottom: 0px;
}
tab3 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: red;
position: absolute;
left: 500px;
bottom: 0px;
}
tab4 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 600px;
bottom: 0px;
}
---HTML---
<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
<tab4></tab4>
---JavaScript---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script>
$('tab1').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab2').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
$('tab3').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab4').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
Here is a jsfiddle to demonstrate what I have http://jsfiddle.net/tkTJr/
I want to allow each div to be 100% of the window width but still enable the others to be clicked. At the moment if I did that I can only click on the one with the lowest z-index because they are overlapping. I was thinking of making the top of each div stick out like a tab to differentiate one from another. Any help in doing so?
Many thanks, I hope some one will know the solution to this problem.
I tried to achieve this using two approaches:
Approach #1: Javascript/jQuery
I went ahead and added functionality that closes the 'active' tab as I call it if the user clicks off of the tab's content or tab. Essentially this just toggles the bottom position of the tab and shows/hides (by way of sliding up/down) each time a user clicks a tab. Here is a live demo of that. If you're not looking to have the added functionality, this fiddle will do just fine for you
Here is the relevant code for the version with increased functionality:
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
Approach #2: CSS
Before I had toggled width/height with CSS based on <input>s and <label>s. This time I decided to try to make the same tabs using only CSS, so here is my attempt. Essentially it puts a link around the tab and animates it up when clicked and also animates the content's height when clicked. It took a lot less fiddling to complete and I always love complete CSS projects <3 However this approach does not quite achieve the same functionality as the jQuery approach, which is what I was afraid of and made me sad :( The problem is described below in 'Functionality note'
Here is the relevant code for a CSS only approach:
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
Usage note: The jQuery approach requires devices be able to run jQuery (of course) and the CSS approach requires that users be on "modern" browsers that allow CSS3 transitions. I didn't include all of the browser tags in my CSS, just the ones for webkit, mozilla, and IE.
Functionality note: The CSS approach I used does not allow user to click the tab to 'close' the content, they must click anywhere else. It also allows the tab to close when the content is clicked, so unless someone finds a work around for it it's only functional for displaying static content like images, text, etc.
One could change the CSS demo to only open/close when the tab itself is clicked by using the checkbox-hack, allowing the content to be selected and such
If you'd like any part of it explained further let me know. I hope I helped!
Could you tell me why this js is working in Firefox and Chrome, but is not working in Internet Explorer? I am trying to solve that 3 days now, and I have no idea why it is not working. I would like this to be working at least on IE 8,9 and 10. I will be really happy if anyone would now how to fix this.
SCRIPT
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt=" "/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$('.envelope').mouseover(function() {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function() {
$(this).find('.list')
.toggleClass("listmove");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
cursor: pointer;
}
.list {
width:236px;
height:180px;
background:white;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:120px;
left:36px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
font-size: 16px;
background:gray;
}
.envtop {
position:absolute;
top:20px;
left: 24px;
z-index:1;
-webkit-transition:0.5s;
transition:0.5s;
}
.envbot {
position:absolute;
top:20px;
left: 24px;
z-index:3;
-webkit-transition:0.5s;
transition:0.5s;
}
.envani {
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
left: 35px;
top: 10px;
}
.listani {
top:80px;
left: 45px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.listmove {
top:0px;
}
Can you check the given below jsfiddle link in IE10
LINK
Note : Where you wrote your js code?. Is it external js?. If it is internal(page itself) js you need to write javascript within <script type="text/javascript" language="javascript"> ... </javascript> tag.
My phrasing is probably all wrong, but this is what I have.
http://jsfiddle.net/ozzy/Ute6B/
Now this works fine, its for an ad system I am making nothing earth shattering.
The above example is a banner.
Now if I add this code: ASWELL ( it all goes pear shaped ) so I am obviously a knob, and have cocked something up. As functions cannot have ID's i gather it must be the mouse events that are colliding, so not allowing the feature I have made work independantly on both codes... essentially, if you add the code below to the fiddle... bugger that, I will create a secondary fiddle.. with 2 sets of code. added for you to see the issue.
http://jsfiddle.net/ozzy/9zcqW/
The idea is that each of the Adverts is unique, and the function on hover for the info links works independantly on each advert, in some cases we may need 4 adverts per page... so really any help appreciated... my previous post here::: may shed some light to answers already received, we didnt have internet when I posted that so now this is updated version in this question...
Give this function an id
you can try this also i am not sure it's perfect way or not but it's work
demo here
javascript
function mouseOver(ban_id)
{
if(ban_id=="flashdivb")
document.getElementById("flashdivb").className="flash-abgb";
else if(ban_id=="flashdivsb")
document.getElementById("flashdivsb").className="flash-abgsb";
}
function mouseOut(ban_id)
{
if(ban_id=="flashdivb")
document.getElementById("flashdivb").className="flash-ib";
else if(ban_id=="flashdivsb")
document.getElementById("flashdivsb").className="flash-isb";
}
html
<!--html code for the banner-->
<div class="banner">
<div class="bannerAd">
<img src="http://sitehelp.com.au/images/bannerad.png">
<a href="somelink.html">
<div id="flashdivb" class="flash-ib"></div>
</a>
<a href="/media">
<div class="ibhover" onmouseover="mouseOver('flashdivb')" onmouseout="mouseOut('flashdivb')"> </div>
</a>
</div>
</div>
<!--html code for the sidebar-->
<div class="sidebar">
<div class="sidebarAd">
<img src="http://sitehelp.com.au/images/sidebarad.png">
<a href="somelink.html">
<div id="flashdivsb" class="flash-isb"></div>
</a>
<a href="/media">
<div class="isbhover" onmouseover="mouseOver('flashdivsb')" onmouseout="mouseOut('flashdivsb')"> </div>
</a>
</div>
</div>
css
/*css for the banner*/
h3 { font-family:Arial, Helvetica, sans-serif;
color:#444444;
}
/*header advert*/
.banner {
width:468px;
height:60px;
border:1px solid #aaaaaa;
position:relative;
}
.bannerAd{
position:absolute;
top:0px;left:0px;
}
.flash-ib {
background-image: url("http://sitehelp.com.au/images/bannerinfo.png");
height: 60px;
width: 468px;
position:absolute;
top:0px;left:0px;
/*opacity:0.4;opacity option*/
}
.flash-abgb {
background-image: url("http://sitehelp.com.au/images/bannerinfolink.png");
height: 60px;
width: 468px;
position:absolute;
top:0px;left:0px;
/*opacity:0.8;opacity option*/
}
div.ibhover {
height: 20px;
width: 25px;
position: absolute;
top: 40px;
left: 443px;
}
/*css for the sidebar*/
.sidebar {
width:250px;
height:250px;
border:1px solid #aaaaaa;
position:relative;
}
.sidebarAd{
position:absolute;
top:0px;left:0px;
}
.flash-isb {
background-image: url("http://sitehelp.com.au/images/sidebarinfo.png");
height: 250px;
width: 250px;
position:absolute;
top:0px;left:0px;
/*opacity:0.4;opacity option*/
}
.flash-abgsb {
background-image: url("http://sitehelp.com.au/images/sidebarinfolink.png");
height: 250px;
width: 250px;
position:absolute;
top:0px;left:0px;
/*opacity:0.8;opacity option*/
}
div.isbhover {
height: 20px;
width: 25px;
position: absolute;
top: 230px;
left: 225px;
}