I'm not actually sure what to tile this but I'm trying to replicate draggable icons like the iOS home screen. I am not using JQuery. I could figure out how to make things draggable but I don't know how I would implement set positions that the icons would go to. My current code is <div class="icon"><a class="app" href="apps/settings/index.html"><img style="border-radius:14px;" src="img/settings.png"><p class="label">Settings</p></a></div>
I guess you're looking for drag-n-drop with "snap to grid" feature.
It is supported by jQuery UI, but since you're not using it, Gridster may help.
Another good library.
Pep library - look at the "Snap to Grid" demo.
Related
I like the way the image slider in this page works and I've been looking for a way to do it. But the information seem to be limited out there.
Site: http://stevenmengin.com/
Thanks
I think you need fullPage.js jQuery Plugin for fullscreen scrolling. You can get it from the link below:
http://alvarotrigo.com/fullPage/
I'm making windows javascript emulation. Right now, I'm creating program windows. They have code like this:
<div class="program" draggable="true">
...more imgs
<img src="./res/img/closeButton.png" title="Close">
<iframe src="./programs/fileExplorer" width="900px" height="500px" class="programBorder"></iframe>
</div>
I need to make whole div draggable (on top bar) and resizable (side and bottom bars full, top only small part). It would be really cool to get it done without javascript (css only), but it is OK to do it with javascript/JQuery
Use jQueryUI instead, http://jqueryui.com/dialog/ it has both draggable and re-sizable options readily available, else you can go through the library and implement the same logic.
Draggable elements
It is currently impossible to make draggable elements without using css+html only. What you could do is just use jQuery to solve this. Alternatively, you could see this answer to another question that explains how to make draggable elements without jQuery.
Resizable elements
This one is indeed possible to do with CSS only, and it's quite simple. Just use resize:both on the element. This table shows the browser support for CSS-only resize, so you should probably consider that when making your site. You could also use jQuery as a fallback for IE.
Here is a demo for the different types of resizing there are.
Dear experts,
I am currently working on an code that allows users to drag & resize HTML elements across the pages. I could tackle the draggable no problem. But the problem comes from resizing. I don't know how attach Event Listeners to the "borders" of this elements to trigger the resize, specifically only the "right and bottom" borders.
I am aware of the similar approach on the Jquery UI, but I do not want to use the Jquery UI.
I would like to do it myself with vanilla Javascript and Jquery API.
I have spent the whole day searching on Google for a proper tutorial but failed.
If you could point me to the right direction I would really appreciate.
Dennis
jquery ui appends 8 elements on top of your draggable element. south, southwest, west... and so on. Is it what you meant?
How do users resize them without dragging? if they just input a number have you tried the following
$(element).width(widthInput);
$(element).height(heightInput);
I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin
on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover