I found plenty of examples of fixing an element's top relative to the window. How do I fix an element X pixels from the bottom of the window? Simply changing 'top' to 'bottom' does not work (for example,if the element's height is more than the window height)
From the top:
var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();
if ($(window).scrollTop() + pixels >= $elemPosition.top) {
$element.css({
'position': 'fixed',
'top': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Solved it! Solution I came up with:
if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
$element.css({
'position': 'fixed',
'top': ($windowH - $element.height() - pixels) + 'px',
'width': $eW + 'px',
'height': $eH + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Use the CSS bottom property instead of the top property.
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
According to your comments and demand :
for example,if the element's height is more than the window height
You wants something like this ?
JS
$element = $("#element");
function setPosition(){
var pixels = 10;
var $elementH = $element.height();
var $windowH = $(window).height();
if ($windowH > $elementH) {
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'bottom': '0px'
});
}
}
$(function(){
setPosition();
$(window).scroll(function(){
setPosition();
});
});
If you try to change the height of the element to 700px for instance, you'll see he gets relative position.
Related
There is a piece of code inside of a magento view.phtml file that was put there to control an out of stock functionality. It only displays on the page when the product is not saleable.
It works as intended, to a point. However on mobile devices such as an iPad or when the user resizes the viewport (even when inspecting for example) it causes a duplication of the div in question and eventually causes the browser to 'crash' the page.
The code is here:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.sharing-links').appendTo(jQuery('.current_configuration_bottom'));
jQuery('.configured-bundles-wrap').appendTo(jQuery('.current_configuration_bottom'));
function isElementOutViewport(el) {
el = document.getElementById(el);
var rect = el.getBoundingClientRect();
return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}
function setBuyBox() {
var width = jQuery(window).width();
var right_description = jQuery('.right_description');
var is_iPad = navigator.userAgent.match(/iPad/i) != null;
if (( width >= 998 || is_iPad )) {
right_description.appendTo('.product-sidebar');
right_description.addClass('stick-right');
right_description.css('top', '250px');
var rightContent = jQuery('.current_configuration');
var stick_right = jQuery('#header .container').offset().left
var stick_width = (22 / width) * jQuery('#header .container').outerWidth();
var rightCol_offset_top = right_description.offset().top - 205;
jQuery(window).scroll(function () {
var stop_offset_top = jQuery('#bottom').offset().top - right_description.outerHeight() - 250;
if (jQuery(window).scrollTop() > rightCol_offset_top && jQuery(window).scrollTop() < stop_offset_top) {
if (is_iPad) {
// console.log('case 1');
rightContent.css('top', '200px');
rightContent.css({
'position': 'fixed',
'width': '223px',
'max-width': '100%',
'right': 'auto',
'bottom': 'auto'
});
rightContent.removeClass("stick-right-bottom");
rightContent.removeClass("stick-right");
var footerOutView = isElementOutViewport('footer-container');
var headerOutView = isElementOutViewport('header');
if (!headerOutView) {
rightContent.css({
'position': 'static',
'top': '0',
'bottom': 'auto',
'right': 'auto'
});
}
if (!footerOutView) {
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
} else {
// console.log('case 2');
right_description.css('top', '200px');
right_description.addClass("stick-right");
right_description.removeClass("stick-right-bottom");
rightContent.css('top', '200px');
rightContent.addClass("stick-right");
rightContent.removeClass("stick-right-bottom");
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
if (is_iPad) {
rightContent.css('top', 'auto');
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
}
} else if (jQuery(window).scrollTop() > stop_offset_top) {
// console.log('case 3');
right_description.css('top', 'auto');
right_description.removeClass("stick-right");
right_description.addClass("stick-right-bottom");
if (is_iPad) {
// console.log('ipad 3');
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
//rightContent.css({'width':'auto', 'position': 'static'});
} else {
// console.log('case 4');
right_description.css('top', 'auto');
right_description.removeClass("stick-right");
right_description.removeClass("stick-right-bottom");
rightContent.css('top', '200px');
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
if (is_iPad) {
var headerOutView = isElementOutViewport('header');
//console.log(headerOutView);
if (!footerOutView || !headerOutView) {
rightContent.css({'position': 'static', 'top': 'auto', 'width': 'auto'});
}
}
}
});
} else {
// console.log('case 5');
//right_description.appendTo('.product_details');
//right_description.css('top', 'auto');
//right_description.removeClass('stick-right');
}
}
jQuery(window).resize(function () {
setBuyBox();
});
window.onorientationchange = function () {
setBuyBox();
};
setBuyBox();
});
</script>
I have tried a couple of things to get this to stop happening, changing right_description.appendTo('product-sidebar'); to .after however it is still happening.
Im not entirely sure this whole code is necessary to achieve what was originally needed.
Im brushing up on my js/jquery implementation and any pointers on how to clean this code up and fix the issue would be appreciated.
I am trying to draw shape in div element. The code below draws a shape in correct starting point if not transform scale. But if transform scale, the line is not in the correct position when drawing the shape. How to fix the code below if the div is transform scale in (0.7, 0.7)? Thank you in advance.
$(function() {
var $container = $('#container');
var $selection = $('<div>').addClass('selection-box');
$container.on('mousedown', function(e) {
var click_y = e.pageY,
click_x = e.pageX;
$selection.css({
'top': click_y,
'left': click_x,
'width': 0,
'height': 0
});
$selection.appendTo($container);
$container.on('mousemove', function(e) {
var move_x = e.pageX,
move_y = e.pageY,
width = Math.abs(move_x - click_x),
height = Math.abs(move_y - click_y),
new_x, new_y;
new_x = (move_x < click_x) ? (click_x - width) : click_x;
new_y = (move_y < click_y) ? (click_y - height) : click_y;
$selection.css({
'width': width,
'height': height,
'top': new_y,
'left': new_x
});
}).on('mouseup', function(e) {
$container.off('mousemove');
$selection.remove();
});
});
});
I have a problem with my jquery script for block element floating animation.
I want to get floating box only if window width is greater than 1024px.
Code below works fine, but when I open page on desktop resolution(greater than 1024) and resize to less width, scrolling fire the same functions for changing css like on bigger resolutions.
How can I turn off/remove this css changing when window width will be less than 1024px?
Code:
$(document).ready(function() {
function stickyOfferBox() {
var isMobile;
if ($(window).width() > 1024) {
isMobile = false;
var $sticky = $('.career-offer-box'),
stickyOffset = $('.career-offer').offset().top - 80,
stickyOffsetRight = ($(window).width() - ($sticky.offset().left + $sticky.outerWidth())),
stickyWidth = $sticky.width(),
stickyHeight,
stickyStopBreakpoint;
if (!isMobile) {
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= stickyOffset) {
$sticky.css({
'position': 'fixed',
'top': '80px',
'right': stickyOffsetRight,
'width': stickyWidth
});
stickyHeight = $sticky.height(); // We want only floating box height instead of static
stickyStopBreakpoint = $('#contact').offset().top - stickyHeight ;
} else {
$sticky.css({
'position': 'relative',
'top': 'auto',
'right': 'auto',
'width': 'auto'
});
}
if (scroll >= (stickyStopBreakpoint - 160)) {
$sticky.css({
'position': 'absolute',
'top': stickyStopBreakpoint - 80,
'right': $sticky,
'width': stickyWidth
});
}
});
}
} else {
isMobile = true;
return false;
}
}
stickyOfferBox();
$(window).resize(stickyOfferBox);
});
If I understand your code the right way, you simply have to unbind the scroll event from the window.
$(window).unbind('scroll');
you should create a construct like this:
if($(window).width() >= 1025){
$(window).scroll(function(){
/** your function code here **/
});
}else{
$(window).unbind('scroll');
}
http://jsfiddle.net/suenot/3b3XM/1/
// in FF and IE each() don't work offset()
// $(this).offset().top return empty string
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});
Help me please, i can't find the solution.
I am not sure if $(this).css('background-color'); is what you want, but after updating it shows the box. See output in fiddle
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background-color');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});
I have this HTML:
<div id="studyTestContent" class="studyTestItem">
<input type="text" class="dropInput" size="15">
<ul class="inputDrop" style="display:none;">
<li class="dropDownItem">Si</li>
<li class="dropDownItem">y</li>
<li class="dropDownItem">con</li>
<li class="dropDownItem">el</li>
</ul>
</div>
and I have this jQuery:
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
With this function I am attempting to show the <ul> when the input is clicked. Nothing happens when I click it. Any ideas why?
Edit: I just figured out what the problem was, I am inserting the html after the page loads so I need to do:
$('.dropInput').live('click', function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
Make sure you wait until the document is ready with
$(document).ready(function() {
// put all your jQuery goodness in here.
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
});
Since you are inserting the HTML into the document after the initial, you will need to use jQuery live() to bind the event to the new element.
$(this).next(":hidden").show();
Try:
$(document).ready(function(){
$('.dropInput').click(function() {
var offset = $(this).offset(),
height = $(this).height(),
width = $(this).width(),
top = offset.top + height + "px",
right = offset.left + width + "px";
$(this)
.next('.inputDrop')
.show()
.css({
'position': 'absolute',
'right': right,
'top': top
});
});
});