I am working with an icon which is clickable and once you clicked it. It will add another icon in the div i want to set the created icon to be draggable and from the inspect element it is draggable yet I can't drag it on my screen. Can someone check what seems to be the problem?
HTML:
<div id = icon>
<img class="icon" src="../../Pictures/bulb.png" width="50" height="50"/>
<img class="icon" src="../../Pictures/snow.png" width="50" height="50"/>
</div>
Jscript
$(function () {
$('.icon').click(function () { DrawImage($(this).attr('src')); });
});
function DrawImage(a) {
image = document.createElement('img');
image.setAttribute('class', 'drag');
image.setAttribute('src', a);
image.setAttribute('draggable', 'true');
image.setAttribute('style', 'position:relative; top:0px; left:0px;');
image.height = 50;
image.width = 50;
$('#icon').append(image);
}
added this on my html head
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script>
update:
fixed it by cloning the image element and assigning some attribute to it
var iconnew = $(iconimg).clone();
iconnew.attr({ "id": "clone"});
iconnew.css({'top':mouseY, 'left':mouseX})
iconnew.appendTo('#drag').draggable({ containment: '#bg' });
I don't think you are actually enabling the draggable functionality on your image element when you append it to the DOM. You could try changing your DrawImage function to this:
http://jsfiddle.net/qDZsb/
Related
I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">
I have a layout with a sequence of images overlapping.
I want to hide them one by them when clicking and after you hided all the pictures, show them in a reversed way until having them all – like a loop.
I have this simple piece of code where I manage to hide the images when clicking them, but can't figure how to show them again.
$('.overlap-img').on("click", function() {
$(this).hide();
})
Is there any way to accomplish that?
It's not mandatory to hide the image you click, it can work that you click anywhere and the images are closing, maybe that way you have more control of the sequence.
Thanks in advance!
1st: It will be good to add fake hide class to the hidden images
2nd: Need to get the number of the images and the number of hidden images
3rd: Loop through images using .each then you can use setTimeout to make a delay in show
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000 // duration to fade/show the image
$(document).on("click",'.overlap-img:not(.showing)' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var All_images_Count = $('.overlap-img').length, // get the all images length
Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count){ // if the all images == the hidden images then
$('.overlap-img.hide').each(function(index){ // loop through the hidden images .. (index) is the index of the image
var This_image = $(this); // $(this) cannot work in setTimeout so you need to define it outside
interval = setTimeout(function(){
This_image.removeClass('hide').addClass('showing').slideDown(); // remove the class from the image and show it
if($('.overlap-img.showing').length == All_images_Count){ // if all images finish showing
$('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
}
} , time_to_show * index); // time_to_show * index to make a delay between images on show
});
}
});
})
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
Also the .showing class I used it to prevent user to click till all images is shown
The OP Commented: I was simply wondering if it's possible, instead of making the images
appear automatically, to force the user to click in order to make them
appear. So the same process as to make them hide but making them
appear
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000, // duration to fade/show the image
All_images_Count = $('.overlap-img').length; // get the all images length
$(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count - 1){ // if the all images == the hidden images then
$('.overlap-img:eq(0)').addClass('showing'); // Add the class showing to the first image
}
});
});
$(document).on("click",'.overlap-img.showing' , function() {
var ThisImage = $(this), // this image
NextImage = ThisImage.next('.overlap-img.hide'); // the next image
NextImage.removeClass('hide').addClass('showing').slideDown();
var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
if(showing_images_Count == All_images_Count){ // if the all images == the showing images then
$('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
}
});
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
A piece I'm currently working on is calling for tooltips that display when you hover over part of an SVG element, disappear as normal on mouse-out but providing the mouse does not go over the tooltip itself. We are using Materialize CSS which does come with a tooltip component.
A segment of my code is below.
<svg width="400" height="400">
<rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"" data-html="true"/>
</svg>
As you can see, the reason I want this is so that the user can click the 'View more' link if they mouse onto the actual tooltip. Currently, however, the tooltips disappear even if you mouse onto them.
I know this can be done with other frameworks/libararies, but I have been unable to do this in Materialize CSS so far.
Does anyone know if this is possible as an extensive internet search has turned up nothing.
Materialize tooltip assign a "mouseleave.tooltip" event handler for each involved dom node.
This event is triggered as soon as you will leave the dom element, and after 225 milliseconds (for details refer to source code) the tootip will be hidden.
Moreover, the tooltip has the style pointer-events equal to none: no mouse event can be triggered, so your anchor will be never clickable.
In order to overcome all these steps a possibility is:
save the jQuery mouseout event object
remove the previous object from the jQuery handlers so no mouseleave.tooltip can be triggered.
handle the jQuery hover event for each tooltip (having class: material-tooltip): this to save a property in order to test against the mouse position in or out the tooltip
on mouseenter for your element set the pointer-events to default auto
in the same way on mouseleave set a timeout less than 225 milliseconds in order to test if the mouse is over the tooltip: if not execute the standard jQuery materialize mouseleave.tooltip event
on mouseleave the tooltip do the same step in the previous point.
The snippet (jsfiddle):
$(function () {
var x = jQuery._data( document.getElementById('ines'), "events" )['mouseout'][0];
delete jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
$('.material-tooltip').hover(function(e) {
$(this).attr('hover', 1);
}, function(e) {
$(this).attr('hover', 0);
x.handler.apply( document.getElementById('ines'), x);
});
$('#ines').on('mouseenter', function(e) {
$('.material-tooltip:visible').css('pointer-events', 'auto');
}).on('mouseleave', function(e) {
setTimeout(function() {
var val = $('.material-tooltip:visible').attr('hover');
if (val == undefined || val == 0) {
x.handler.apply( document.getElementById('ines'), x);
}
}, 150);
})
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<svg width="400" height="400">
<rect x="190" y="155" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top"
data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"
data-html="true"/>
</svg>
But with what I have done, if I make the display mode : none or block then I cant make it shown on click.
Also when I click on the show/hide image it scrolls at the beginning of the page, instead of staying at the same place and showing the iframe.
Any help for that?
With that below I made the show/hide function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#on").click(function(){
$("map").show();
});
$("#off").click(function(){
$("map").show();
});
});
</script>
I frame and image are:
<div id="show/hide" align="center">
<a href="#" id="on">
<img src="http://icons.iconarchive.com/icons/double-j-design/apple-festival/256/app-map-icon.png" width="80" height="80">
</a>
<div id="map" style="display:block ;">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
Your page is scrolling because display:none actually "deletes" the iframe from the DOM, which using a CSS style of visibility: hidden; would leave the iframe in place, but just hide it.
If that's what you would like to do then use the following (notice the visibility:hidden style):
HTML
<div id="map" style="display:block; visibility:hidden">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
You can choose to use display: block, or any other display style you want -- just DO NOT use display: none, as it will act as if it REMOVES the object from the DOM.
JavaScript:
$(document).ready(function(){
$("#on").click(function(){
if ( $("map").css('visibility') = 'hidden') {
$("map").css('visibility') = 'visible';
}
else {
$("map").css('visibility') = 'hidden';
}
});
});
If you call preventDefault(); on a clicked a tag, you can cancel the "scroll event". Implementation can look something like this. Demo.
$(document).ready(function () {
$('#button').click(function (e) {
$('.map').fadeToggle();
});
});
I believe this will fork for you if you place the # in front of the id in your jquery command:
$("#map").show() and $("#map").hide()
Also, you have called .show() on both functions. I would assume on your second you would like to call .hide()