Hello I have a design that is similar to this image
the red color is another div I want the window to auto scroll when hover over that little red part of the div so it go down till the whole div is shown so it should look like this
thanks in advance
You can't scroll the window using CSS only.
Use javascript and the scrollIntoView method.
Simple demo
document.querySelector('[data-scrollintoview]').addEventListener('mouseenter', function(e) {
e.target.scrollIntoView(true);
});
.black {
background-color: #000;
margin-bottom: 20px;
height: 150px;
}
.red {
background-color: #f00;
height: 150px;
}
<div class="black"></div>
<div data-scrollintoview class="red"></div>
Something like this:
$(document).ready(function() {
$('.scroll').on('mouseenter', function() {
$("body").animate({
scrollTop: $(this).offset().top
}, 500);
})
})
.red {
background-color: #f00;
}
.green {
background-color: #0f0;
}
.red,
.green {
margin-bottom: 10px;
height: 300px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red scroll"></div>
<div class="green scroll"></div>
Related
Series of div's which is inside the container. If button click train should move.
<script>
$('document').ready(function(){
$("button").click(function(){
$("#train").animate({left: "300px"}, 2000);
});
});
</script>
Your #train may need absolute positioning. Consider the following example.
$(function() {
$("button").click(function() {
$("#train").animate({
left: "300px"
}, 2000);
});
});
#train {
width: 100px;
height: 30px;
border: 1px solid #222;
border-radius: 6px;
background: #ccc;
position: absolute;
padding-top: 8px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<div id="train">Train</div>
So far I know you can make it statically fade in like this:
$("#element").fadeIn()
I want to make an image fade in in a sliding sideways sort of way like when a curtain at a show get pulled to the side and the background for the performance is revealed (not stretching, but fade-sliding).
Here is a sample example that I can provide. If you have doubt, leave a comment.
$(document).ready(function() {
$("#hide").click(function() {
$("#panel").hide("slide", {
direction: "left"
}, 1000);
});
$("#show").click(function() {
$("#panel").show("slide", {
direction: "left"
}, 1000);
});
});
#panel {
height: 100px;
padding: 50px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#hide {
padding: 20px;
width: 200px;
background: red;
color: white;
}
#show {
padding: 20px;
width: 200px;
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="hide">Click here to Hide the Pannel</div>
<div id="show">Click here to Show Pannel</div>
<div id="panel">This is your pannel</div>
I'm trying to set border radius for an element with animation like this:
$(element).hover(function(){
$(this).animate({borderRadius : 5});
}, function(){
$(this).animate({borderRadius : 0});
});
when I hover on element, the animation will work Properly. But after hovering out, it won't perform with any animation.
In Firefox the animation isn't working on mouseout. Use CSS instead of javascript here.
Ex: https://codepen.io/patdiola/pen/ZyaYdE
button {
background: blue;
border: 0;
color: white;
padding: 10px 20px;
transition: border-radius ease-in-out 500ms;
}
button:hover {
border-radius: 10px;
}
Another solution is to use jQuery-UI:
$(function() {
$('#target').hover(function(){
$(this).addClass('borderIn', 500);
}, function(){
$(this).removeClass('borderIn', 500);
});
});
#target {
width: 100px;
height: 100px;
background-color: lightblue;
}
.borderIn {
border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="target"></div>
I exaggerated your code a little for effect, but it appears to work for me.
$("div").hover(function(){
$(this).animate({borderRadius : 30});
}, function(){
$(this).animate({borderRadius : 0});
});
div{
height: 70px;
border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I have 3 div elements inside a div, and I want to use jquery to slide up 2 of the elements and slide down 1 of the element at once.
html
<div class='container'>
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
</div>
css
.div1, .div2, .div3 {
display: inline-block;
width: 100px;
height: 300px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: green;
}
jquery
$(document).ready(function() {
$('.container')
.children('.div1')
.slideUp(2000)
.end()
.children('.div2')
.animate({height:0},2000)
.end()
.children('.div3')
.slideUp(2000);
})
jsfiddle demo
I want the second(div2) at the middle, the blue colored one to slide to the bottom and the other divs to slide up, I know I can't use slideDown as it is already displayed, I think I have to use animate, but how do I make it to animate to the bottom ?
*The script has to be written in that way, as I am using it inside a setInterval function.
Can somebody help me with the fix to accomplish this ?
All suggestions are welcomed.
Thx in advance
If you position the divs relatively or absolutely you can animate the top and the height of the middle div simultaneously.
I have updated your fiddle.
JS:
$(document).ready(function() {
$('.container')
.children('.div1')
.slideUp(2000)
.end()
.children('.div2')
.animate({top: 300,height:0},2000)
.end()
.children('.div3')
.slideUp(2000);
});
CSS:
.div1, .div2, .div3 {
display: inline-block;
width: 100px;
height: 300px;
position: absolute;
}
.div1 {
background: red;
left: 0px;
}
.div2 {
background: blue;
left: 100px;
top: 0px;
}
.div3 {
background: green;
left: 200px;
}
Im trying to think how to do this with html elements.
There is nothing special about the colors, so I don't need to make them images.
Do note that the text is right aligned. Also, the color bar goes up to the text from the left.
So this could be implemented by having the text float right with background color white, and a div with the background color set right next to it (and then a clear).
Or instead of floats, I can do text align-right and get a similar effect.
Here is the kicker.
I'm using a javascript library (shouldn't matter which one) to create an animation. The animation is the bars shrink to the left, and end up like so:
The problem with the float or text-align methods are that too many values have to be changed to transition between the two states. The javascript animation effects tend to want to change a couple predefined values, like width or font-size. In order to transfer from picture 1 to picture 2 using the float or text-align methods, I must remove the floating/text-align then set the width of the bar color, but that doesn't work if I want to keep the javascript overhead minimal for such a simple task.
I've tried absolute positioning/widths, but I can't get anything to make the text right aligned AND have the bars meet at the same point on the left.
I'm hoping maybe I'm just blind of a simple solution, but as I see it, I need one element that has the text positioned to the right somehow, and an element that takes up as much room possible beside it for the color... AND the element that has the color should be able to take a width, while having the text follow beside it.
Thank you.
Here's my attempt. Note: to the horror of some anti-table zealots this does use tables. Floats just can't do "take up all available space" like tables can.
<html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("th").animate({ width: 0 }, 2000);
});
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>
I thought of a non-tables way of doing it that works pretty well, so here it is:
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>
This is tested and it works perfectly (no stupid tables and very simple CSS/jQuery):
<style type="text/css">
.crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; }
.crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; }
#red { background-color:red; }
#blue { background-color:blue; }
#green { background-color:green; }
#yellow { background-color:yellow; }
#pink { background-color:pink; }
#grey { background-color:grey; }
</style>
<script type="text/javascript">
$(function() {
$('.crazy_slider').hover(
function() {
var bar_width = $(this).width();
var $crazy_slider_text = $(this).children('.crazy_slider_text');
if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) {
var original_width = $crazy_slider_text.width();
$crazy_slider_text.data('original_width',original_width);
}
$crazy_slider_text.stop().animate({width:95+'%'},500);
},
function() {
var $crazy_slider_text = $(this).children('.crazy_slider_text');
var text_width = $crazy_slider_text.data('original_width');
$crazy_slider_text.stop().animate({width:text_width+"px"},500);
}
);
});
</script>
<div class="crazy_slider_text">FOO</div>
<div class="crazy_slider_text">BAR</div>
<div class="crazy_slider_text">BAZ</div>
<div class="crazy_slider_text">FOOBAR</div>
<div class="crazy_slider_text">FOOBARBAZ</div>
<div class="crazy_slider_text">BAZAGAIN</div>
Edit:
I was assuming you were tying to make some kind of navigation elements with these so I added the mouse interaction logic. In any case, it might be useful, haha?
Second Edit:
I've changed the code to be more efficient and more predictable... if anyone cares. ;)
Do the coloured bars need to be a particular width, or just fill the space between the words on the right and the origin on the left? Assuming that my assumption's correct:
<style>
#container {width: 50%;
margin: 0 auto;
}
span {width: 100%;
display: block;
text-align: right;
margin: 0.2em 0;
}
span p {text-align: right;
background-color: #fff;
color: #333;
display: inline-block;
padding: 0 0 0 0.4em;
line-height: 1.4em;
font-weight: bold;
}
span#foo {background-color: #f00;
}
span#bar {background-color: #0f0;
}
span#foobar {background-color: #00f;
}
</style>
<div id="container">
<span id="foo">
<p>foo</p>
</span>
<span id="bar">
<p>bar</p>
</span>
<span id="foobar">
<p>foobar</p>
</span>
</div>
Working demo: http://davidrhysthomas.co.uk/so/colouredfoobars.html