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';
}
});
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'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/
I need to add a Transparent image on top of all images on a page. The goal is if a user were to do a simple right click and save of an image, they would save the transparent image.
I do realize this is not a guaranteed method and that none exist to prevent image theft but simply a measure that a client wants added to prevent your average non tech person from saving images.
Using JavaScript I would like to find all images or all images within a certain Div.
Apply a new image overlay on top of these images that will have the same width and height of the image they are covering
I am not sure how to do this with JavaScript and was hoping someone would have a quick fix or example. I was unable to find anything so far on Google or SO. Appreciate any help
I have this JS which gets all images on a page so far...
// Get all images on a Page
function checkimages() {
var images = document.images;
for (var i=0; i<images.length; i++){
var img =images[i].src;
// Add new transparent image on top of this image
alert(img);
}
}
I would advise you to work with jQuery (or similar library) to keep things easier. I would even write a small jquery extension to make it easy to recycle the code, and apply it on any div (or other wrapper), wich child images you want to be overlayed.
My code would look something like this:
// jquery plugin to create overlays
// src is the url of the overlay image
// apply to any container that contains images to be overlayed
$.fn.overlayImages = function(src) {
// loop trough the images
$(this).find('img').each(function() {
// cache some variables
var $img = $(this);
var $parent = $img.parent();
// make the parent relative, if not yet absolute or fixed, for easy positioning
if ($parent.css('position') !== 'fixed' && $parent.css('position') !== 'absolute') {
$parent.css('position', 'relative');
}
// get the position of the image
var position = $img.position();
// clone the image
var $overlay = $img.clone();
// set the styling, based on the img, for exact positioning
$overlay.css({
top: position.top,
left: position.left,
position: 'absolute',
width: $img.width(),
height: $img.height()
});
// change the src attribute for the overlay
$overlay.attr('src', src);
// insert the overlay to the DOM
$overlay.insertAfter($img);
});
}
// when the DOM is loaded (not just ready, the images need to be there to copy their position and size)
$(window).load(function() {
// apply the overlay plugin to the wrapper of the images
$('#replace-images').overlayImages("http://www.riptideinnovations.com/images/watermark.png");
});
I added the step by step explanation inside the code as comments, but do feel free to ask if you want any further explanation.
I set up a small fiddle to demonstrate: http://jsfiddle.net/pP96f/6/
I don't know if this would help, but you could make your images all div's with backgrounds like this:
<div style="background-image: url('<your_image>');"></div>
Let's say I have a fixed sidebar that is XXpx tall (Refer to http://www.getskeleton.com/ if you want a visual of what I mean). The sidebar looks exactly the way I want, as long as the height of the browser is bigger than the sidebar. However, when the browser height shrinks below the height of the sidebar, the bottom contents get cut off.
Initially, the sidebar has position: fixed, but if the browser gets too small to contain the entire sidebar, I want to change it to position: aboslute. Essentially, I'd like to make it so on both page load and any time the user resizes finishes resizing the page it will check to make sure that the bottom content isn't being cut off, then assign the appropriate position attribute.
You could use a vertical media query for this, like so (let's say the sidebar is 700px tall.)
#sidebar {
position: absolute;
}
media screen and (min-height:700px) {
#sidebar { position: fixed; }
}
By declaring the absolute position first, you make sure that browsers that don't support media queries will get the absolutely positioned sidebar, which will still be functional.
Do something like this:
var $sidebar = $('#idOfSidebar')
,$w = $(window);
$w.resize(function () {
var pos = $w.height() < $sidebar.height()? 'absolute': 'fixed';
$sidebar.css({position: pos});
});
An option is to use overflow: auto for fixed blocks that can be potentially taller than browser`s client height. This can be used as default pure-CSS solution that can work in conjunction with JavaScript methods.
I am using media queries to make a responsive site. That isn't my problem but it is why I am here today with this question.
At a certain browser width, my horizontal navigation at the top of my page becomes too wide (becomes squished) and looks awkward in my layout. What I want to do is this: When a users browser reaches a certain min-width, I would like to (using js) hide the horizontal navigation (an unordered list of 6) that originally rendered on the users screen (if you are viewing wider than 650px) and replace it with a single 'button' that when clicked drops down the un-ordered list.
Now, the CSS isnt the problem. I just cant seem to figure out how to do the transition from the original horizontal nav that originally renders, to a more user friendly navigation.
A simple solution would be to have 2 sets of navigation mechanisms. Hide one and show the other.
You will need to add an eventlistener on the resize event for document, where you will check the innerWidth of the window and decide which navigation div to display.
document.addEventListener("resize", function () {
if (window.innerWidth < 650) {
document.getElementById("horizontal_nav").style.display = "block";
document.getElementById("dropdown_nav").style.display = "none";
} else {
document.getElementById("dropdown_nav").style.display = "none";
document.getElementById("horizontal_nav").style.display = "block";
}
});
Alternatively, you can keep your horizontal navigation but specify a max-width of 650px, once this has been reached, it will stop growing.
div#horizontal_nav {
width: 100%;
max-width: 650px;
}
Maybe these can help:
http://www.bram.us/2011/10/24/jquery-mobile-select-jquery-mobile-navigation-replacement-plugin/
https://github.com/joggink/jquerymobiledropdown
I know. It´s jQuery but I hope ppl get the general idea.