I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.
Related
I have an AngularJS, JS, JQ, HTML5, CSS3 web app. Web interface is supposed to be divided into 2 parts and the first part should be resizable.
I would like to bind location of <preview> element from the first part to the location UNDER the top level of second part (location of "response" word on image) using jquery. So it looked something like this:
It should always be under the border line whenever it goes up or down.
Does anyone know how to solve this using JQuery? Every useful answer is highly appreciated and evaluated.
Thank you.
I might not understand the question but you could try creating a container div around all your HTML elements and giving it a float css property.
then you can cut/paste the element you want underneath to outside of your container and giving it the clear both css property
I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.
Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV
You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle
I am trying to use the slimScroll scrollbar plugin, but I had to modify it. I am trying to make it so that you pass the plugin the div that needs scrolling and using the same space as that (in the parent) the scrollbar appears. I have gotten it to add the scrollbar where i want in the dom, but it isnt scrolling. I dont know why. Can anyone help?
Code is here for you to play with/correct.
http://jsfiddle.net/rgmrw/5/
Thanks!
EDIT: The solution should also not add any divs/wrap existing ones. (Doing so messes up other existing javascript code)
Yes, I fixed it;
I actually didn't do anything, I was messing around in code but couldn't get it to work properly, so i copy pasted the code again from the original plugin at http://rocha.la/jQuery-slimScroll and it worked out of the box :)
http://jsfiddle.net/rgmrw/9/
The answer is that you cannot $(el).scrollTop() an element that isnt cutting off its children elements, even if a parent is.
Basic Concept Demo: http://jsfiddle.net/DY9CT/
Plugin Demo: http://jsfiddle.net/rgmrw/11/
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
I have a div that floats at the bottom of the screen and want to let users vertically resize it (by grabbing a handle on the top of the div and pulling the div up or down). I am using Prototype.js, so it just has to be compatible with that, though if there is a simpler way of doing it than with yet another javascript library that would be much preferred. Anyone found anything like this or have a simple way of doing it?
Here is what you are looking for. It has the sample code using prototype.