jQuery slice div into animatable segments - javascript

is it possible using jQuery and CSS to split a div in two, and then animate the two parts separately?
To better explain, see this diagram:
Any help would be much appreciated - thanks in advance.

You can fake it with a pair of container divs like this: jsFiddle example.
HTML
<div id="top"><div>Some text here</div></div>
<div id="bottom"><div>Some text here</div></div>​
CSS
#top,#bottom {
background: #333;
width:200px;
height:100px;
position:relative;
overflow:hidden;
}
#top div {
position:relative;
top: 90px;
color:#eee;
text-align:center;
}
#bottom div {
position:relative;
top: -10px;
color:#eee;
text-align:center;
}
jQuery
$('#bottom').delay(2000).animate({
bottom: '-200px'
},4000);
$('#top').delay(2000).animate({
top: '-200px'
},4000);
​

No, you can't show one div like that. But you could duplicate and restrict size to half on each copy, then animate both.

you could make 2 divs, and have each set with overflow:hidden;.
After that, place the text at same position left, but one slightly below it's div and one slightly above so that each text is 'cut' in half. (or this is one work-around to do it)

Related

How to make grid of divs ignore eachother

So I have a grid of divs that I am removing with jquery's remove function. When one div is removed, the rest move. Is there a way to keep the grid's shape, and have the divs stay in place upon removal? Thanks.
LINK - https://jsfiddle.net/n4y6sfg6/7/
.boards{
height:630px;
width:630px;
background-color:orange;
border-radius:5px;
left:50%;
margin-left:-315px;
position:relative;
}
.row{
width:100%;
height:157.5px;
}
.cards{
width:120px;
height:125px;
display:inline-block;
margin:16px;
border-radius: 5px;
background-color:grey;
vertical-align:top;
}
Don't remove them, instead set visibility: hidden;
https://jsfiddle.net/n4y6sfg6/14/
Don't remove div.You can add a class to the div that you want to hide.For example
<div class="cards remove-card"></div>
then style the class like
.remove-card{
visibility:hidden;
}
If you want to continue to use jQuery, you could use the opacity function.
$("#element").opacity(0);
This will leave the element exactly where it is, but invisible.

Preventing divs from clearing inside an animated container

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.
Here's what I mean: jsfiddle
How do I prevent them from clearing?
use max-width instead of width:
#container { max-width:500px; height:500px;border:2px dotted maroon; }
.red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}
here is the jsfiddle link
UPDATE:
to avoid clear try jsfiddle

Center an image inside div using formula

I am using a formula method to center the image inside the div.
Here is the link: http://fiddle.jshell.net/bPM73/10/
I don't know what is wrong in the formula, that image is not getting centered.
I mean I want both vertically and horizontally
Please help.
you can made it only with css3 box-align property… working with all browsers (with prefix hack)
http://fiddle.jshell.net/bPM73/28/
#i4 {
display: block;
width:300px;
height:160px;
top:0px;
left: 0px;
right: 0px;
bottom: 0px;
position:absolute;
margin: auto;
}
Here is a trick. You can copy it into your fiddle and see it will works.
I have edited the js and added position:relative to your wrapper div. check this out http://fiddle.jshell.net/bPM73/24/

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast

Dead Centered Div

How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?
Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck
You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.
CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.

Categories

Resources