I'm developing a site that uses isotope to lay out a number of items in grid form.
I'm implementing a rollover system that displays popup boxes with additional info.
The issue is that on narrow screens the popups flow off the screen to the right, example here:
https://jsfiddle.net/wsgfuace/2/
Ideally when rolling over the right half of the screen I'd like the popups to anchor to the lower right hand corner instead of the lower left.
How is this possible please?
I found this code which looks like it could potentially work but am unable to implement it successfully:
$(function() {
$('.item-s').hover(function() {
var win=$(this).find('.big-s:visible');
if(win.length>0) {
var screenwidth=$('body').width();
var width=win.width();
var pos=win.position();
var rightpos=width+pos.left;
if(rightpos>screenwidth) {
var moveleft=rightpos-screenwidth;
win.css('margin-left','-'+moveleft+'px');
} else {
win.css('margin-left','0px');
}
}
});
});
This was solved using a combination of jquery to detect page width and hence cursor position:
$(".item-s").mouseover(function(e){
var pageWidth = $('body').width();
if ( e.pageX > pageWidth / 2 ){
$(this).toggleClass('special');
}
});
and by adding a 'special' div to the CSS to shift the popup as detailed here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Updated fiddle for ref here:
https://jsfiddle.net/wsgfuace/5/
Related
I would like to use some basic Javascript to automatically set the width of a div element (class name = "tb-megamenu-submenu") to be the full width of the screen and centered. I would also like this calculation to run any time the screen is resized.
Normally I would just use CSS for this (width: 100vw), but the parent element is position:relative and the submenu is position:absolute, so any attempt to set the width fails because the submenu cannot be centered on the screen with CSS alone.
I'm using a Drupal Module called "The Better Mega Menu." There is a working example of a websites that does this exact thing that I want (https://www.hollyhunt.com/), but I can't seem to replicate their success. Here's the code they are using on their site:
// Make submenu full browser width.
const submenuFullwidthCalc = function () {
// Get the Mega menu Level 1 sub menu.
$(".tb-megamenu-nav > .level-1 > .tb-megamenu-submenu").each(function () {
// reset to zero so it can be calculated again and again
$(this).css("left", 0);
const offsettarget = $("body").offset();
// The offset of this submenu.
const offsetthis = $(this)
.parent()
.offset();
// Calculate the offset.
$(this).css("left", offsettarget.left - offsetthis.left);
// Set the submenu full width.
$(this).css("width", $("body").width());
});
};
How can I get this kind of functionality working on my site? Oh, and I'm stuck using the old BootStrap 3 Theme, so any solutions may have to be compatible with older code standards. Thanks for any help you can give!!!
I have an image that I am using at the bottom of my clients page. It is an absolute positioned image on the bottom left of the screen, inside the footer div.
.footer__endrow > .chefBottom {
left: 0;
position: absolute;
bottom: 0;
}
This works and looks fine when on the desktop at a normal resolution. However, when the window is made smaller, it starts to collide with the social icons there and goes behind them.
The viewport it self is still well within range of a normal desktop website when viewing the second image so I can't just hide it when its at tablet or mobile size as the collision would have already hapend.
Is there a way with javascript or css to hide an image when it collides with another element? For example detect if the element touches another one and then hide it?
Just find your breakpoint of when images collide with social icons using chrome developer tool inspect element in responsive mode and then use media query to hide the element at the end of your css file like
#media screen and (max-width:480px){
.footer__endrow > .chefBottom{
display:none;
}
}
Note: Here I have used 480px as a breakpoint
If you want to make it with javascript way, then it is better to solve this way.
$(window).on("resize", function(){
var $imgDiv; // assign image div here
var $socialIconsDiv; // assign social icon div here
var $imgDivRightOffset = $($imgDiv).offset().left + $("$imgDiv").outerWidth(); //get image right position
var $socialIconDivLeftOffset = $($socialIconsDiv).offset().left // get social icons left position
if( $socialIconDivLeftOffset <= (imgDivRightOffset) ){
$($socialIconDivLeftOffset).hide();// Hide social icons here
}
});
Hi You can check the position of both the image and see if the position is overlapping if it is over lapping in the if condition you can hide it.
window.addEventListener('resize', function () {
var imageOne = document.getElementById('firstImage');
// check for the image which you want overlapping add the condition as per that.
if (imageTwo.offsetLeft <= imageOne.offsetLeft) {
//use this command to hide the image.
imageOne.style.visibility = 'visible';
}
});
I've been trying to figure out how this website made the following effect and I can't find the answer.
https://www.dezeynne.com/
It seems that while resizing the browser window, the main div resized also with it dynamically by changing the height.
I'm also bad in Math, so please help me to understand the idea behind this awesome effect.
It would be also nice to help me figure out how the parallax is working, I mean how can I change the position of the background in css/javascript while resizing the browser window.
$(document).ready(function() {
var $window = $(window);
var $welcomeElement = $(".welcome");
var defaultHeight = $welcomeElement
console.log($welcomeElement);
$window.resize(function() {
// I'm stuck here at math as you see
$welcomeElement.css("height", ($window.width() - $window.height()) -
$welcomeElement.innerHeight());
console.log("Resized!");
console.log($window.height());
});
});
Have you considered using viewport units?
Set the div to height:50vw;
#main {
background:#daa;
height:50vw;
color:#400;
font-size:10vw;
text-align:center;
line-height:50vw;
}
<div id="main">Hello</div
In Jquery I'm aware you can move the scrollbars' starting location. Is this possible with pure javascript? To clarify, when the user loads the page I simply want the horizontal scrollbar to start scrolled all the way to the right, instead of starting at the left. If there are cross-browser issues, I'm particularly concerned with this working in Chrome.
document.body.scrollLeft = ( divRef.scrollWidth - divRef.offsetWidth ) / 2 ;
NOTE:
This can give odd results with IE8 and earlier.
I've made an example with a div, you can easily adjust this to your body tag, or another div, please see the demo.
var a = document.getElementById('body');
console.log(a.clientWidth)
function moveWin(a) {
window.scrollTo(a.clientWidth,0);
}
moveWin(a)
DEMO
SIDENOTE:
To select the body, simply use
var a = document.getElementsByTagName('body')[0]
I have a particular page with a set of images contained in a white-space:nowrap div, so the page scrolls horizontally. There's a fixed (main) navigation menu on the left.
I have a second navigation set, underneath the images, which when you click on the various links uses scrollTo to scroll the browser to the relevant image. This second navigation menu is contained in a fixed div and made up of a series of links to the various anchors associated with the images.
I would like a way of attaching and removing an active class to these links (i.e. addClass() ) depending on where the browser window is (and what is in view).
I have found lots of vertical versions of this, but my JS knowledge isn't fantastic and I haven't been able to successfully convert these to be used horizontally.
Essentially what I would like is a horizontal version of this JSFiddle.
I have come across this plugin, but haven't managed to get this to work for me either:
here
Thank you!
this your fiddle horizontal:
http://jsfiddle.net/x3V6Y/
I made a little change on HTML, and here is the JS:
$(function(){
var sections = {},
_width = $(window).width(),
i = 0;
// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().left;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollLeft();
for(i in sections){
if(sections[i] >= pos && sections[i] <= pos + _width){
$('a').removeClass('active');
$('#nav_' + i).addClass('active');
}
}
});
});