keep div centered to viewport - javascript

I have a form within a container, when the user resizes the window I need to the form to move into the center of the container, and when he goes full screen it should return to the original position.
The problem is the form starts aligned to the right edge of the container. See the screenshot below. As you can see I need a smooth form transition so that it moves along the y when the viewport is resized.
How can i accomplish this solution with either javascript or css?
https://jsfiddle.net/ns5xxnxs/6/
<div id = "slider">
<div class = "container">
<div id = "form" class="col-sm-3 col-sm-offset-8 col-md-3">
</div>
</div>
</div>

Edward Hi there.
It sound like you are just after a transition to work here when you resize the window. And not centering the form div. because in your fiddle you seem to have that working for how you want it.
So to get the transition when resized...
You need to have the transition go from one size to another different size.
To do this lets use the col-xx-xx classes to have the transition go from one to the other.
I added in the css a class of transition-with.
Have a look at the code and for how the container > row > div are used and now where your slider id is.
Here is the working Fiddle, just move the inner frame on the left to resize.
(Note)... I use all in the transition: all 2s ease-out; rather than using width, because all will animate the div on both sides. If I just used width it will only expand from one side. Try both to see what I mean here.
Hope this gets you started.
CSS
#form{
height:250px;
background-color:red;
}
#slider{
background-color:grey;
}
.transition-width {
transition: all 2s ease-out;
webkit-transition: all 2s ease-out;
}
HTML
<div class="container">
<h3>Transition happens when window resized.</h3>
<div class="row" id="slider">
<div id="form" class="col-md-3 col-md-offset-8 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 transition-width">
</div>
</div>
</div> <!--end container-->

Try this out - https://jsfiddle.net/ns5xxnxs/8/
Bootstrap css was forcing it towards right.
I have changed below thinks to make sure it flows in main container. Changes are below. Hope this helps.
#form
{
height:250px;
background-color:red;
margin-left:0px!important;
width:100%!important;
}

Related

Display three divs by order absolute than fixed than relative

I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!
Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.
You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>

Fixed text visible only inside one div

There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.

Fixed Image On Scroll Shifting Position

JSFiddle: https://jsfiddle.net/DTcHh/19451/
I am building a website using Bootstrap 3. On scroll I have an image that sticks to the page by changing position to fixed. This works however it always shifts out of place once it turns fixed. I am aware this has something to do with the margins (and I have played with pixels and this seems to practically solve the problem, the margin-left needs to be a % for the responsive website). Here's the code:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});
Try this
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.screen-phone{
max-width:300px;
margin-top:25px;
//margin-left:25%;
z-index:999;
float:right;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
// var stickyPhone = ($#)
$(window).scroll(function () {
if ($(this).scrollTop()>500){
$('.screen-phone').css('position','fixed').css('right','0');
}else{$('.screen-phone').css('position','relative');
};
});
});
I Removed the margin-left and added a float right. Then on the JS i changed the position to left:0. It seams to work.
I made several changes that made it work:
Move the class name to the div element instead of the img element
Make the CSS changes only when necessary by using a boolean variable
The 500 pixel test was too long for the size of the text. When invoked, the change in size due to the image being fixed would shrink below 500 forcing another change, and so on.
See the updated jsfiddle: https://jsfiddle.net/DTcHh/19475/
Alright, I figured this out. What needs to be done is you put a separate class on the containing DIV. You give it left:(whatever your percent value is here). You take margin-left OFF the containing image. If using Bootstrap like me, you'll have to get around margin issues you can create two classes like I did to remove the margin of the row and col-sm-7. In my case I did:
.screen-phone{
max-width:300px;
margin-top:25px;
/*Removed margin-left:25%*/
z-index:999;
}
.sticker{
left:25%
}
.zero-row{
margin:0;
}
.no-margin{
width:0;
}
HTML:
<div class="row zero-row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7 no-margin sticker">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
Updated Fidde: https://jsfiddle.net/1chkghhq/1/

vertically positioning content after div transform

I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.
This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.

Categories

Resources