How to get image size with jquery (Chrome, Safari...) - javascript

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>

Related

Overlap multiple images

I want to create a image object composed of 3 images.
Final picture how it should look like
There is one text image and two "gear" images.
Why I want to split them you ask? I want to implement a scrolling function which spins the gears of the image when scrolling down the page.
Later on I want that image object to be always on top at the left corner. Thats why I choose relative position. Cause the gears always have to stay relative to the text.
I got the function already but somehow Im having problems stacking the images onto eachother.
Thats how it currently looks like.
Current state
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
/* To make white images become visible */
body { background: #161924 }
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
z-index: 2;
}
.leftGear {
position: relative;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
</div>
gearText.png (It has some blueish background so it doesn't overlap the wrong sections)
gear.png
You can play with absolute position and z-index here.
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.nav-logo {
position:relative;
}
.rightGear {
position: absolute;
top: 12px;
left: 3px;
z-index: -1;
}
.leftGear {
position: absolute;
bottom: 6px;
right: 5px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
</body>
</html>
You need to wrap the first image into another div then make all of your positions absolute. Here's an example
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: absolute;
z-index: 2;
}
.leftGear {
position: absolute;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
.main{
position: absolute;
}
<div class="nav-logo" style="display: block">
<div class="main">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="60">
</div>
<div class="rightGear" id="rightgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
</div>
Just move those gears with position properties, depending on what you need. Also the gears are under the main logo, so they should have lower z-index than the main logo.
Also change the height of each gear from 40 to 30.
body {
background: #161924
}
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
top: -52px;
left: 3px;
z-index: -2;
}
.leftGear {
position: relative;
top: -69px;
left: 27px;
z-index: -2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>

How to create image scrolling parallax effect with CSS?

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>

website works in some browsers but not all

why would my website work on my phone but not on my computer i tried all IE chrome Fire fox and i cant seem to download an image from div but when i use my phone it works fine (chome only). what is happening? here is my website https://torcdesign.com/mom can someone help me find a solution for it to work in all browsers
var download = document.getElementById("download"),
result = document.getElementById("result");
function renderContent() {
html2canvas(document.getElementById("content"), {
allowTaint: true
}).then(function(canvas) {
result.appendChild(canvas);
download.style.display = "inline"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("button").onclick = renderContent;
download.onclick = downloadImage
#content {
position: absolute;
width: 300px;
height: 200px;
border: 5px solid red;
overflow: hidden;
}
#img1 {
width: 300px;
height: 200px;
position: absolute;
z-index: 5;
}
#img2 {
position: absolute;
z-index: 6;
width: 150px;
height: 190px;
}
#img3 {
position: absolute;
z-index: 7;
width: 200px;
height: 100px;
}
#download {
display: none;
}
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<div id="content">
<img id="img1" src="https://torcdesign.com/shirts/brown.jpg">
<img id="img2" src="https://torcdesign.com/shirts/kiwi.jpg">
<img id="img3" src="https://torcdesign.com/shirts/lswhite.jpg">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<input id="button" type="button" value="convert div to image"><br>
<h3>result:</h3>
<div id="result"></div>
<a id="download" download="my_image.png" href="#">Download image</a>
I think you may have to update most of your browsers. According to this reference the download attribute of the a tag is supported by different versions of different browsers.

How can I create an overlay with slider?

I want to create something like that with slick slider:
This overlay with slider should appear after clicking on button. I think that i should use the slick slider's center mode. I know how to style colors, widths and so on, but i can't to implement the above-described structure.
There are multiple way to achieve this, following is a example I created using lightbox, you can get the idea from here, check the JSfiddle
CSS
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
visibility:hidden;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
visibility: hidden;
}
#pageOverLayCloseBtn {
position:absolute;
top:0;
right:0;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-slider {
-moz-user-select: none;
box-sizing: border-box;
display: block;
position: relative;
}
JQuery
$("#openLB").on("mousedown","",showLightBox);
function showLightBox() {
$("#pageOverLay-shadow").css("visibility", "visible");
$("#pageOverLay").css("visibility", "visible");
}
$("#pageOverLayCloseBtn").on("mousedown","",pageOverLayClose);
function pageOverLayClose() {
$("#pageOverLay-shadow").css("visibility", "hidden");
$("#pageOverLay").css("visibility", "hidden");
}
var disqus_shortname = 'slickcarousel';
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
HTML
<a id="openLB" href="#">Click Here to show lightbox</a>
<div id="pageOverLay-shadow"></div>
<div id="pageOverLay">
<div id="pageOverLayCloseBtn">X </div>
<h2>Images</h2>
<div class="slider fade">
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg" /> </div>
</div>
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg" /> </div>
</div>
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg" /> </div>
</div>
</div>
</div>

IE 9, 10: div structure and events

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>

Categories