I'm trying to do the following: I have an icon on a page and when i drag it the icon changes. It has to not go beyond the containment area.
What I've tried is something like this:
$("#myElement").draggalble({
containment: "#myContainer",
start: function(event, ui) {
$(this).attr("width", "20");
$(this).attr("height", "20");
$(this).attr("src", "newSource.png");
}
});
The icon successfully changes and I can drag it.
The only problem is the new icon size. It is a little smaller than the original.
When I drag it near the boundaries of the container it stops too early, I can't reach container boundaries. Specifically I can't reach the upper and right boundaries but I can still reach the bottom and the left. I think this is because the draggable plugin calculates the icon limits using the size of the old icon.
Does anyone have some advice on how can I drag the new icon and reach the container boundaries?
Thanks in advance :)
To get this to work, I had to create a container object based on the smaller picture's dimensions.
Using the following options - parameters are the container div, small picture width and small picture height respectively:
containment: shrinkSize("#container",20,20),
and the function does the following:
function shrinkSize(frameId, smallerWidth, smallerHeight) {
var frameOffset = $(frameId).offset(),
frameHeight = $(frameId).height()-smallerWidth,
frameWidth = $(frameId).width()-smallerHeight;
return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]);
}
Fiddle here.
P.S. in the fiddle, the image being dragged reverts to original size when dropped. If this is not the intended behavior, just remove the stop option (with function) from the draggable definition.
Related
Incorrect size: Here's what it looks like on load:
Correct size: Here's what it looks like on window resize:
PROJECT LINK Here is a reference link: https://wp.xingapps.win/
Instructions: Hover over "Shop Ejuice" black button in top navigation and you will see red boxes. These red boxes should match the height of the first image but arent.
Story: I have a problem where im trying to reduce the amount of image requests on a page. I have a grid of images. Instead of loading all the images which are all the same height and width I am just going to load the first image and than the other images will be a <div> that matches the first images height and width. I will then apply a CSS Sprite background images to these div's so they appear as normal images. This will reduce the amount of requests on the page by a lot!
Issue: My example code is working when i resize the browser - it will match the height of the source image perfectly. However on initial load the height and width are incorrect. For some reason a bit smaller than it should be. Not fixed until i resize the window. How do i fix this?
The code:
(function($){
/* Match Quad Menu Div Height to one image */
var imgContainer = $('.mad-hat-parent-menu .quadmenu-product-float'),
sourceImg = $('li#menu-item-15959 span.quadmenu-item-content');
function resizeDiv () {
imgContainer.height(sourceImg.width());
imgContainer.width(sourceImg.width());
}
$(window).on("load resize", function() { resizeDiv(); });
})(jQuery);
Note: (i am actually targetting the container of the first image instead of the image itself) Additionally this issue is hard to see if you are on a screen width smaller than 1650px.
Edit: Try to use the resizeDiv() when the user opens/hovers/clicks the menu, like:
Like:
$(".quadmenu-dropdown-toggle").on({
mouseenter: function (e) {
resizeDiv();
},
click: function(){
resizeDiv();
}
});
I am dragging thumbnails from one DIV to another and attempting to imitate the "snap-to-a-grid" feature used in AutoCAD , Adobe Illustrator, many other graphics-editing software, etc.
Question 1:
How could I get the pointer to snap to the 0,0 position (x and y position) of the image I am clicking for dragging, regardless of where the pointer was on the image when clicked?
When I click to drag an image, the pointer sticks to where the pointer was when clicked and the coordinates I am going to track will be for the pointer.
I tried this:
cursor: url(mycustomcursor.png) 0 0 , auto;
and the custom pointer appears but doesn't snap to 0,0 as hoped.
Question 2:
How can I get my image to stick precisely where dropped in a DIV and return the offset in pixels from the top/left of the DIV it is being dropped into?
I don't know if the cursor position when dragging is relevant but when I drop my image with the following script the image shifts twice the distance I expect of in other words the offsetX value, doubled. I have added the script below and had to edit out a bunch of (hopefully) non-relevant script like CSS for colors, borders, etc. I am also only working with the X-coordinates for simplicity in testing.
<div style='overflow:scroll;text-align:left;position:absolute;width:90%; height:180px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img id='image_1234' src='image_path/image.png' style='position:absolute;height:100px;' draggable='true' ondragstart='drag(event)'>
</div>
<div id='panel_frame' style='width:600px;height:300px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>
function allowDrop(evAllow) {
evAllow.preventDefault();
}
function drag(evDrag) {
evDrag.dataTransfer.setData('text', evDrag.target.id);
}
function drop(evDrop) {
evDrop.preventDefault();
var dropData = evDrop.dataTransfer.getData('text',evDrop.id);
evDrop.target.appendChild(document.getElementById(dropData));
var offsetLeft = evDrop.clientX + 'px';
document.getElementById(dropData).style.left = offsetLeft;
}
I am testing in Firefox. Any help is appreciated. Thanks!
I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing
You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});
You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)
I have two horizontal divisions and i want to insert a slider in between then so that the height can be dynamically adjusted. The code am using is
<script type="text/javascript">
$(function() {
var stopFromTop = 58;
var stopToTop = 158;
var i = 0;
$("#handle").draggable({ axis: 'y',
start: function(event, ui) {
TopStart = $('#top').height();
BottomStart = $('#bottom').height();
},
drag: function(event, ui) {
$('#top').height( TopStart + (ui.position.top-ui.originalPosition.top) );
$('#bottom').height( BottomStart - (ui.position.top-ui.originalPosition.top) );
//$("#handle").css({"top":108 + "px" }).show();
//alert(ui.position.top);
},
containment: [0,stopFromTop ,0,stopToTop ]
});
});
</script>
But this is not working the way it should. The slider is not following the mouse when it is dragged. There must be something which I am doing wrong. Unable to get it!! :(
Here is the link to the page.
You could use jQuery UI's draggable element. Then simply calculate it offset from the top and set that as the top div's height. Then do some math to find the bottom div's height.
Edit
You have the slider's position set to relative, so basically it will appear right below the top div. Additionally you change its top value (which also moves it. So basically it is moving TWICE as much as it needs to). Either:
Set the sliders position to absolute (and play with top to position it right); <-- ALOT OF WORK, DO NOT ATTEMPT
Simply stop changing slider's top value
Seems to be a css problem with jquery. Changing the css property of separater to position:absolute fixed the problem.
I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.