I want to make something like this:
So when I click on text "Hi, ..." it toggle(); dropdown menu and positions that menu like on image.
But when I resize browser I get something like this:
Here is jsfiddle
Put your code :
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
Inside $(".icons").click(function(){
It will recalculate the position each time you click to open the dropdown.
Edit :
You can also bind the position to the window.onresize event :
$(".icons").click(function(){
$("#user_menu").toggle();
calculatePosition();
});
$(window).resize(calculatePosition);
function calculatePosition() {
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
}
Thanks to the code above, your element will be repositionned when you resize the window (avoid the offset when the dropdown is opened)
Related
In a nutshell I'm creating a sticky button that shows after the scroll position pass a target element on the page. I'm trying to calculate the distance from the top of the page to the bottom of the target element. The script below seems to work find on load but if I resize the browser the numbers are not recalculated to get the correct distance. I know I should be using another event listener like "on resize" but I can't seem to get the logic right with my current code. Any help is welcome thanks!
Current Code
$(function(){
function ctaBundle(){
//target element
var cardsContainer = document.querySelector('.card-block');
// calculate the distance from top to the bottom of target element plus padding offset
var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;
//using to only trigger on mobile using mql
var mq = window.matchMedia('(max-width: 30em)');
//function with if statement to fade in if you pass target element
$(window).on('scroll', function() {
if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
$(".sticky-cta-double").fadeIn();
}else{
$(".sticky-cta-double").hide();
}
});
}
ctaBundle();
});
I think I figured it out. By removing the on scroll event in the function and adding both event listeners after the function it seems to work.
$(function(){
function ctaBundle(){
var cardsContainer = document.querySelector('.card-block');
var bundleHeader = document.querySelector('.bundle-header');
var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;
var mq = window.matchMedia('(max-width: 30em)');
if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
$(".sticky-cta-double").fadeIn();
}else{
$(".sticky-cta-double").hide();
}
}
ctaBundle();
window.addEventListener('resize', ctaBundle, false);
window.addEventListener('scroll', ctaBundle, false);
});
If anyone has a better answer/logic please let me know but this seems to be working as intended now.
I am trying to make a tooltip which basically shows a table (in my example below I used a large amount of text).
However I've wanted to change the position of the tooltip when you hover on the target element that is nearly at the corner of the screen.
Here is the Fiddle
$("strong").on("mouseover", function(){
var $this = $(this),
strongText = $this.text();
$tooltipContainer.show();
$tooltipContainer.append('<span>'+ strongText + '</span>');
}).on("mousemove", function(mousePos){...
You can change your mousemove code a little to update top position if overlap is there like below. Check demo - Fiddle
on("mousemove", function(mousePos){
var overlap = mousePos.pageY + posSrollY + $tooltipContainer.height() - $(window).height() - $(window).scrollTop();
$tooltipContainer.css({
left: mousePos.pageX,
top: mousePos.pageY + posSrollY - ( overlap > 0 && overlap )
});
})
Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
I was using the stellar.js in my project.
There is a question - under the "realtime resize" requirement( do not reload page ).
when I using the resize function to calculate the new position LEFT in horizontal scrolling below:
$(window).resize(function(){
var newPos = element.position().left*100; //Get NEW Position ...
element.css("left", newPos); //It's not working ...
});
the elements with "data-stellar-ratio" will not be overwrite.
How do i do to slove this problem ?
Thanks for your help.
Under the requirement below
-> When resizing browser then recalculate the element position in real-time ( NO Reload page )
-> So, I will recalculate position and overwrite new position to element.
-> But, the element which use data-stellar-ratio attribute can not be overwrite new position.(example in comment)
here is my problem. thank you for your help again.
Your question is very unclear. But, if you wish to change the data-stellar-ratio attribute, you would do it like this.
element.attr('data-stellar-ratio', 2);
element must be a jQuery object.
To you refer
_repositionElements: function() in stellar.js
if (this.options.horizontalScrolling) {
var bSize = this.options.refWidth,bResize = $(window).width(),bRatio = this.options.formula(bResize, bSize);
newPositionLeft = (scrollLeft + particle.horizontalOffset + this.viewportOffsetLeft + particle.startingPositionLeft - particle.startingOffsetLeft + particle.parentOffsetLeft) * -(particle.stellarRatio + fixedRatioOffset - 1) + particle.startingPositionLeft;
newPositionLeft *= bRatio; //all element reposition in here
newOffsetLeft = newPositionLeft - particle.startingPositionLeft + particle.startingOffsetLeft;
}
bSize = resizing browser before
bResize = resizing browser after
bRatio = resize ratio
newPositionLfet = all element position left
newPositionTop = the same to newPositionLeft
How can I determine whether mouse is always on the bottom of the viewport? Let us assume that by bottom we mean the bottom 100 pixels of a given page (on a long scrolling page).
this is an example, check the arrow
http://discover.store.sony.com/tablet/#design/weight-distribution
Easy!
Calculate how much of that "bottom" area is showing in the current window with window.screen.height and document.height.
Then use onmousemove event to calculate if the mouse is stepping over that area.
Create a blank div with the dimensions that you want, use CSS to position:absolute; it on the bottom and z-index it above the other elements, then create a onHover to detect if the mouse is there
EDIT
This might work as a solution to avoid using CSS method above (untested)
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var yMouse = e.pageY;
if(yMouse > (wHeight - 100)) {
// Do something
}
});
});
I think i solved myself based on Pastor Bones code:
you have to calculate the window scrolltop
var scrollT = $(window).scrollTop() + wHeight;
so:
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var scrollT = $(window).scrollTop() + wHeight;
var yMouse = e.pageY;
if(yMouse > (scrollT - 100)) {
// Do something
}
});
});