Placing the canvas on top of an image makes all the click events not working.
Also, making the image not selectable or draggable does not work.
How to make the click events work?
Here is the code:
Javascript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.canvas.addEventListener('click', function() {
console.log('a');
}, false);
HTML5
<section>
<img src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<canvas id = "canvas"></canvas>
CSS
img{
position:absolute;
z-index:1;
}
canvas{
width:480px;
height:640px;
border:1px solid white;
position:relative;
z-index:20;
}
section{
position:relative;
display:inline-block;
}
http://jsfiddle.net/pmht5asf/
On jsfiddle works, but in my case I need it as an inverval. Problem is that when trying it as an interval, it blocks all clicks on page and I cannot save it.
Well.. your question is about 2 sentences, showing no code.. but below is my best guess. Toggling z-index.
Element you want as background.
#elementyoudontwanttobeclickable {
z-index: 1;
}
Element you want to be clickable below.
#elementyouDOwanttobeclickable {
z-index: 2;
}
Read more about z-Index
Related
I'm looking for a solution in Javascript maybe to create a real-time preview of products based on multiple options that a consumer could choose from multiple radiobutton.
Exemple : I have a face.png and a hat.png with transparents parts, and a cap, and when I click on cap, I would like to display the image of the cap + the face and if I click on the buttonradio on hat, I would like to update my preview in real time and keep the face and only change the image of the hat (a png with transparency)
Do you have any idea how I could do this?
Thanks in advance !
you can use a container div and place face and hat inside of that div then position each other with position absolute
i added a function for changing hats
by clicking the thumbnail of hat user will change the src attribute of the actual hat image which we were showing
let hats = [
"https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg",
"https://rukminim1.flixcart.com/image/714/857/jiulk7k0/cap/g/r/v/free-hat-peter-india-original-imaf6gzbhh7pydzy.jpeg?q=50",
"https://contents.mediadecathlon.com/p982435/31cf29c7f44e13d3f77af7bd205a303c/p982435.jpg"
];
let currentIndex = 0;
document.addEventListener("DOMContentLoaded",()=>{
let thumpnails = document.querySelector('.thumpnails');
hats.forEach((hat)=> {
let img = document.createElement('img');
img.src = hat;
img.classList.add('thumpnail');
thumpnails.append(img);
img.onclick= ()=>{showMe(hat)};
});
})
function showMe(src){
document.querySelector('.hatImg').src = src;
}
//document.querySelector('#next').addEventListener('click',next)
.pic{
position:relative;
width:200px;
height:300px;
border:1px solid black;
}
.face{
position: absolute;
height: 150px;
width:100px;
background:red;
bottom:25px;
left:50px;
}
.hatImg{
width:180px;
position:absolute;
left:10px;
bottom:100px;
opacity:0.8;
}
.thumpnail{
width:50px;
margin: 0.25rem;
}
<div class="pic">
<div class="face"></div>
<img class="hatImg" src="https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg">
</div>
<div class="thumpnails"></div>
The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.
https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">
Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>
I've tried many codes from multiple answers around internet, but none actually worked..
If images on slider started swapping content inside single .div, the slider didn't work or was collapsing..
I've succeed once, but then changed single thing and when I went back with ctrl+z, it didn't work back again. That got me so angry and hopeless, that I decided to write here.
So this is my 'precious' slider in a snippet. I want single image to be clickable and display different content, which would appear in a .div below, and make other content dissapear.
Side note: When I used this solution with jquery jQuery changing content inside Div
It made the slider once work, then I added 1 line, then went back, and at once it was not working. Which was really strange - this never happened to me, that the code was the same, but didn't work second time. The possible code for .div content swapping, must've been compatible with the slider.
I am a newbie and know nothing about jquery or javascript, so please be considerate!-->
Peek of my website with working slider - same code as below. As I said, I'd want images to be clickable, and change content inside a .div, that would be settled under slider. Each image is different content
"use strict";
var SLIDER_CLASS = 'slider';
var DELAY = 4000;
var sliders = document.getElementsByClassName(SLIDER_CLASS);
initSliders();
function slideAll () {
for (var i=0; i<sliders.length; i++) {
if (!sliders[i].getAttribute('data-slider-paused')) {
slide(sliders[i]);
}
}
}
function slide (slider) {
slider.sliderIndex++;
slider.children[0].style.marginLeft = -slider.clientWidth*(slider.sliderIndex%slider.children.length) + 'px';
}
function initSliders () {
for (var i=0; i<sliders.length; i++) {
var slider = sliders[i];
slider.sliderIndex = 1;
slider.onclick = clickSlider;
}
setInterval(slideAll, DELAY);
}
function clickSlider (e) {
if (!e.target.classList.contains(SLIDER_CLASS)) {
return;
}
var bounds = this.getBoundingClientRect();
if (e.clientX-bounds.left < bounds.width/2) {
this.sliderIndex+=sliders.length;
} slide(e.target);
}
/*SLIDER*/
#sliderbox {
margin-top:-10%;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.slider {
width:900px;
height:300px;
background-color:none;
display:flex;
overflow:hidden;
position:relative;
margin:0px 0;
border:1px solid #FF0
}
.slider:before,
.slider:after {
content:'\27A4';
position:absolute;
top:0;
bottom:0;
left:0;
font-size:400%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#FF0;
padding:10px;
}
.slider:before {
transform:rotate(180deg);
}
.slider:after {
left:auto;
right:0;
}
.slider > div {
flex: 0 0 100%;
display:flex;
align-items:center;
justify-content:center;
font-size:200%;
color:#FFF;
transition:margin-left .3s;
}
<div id="sliderbox">
<div class="slider" data-slider-paused="true">
<div><img src="../aa7.jpg"/><img src="../aa2.jpg" style="margin-left:10%"/><img src="../aa5.jpg" style="margin-left:10%"/></li></div>
<div><img src="../aa1.jpg"/><img src="../aa3.jpg" style="margin-left:10%"/><img src="../aa8.jpg" style="margin-left:10%"/></div>
<div><img src="../aa6.jpg"/><img src="../aa9.jpg"style="margin-left:10%"/><img src="../aa12.jpg"style="margin-left:10%"/></div>
<div><img src="../aa4.jpg"/><img src="../aa11.jpg"style="margin-left:10%"/><img src="../aa13.jpg"style="margin-left:10%"/></div>
</div>
</div>
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
I have the following html and css for a Tetris game I am making:
html
<div id = "TetrisHolder">
<canvas id = "TetrisCanvas" style = "width:400px; height:500px"></canvas>
</div>
css
div#TetrisHolder {
display: table;
margin:auto;
background: black;
border: solid black 3px;
}
canvas#TetrisCanvas {
background: url(Resources/bg.png) no-repeat center;
background-size: cover ;
}
When I attempt to resize it with the following javascript, nothing happens. I have seen most other StackOverflow questions about resizing DOM elements answered this way, however it does not work for me. what am I missing?
note: I am aware that I will need to redraw what is on the canvas but all I want right now is to resize it.
js
function resize() {
canvas = document.getElementById("TetrisCanvas");
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth*0.6;
canvas.height = window.innerHeight*0.6;
}