How to display lightbox background while ajax loading [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have been trying to display ajax loader/spinner image with transparent lightbox typed background in the whole screen. Any idea please.

Check these out:
http://codepen.io/collection/HtAne
Take one of the .loaders - put it in a #loaderContainer and then:
#loaderContainer{
position:absolute; // or fixed
background-color:rgba(0,0,0,0.6); //to your preference
width:100%; height:100%;
top:0; left:0; bottom:0; right:0; // not always necessary
text-align:center; vertical-align:middle;
//you'll have to tweak it to get it centered, but it shouldn't be too hard
}

A strategy I often use.
Make a containing div
Create a child div that will be fixed behind that is transparent
Create a sibling div that will have the loading animation as the background
The reasoning is that you can have the transparent lightbox with its own transparency and the loading gif will be at full opacity
css
.modal-overlay {
background: #000000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#ajaxLoadingBox {
position: fixed;
top: 50%;
left: 50%;
height: 60px;
width: 60px;
background: #333 url('../img/loader.gif') no-repeat;
border-radius: 10px;
}
html
<!-- ajax loading dialog -->
<div>
<div class="modal-overlay"></div>
<div id="ajaxLoadingBox"></div>
</div>

Related

How to position text halfway through bottom responsively [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am currently working with parallax effects on a website where i need a paragraph to go through halfway on the bottom of the page. But since the paragraph has to be responsive in font-size i am not quite sure if i need to convert the text into image or stick with pure text to solve this issue? It seems like a solution with images can enable me to do some tricks with pure JavaScript.
In general i feel it is very hard to control the text on the page especially for parallax where the text can appear in different positions. Maybe there are some good tools for this purpose?
https://jsfiddle.net/pt88w26u/2/
HTML:
<section id="first">
<div>
<p>This is a test</p>
</div>
</section>
<section id="second">
</section>
CSS:
html,
body {
height: 100%;
color: #fff;
font-size: 16px;
margin: 0;
padding: 0;
}
section {
min-height: 100%;
}
#first {
background-color: #000;
}
#second {
background-color: #ddd;
}
section > div {
top: 86%;
font-size: 5em;
position: absolute;
transform: translate(-50%, 0%);
left: 50%;
}
You can do this only with css.
To do this, set the position and transform of the div to
bottom:0px;
transform:translate(-50%,50%);
and remove the default margin on the p tag.
https://jsfiddle.net/pt88w26u/5/

Extracting background image from home page [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 7 years ago.
Improve this question
I'm trying to extract the background image from this website. I can't find it in chrome dev tools when I right-click and view source. Not really sure where they are hiding the background image link. Any help would be appreciated.
Here is the homepage: http://aframe.com/
Images in devtools are found under the Resources tabs in Frames > Images (there might be a folder or two between that). Just be mindful that you're not illegally downloading copywrited images to use for your own project...
http://aframe.com/themes/newTheme/images/default.jpg?v=1
heres the link my friend, it was in a div with the class "backstretch"
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 1139px; width: 1903px; z-index: -999999; position: fixed;"><img src="/themes/newTheme/images/default.jpg?v=1" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1903px; height: 1263.06960784314px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -62.0348039215687px;"></div>
<img src="/themes/newTheme/images/default.jpg?v=1" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1903px; height: 1263.06960784314px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -62.0348039215687px;">
source: http://aframe.com/

CSS Footer background image won't show up [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
The background image of the footer won't show up.
Note: No errors in Chrome developer tools.
CSS Code:
.mini1 {
width: 100%;
height: 6.7%;
margin-top: -2%;
background-image: url('../images/footer1.jpg');
z-index: 10;
}
HTML Code:
<footer class="mini1">
....
</footer>
EDIT:
The parent of footer in this case is the tag.
EDIT:
For people thinking about the path:
EDIT: There is content inside the tag.
Try following code:
.mini1 {
width: 100%;
height: 6.7%;
margin-top: -2%;
background-image: url('../images/footer1.jpg');
z-index: 10;
background-size: 100% 100%;
}
Please see to it that, image path is correct. Go in console to check for any errors.
Well here is a working JSfiddle: http://jsfiddle.net/knftvt6v/4/
I believe it is your file path that's causing the error, can you make a JS fiddle
.mini1 {
width: 100%;
height: 2em;
margin-top: -2%;
background: url('http://www.serenitybaumer.com/main_images/footer.jpg');
z-index: 10;
color:white;
text-align:center;
}
I added this block of code in which worked fine

Change min-height of a div to browser height [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a div for my content on my page with an id of "wrapper" (see curtainandblinddevotion.co.uk). There is also a nav bar at the top and a footer at the bottom.
I need the wrapper to be the height of the browser window, minus the height of the nav and footer. How do I do this with javascript?
The point of the script is so that large browser windows dont have the footer floating away from the bottom, and the wrapper's background should strech right to the footer.
Thanks in advance for any help,
Connor
Here I am going to give you a very basic example of how to keep the footer always bottom even in a big screens. Read Here to Know more about How it Works
HTML
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">My Content</div>
<div id="footer">This my footer</div>
</div>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:green;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
}
DEMO
I just created this JSFiddle: http://jsfiddle.net/5ur87/
If your goal is to make the footer always at the bottom of the page even on large screens, you can use position:fixed; with bottom:0px;, like below:
footer{
position: fixed;
bottom: 0px;
width: 100%;
height: 20px;
background-color: green;
color: white;
}

(CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Look at this image:
I want to use a div to create a dialogbox that is near to the bottom right corner of the browser. The footer is fixed & its height is 50px & the dialogbox Div will lie right on top of the footer & to the bottom right corner of the browser as showed in the picture.
Note: the requirement is that that Div must be in that desired position relatively to the browser size. It means that when users shrink to extend the browser the div will be moved as well, but no matter how the div was moved, it should be always in that desired position as showed in the picture.
So, how can I do that in CSS?
If you want the element to stick regardless of scroll, use position: fixed:
{
position: fixed;
bottom: 50px;
right: 0;
}
You should use the css
#dialog{
position:fixed;
bottom:50px;
right:0px;
}
Hope this helps man,
<div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
</div>
Eg:
Fiddle
<body>
<div stlye="position:relative; z-index:1;">
<div class="header"> header of website </div>
<div clss="main"></div>
<div clss="footer"> footer of website </div>
</div>
<div style="position:absolude;z-index:10000;right:0px;bottom:20px;"> dialog </div>
</body>
position:fixed positions elements relative to the browser's viewport:
.CLASS_OF_DIALOG_DIV {
position: fixed;
right: 0;
bottom: 50px;
}
However, if your footer does not also have position:fixed, then it won't have the right position relative to your dialog.
And if your footer does have position:fixed, then it will obscure any page content that reaches (or goes past) the bottom of the browser viewport.
Working demo: jsFiddle
You HTML could be
<div class="div1">
<div class="div2">
</div>
</div>
In CSS
.div1{
width: 100%;
height: 500px;
border: 1px solid black;
position: relative
}
.div2{
position: absolute;
right: 0;
bottom: 0;
width: 25%;
height: 100px;
border: 1px solid black;
}

Categories