I have a not so complicated <div> structure, which breaks event handlers in IE < 11 (other major browsers like Chrome and Firefox are working).
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller"></div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea"></div>
</div>
</div>
These are the registered event handlers:
$(function () {
var stopPropagation = function (e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
$('#controller').on('mousedown', function (e) {
console.log('controller mousedown');
});
$('#controls').on('mousewheel', function (e) {
console.log('controls mousewheel');
stopPropagation(e);
return false;
});
$('#thumbnailer').on('click', function (e) {
console.log('thumbnailer clicked');
});
$('#viewArea').on('click', function (e) {
console.log('viewarea click');
stopPropagation(e);
return false;
});
$('#viewArea').on('mousedown', function (e) {
console.log('viewarea mousedown');
stopPropagation(e);
return false;
});
$('#slider').on('change', function (e) {
console.log('slider change');
stopPropagation(e);
return false;
});
});
The main problem seems to be CSS positioning and sizing:
#layer {
position: absolute;
top: -175.813008130081px;
left: -578.615px;
width: 1421px;
height: 875px;
}
#layer1, #layer1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#thumbnailer {
background-color: rgba(150, 150, 150, 0.7);
border: 1px solid rgb(150, 150, 150);
position: absolute;
bottom: 15px;
right: 10px;
width: 200px;
height: 123px;
}
#thumbnailer img {
width: 100%;
height: 100%;
}
#viewArea {
position: absolute;
top: 25px;
left: 81px;
border: 1px solid #f00;
width: 56%;
height: 56%;
}
#controller {
width: 100%;
height: 100%;
}
#slider {
position: absolute;
bottom: 10px;
left: 200px;
}
In IE < 11, any click or mousedown on viewArea remains unhandled; instead, an event on thumbnailer is fired. Similarily, the mousewheel event on controls and the mousedown on controller don't get handled. The mousewheel event get's fired when the cursor is over the slider element, though.
This strange behaviour seems to be rooted in the size of the two images. However, my application needs to display bigger images in a relative small container (hence overflow: hidden set).
I created a fiddle for that.
The problem seems to be that IE < 11 doesn't trigger events on empty <div>. Adding a transparent <img> to the div solves the problem:
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
</div>
</div>
Related
I want to display a border around an element, when it is hovered. Like this image:
The issue is that I don't want add to add border or outline on the element itself because I'm allowing user to change styles and it'll affect the added outline as well.
Here is what I've tried to counter this:
Created overlay div on top of the content using position: absolute
Added a div inside it to which is also set to absolute
Added onmouseover and onmouseout listener on overlay div to get the width, height, offsetLeft and offsetTop of the element
Now the issue is that because the overlay is on top, the events are not firing on elements underneath (as I want the nested element's info as well). I've also tried setting z-index but it doesn't seem to be working as well.
So, how to achieve this?
PS: The screenshot is taken from the visual builder of Webflow but I'm not sure how they are achieving this.
Here is the code:
var outlineContainer = document.querySelector('#content-container');
outlineContainer.onmouseover = outlineContainer.onmouseout = handler;
function handler(event) {
var hoverOutline = document.querySelector('.hover-outline');
if (event.type == 'mouseover') {
console.log(event.target.tagName);
var clientRects = event.target.getBoundingClientRect();
hoverOutline.style.width = `${clientRects.width}px`;
hoverOutline.style.height = `${clientRects.height}px`;
hoverOutline.style.transform = `translate(${event.target.offsetLeft}px,${event.target.offsetTop}px)`;
}
if (event.type == 'mouseout') {
hoverOutline.style.width = 0;
hoverOutline.style.height = 0;
hoverOutline.style.left = 0;
hoverOutline.style.top = 0;
}
}
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>
I may have misunderstood what is required, but could you just change the border color on hover? (And remove the JS).
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
#content-container:hover {
border: 2px solid red;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>
I saw this cool scrolling effect online...
Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out?
How can I create this effect on the web?
Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/
I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.
Any ideas?
Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.
This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>
HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs
Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/
I am a jquery beginner and I need to get the height of an image by jquery.
This is the code I use:
$(document).ready(function ($) {
var height = $('#testor').height();
$('.slider-container').css("height", height);
});
This is the html code:
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div>
</div>
And the css:
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
It's working fine with Firefox and IE but not in Chrome and Safari.
I found out that it is a problem with webkitbrowser.
Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.
Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.
Best reagards
Mythos
$(document).ready(function ($) {
var myimage = document.getElementById("testor");
var w = myimage.width;
var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});
JSfiddle
Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img {
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function($) {
$('#testor').on("load", function() {
var height = $(this).height();
console.log(this.complete);
alert(height);
$('.slider-container').css("height", height);
console.log(".slider-container height:",
$('.slider-container').css("height"));
})
});
</script>
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image">
<img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1557 testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1556 testor" />
</div>
</div>
I currently have working system where you check the checkboxes it overlays the image however, the problem I am having is getting the image postioned inside the computer screen so it's not on the very edge. Cany Anyone help with this?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
Fiddle is here.
you need to set the position:absolute to your #station_A and #station_b instead of .overlay, because you use .overlay to toggle in jQuery, so it will loose the property.
here is a snippet:
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa
<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
</form>
</p>
The issue was due to a z-index problem I moved the image to the front and the button works fine now after this css change.
#VneckTshirtImage
{
left: 138px;
top: 457px;
position: absolute;
width: 118px;
height: 174px;
z-index:28;
}