This example seems like to change red color into blue from bottom. But, I want to change the red color into blue from top position by scrolling. Could you show me the good solution? It's okay if there are using javascript.
Here is another example what I want to. When you scroll down at this site, the gray line change into red.
<div id="scroll1"></div>
<div id="scroll2"></div>
Css part
#scroll1 {
background-color: red;
width: 50px;
height: 800px;
}
#scroll2 {
bacground-color: blue;
width: 50px;
height: 800px;
}
#scroll1{
background-color:blue;
width: 50px;
height:800px
}
#scroll2{
background-color:red;
width: 50px;
height:800px
}
According to approach used in example, this can be done by css. Just replace color.
When you say scroll do you mean a gradual fade into the other color? Or do you want the change to happen instantly?
Either way you are going to be faced with javascript as CSS is quite limited when it comes to feature-rich UI.
If you want to gradually change your colour you don't need two divs.
Create one div but with a gradient colour as the background-color.
The gradient is from red to blue, so when you scroll you don't need to change you CSS/JavaScript because the gradient will be different.
Look at my example on JSFiddle.
Check this out . I guess this is what you want.
html
<html>
<head></head>
<body>
<div id="contents"> </div>
<div id="container"></div>
</body>
</html>
style sheet
#container{
width:5px;
height:400px;
background-color: red;
Position:absolute;
border:1px #000 solid;
}
#contents{
width:5px;
height:400px;
position:fixed;
background-color: white;
border:1px #000 solid;
}
jquery script
$(document).ready(function(){
$("body").height(1000);
$(window).scroll(function() {
var newSize = $("#contents").height() * (1 - $(window).scrollTop() / ($(document).height() - $(window).height()));
$("#container").animate({height:newSize+"px"},500);
});
});
the demo is available here DEMO
Related
HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.
This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>