Hey guys i am new to Jquery and i was trying integrating the scrollr.js plugin in my website and came across the a difficulty , i have the following HTML :
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);" class="block"></div>
and the following CSS :
.block {
height: 200px;
width: 200px;
position: relative;
}
Fiddle here.
now with the above CSS , the animations don;t work , scrollr.js does't work , but when i apply the following CSS :
.block {
height: 200px;
width: 200px;
position: fixed;
top:20px;
}
The animations and everything works fine .
fiddle here.
i don't always want the position on my element to be fixed . how do i get the animations to work, without taking out the element from the normal flow of the document ??
I saw this demo on scrollr.js .
But still can't get why my example does't work. , If somebody could explain why my example is not working . it would be of great help .
Thanks .
Alexander.
Your first animation does work. You probably don't see it because it starts animating as soon as you start scrolling and when you scroll to the image, animation is already done. Try making your screen height bigger, or remove some text at the beginning.
If you want animation to start when the item actually appears on the screen, take a look at documentation.
Try to change data-0 to data-bottom-top and data-500 to data-center.
Related
EDIT: Whoops I forgot to have the console open to clear the cache when working on my actual project. Previous solutions and the ones you suggested work just fine. Thanks guys
So I'm trying to have something slide out while something else inline stays stationary. However, the sliding pushes other elements below downwards.
Here is the basic HTML:
<div id="title-container">
<h1 class="inline-header">Example.</h1>
<h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>
I tried other solutions I found through searching, but they don't seem to work. For ex, giving the outside container a fixed height with overflow hidden, will prevent the slide from pushing outside elements down, but pushes the left (static) text upwards as the right side goes down. Here is a JSFiddle showing what happens in my orig code.
https://jsfiddle.net/9hj6y79k/11/
Essentially I just want the right side to slide out without moving anything else.
I would like the position to stay as relative (rather than switching it all to absolute positioning), but if switching to absolute is the best way to do it I would not be opposed. Could anybody help out? Thanks!
You will need to add overflow:hidden; in css
https://jsfiddle.net/9hj6y79k/12/
.inline-header {
display: inline-block;overflow:hidden;
}
#title-container {
position: relative;
left: 40%;
}
Change your css class to this:
.inline-header {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/9hj6y79k/13/
This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!
We only have 2 images of a bottle (front and back), but would like to create some kind of spinning effect. I was trying to think of some way of doing this with jquery or just CSS - maybe with blurring. Couldn't think of a good way.
They want to press a button to see the other side of the bottle (spinning to get there).
Any ideas on how I could do this?
Have a look at the CSS Coke can example. That might help you get some quick results or at least serve as a base for new ideas. (English here, also it shows a little bit easier what's going on).
The only JS you'd need for this is to do the actual "scroll".
You could, for example, do that with the jQuery transit library http://ricostacruz.com/jquery.transit/
$('button').on('click', function(){
$('.bottle').transition({
perspective: '100px',
rotateY: '180deg'
});
});
Animate the width an margin left of the first image (front side) from width: 300px; margin-left: 0px to width: 0px; margin-left: 150px. Once the animation is complete, animate the second image from width: 0px; margin-left: 150px to width: 300px; margin-left: 0px.
You can use .animate() for this purpose: http://api.jquery.com/animate/
I hope this answered your question.
http://css3.bradshawenterprises.com/cfimg/
Check out demo 2 for the crossfade using a button. To get it to spin, add something like this:
transform:rotatey(180deg);
}
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:
http://i48.tinypic.com/a3o4sn.jpg
Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.
I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?
Your may be interested in this great resource: Sliding Boxes and captions
DEMO
I've recently used a jquery plugin that does something quite similar.
You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).
The plug-in is called Showcase
Its home page has more info and demo and tutorials
Finally, as an added demo, here's the site where I used it.
HTH
My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.
Markup:
<div id='container'>
<div id='slider'>Some Text</div>
</div>
Styles:
div#container {
height: 100px;
width: 100px;
overflow: hidden;
}
div#slider {
width: 100px;
height: 40px;
margin-top: 100px;
background: black;
}
And your script:
$('#container').hover (
function () {
$('#slider').css('margin-top', '60px'),
$('#slider').css('margin-top', '100px');
);
I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.