I was wondering whether anyone knew of a JavaScript alignment system like the one on this page: http://trilancer.com/jpolite2/index1.html where you can drag the modules on the page into place? Thanks in advance.
jQuery UI Sortable provides something pretty close to this.
See the portlets demo here.
Related
So think if a dashboard view, which contains different divs for lets say text blocks. I want the client(user) to be able to rearrange them in a X by Y grid system.
I have an idea about how to achieve this, but I am mainly looking for a library or a specific framework that can do this. Is anyone aware of any built solution?
I dont care about css framework bootstrap etc I can use any of them.
I think React JS is well suited for this.
Link to get started with sorting: http://webcloud.se/sortable-list-component-react-js/
Link to get started with dragging:
https://github.com/mzabriskie/react-draggable
UPDATE:
This seems to be exactly what you're looking for: https://github.com/STRML/react-grid-layout
Something like this?
jQuery Sortable UI:
https://jqueryui.com/resources/demos/sortable/display-grid.html
Apart from the great and quick answer from Turk. There are more options such as http://packery.metafizzy.co and http://gridster.net
im making a one page layout of a website, i would like to ask if it is possible to use a draggable image to a certain position to change pages?
im not that good with jquery and js so please bear with me.
check this:
example
if this like you want... it's a parallax. so you can try to find a tutorial to do this.
best regards,
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
i was wondering if anybody knows (and if there is such a thing) a javascript plugin that can do to following:
on the website http://www.worldofmerix.com/ click on any of the menu buttons on top for eg. "about us"; then you see a line appear in the middle and expand so that you can see the entire div...
I need a similar animation effect, flash is out of the question, so i have to use javascript...
i have some ideas on making it with some "smooth div fade in/out" js plugins, but i was wondering if there is a plugin SPECIFIC to the thing i need?
thanks very much in advance for the anwsers!
Ok, since you didn't state any jQuery "dont-wanting" I'd recommend you to check out jQuery. It is a set of JavaScript libraries that help you manage your HTML and CSS with some light code.
You can see HERE, HERE and HERE how it can animate divs and other elements (I see that it is what you need).
You can check out the official web site and there you can find all kinds of examples and documentation that you will ever need. I recommend you to see THIS (click RUN).
I'm currently working on a search box for my site that will hopefully use a slide-bar instead of tabs to conduct the search. Users will enter a search query and instead of choosing from the conventional tabs above the box, they will have the option to search based on the position of the slider (ie. a "stronger" or "weaker" range of search). Does that make sense?
Anyway, has anyone come across a plugin to help me build such a slide? jQuery? Ajax? CSS? Not sure how to go about it. Has anyone any experience or ideas with what I'm trying to achieve?
Let me know what you think, and if you need me to elaborate on anything :)
Thanks, David
jQuery UI has a Slider control that you could use for this.
You can see from the demo's on the page that there are numerous different ways that you can use this, look at the "Snap to Increments" demo. You could use this method and snap it to "weak", "strong", "very strong" etc?