Based on this code:
HTML:
<div style="width:1000px;height:1000px;">
<div id="box1" class="box" style="left:20px;top:20px;">
My position-x is fixed but position-y is absolute.
</div>
<div id="box2" class="box" style="left:20px;top:120px;">
My position-x is absolute but position-y is fixed.
</div>
<div id="box3" class="box" style="left:20px;top:220px;">
Im positioned fixed on both axis.
</div>
</div>
CSS:
.box
{
width:400px;
height:80px;
background:gray;
position:fixed;
}
JS:
$(window).scroll(function(){
//box one
var $win = $(window);
$('#box1').css('top', 20 -$win.scrollTop());
$('#box2').css('left', 20 -$win.scrollLeft());
});
If I give the css directly in css not in the js, how can I still make it work the same way ?
Fiddle
Hate to say it but it's not possible in plain CSS2,3.
Related
I have seven boxes. First I want to scroll box1 normally. When box2 reaches the top of the viewport it should be fixed same as in the example. I have to animate (animations may be show/hide etc) some views when I scroll on box2 again and again (Maybe for two window height or X pixel height). After the completion of animations, I need to remove the fixed positioning and start scrolling the remaining boxes normally. Any help?
[ I may use the same fixed positioning for box4 or box5 again while scrolling ]
Example http://jsfiddle.net/z0yv9gox/
Here is by code
var winHit = $(window).height();
var winWid = $(window).width();
$('.box').css({'height':winHit+'px','width':winWid+'px'});
$(window).scroll(function(){
if ($(this).scrollTop() > winHit) {
$('.box2').addClass('fixed');
}
else{
$('.box2').removeClass('fixed');
}
});
.box{height:200px;}
.box1{background:#333}
.box2{background:#ccffff;}
.box3{background:#999}
.box4{background:#ffcccc}
.box5{background:#666}
.box6{background:#999}
.box7{background:#333}
.fixed{position:fixed; top:0; left:0; z-index:2; width:100%;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
Thanks in advance.
So if I am understanding you correctly I think you will want to put the box you want to fix inside of another div and relatively position that div and give it the height of how far you want your fixed box to travel (In my example I give it 300vh in css but if you want to add this height by javascript like in your above example you can). Then you will want to fix your box once the window gets to the top of your relatively positioned parent box. That way when you travel the required distance you can add another class the gives your fixed box an absolute position again this time placed on the bottom of your relatively positioned parent box. You will need 2 if statements for this and also you will need to calculate the height of your parent box and your fixed box. Then once the top of the window hits the top of your fixed box holder you add the fixed class and when the scroll position hits the fixed box holders height minus your fixed box's height you can add another class sticking it to the bottom of that div. If I am misunderstanding your question please let me know in the comments below.
Ok so I know that may have been kind of confusing so here it is in action along with a fiddle I worked up.
Fiddle Demo
$(window).on('scroll', function(){
var windowTop = $(window).scrollTop();
$('.fixed-box-holder').each(function(){
var boxTop = $(this).offset().top;
var boxHolderHeight = $(this).height();
var fixedBox = $(this).children('.fixed-box');
var boxHeight = fixedBox.height();
var boxStop = boxHolderHeight - boxHeight;
if (windowTop >= boxTop) {
fixedBox.addClass('fixed');
}else{
fixedBox.removeClass('fixed');
}
if(windowTop >= boxTop + boxStop){
fixedBox.addClass('scrolled');
}else{
fixedBox.removeClass('scrolled');
}
});
});
body{margin:0;}
.box{
height:100vh;
color:#fff;
}
.fixed-box-holder{
position:relative;
height:300vh;
}
.fixed-box{
position:absolute;
top:0;
left:0;
width:100%;
background:blue;
}
.fixed{
position:fixed;
z-index:1;
}
.scrolled{
position:absolute;
top:auto;
bottom:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="background:#333;">First Box</div>
<div class="fixed-box-holder">
<div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#444;">Second Box</div>
<div class="box" style="background:#555;">Third Box</div>
<div class="box" style="background:#666;">Fourth Box</div>
<div class="fixed-box-holder">
<div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#777;">Fifth Box</div>
<div class="box" style="background:#888;">Sixth Box</div>
<div class="box" style="background:#999;">Seventh Box</div>
PS on slower machines you may have some issues with smoothness as this will be a lot of calculations on the fly especially if you are going to be adding animations as well so just keep that in mind.
The code below focuses on second element using javascript however the focused element sticks to bottom of page. I want to have focused element in the center of page how to do that?
$(function(){
$("#two").focus();
});
body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fis">hello
</div>
<div id='two' tabindex='1'>mr
</div>
<div id='thr'>john
</div>
You can use JS to select the focused element and then scroll the window to it :
$('html, body').stop().animate({
scrollTop: $(element_focused).offset().top
}, 300);
With a little math you can calculate the center of the element focused and change the scrollTop value.
Add margin:0 auto; left/right margins to auto to center the element horizontally:
$(function(){
$("#two").focus().addClass('getCentered');
});
body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}
.getCentered{margin:0 auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fis">hello
</div>
<div id='two' tabindex='1'>mr
</div>
<div id='thr'>john
</div>
And if you want it always available in the center of the screen horizontally and vertically even with scroll, you can use fixed position with some calculations. check the snippet below center calculation with css:
$(function(){
$("#two").focus().addClass('getCentered');
});
body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}
.getCentered{position:fixed; left:50%; top:50%; margin:-25px 0 0 -30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fis">hello
</div>
<div id='two' tabindex='1'>mr
</div>
<div id='thr'>john
</div>
I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.
Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.
One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example
just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO
<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".
<div>
<div>
div1
</div>
<div>
div2
</div>
</div>
I am trying to create a slider but discovered that if a user were to use CTRL+F, the position and the <div> element's offset changed and so the slider no longer works the way is should.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">visible</div>
<div style="width:100px; height:100px; float:left;">hidden</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>
JavaScript (jQuery):
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
$("#slider").animate({right:"+=100px"});
});
$("#sliderbuttonprev").click(function(){
$("#slider").animate({right:"-=100px"});
});
});
Is there a way to stop CTRL+ F finding the hidden sections?
jsFiddle Demo
You cannot prevent browsers from finding hidden content, but you could potentially disable it for the slides.
For example, if you specify the content within CSS, the browser won't move the content. For example, see here > Is it possible to disable Ctrl + F of find in page?
<div class="word-foobar"></div>
.word-foobar:before {
content: "Foobar";
}
As nickf has suggested, you could easily write some JavaScript code to convert actual text to this method.
http://jsfiddle.net/TaZL2/2/
If you change your animation to marginLeft instead of the right property, the content doesn't seem to scroll when searching. (Chrome/Mac OSX)
However, a user would still see there was a match and be stumped as to where it could be.
$("#sliderbuttonnext").click(function () {
$("#slider").animate({
marginLeft: "-=100px"
});
});
$("#sliderbuttonprev").click(function () {
$("#slider").animate({
marginLeft: "+=100px"
});
});
i came up with a solution that uses a variable to track the position of the main wrapping div and hides ".hide()" the content div that's not visible. hidden content is not visible to ctrl f.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">
<div id="id1">visible</div>
</div>
<div style="width:100px; height:100px; float:left;">
<div id="id2">hidden</div>
</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
JQuery
<script>
var pos = 0;
function showfunct(x){
if(x==0)$("#id1").show();
if(x==100)$("#id2").show();
}
function hidefunct(x){
if(!(x==0))$("#id1").hide();
if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
pos+=100;
showfunct(pos);
$("#slider").animate({right:"+=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
$("#sliderbuttonprev").click(function(){
pos-=100;
showfunct(pos);
$("#slider").animate({right:"-=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
});
</script>
I have a large image, and a bunch of divs that I'm using as fake buttons on top of said image. Currently, I'm using absolute positioning to place the divs where I want them to be, but I've got a lot of divs, and finding the x/y coords by trial and error is time I don't want to take. Is there an easier way to position them, or am I stuck?
I'm using jQuery and Javascript in this project, so these can be used for solutions.
CSS:
#test0 {
position:absolute;
left:381px;
bottom:100px;
}
HTML:
<div id="image">
<div id="test0" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test Modal!
</div>
<div id="test1" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test the same Modal!
</div>
<img src="testImage.jpg" alt="testtest" />
</div>
HTML:
<div id="image">
<div id="container-of-fake-divs">
<div class="fake-div">FAKE DIV</div>
<div class="fake-div">FAKE DIV</div>
</div>
<img src="image.jpg" />
</div>
STYLE:
#image { position:relative; }
#container-of-fake-divs { position:absolute; top:0; left:0; }
.fake-div { display:block; }