We Keep Coding

center div regardless of changing browser zoom [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 last month.
Improve this question
I have a modal that I resized and looks like this at zoom 80% of my browser:
My problem is when I increase or decrease my browser zoom, my modal does not adjust automatically with my browser zoom and it becomes like this :
Here is my CSS code :
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
}
Is there anyway to automatically center my interface whether I increase or decrease my browser zoom?

Try using the margin auto to automatically center:
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
margin: auto;
}
If the first method doesn't work for you, you can combine it with position absolute and all borders to 0 as follows:
position: absolute; /* Position the element absolutely */
.resizeModal {
width: 99vw;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Hope this helps!

Fade in when scrolling certain amount [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.

Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)
HTML
<div class="top"><div class="title">Fade Away</div></div>
CSS
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
JS
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/
I hope that helps you get started!

To get the scroll position from top, you can use the document.pageYOffset property.
To fade something in, you have to use a setInterval, you can see it here:
How to do fade-in and fade-out with JavaScript and CSS

How to display lightbox background while ajax loading [closed]

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>

Run the JS loader only at the first website visit

I'm using a very simple loading Javascript on my page that says something like:
$(window).load(function() { $("#spinner").fadeOut("250"); })
Then in my CSS
#spinner {
display: none;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100001;
background: white;
}
#spinner:after {
position: fixed;
content: "Loading, it will take a few seconds, please wait";
color: black;
top: 50%;
margin-left: -242px;
}
Now I want it to load just the first time someone visit that page instead of everytime (it looks very annoying).
Any help will be really appreciated.
Federico

To do what you want, you'll have to store information between page loads using cookies, localstorage, or some database or something.
As mentioned in my comments above however, you might consider rethinking the original design / working on performance if you feel it needs a spinner attached to page load in the first place.

(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;
}