here's the deal:
I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.
So, if i attach a draggable UI to a circle:
$('#rainbow-color-picker .circle').draggable({containment: 'parent'});
Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).
Here's the HTML markup:
<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
<div class='circle'><div class='circle-inner'></div></div>
</div></div></div>
So when I click on .inner2, I want .circle to start dragging.
I've tried
$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {
$("#rainbow-color-picker .circle").trigger('dragstart');
});
But that doesn't work :( did anyone happen to meet this problem?
Thanks
Here it is, just figured it out.
$("#rainbow-color-picker .circle").trigger( event );
Here was my ticket:
Can click on jquery draggable parent start drag?
This is just a draft, feel free to try it out. Included google jQuery and UI for quick draft. Btw, getting the positions from the events should be enough for converting it into colors.
Happy coding :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
var pos = $('#color-pos');
$('#color-field-circle').draggable({
containment: 'parent',
start: function(e) {
pos.html("start: "+e.pageX+" "+e.pageY);
},
drag: function(e) {
pos.html("drag: "+e.pageX+" "+e.pageY);
},
stop: function(e) {
pos.html("stop: "+e.pageX+" "+e.pageY);
}
});
});
</script>
<style type="text/css" media="screen">
#color-picker{width:200px;height:250px;background:#ddd;padding:10px;}
#color-field{width:180px;height:230px;background:#ccc;}
#color-field-circle{cursor:pointer;width:16px;height:16px;background:#f30;}
</style>
</head>
<body>
<div id="color-picker">
<div id="color-field">
<div id="color-field-circle"></div>
</div>
<div id="color-pos"></div>
</div>
</body>
</html>
Related
I am creating a website and I need some help with an issue. I will upload a picture for you to understand it better.
I have a big image in the middle, and below it there are some words that act like links(). I need this to happen:
1. The big image appears as the website loads.
2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in.
It's something like this:
I've already tried to get this by using some jQuery, but I don't get it to work. I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image:
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").fadeIn("slow");
}
});
$('.button4').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project4.jpg');
$("#change-image").fadeIn("slow");
}
});
etc.
Can anybody help me solving this? I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like.
Thank you very much!!
fadeOut takes a second parameter, a function. You can then do what you need to do after the first image is faded out.
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow", function() {
$('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
$("#change-image").fadeIn("slow");
});
}
});
img {
height : 150px;
width : 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/>
<br/><button class="button3">Click</button>
I suggest you use animate.css(https://daneden.github.io/animate.css/) so you can just manaipute this by just adding class or removing class.
npm i animate.css
Make sure #change-image has this class "animated"
$('.button3').on({
'click': function(){
$("#change-image").addClass('fadeOut');
// let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
}
});
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
</body>
</html>
Try the below code..Replace the image src after fadeout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
</script>
</body>
</html>
Sometimes JQuery droppable out event not fired when draggable has param cursorAd (before start dragging draggable moves out of droppable to set cursor position like in cursorAd).
For example (try to drag it by right bottom corner):
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.min-1.5.0.js"></script>
<script type="text/javascript" src="jquery-ui.min-1.8.9.js"></script>
</head>
<body>
<div id="dg1" style="z-index:1;border:1px solid red;width:100px;height:50px;position:absolute;">draggable</div>
<div id="dp1" style="border:1px solid green;width:100px;height:50px;position:absolute; top:100px;left:100px;">droppable</div>
<script>
$(document).ready(function(){
$('#dg1').draggable({
cursorAt:{
left:20,
top:20
}
});
$('#dp1').droppable({
drop:function(){
console.log('drop event');
},
out:function(){
console.log('out event');
}
});
});
</script>
</body>
</html>
Please help me to resolve this problem
Just add tolerance touch to droppable
tolerance:"touch"
Working Demo
By default tolerance is set to intersect
"intersect": Draggable overlaps the droppable at least 50% in both
directions.
We need to make it touch as per you requirement.
"touch": Draggable overlaps the droppable any amount.
I have looked at many examples for passing data from Javascript to Magnific pop-up, when the mouse leaves the screen the pop-up will fire 1 time and then you will have to refresh the page.
However I cannot get the pop-up to animate or have and effect.
I would like to use mfp-3d-unfold or mfp-zoom-out as an effect and #test-popup div id as the content
Could someone help me how to fix the code.. I am really confused at this point.
TKS
<html>
<head>
<title> Test leave Screen New 2</title>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<link rel='stylesheet prefetch' href='magni/magnific-popup.css'>
<link rel="stylesheet" href="magni/magnimain1.css" media="all">
<script src="magni/prefixfree.min.js"></script>
<script>
visitchecka = 0;
$(document).on('mouseleave', leaveFromTop);
function leaveFromTop(e){
if( e.clientY < 0 ) // less than 60px is close enough to the top
if (visitchecka < 1 ) {
visitchecka++;
visitchecka++;
// window.location='#test-popup'.css;
$.magnificPopup.open({
items : {
mainclass: 'mfp-zoom-out',
src: '#test-popup',
},
type: 'inline',
});
}
}
</script>
</head>
<body>
<div class="links">
<h4>Text-based:</h4>
<ul id="inline-popups">
<li>3d unfold</li>
<li>Zoom-out</li>
</ul>
Popup with "hinge" close effect (based on animate.css)
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.foofoo</div>
<script src='magni/jquery.min213.js'></script>
<script src='magni/jquery.magnific-popup.min.js'></script>
<script src="magni/index.js"></script>
</body>
</html>
You can do it by using .click() simply call your element to trigger click and popup will open on window leave... here I've made an example for you..
$('#clickme').magnificPopup({
delegate: 'a',
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true
});
// this is what you need
$(".main").mouseleave(function(){ // your window or parent element you can use document if you want
$('.popup').click(); // trigger click for popup
});
I am not really sure of how to start this one off.
Either way, I want to show x and y coordinates on a webpage when the mouse moves on the page. It also has to work with any browser.
Heres the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="center">
<h1>Mouse Coordinates</h1>
<p>x-coordinate: </p><p id="xcord">0</p>
<p>y-coordiante: </p><p id="ycord">0</p>
</div>
</body>
</html>
CSS File:
#center{
margin: 0 auto;
width: 500px;
}
JavaScript File:
Not much, not sure where to start off...
window.onload = init;
function init(e) {
}
basically you need to document.addEventListener('mousemove', mousemover, false); that references a function - mouseover() - that will get your clientX and clientY. From there you need to set innerHTML of your two p elements to those values.
You can use pageX and pageY something like this:
$(document).ready(function(){
$('body').on('mousemove', function init(e) {
$('#xcord').text(e.pageX);
$('#ycord').text(e.pageY);
});
});
demo
I guess this is what you are looking for assuming you are using JQuery.
$(function(){
$(document).on('mousemove', function(e){
$("#xcord").html(e.pageX);
$("#ycord").html(e.pageY);
});
});
http://jsfiddle.net/Zvm7s/2/
Hope it helps
I need a way for user to select the portion of an image either by resizing transparent rectangle or by clicking and dragging the selection area (as it's done in desktop OS), both would work for me. Then i need to retrieve the coordinates of the selected area with jQuery.
Please recommend samples or tuts (if there are any), methods or API documentations sections that could help.
See Jcrop and it's demos.
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />
And the script:
<script type="text/javascript">
jQuery(function($){
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});
// Simple event handler, called from onChange and onSelect
// event handlers to show an alert, as per the Jcrop
// invocation above
function showCoords(c)
{
alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ c.y2)
alert('w='+c.w +' h='+ c.h)
};
</script>
<html>
<head>
<title>Image Processs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
</head>
<body>
<img src="https://i.stack.imgur.com/UYYqo.jpg" alt="" id="image">
<script>
$(document).ready(function(){
$('#image').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
}
})
})
</script>
</body>
</html>