Develop Reference

jquery dragable - relative containmet to current elemente size

I have a little problem with the containment, I want it to have a relative size to the current element. There is no fix amount of elemtens in the container and they can be scaled and rotated. The elements should be allowed to be placed partially outside the container, at least 10% of the element should be inside.
I tried to work with $(this) to get the diemensions of the selected element, but it seems that this relates to the window. For the right and left side, this should always work, but the left and the top side would only work, if all elements had the same dimension.
containment: [//"#container",
$("#container").offset().left*0.7,
$("#container").offset().top*0.2,
$("#container").width() + $("#container").offset().left*0.95,
$("#container").height() + $("#container").offset().top*0.9
],
Here is a little plunk:
example

I use $.each to individually set the containment field. I would imagine that you can recursively call on itself on draggable stop function.
http://plnkr.co/edit/McjFd5CQISlWpBA93BJC?p=preview
$('.ui-draggable').each(function(){
$elem = $(this);
var contain = [
$elem.offset().left,
$elem.offset().top,
$elem.width() + $elem.offset().left,
$elem.height() + $elem.offset().top
];
$elem.draggable({
containment:contain,
scroll:false
})
})

Using Jquery to toggle on and off items based distance to top

I am creating a site in which there are a number of fixed background images that you scroll past. Associated with each fixed background is an image slider (or text) that is hidden until the title is clicked on. These items are all fixed positioned.
I was able to make this work by using z-index to place items in order top to bottom/first to last and then have each disappear in turn using:
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < 225);
});
However, I am unable to use this because the length pixel distance down on the page changes based on the screen size. I am pretty new to Jquery but wanted to try to use .offset .top to have the item disappear not based on the pixel length to the top of the page but instead when an element appears on the screen. This is what I have so far but it isn't seeming to work.
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});
Here is the link to the site: http://s416809079.onlinehome.us (not final location - just developing)
Any thoughts?
Thanks!

I think this may work for you, read the comments on the code for a line by line explanation.
Working Example
$(window).scroll(function () { // When the user scrolls
$('div').each(function () { // check each div
if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
$(this).css('opacity', '1'); //change the opacity to 1
} else { // if not
$(this).css('opacity', '0'); // change the opacity to 0
}
});
});
I'm conditionally changing the opacity rather than using toggle because:
...jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Related documentation:
.offset()
.each()
.scroll()
.scrollTop()

javascript content slider displaying only first slide

I have a text slider on my home page, that should display slides individually according to which arrow is selected. Currently, only the first slide is showing and each slide thereafter is blank. What am I missing to make each individual slide show?
jsfiddle
jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.children().length;
var slide_width = $('#slider_mask').width();
var current_slide = 0;
slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);
// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {
current_slide++;
if(current_slide == total_slides){ current_slide = 0; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {
current_slide--;
if(current_slide < 0){ current_slide = total_slides-1; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
});

Check out this fiddle. I scaled it down to a minimum.
I started with the slider mask having the fixed width and set the other widths off of that.
Ludovico Grossi is correct about making the slide element float left. When they are "block" elements without the float, they stack. If they are changed to "inline" elements, they cannot have a fixed width. It worked to set them to "inline-block", but I don't know if that is supported in all browsers. Having them as "block" and float left works.
I also had to make some other changes. One of which was that the .animate() function does not cause a hidden element to be shown. It says this on the documenation page. Instead of hiding the slides by calling .hide(), they simply are out of view by having overflow set to hidden for the mask element.
I also put the text-align center on the slide elements, rather than the container element.
UPDATE:
I created another fiddle that starts with the code from adeneo's fiddle and includes the necessary changes. I put comments next to all the code and CSS that was added, removed, or changed. I had to make one change to the html. I added the <div id="home"> element that wraps everything. Without it the CSS selectors don't match anything.

Check your css:
slide: fixed width, float left.
container: width n_slide * slide_(outer)_width
slide mask: the same as a single slide width, overflow hidden.

JQuery-UI Draggable: dragged element size

I'm trying to do the following: I have an icon on a page and when i drag it the icon changes. It has to not go beyond the containment area.
What I've tried is something like this:
$("#myElement").draggalble({
containment: "#myContainer",
start: function(event, ui) {
$(this).attr("width", "20");
$(this).attr("height", "20");
$(this).attr("src", "newSource.png");
}
});
The icon successfully changes and I can drag it.
The only problem is the new icon size. It is a little smaller than the original.
When I drag it near the boundaries of the container it stops too early, I can't reach container boundaries. Specifically I can't reach the upper and right boundaries but I can still reach the bottom and the left. I think this is because the draggable plugin calculates the icon limits using the size of the old icon.
Does anyone have some advice on how can I drag the new icon and reach the container boundaries?
Thanks in advance :)

To get this to work, I had to create a container object based on the smaller picture's dimensions.
Using the following options - parameters are the container div, small picture width and small picture height respectively:
containment: shrinkSize("#container",20,20),
and the function does the following:
function shrinkSize(frameId, smallerWidth, smallerHeight) {
var frameOffset = $(frameId).offset(),
frameHeight = $(frameId).height()-smallerWidth,
frameWidth = $(frameId).width()-smallerHeight;
return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]);
}
Fiddle here.
P.S. in the fiddle, the image being dragged reverts to original size when dropped. If this is not the intended behavior, just remove the stop option (with function) from the draggable definition.

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?

You change the z-index using css:
div.class {
z-index: 60;
}

You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.

You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}