I have items, which I can drag and drop around. Now, after I dropped the Item, I want to check if my object is in the correct container.
What would be the best way to achieve this?
This here is my function for it:
$(function () {
$("#draggable").draggable();
$(".item").droppable({
drop: function (event, ui) {
var $this = $(this);
$this.append(ui.draggable);
var draggableWidth = $('#draggable').width();
var draggableHeight = $('#draggable').height();
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.animate({width: draggableWidth * 1.1, height: draggableHeight * 1.1});
ui.draggable.animate({width: draggableWidth, height: draggableHeight});
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
// this here is still hard-coded, but it should trigger on the element I'm holding (image)
console.log($('#draggable4').data('image'));
console.log($(this).data('target'));
}
});
});
If you take a look at this example: JSFiddle you can see, what I'm actually stuck with. You can move the yellow square in the boxes, but there is no feedback if it is the correct one.
To clarify it a bit more: Lets say I have 2 squares, a yellow and a red one. If the yellow square is dropped on the left box, it should display an error. Otherwise a tick-symbol should appear (not that kind of a problem).
Same goes for the red one. If the red one is dropped in the right box, it should throw an error... you get the point.
Update 1:
My HTML
<div class="item" data-target="1"></div>
<div class="item2" data-target="2"></div>
<div class="item3" data-target="3"></div>
<div class="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
<img src="folie1/img1.png" width="153" height="124" id="draggable" style="z-index: 200;" data-image="1"/>
<img src="folie1/img2.png" width="153" height="124" id="draggable2" style="z-index: 201;" data-image="2"/>
<img src="folie1/img3.png" width="153" height="124" id="draggable3" style="z-index: 202;" data-image="3"/>
<img src="folie1/img4.png" width="153" height="124" id="draggable4" style="z-index: 203;" data-image="4"/>
</div>
I want to check if the current object (lets say data-image="1") is dropped in the container data-target="1".
Update 2
This is my HTML now:
<div class="item" id="item" data-target="1"></div>
<div class="item" id="item2" data-target="2"></div>
<div class="item" id="item3" data-target="3"></div>
<div class="item" id="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
<img src="folie1/img1.png" width="153" height="124" id="draggable" class="draggable"
style="z-index: 200;" data-image="1"/>
<img src="folie1/img2.png" width="153" height="124" id="draggable2" class="draggable"
style="z-index: 201;" data-image="2"/>
<img src="folie1/img3.png" width="153" height="124" id="draggable3" class="draggable"
style="z-index: 202;" data-image="3"/>
<img src="folie1/img4.png" width="153" height="124" id="draggable4" class="draggable"
style="z-index: 203;" data-image="4"/>
</div>
... with the JS from Rajen Ranjith
$(function () {
var result = {};
$(".draggable").draggable({
start: function (e) {
result.drag = e.target.id.split("_")[1];
}
});
$(".item").droppable({
drop: function (event, ui) {
var $this = $(this);
result.drop = event.target.id.split("_")[1];
if (result.drag == result.drop)
alert("true");
else
alert("false");
$this.append(ui.draggable);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});
I can drag and drop my images, but it always alerts "true".
use id or attributes for both drag element and drop element
http://jsfiddle.net/rajen_ranjith/F3sD3/285/
$(function() {
var result = {};
$(".draggable").draggable({
start:function(e){
result.drag = e.target.id.split("_")[1];
}
});
$(".item").droppable({
drop: function(event, ui) {
var $this = $(this);
result.drop = event.target.id.split("_")[1];
if(result.drag == result.drop)
alert("true");
else
alert("false");
$this.append(ui.draggable);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});
I've solved this by using the data-attribute in the dropable div, as described here. You can check the data-value with jQuery like this. The data-attribute could than be checked against a data-attribute on the draggable div. If equal, it could be the correct one.
Related
I tried to make match two pairs with lines quiz. I have couple of images on left, and couple of images on right, and I need to connect it with lines when you click on pair of images. It should work for any combinantion, so if I click for example on image 1 on left and image 3 on right, they should be connected with line. Then if I click again on image 1 on right, and image 2 on left, previous line should be deleted, and the new one between those two images need to be made.
Html snippet:
function lineDistance(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};
function drawLine(a, b, line) {
var pointA = $(a ).offset();
var pointB = $(b).offset();
var pointAcenterX = $(a).width() / 2;
var pointAcenterY = $(a).height() / 2;
var pointBcenterX = $(b).width() / 2;
var pointBcenterY = $(b).height() / 2;
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
// Set Angle
$(line).css('transform', 'rotate(' + angle + 'deg)');
// Set Width
$(line).css('width', distance + 'px');
// Set Position
$(line).css('position', 'absolute');
if(pointB.left < pointA.left) {
$(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
} else {
$(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
}
}
new drawLine('.a', '.b', '.line');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div id="old" class="left_side one_half svg left">
<img class="a" src="assets/svg/Kerze.svg">
<img src="assets/svg/Telefon.svg">
<img src="assets/svg/Schreibmaschine.svg">
<img src="assets/svg/TV_old.svg">
<img src="assets/svg/Zeitstopper.svg">
<img src="assets/svg/Besen.svg">
<img src="assets/svg/Waschen.svg">
</div>
<div class="left_side one_half svg right">
<img src="assets/svg/Iwatch.svg">
<img src="assets/svg/Laptop.svg">
<img src="assets/svg/Staubsauger.svg">
<img src="assets/svg/Waschmaschine.svg">
<img src="assets/svg/TV_new.svg">
<img src="assets/svg/Gluehbirne.svg">
<img class="b" src="assets/svg/Iphone.svg">
<div class="line"></div>
</div>
</div>
I manage to make a line between two images (from class a to class b), and it is always calculated to be exactly on right angle, but I can not make it appear to work as I described above. Any ideas? Thanks.
var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
setLeft = true;
new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
setRight = true;
new drawLine('.a', '.b', '.line');
});
You can use a flag variables and when click on an image from the right, set the right flag variable to be true and do the same with the other.
Then inside your function drawLine just check if the two flags are true then draw the line between a and b and set the two flag variables to false.
function lineDistance(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};
function drawLine(a, b, line) {
if(setLeft && setRight){
setLeft = false;
setRight = false;
var pointA = $(a).offset();
var pointB = $(b).offset();
console.log(pointA);
console.log(pointB);
var pointAcenterX = $(a).width() / 2;
var pointAcenterY = $(a).height() / 2;
var pointBcenterX = $(b).width() / 2;
var pointBcenterY = $(b).height() / 2;
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
// Set Angle
$(line).css('transform', 'rotate(' + angle + 'deg)');
// Set Width
$(line).css('width', distance + 'px');
// Set Position
$(line).css('position', 'absolute');
if(pointB.left < pointA.left) {
$(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
} else {
$(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
}
}
}
//new drawLine('.a', '.b', '.line');
var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
setLeft = true;
new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
setRight = true;
new drawLine('.a', '.b', '.line');
});
.left{
float:left;
}
.right{
float:right;
}
.one_half{
width:40%;
}
img{
max-width:100%;
}
.line{
background: red;
height:1px;
}
.question{
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div id="old" class="left_side one_half svg left leftSide">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
</div>
<div class="left_side one_half svg right rightSide">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<div class="line"></div>
</div>
</div>
Outline
My intention is for the user to hover over an image, and an overlaying div with reduced opacity will appear over the top of it. The overlaying laying div has a height of 0px and when hovered it should increase the height value to exactly half of the image height.
The hover function is working but I think this line is wrong:
EDIT
After trying to log the curHeight variable (which was 'undefined') i think this line must be creating the issue:
var curHeight = landingImg.clientHeight;
HTML:
<div id="landing-images">
<div class="leftLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
<div class="rightLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
</div>
JS:
$(".landingImage").hover(function () {
console.log("hover works");
var landingImg = $(this);
var curHeight = landingImg.clientHeight;
$(this).closest('.imageCover').css("height", curHeight / 2);
}, function () {
$(this).closest('.imageCover').css("height", "0px");
});
You should use .siblings() instead and you must add width to div or it won't show, and use .height() and .width() to get the height and the width of the image
$(".landingImage").hover(function () {
var landingImg = $(this);
var curHeight = landingImg.height();
var curWidth = landingImg.width();
$(this).siblings('.imageCover').css("height", curHeight / 2);
$(this).siblings('.imageCover').css("width", curWidth);
}, function () {
$(this).siblings('.imageCover').css("height", "0px");
$(this).siblings('.imageCover').css("width", "0px");
});
.leftLanding,
.rightLanding {
position: relative;
}
.imageCover {
background: green;
position: absolute;
top: 0;
z-index: 111;
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
<div class="leftLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
</div>
<div class="rightLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
.clientHeight is a DOM property.
Change
var curHeight = landingImg.clientHeight;
To
var curHeight = landingImg.height();
Or
var curHeight = this.clientHeight;
I have been tring to set img at same position as another using jquery .position() and .css()
Here is the code:
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
$('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
Any thoughts?
You can overlap images this way. I set the position to fixed then set the left and top values for both other images. I'm not entirely sure why'd you want this; so, if it's not the desired result, just comment.
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
img {
width:100px;
height:100px;
border:1px solid black;
}
#img1, #img2, #img3 {
position:fixed;
}
#img1 {
left:50px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />
For the translation of an element to work in this way
position: relative;
left: 20px;
I dont exactly know what ur upto but i just corrected your code.
$(function(){
var position = $('#img1').position();
var x = $("#img2").position();
$("#pos").text("top: "+x.top+" "+"left: "+x.left);
$('#img3').css({ 'left': x.left + 'px', 'top': x.top + 'px' });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>
I'm working on a carousel using the cycle2 and cycle2-carousel plugins.
Found a solution here to display variable number of items depending on resized window width.
Problem is the carousel breaks due to another slideshow.
Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.
Demo
http://jsfiddle.net/yDRj4/1/
jQuery
function buildCarousel(visibleSlides) {
$('.caro').cycle({
fx: 'carousel',
speed: 600,
slides: 'img',
carouselVisible: visibleSlides,
carouselFluid: true
});
}
function buildSlideshow() {
$('.home-slideshow').cycle({
fx: 'fade',
slides: 'img',
timeout: 12000
});
}
function initCycle() {
var width = $(document).width();
var visibleSlides = 5;
if ( width < 400 ) {visibleSlides = 1}
else if(width < 700) {visibleSlides = 3}
else {visibleSlides = 5};
buildSlideshow();
buildCarousel(visibleSlides);
}
function reinit_cycle() {
var width = $(window).width();
var destroyCarousel = $('.caro').cycle('destroy');
if ( width < 400 ) {destroyCarousel;reinitCycle(1);}
else if ( width > 400 && width < 700 ) {destroyCarousel; reinitCycle(3);}
else {destroyCarousel;reinitCycle(5);}
}
function reinitCycle(visibleSlides) {
buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
clearTimeout(reinitTimer);
reinitTimer = setTimeout(reinit_cycle, 100);
});
$(document).ready(function(){
initCycle();
});
HTML
<div class='main' style="max-width: 950px;margin: auto;">
<div class="home-slideshow" style="margin-bottom: 150px;">
<img style="width: 100%" src="http://placehold.it/950x250" alt="">
<img style="width: 100%" src="http://placehold.it/950x250" alt="">
</div>
<div class="caro" >
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
</div>
</div>
For some reason, after the first slideshow transitions, when it recreates the Carousel, it is setting all of the images to have an opacity of 0.
Adding $('.caro img').css('opacity','1'); after initializing the carousel fixed it, but I'm sure there is a better solution for this, but you might have to dig into the source of the plugin.
http://jsfiddle.net/cZTxM/2/
You have the following line:
var destroyCarousel = $('.caro').cycle('destroy');
...which sets destroyCarousel to the result of that method call (a jQuery object), instead of creating a function you can call to perform the destruction.
I think this is what you meant to do:
function reinit_cycle() {
var width = $(window).width();
var destroyCarousel = function() { // create a function
$('.caro').cycle('destroy');
}
if (width < 400) {
destroyCarousel(); // call the function
reinitCycle(1);
} else if (width > 400 && width < 700) {
destroyCarousel();
reinitCycle(3);
} else {
destroyCarousel();
reinitCycle(5);
}
}
http://jsfiddle.net/mblase75/7eAk2/
IDEA
A page with a few div elements, some are visible, some must remain unseen until particular span element is clicked. One of those invisible elements is a container for several images with pop-up text, which should be placed randomly on page but with 20px margin from every edge of the page (page is set to overflow:hidden;).
HTML (including jQuery 1.8.3, jQuery UI 1.10.1 and jQuery UI touch-punch):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="pattern" style="background-image: url('m.png');"></div>
<div class="shadow pat-main-block">
<span class="mood-board">Show container</span>
</div>
<!-- Container div -->
<div id="mood-board">
<span class="hide-mood shadow">Hide container</span>
<div id="img1" class="drag mood-img">
<img id="mimg1" class="shadow" src="mood/brick-mood-1.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img2" class="drag mood-img">
<img id="mimg2" class="shadow" src="mood/brick-mood-4.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img3" class="drag mood-img">
<img id="mimg3" class="shadow" src="mood/brick-mood-3.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img4" class="drag mood-img">
<img id="mimg4" class="shadow" src="mood/brick-mood-2.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img5" class="drag mood-img">
<img id="mimg5" class="shadow" src="mood/brick-draw-4.png">
<span class="mood-name shadow">text</span>
</div>
</div>
<!-- End of the container div -->
</body>
This code is simplified — I removed the elements not affecting the case and left only 5 elements in container div (actually there are 13 elements). I want to make a kind of template so it could be used with different images and different amount of images (elements).
CSS:
html, body {
width:100vw;
height:100vh;
margin:0;
padding:0;
overflow:hidden;
}
.pattern {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
}
.pat-main-block {
position:fixed;
top:100px;
left: 100px;
background: #fff;
padding: 40px;
}
#mood-board {
position: absolute;
width:100%;
height:100%;
margin-top:-1000px;
left:0;
}
.mood-img {position:absolute;}
.mood-img:hover .mood-name {opacity:1;}
.mood-name {
position:absolute;
opacity:0;
background:#fff;
bottom:15px;
right:15px;
}
.hide-mood {
position:absolute;
top:40px;
left:40px;
padding:9px;
background:#1900DC;
color:#fff;
z-index:99;
cursor:pointer;
}
JS 1:
$(function(){
$(".mood-board").click(function(){
$("#mood-board").css("display", "block");
});
});
JS 2:
$(document).ready(function () {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ( $('#mimg1').outerHeight() );
$("#img1").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img2").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg2').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg2').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img2").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img3").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg3').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg3').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img3").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img4").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg4').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg4').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img4").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img5").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg5').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg5').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img5").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#mood-board").css({
"display": "none",
"margin-top": "0"
});
});
The method I'm trying to use is to calculate page's width and height, width and height of the image, then to calculate minimum and maximum range for random positioning (margin-top and margin-left or just top and left), so that the margin between the edge of the image and the edge of the page won't be less the 20 pixels.
Container with images is positioned off the screen, then after images are loaded and calculated, container is made invisible and put to fit the screen. In Firefox it works fine, alerts show the correct calculation results, but in Chrome and Safari image sizes are seen as 0 and the final calculations are wrong making some images go behind the page's edges.
The other thing I would like to do is to make a js-code universal, so there would be no need to mention every #img and #mimg elements.
http://thelocalgenius.com/patterns/brickwork-classics/
The same code works fine in JSfiddle: http://jsfiddle.net/n3q92/1/ Although it's almost the same code that doesn't work on my page, and those parts that couldn't be included to JSfiddle don't seem to be the reason — I've tried to disable them all and it didn't affect how the page works.
UPDATE: Fiddle works in Chrome, but not in Safari.
UPDATE 2: I've found one more interesting thing — in Firefox if the page loads without cache, script can't get image's width and height the same way as in Chrome and Safari. I don't understand why because the images supposed to be loaded since they are in a div with display:block; option just positioned 1000px above the screen edge. Anybody has any ideas?
The solution was to use $(window).load() instead of $(document).ready(). The interesting thing is that the same javascript code worked on JSfiddle in Chrome.