I have created this site and am trying to implement fixed text on the first slide (the one with the Nike basketball). Currently, I have the text 'The first of its kind' as part of the background image. Is it possible to separate it from the background and place the text in its own div?
I am stumped for ideas as the first slide is created by using three separate div - one for the top portion of the ball, the second for the bottom portion of the ball, and the third as the magnification of the ball. I thought of attaching the text within the first and second div, but it causes the text to scroll with the page as oppose to fixing it in place.
Site link: http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html
Yes, use position:fixed with left and top css attributes.
e.g.
#fixedText {
position:fixed;
left:100px;
top:50px;
}
EDIT:
To accommodate the overlapping of slides, you would have to apply a z-index to the slides and the text.
For instance you could give the page class a z-index of 2 (and position:relative or the z-index doesn't take effect), the #fixedText rule a z-index of 1, and the #first rule a z-index of 0. This would create the layering you are after:
#fixedText {
position: fixed;
left: 75px;
top: 120px;
font-size: 35pt;
color: white;
z-index: 1;
font-family: helvetica;
}
#first {
background: url(images/01.jpg) no-repeat fixed;
height: 1000px;
z-index: 0;
}
.page {
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
z-index: 1;
position: relative;
}
Related
I'm trying to understand why position absolute works the way it does in this scenario on elements.
I know that an element with position absolute is positioned relative to its first positioned (not static) ancestor element. In this case, it would be the body element.
If that's the case, why doesn't about.js overlap with the navigation element then (its static!)? Why is it overlapping particles.js (which is what I was trying to achieve).
Now if you put the div with id particles.js on top of the div with class about, then about overlaps with the portfolio section. Can someone explain this?
Here is my JS Fiddle:
https://jsfiddle.net/apasric4/ojnx2Lt7/1/
Here is a sample of my CSS:
* {
box-sizing: border-box;
}
img[alt="Profile Picture"] {
width: 40%;
}
/* why do this work idk */
img {
width: 200px;
height: 200px;
}
.about {
position: absolute;
border: 10px pink solid;
z-index: 1;
height: 100vh;
width: 100vw;
}
#particles-js {
background: rgb(29, 114, 243);
height: 100vh;
width: 100vw;
}
Thanks
To prevent the about section from overlapping the particles section, you want to remove the position: absolute rule from .about. This rule is taking .about out of the flow block positioned elements and making it overlap.
Also, the navigation element is not being overlapped by the .about section. The navigation elements color is transparent and making it appear this way. Try adding background-color: white rule to the navigation element.
I have the following structure:
<div id="hold">
<div id="hold-left">content</div>
<div id="hold-right">content</div>
</div>
hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.
This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.
How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?
Have you considered using a left margin on .hold-right?
.hold-left{
float:left;
width:40%;
}
.hold-right{
margin-left:45%;
}
Also, generally you should use classes, not IDs.
You can try with display: table, and table-cell.
The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.
Otherwise, you will need to use javascript to update both cells.
Use position property in css. Checkout this
position: relative; in the parent.
position: absolute; in the each child.
#hold {
position: relative;
}
#hold-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#hold-right {
position: absolute;
right: 0;
width: 100px;
height: 200px;
background: yellow;
}
#zoomLevelSelector {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
I have 4 'tabs' at the top of my page, which, when clicked, slide down to reveal a hidden div using the jQuery slide down function. The problem is that I don't want the 4 static 'tabs' to be affected by this. I want them to remain in the same position. I can't seem to find a away to stop them moving down when the hidden div is revealed.
Here is a JSFiddle of my code: https://jsfiddle.net/k6nzyrhm/
And here is the CSS for the static tabs:
.static {
width: 160px;
height: 120px;
float: left;
text-align: center;
margin: 250px 35px 0 35px;
}
Please does somebody know a way to stop the 4 static 'tabs' at the bottom from moving down when the hidden div is revealed. Thanks.
Use position: absolute on .content. Absolutely positioned elements won't push the rest of the content down.
.content {
height: 0px;
width: 880px;
margin-left: 20px;
overflow: hidden;
background-color: #e62d67;
/* properties added */
position: absolute;
top: 240px;
}
See Example.
I am trying to make a scrolling carousel, unlike other carousels this one doesn't jump from slide to slide but only allows the user to slowly move through them horizontally at a rate of 50px.
http://codepen.io/anon/pen/pyLfz
Problem is when clicking next, once the number 6 box comes into full view the script should not allow the user to go any further, same for when the number 1 box is in full view and prev link is clicked, the user should not be allowed to scroll back anymore.
Right now I can't figure out how to do that.
HTML:
<div class="carousel">
<div class="slide">
<article class="pod">1</article>
<article class="pod">2</article>
<article class="pod">3</article>
<article class="pod">4</article>
<article class="pod">5</article>
<article class="pod">6</article>
</div>
</div>
Prev
Next
CSS:
.carousel {
position: relative;
border: 1px solid red;
width: 250px;
height: 100px;
overflow: hidden;
}
.carousel .slide {
overflow: hidden;
position: absolute;
width: 600px;
}
.carousel .slide .pod {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: blue;
box-shadow: 0 0 18px white;
color: #fff;
float: left;
}
jQuery:
$('.next').on('click', function() {
$('.slide').animate({
left: '-=50'
});
});
$('.prev').on('click', function() {
$('.slide').animate({
left: '+=50'
});
});
Your .carousel class need to have the same width at your .pod because you have the .carousel acting as a viewport. Also, change 50px to 100px for your .animate().
Here is my version with the changes suggested:
http://codepen.io/anon/pen/hcewq
EDIT
Sorry. I put the 50px offsets back. I have boundary checks as before but the issue issue is the clicking versus the timing of the animation. So, you need to check if your slider is going past its boundaries and have an animation flag check to see if the previous animation is complete or it will not get the latest offsets.
Here is the update: http://codepen.io/anon/pen/KJBzy
You need to use some math to determine if you're at the end or not.
Here is your pen, forked: http://codepen.io/chrisrockwell/pen/dxqbp
The main part is in the if statement for your next action:
if (Math.abs(slideOffset.left) <= ($slide.width() - $('.carousel').width() - moveBy)) {
$slide.animate({
left: next
});
}
With this structure you are able to easily add .pod's because, in your CSS, you can give .slide a ridiculously large width (10000em, for example) and it will still work. You can also change the width of the .pod's without having to modify anything but the CSS. Finally, you can change the amount it moves by, should you ever need to, by changing just one variable.
To cover all scenarios, you would need to add in more checks, but this should get you started.
I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.