Develop Reference

exclude element from onClick callback inside draggable.js function

I'm using Draggable.js and TweenMax on my website to display an image of a map that include absolute positionned clickable markers (.marker).
here is my html :
<div id="container_img">
<div class="zoom_map">
<a class="marker" href="http://www.aaa.com"></a>
<a class="marker" href="http://www.bbb.com"></a>
<img src=".../map.jpg">
</div>
</div>
when clicking on my map (.zoom_map), I want to remove the class "zoom_activate" of the #container_img div.
everything works perfectly fine.
container_img.removeClass("zoom_activate");
what I'm trying to do is to prevent the class "zoom activate" to be removed when clicking on the .marker link.
here is my Jquery code :
var container_img = $("#container_img");
var map_H = $(window).height() - 60;
map_W = map_H * 2250 / 1590;
$("#container_img").width(map_W).height(map_H);
$(".zoom_map").width(map_W * 2).height(map_H * 2);
Draggable.create("#container_img .zoom_map", {
type:"x,y",
bounds:{top:0, left:0, width:map_W, height:map_H},
edgeResistance:1,
minimumMovement:100,
onClick:function() {
TweenLite.set("#container_img .zoom_map", {clearProps:"transform"});
container_img.removeClass("zoom_activate");
},
});
is there a way to exclude my markers from the callback function ?
onClick:function() {
TweenLite.set("#container_img .zoom_map", {clearProps:"transform"});
container_img.removeClass("zoom_activate");
},
thanks !

jQuery zoom function not working on hover image

I am using this library: https://www.jacklmoore.com/zoom/
It adds a zoom function when hovering over an image. I did add the library in my theme and added this jQuery code to my js file:
$(document).ready(function(){
$('.head-image img').zoom();
});
This is the HTML where the image is located:
<div class="head-image">
<img src="<?php the_post_thumbnail_url('full'); ?>" class="img-fluid">
</div>
When I hover the image on the webpage nothing changes but if I look in the inspector I do see that the zoomImg class is added and the CSS is changing but I dont see the image zooming.
Here is the webpage URL: https://www.dev.ruitershopboxmeer.nl/paard/zadels-en-toebehoren/zadeldekjes/kingsland-zadeldekje-carin/
Does someone know why the image is not zooming?
Thanks for your time!

First fix the error in the beginning of the page (line 14 generated HTML)
<script>if(flycart_woo_discount_rules_strikeout_script_executed == undefined){jQuery( document ).ready( /* .... */
This needs to be moved at the end of the body to avoid issues
Next, make sure to include JQuery and Zoom correctly (from demo)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='path/to/jquery.zoom.js'></script>
The imported JQuery is 3.4.1 and I am not sure Zoom is still compatible with it as demo was using 1.10.2.

I have an alternate solution to your requirement here:
const img=document.querySelector('.image');
const pro=document.querySelector('.image img');
img.style.width=(pro.clientWidth)+'px';
var zoomSize = pro.clientHeight*6;
img.addEventListener('mousemove', printPosition);
img.addEventListener('mouseout', back);
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
function printPosition(e) {
var position = getPosition(e);
xpos=position.x * (100/pro.clientWidth);
ypos=position.y * (100/pro.clientHeight);
pro.style.transition="0s";
pro.style.transform='translate('+xpos*-5+'%, '+ypos*-5+'%)';
pro.style.height=zoomSize+"px";
console.log('X: ' + xpos + ' Y: ' + ypos);
}
function back(e) {
pro.style.transform='translate(0px, 0px)';
pro.style.height='100%';
pro.style.transition="1s";
}
https://codepen.io/thevectorator/pen/NWGeBPm

How to draw a line from one element to another element [duplicate]

This question already has an answer here:
How can I connect two HTML elements by drawing lines in a background canvas?
(1 answer)
Closed 5 years ago.
I'm creating a tree like structure. I have created the numbers in a circle using html badges. Now I want to draw lines from one element to another element. I have tried using an image which is like left diagonal and right diagonal. But it is not working.
This is my html for creating Badges:
<span id="0" class="cl w3-badge">0</span><br><br><br><br>
<span id="1" class="cl w3-badge">0</span>
<span id="2" class="cl w3-badge">0</span>
This is my javascript:
var data = [];
data.push(5);
data.push(6);
data.push(4);
$('.w3-badge').each(function(i, obj) {
document.getElementById(i).innerHTML = data[i];
});
This is image of left line
Can someone help me??
I'm trying to get my final tree to be like this:
Final tree

using svg is the best option for those kind of thing,
i wrote a function below that do exactly what you need.
you have tho to rewrite it to your needs.
use full page to see the result right.
function drawLine(div1, div2){
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
var div1Offset = div1[0].getBoundingClientRect();
var div2Offset = div2[0].getBoundingClientRect();
var pathNr = "";
pathNr = "M"+ (div1Offset.width + div1Offset.left)+ " " + ((div1Offset.top + div1Offset.height) / 2)
pathNr += "h" +( div2Offset.left)
pathNr += "v" +(div2Offset.top)
pathNr += "h" +( -div2Offset.left )
svgPath.setAttribute("d", pathNr);
svgPath.setAttribute("stroke", "red");
svgPath.setAttribute("stroke-width", "1");
svgPath.setAttribute("fill", "white");
svgPath.setAttribute("id", "test");
svg.appendChild(svgPath);
$("body").append(svg);
}
$(document).ready(function(){
drawLine($(".box_1"), $(".box_2"))
});
.box{
width:150px;
height:150px;
margin:30px;
background:black;
}
svg{
position:absolute;
left:0; top:0;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box box_1'></div>
<div class='box box_2'></div>

Pure JavaScript Image Grab-Zoom?

In the past I came across http://www.jacklmoore.com/zoom/ which was a great find and very simple to use for a variety of images. I am looking for a grab-zoom feature using pure-javascript rather than jQuery. Is there any Pure-Javascript solution for this? I've attempted this with no luck so far:
Javascript:
var imgSize = 1;
function zoomIn() {
imgSize += 0.1;
document.body.style.imgSize = imgSize + "em";
}
function zoomOut() {
imgSize -= 0.1;
document.body.style.imgSize = imgSize + "em";
}
HTML
<img src="picture.png" value="+" onClick="zoomIn()"/>
Thanks in advance for any helpful tips!

The general idea is to display the smaller sized image ("original") and when the mouse is hovering over the container, the background image of the container is revealed. The background image is large, and the CSS background is clipped by the container's size. Mouse events are tracked. You'll have to work out the measurement and math yourself.
<div id="imageview" style="position:relative;width:300px;height:200px;"
>
<img src="300x200.jpg" id="original" onmouseover="this.style.display='none';">
</div>
<script>
document.getElementById('imageview').onmouseover=function(e){
document.getElementById('original').style.display='none';
var x,y;
if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}
document.getElementById('imageview').orgx=x;
document.getElementById('imageview').orgy=y;
}
document.getElementById('imageview').onmousemove=function(e){
var x,y;
if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}
var orgx=document.getElementById('imageview').orgx;
var orgy=document.getElementById('imageview').orgy;
//now you have x, y, orgx, and org y, so you can do some math
// ...
var posx, posy;
document.getElementById('imageview').backgroundImage='url(600x400.jpg)';
document.getElementById('imageview').backgroundPosition=-1*posx+'px '+ -1*posy+'px';
}
</script>

Please give this image zooming library (written by me) a try: https://github.com/kingdido999/zooming
It's implemented in pure JavaScript with no extra dependency.

Optimizing jQuery dynamic adding of inset border effect

I'm not that experienced with jquery and javascript but I managed to get this code working for my Drupal website (I've included the beginning and end of the required Drupal jQuery calling code for reference, as the 'context' part makes it work with Ajax refreshing there so as a reference of sorts, feel free to ignore)
(function ($) {
Drupal.behaviors.borderfarba = {
attach: function (context, settings) {
var nmbr = 1; /// this will be a counter
var backcolor; /// here I store the generated random color
$(".movierow", context).each(function () {
/// I declare a class + a number from the counter
var clrclass = "clr" + nmbr;
/// I add this class to each .movierow class
/// which is inside a div containing divs with the other classes
$(this).addClass(clrclass);
/// storing the random color
backcolor = get_random_color();
/// pass the class and color value to function
addborder(clrclass, backcolor);
/// up the counter
nmbr++;
});
function addborder(clrclass, backcolor) {
/// before the inset border effect I also
/// apply the backcolor to a title and rating field
/// that appear over the image
$("." + clrclass + " .views-field-field-screenrate").css("background", backcolor);
$("." + clrclass + " .screentitle").css("background", backcolor);
/// apply the inset border effect
$("." + clrclass + " img").insetBorder({
borderColor: backcolor,
inset: 5
});
}
/// randomization functions
function rand(min, max) {
return parseInt(Math.random() * (max - min + 1), 10) + min;
}
function get_random_color() {
var h = rand(40, 130);
var s = rand(30, 75);
var l = rand(40, 60);
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}
/// add a nice slide down/up effect
/// on mouse in/out for the title
$(".movierow").hover(
function () { $(this).children(".screentitle").slideDown(); },
function () { $(this).children(".screentitle").slideUp(); }
);
}
};
})(jQuery);
The point is I want a new random color within a specified range (like in my case from reddish hues to green) applied to the jQuery inset border effect found here which is then applied to each image on my page (which are generated dynamically). PS. I think I found the random color generation code snippet somewhere around here, so thanks to that one person, don't want credit where it's not due.
Thus I used a loop which adds a new class to each image and then applies the inset border function to each class.
I'm wondering if there's any way of optimizing this code to be more efficient, as this is the only way I figured how to do it.
Cheers and thanks for any advice, hoping to improve my under par programming skills
UPDATE I have modified the code a bit (and added comments), as I needed the same random background color for 2 additional fields that appear over the image (title, rating)

Not an answer, but a question...
Why do you convert 'nmbr' to a string?
/// I declare a class + a number from the counter
var clrclass = "clr" + nmbr.toString();
/// I add this class to each .movierow class
/// which is inside a div containing divs with the other classes
$(this).addClass(clrclass);
Wouldn't this be simpler?...
$(this).addClass('clr'+nmbr);
Otherwise, your code looks very performant to me, but I'm far from an expert.