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 5 years ago.
Improve this question
I have two divs: divA and divB. I want to position divB below divA at all times using CSS/Sass. Even if divA moves around divB should be positioned below divA. The divs should appear at the same place as the page scrolls so they can't be positioned static. The two divs cannot have the same parent div as divB is part of another div defined in material library.
So the HTML structure is like this:
<divA></divA>
<md-tab-group> <!-- uneditable code by user below this -->
<divB></divB>
<divC></divC>
</md-tab-group>
CSS:
#divA {
width: 100%;
position: fixed;
z-index: 700;
transition: transform 0.2s ease-in-out;
}
#divB {
position: fixed;
width: 100%;
z-index: 600;
background-color: white;
transform: translateY(64px);
transition: transform 0.2s ease-in-out;
}
.navdown {
transform: translateY(-64px);
}
I append the class navdown to divA when the user scrolls down for some distance. I want the divB to be still placed below divA without adding any script to divB as I am unable to do so in a proper way in Angular 2.
Related
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
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
Im working with Lightbox2 plugin http://lokeshdhakar.com/projects/lightbox2/. I need:
always show nav arrows
arrows show on left and right side of browser, like float: left, right (not on image)
close button show on browser top right position
Please help me, how to do that options. Thank you
To always show the nav arrows, you will have to change their opacity to 1 (it is 0 by default).
Here:
.lb-nav a.lb-prev, .lb-nav a.lb-next {
opacity: 1;
}
Then to keep them on the side of the browser window you can change change the position property to fixed and then change the individual arrows accordingly, like this:
.lb-nav a.lb-next {
position: fixed;
right: 0;
top: 0;
}
.lb-nav a.lb-prev {
position: fixed;
left: 0;
top: 0;
}
and finally you can move the entire bottom block by messing around with the positioning like this:
.lb-dataContainer {
left: 50%;
position: absolute;
top: -45px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Keep in mind, these solutions are far from perfect. This is a quick and dirty way to move elements around.
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/
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 7 years ago.
Improve this question
I'm trying to create a circle using only css. I've done this using the below:
border-radius: 50%;
background: #f5f5f5;
transition: all 0s ease-in-out;
box-shadow: 0 0 3px gray;
I've created a fiddle: https://jsfiddle.net/rg991koa/11/
I'm basically trying to onClick add an image but my background-image isn't displaying within the circle and I think this is due to me using background colour on my element.
Change background-image to background
.myNewClass {
background: url(http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg) no-repeat;
background-size:100%;
}
https://jsfiddle.net/rg991koa/21/
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 8 years ago.
Improve this question
Hello I have been task to create an image animation that allows the images to move from left to right and then down.
when the images moves down it would have to be overflow hidden as it will go beyond a background image.
The images would be looping continuously, going from left to right and down again. There is a similar example online how to move/slide an image from left to right.
However, this only slides from left to right and then stop. there is also only one image in animation.
Why not just use css?
Here's a fiddle
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation: mymove 5s infinite;
}
/* Standard syntax */
#keyframes mymove{
0% {top: 0px; left: 0px;}
25% {top: 0px; left: 100px;}
50% {top: 0px; left: 0px;}
75% {top: 50px; left: 0px;}
100% {top: 100px; left: 0px;}
}
I would consider using CSS animations. Is it dynamic in any way? At the end of the keyframe you could simply use overflow: hidden.
Try using the jQuery function animate() as in this example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right
Simply, find the element you want to be moving by jQuery, call animate on him with the right parameter to 0, then after that call animate again with bottom 0 then place the element again on the beginning without animation and this whole loop infinitely.
I am not sure this will work, just a draft:
$(document).ready(function(){
var element = $("something");
while (true) {
element.animate({right:"0"});
element.animate({bottom:"0"});
element.css("right", "auto").css("bottom", "auto").css("left", "0").css("top", "0");
}
});