How to move an entire div element up x pixels? - javascript

I want to reposition an entire div and its contents up about 10-15 pixels.
How can I do this?
Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.

$('#div_id').css({marginTop: '-=15px'});
This will alter the css for the element with the id "div_id"
To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):
$('#div_id').animate({...}, function () {
$('#div_id').css({marginTop: '-=15px'});
});
And of course you could animate the change in margin like so:
$('#div_id').animate({marginTop: '-=15px'});
Here are the docs for .css() in jQuery: http://api.jquery.com/css/
And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/

$('div').css({
position: 'relative',
top: '-15px'
});

In css add this to the element:
margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */
you can use either one to position accordingly.

you can also do this
margin-top:-30px;
min-height:40px;
this "help" to stop the div yanking everything up a bit.

Related

How to handle "scroll" and "zoom" event for fixed-positioned element?

So I have a supposedly fixed-positioned element that I want to fix on the viewport at the top-right corner.
This is the HTML:
<div class = "header">
<p>This is a heading with an absolute position</p>
</div>
and the CSS:
.header {
position: absolute;
right:10px;
top: 10px;
}
It works as desired until you scroll to right with a laptop or zoom in with a mobile device. Either these two events will shift the element to left depending on the extent the events are.
I came up with 2 solutions:
1: make a div container at the top with the width as 100% and make the element relative to the container. This failed as when I scroll the window the container does not extend accordingly
2: add an event listener listening to two events scroll and touchend.
$(window).scroll(function(){
$(".header").css({"right": "10px", "top": "10px"});
});
$(document.body).bind("touchend", function(){
$(".header").css({"right": "10px", "top": "10px"});
});
I wanted to update the element at every selected event and make it always the same position relative to the viewport but this method failed too. Seems like the css will only position the element according to the original viewport
Is there a simple yet efficient solution for this issue?
If you are trying to anchor something to the viewport, use a fixed position:
position: fixed;

Sliding from side with jquery (without Jquery UI)

I want to make specialist_pagecontent to appear (slide) from the left, like blindleftin from here but I just can't make it work with this. Actually, the plan is, instead of hide() ideal would be blindLeftOut('fast');hide(), and instead of show() I need show();blindLeftOut('slow'), but as I said, I just can't make blindLeftOut and blindLeftIn work for me.
I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Working Fiddle
Here is a working JSFiddle for you
Give the elements you want to animate in and out a viweport. A layer through which you look to see the elements within. Then set this viewport's overflow property to hidden and give it a specific width/height.
This way you can animate the elements within the viewport so they appear to slide in/out.
Here are the changes I'd make to your JS:
//notice the use of the "active" class to save state
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
$('.specialist').click(function() {
//stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly
$('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500);
$('.selected-specialist').removeClass('selected-specialist');
$(this).addClass('selected-specialist');
$('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
});
And here are my suggested edits to the CSS:
.specialist_pagecontent {
position:absolute;
top:0;
left:-100%;
}
#specialist_lists {
float:left;
border: 1px solid #000000;
position:relative;
width:200px;
height:200px;
overflow:hidden;
}
Here is a demo: http://jsfiddle.net/Jwkw6/1/
This absolutely positions the elements that are to be animated, which is very useful since it removes the elements from the regular flow of the document (meaning it won't trigger whole page redraws when it animates). This also creates the viewport I mentioned, creating a window into which we look to see the animations.

Filmstrip Style Image Gallery

I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.

jquery reset the css value of an animation?

I have a created a snippet of code that basically animates an h2 onto an image on hover and then off the right on hover off, so i've initially set the h2 to be left: -200px off the page on load, then on hover to animate to left: 10px inside the .image and then on hover off to animate to left: 500px to zoom off. Now when I hover the image again the h2 is being animated in from the right, how can I reset the h2 to be -200px as soon as the hover off has happened or can you suggest a better way for me to achieve this effect?
My attempt can be found here http://jsfiddle.net/kyllle/GPve7/
Thanks
Look at the animate function from jquery, it has a callback property, just set the CSS after that:
Updated fiddle
Just reset the position after the second animation is finished using the callback argument in animate() like here http://jsfiddle.net/geko/GPve7/9/

jQuery toggle changes element's width? I don't want it to

I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?

Categories

Resources