Movable jquery box should not be moved out of the page - javascript

I'm creating a web application where I need to do some design tweaks. Here is the sample feature code: http://jsfiddle.net/rkumarnirmal/FSDPH/
The black movable box shown there should not be moved out of the page(not even a bit), but if you check there, You can move the box and place it somewhat out of the page. How can I control it?
One more thing, I'm going to implement jPicker tool http://www.digitalmagicpro.com/jPicker/ in that box. If we click the color box, the jPicker tool will be popped out and then if the box is moved the jPicker tool must have to arranged itself according to the page.
I know asking question like this is not fair, but I have no chance :( Could anyone guide me?
Thanks!

You can use the containment property on draggable to keep the draggable element inside one of its parents.
For example:
$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'});

Doing the whole code is not possible now. I'm giving you the logic. You can do it easily.
You have to track the overlay's drag event. Then in the event handler you have to check the left and top position of the overlay. If it goes beyond your limit then set left/top to 0 (or some offset).
On the other side if it goes beyond the extreme right (or bottom) you have to set the window's width (or height) minus the overlay's width (or height) accordingly.
same goes for the Color Picker. But instead of drag event you have to perform repositioning when the color picker is displayed.

Related

Change cursor to image using jQuery

I am using jQuery to track the movement of my cursor on screen (Both for X & Y),
I am creating a border of 100px by 100px on a div with an id, and I am making the border change position so it can follow the cursor. I know I can change the cursor to an image in CSS, but I believe there are size restrictions on that.
Basically, for the end product, I would like for the cursor to stop moving after a certain point in the window. (for example if you look at the fiddle below, and quickly move your cursor out of the 'result' window, you will see the border box is not at the edge of the window) So I am looking for a way to make this more responsive, and have the box at the edge of the window when scroll out of the window.
The Fiddle below should help you understand what I need help with.
http://jsfiddle.net/tygbkvyr/1/
The JS I am using is as shown.
jQuery(document).on("mousemove", function(event) {
jQuery('#theImage').css({left: event.pageX, top: event.pageY});
});
Thank you for all the help
Do you have to use jQuery? see this SO post regarding changing the cursor with CSS: Using external images for CSS custom cursors

How do I make a smooth transition when moving an element from margin-left:-9999px to the page?

Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you

Is there a way to see what's outside main browser window?

I have some objects that I need to place outside of the main window then move them with CSS3 transition effect inside the window. I want to be sure if these objects are in their special positions visually. Here is a screenshot of how I think it could look like:
White rectangle represents browser window and the area filled with gray color is the 'outside' area that contains some objects I work with.
You could try to see what's outside with Firefox Developer Toolbar.
Right click on any element in Firefox and choose "Inspect Element (Q)"
Than select the 3D-view. It's a small button in the top right corner of the panel.
With this, you'll be able to explore the layers of your site, as well as stuff that is not in the normal viewing context.
You can use Screenfly. This allows yo to set any screen size you desire. You could set a huge screen size to see if your text is in right position.

How to Make a Dropdown Menu go up When There Isn't Enough Room on the Page - HTML/Javascript

I'm looking for a way to make my dropdown menu go up when there isn't enough room on the page to see it completely. I'm using HTML, Javascript, CSS, and JQuery only.
Thank you for the help.
-Lynn
Very unclear what you're looking for, but I'm going to assume you want to modify the position of your drop downs when there isn't enough place on the screen. Your best bet would be to have a check in your javascript to see if your drop down (ie. it's height) is bigger than the window's height. If it's not, don't worry about it (assuming the position is correct). If it's bigger, set a new position to the drop down (assuming it's on absolute positioning, depending on how high you want it, it could be as simple as setting the top attribute to 0. This should be executed every time the document is loaded.
Personally it's best to avoid this situation completely, a drop down should never reach, let alone surpass the dimensions of the website.It negatively affects the UX of your website.
EDIT : Based on more info, here is what I would do based on what I understand of your problem. Usually the drop downs are styled in absolute positioning, though to find out exactly where to position them, it's always relative to your principal navigation (where your drop downs will drop down from). So knowing this, I would emulate this logic in a jquery/js script. Here is the high-level logic:
$(<your main navigation's section>).hover(function(){
//logic for hover in
<show drop down (opacity:1 or display:block)>
if(menu position is greater or equal to 50% of screen){ //this means that menu is located in bottom of screen
<display drop down below navigation>
}else{ //menu position is less than 50$ of screen (menu is located in top half of screen
<display drop down above navigation>
}
}, function(){
//logic for hover out
});
Your logic for displaying your drop down is nothing more than a simple jquery call to display the drop down container (by redefining the opacity or display argument of the container's style). To know where to place your drop down, here is your logic:
if above your main navigation, get the y-position of your main-navigation and subtract your drop down's height (retrieve all these values with jquery/js). Give or take an offset that would want between your drop down and your main-nav, and you have the absolute y-position of your drop down. the absolute x-position will be relative to the x-position of the button being hovered by the user in the main-nav, offsetted depending on how your want your drop down be positionned relative to its parent menu item.
if below your main navigation, the calculations are reversed. I'll let you this one to you, as a little playing won't hurt :)
When i mentionned earlier that even though the drop down is positionned: absolute, but in relality the measurements are truly relative to the main navigation, this is especially true to you since your positionning of your main navigation and your drop downs are all dynamic, meaning that a static position wouldn't work in this case.
I've given your the logic behind the code, let me know if you don't understand what I'm trying to explain.
Pat

How to emulate this javascript functionality (movable div and saved positions)

I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.

Categories