How to snap elements to grid by jquery or javascript - javascript

There are some elements that have class='snap'
I want to find these elements in the body. Then snap and resize elements to fit grids by Jquery.
When?
The document is ready.
The window is resized.
Note:
Size of grid cells are 10px
Contents of elements can be different.
Element can move down maximum in 1 cell size. (Up is not allowed).
Because of responsive elements, It's not true to snap the element by specifying width and height.
See on JsFiddle
Any ideas or help would be greatly appreciated.
JsFiddle updated: Removed width of .content in CSS, It can be not specified.

What you could do, and this is just an idea that is perfectible, is getting the offset of the .snap div and remove all margins. Then you snap to the next (right and bellow) lines :
var Content = {
snapElement: function(element){
offset = element.offset();
element.css('left', (Math.ceil(offset.left/10)*10)+'px');
element.css('top', (Math.ceil(offset.top/10)*10)+'px');
element.css('margin', '0');
},
snapElements: function(){
var elements = $("body").find(".snap");
elements.each(function(){
Content.snapElement($(this));
});
}
}
You will also have to make your .snap divs relative :
.snap {position:relative;}
The demo
You can also keep the margins but you will have to subtract them to the left and top.
Edit : A more sophisticated demo that handle width

Related

1 pixel offset at certain window widths

I get a really interesting glitch in both Safari and Firefox with the following JSFiddle:
http://jsfiddle.net/68gcy2gp/
You have to click on the red box to toggle the blue overlay.
I have two left floated relative positioned li elements with a width of 32% plus 1% right margin. I then put a div element positioned absolute with top/left 0 over the li element. The width of this div will be set to the same width the 32% li has (via jQuery).
On certain screen widths I get then a 1px glitch (too long or too short). Like this screenshot shows it:
How can I prevent this glitch?
Okay, as an official answer:
jQuery .width() or .innerWidth() is rounding the width of subpixel to the next integer value either with floor or ceil, depending on the value. To avoid that you can use some raw javascript:
$('.person').each(function() {
var front = $(this).find('.front');
var back = $(this).find('.back');
var link = $('');
link.on('click', function() {
var width = $(front)[0].getBoundingClientRect().width;
back.innerWidth(width);
back.toggle();
});
$(this).wrap(link);
back.hide();
});
The following function is for checking pixel errors by resizing the window with active overlay:
$(window).resize(function() {
$('li').each(function() {
var back = $(this).find('.back');
var width = $(this)[0].getBoundingClientRect().width;
back.width(width);
});
});
If you use .innerWidth() instead of getBoundingClientRect() you will see the error you have stated.

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.

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
}

CSS dynamic position of tooltip on hover with jQuery

I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.
I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.
The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen
If the <a> floats right, or at the end of the line, or is at the bottom of the screen, I want the tooltip to change position so it remains visible
Thank you.
Update demo link
here's the complete result: http://jsfiddle.net/Qkwm8/3/
You can use the document width to check how wide the html document is and adjust the left position accordingly. Say:
//set the left position
var left = $(this).offset().left + 10;
if(left + 200 > $(document).width()){
left = $(document).width() - 200;
}
I used 200 here because you are setting your tooltip to 200px wide. Something similar can be done with height.
There is also a window width but I always get confused about the difference so you should check which one gives you better results.
An example of the bottom of the page is:
//set the height, top position
var height = $(this).height();
var top = $(this).offset().top;
if(top + 200 > $(window).height()){
top = $(window).height() - 200 - height;
}
Again, using 200 since you are setting your tooltip to 200px height.
$('a.show-tooltips').mouseover(function() {
if(($(this).parent()).css('float')) =="right") add the proper class to left
else -> the proper class the right
....
}

Categories

Resources