I am trying to show a spinner when a button is clicked to indicate that browser is performing actions behind the scenes.spinner is showed right after I click the button on the Firefox browser but not on the Google Chrome browser. On Google Chrome browser there is a delay of 8 seconds. I have debugged it on developer tools while the action has performed but I do see that class attribute is been added to the html code right when the button is clicked.
Here is my markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadSpinner" style="display:none;"></div>
<button type="submit" class="btn spinnerEvent" >On</button>
<script>
$(document).on("click", "button.spinnerEvent", function(event){
$('#loadSpinner').addClass('show'); //LOADS THE SPINNER
});
</script>
<style>
#loadSpinner.show{
background:#000 url(../images/spinner-small.gif) no-repeat center center;
background-color: transparent;
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
}
</style>
I have created a working fiddle with minor changes to your code:
https://jsfiddle.net/jennifergoncalves/783gyyou/2/
HTML:
Removed display:none as that inline style will take precedence over your CSS style defined in the style tag
<div id="loadSpinner"></div>
<button type="submit" class="btn spinnerEvent">On</button>
CSS:
Setting all styles in the style tag.
#loadSpinner {
display: none;
}
#loadSpinner.show {
background: #000 url(../images/spinner-small.gif) no-repeat center center;
background-color: red; /*changed from transparent to red so you can see the div, even though I don't have access to the actual image*/
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
display: block;
}
In Google Chrome, the loading div appears right away on click of the button.
If you are still experiencing problems, try to preload the spinning image on the page. It may simply be that the image itself is taking some time to load and there is not a delay in your code.
Here are some tips on how to preload CSS images used as backgrounds after the page loads: https://css-tricks.com/snippets/css/css-only-image-preloading/
Related
So I have this code and What I want is to put the resize button on the top right of the div,
so i rotated the outer box than and then rotated back the inner box to preserve the content,
It seems to work fine in chrome but in Mozilla it is using the original directions and it acts weird,
Not Working On Firefox(working on chrome)
(It is working but not as Accepted)
this is the simplified code
.chatbox-flipped{
/*important */
overflow: hidden;
resize: both;
transform: rotate(180deg);
width: 30%;
height: 400px;
position: fixed;
bottom: 0;
right: 0;
background: black;
}
.chatbox{
/*important */
transform: rotate(180deg);
color: white;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
background: blue;
}
.chatbox > .chats-container{
background: red;
}
<div class="chatbox-flipped">
<div class="chatbox">
<div class="chats-container">
<p class='received'>
hey bob
</p>
</div>
</div>
</div>
I have simplified the code You can View the full code over here
Complete Code(On JsFiddle)
I also went the js route but the mouse events are consuming almost 100% of one thread of my computer( I am running a i5 9300H on PopOS ),
That's why I am skeptical about using the JS ROUTE,
I also tried to update the thing around 30 times a second but it comes out there is no way to get the position of mouse without mouse event.
And also personally I like to use only CSS
SOLUTION:
All I had to do was change section-center alignment that was causing page overflow.
Problem
When I open the modal windows (overlaying window, like what sites use to ask you to sign up for a newsletter before you leave) on the first page, they all work just fine. When I scroll down and open a modal window on the second or third page, it breaks the alignment of elements behind the modal window.
Pics
As you can see in the first picture, it works just fine on the first page. The issue occurs on pages two and three, and it appears to be something happening to the alignment of the background elements.
Relevant Code
My HTML:
<!-- Modal window -->
<div id="open-csci-modal" class="modal-bg">
<div class="modal-content">
<a href="#close" title="Close" class="close">
<img src="img/exit-icon.png"></a>
<h2>Computer Science Major</h2>
<p>Paragraph about what I've learned in school.</p>
</div>
</div>
My CSS:
section {
height: 100vh;
background-size: cover;
}
.modal-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modal-bg:target {
opacity:1;
pointer-events: auto;
}
.modal-bg > div {
width: 800px;
height: 410px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: rgba(112, 156, 250, 0.75);
}
Links
OnePageScroll.js source code (GitHub repo)
My portfolio source code in its entirety (GitHub repo)
Thanks so much in advance. I've been struggling to find the cause of this for some time now.
I've got a problem with jquery hide() and show() on internet explorer 10. I need a pop-up window for a banner I'm making, when clicking left bottom corner a div will show, when div is up and clicking on top right corner div will hide.
This work on modern browser, but not in internet explorer 10.
HTML
<div id="banner">
<button class="show"></button>
<div id="modal">
<button class="hide"></button>
</div>
</div>
CSS
#banner {
width: 468px;
height: 240px;
border: solid 1px black;
position: absolute;
overflow: hidden;
cursor: pointer; cursor: hand;
}
#modal {
width: 468px;
height: 240px;
display: none;
position: absolute;
z-index: 9999;
background-color: red;
}
.show {
width: 80px;
height: 35px;
bottom: 0px;
position: absolute;
z-index: 12;
}
.hide {
right: 0px;
top: 0px;
width: 50px;
height: 50px;
position: absolute;
z-index: 12;
}
Jquery
$(document).ready(function(){
$(".hide").click(function(){
$("#modal").hide();
});
$(".show").click(function(){
$("#modal").show();
});
});
EDIT - problem solved
It appears you cannot click empty tags (only specified width/height) in IE 10 and below, so I had to fill it with a transperant color (rgba 0,0,0,0.001).
I also realized it could be done without jquery, duh.
You can always use vanilla JS, and do something like:
document.getElementById('modal').style.display = 'block';
or
document.getElementById('modal').style.display = 'none';
This way is also more performance efficient than going through a jQuery object.
Hide and Show methods of Jquery toggles the CSS property display to none/block for applied HTML tag.So question rules out about compatibility.
Just correct the error on console of browser (F12) if any (I saw one unreferenced object) and try again .
Also, check the browser mode you are running. (F12).
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.