I am using the jqDock from wizzud.com/jqdock and I was hoping that someone here had some experience with it.
Here is what my dock looks like:
(source: jamespwright.com)
My first issue is that my client is INSISTING that the dock should fill the entire width of the page, but nothing that I change makes that happen. The dock stays the same width no matter what I do.
The second issue is that 3rd from last image. Notice how it is smashed vertically? Each of these images has a second image associated on rollover to display text to the user. That looks like this:
(source: jamespwright.com)
Now each of those images is 64x75 (width x height) pixels. The small images are that same width, but are constrained by the dock to be 48 pixels tall. The only image that is different is the "Companion Animals" hover image, which is 64x83 pixels (so that it can fit the 2 lines of text).
I can't do this without having 2 lines of text on that image. But I can't figure out why the first image (which is the exact same dimensions as the other images) would be "smushed" because the 2nd image is a different height.
Any help would be appreciated.
2nd issue first :
You are constraining the height (height being the minor axis in a horizontal menu) to 48px. Images are constrained proportionately, so a full image size of 64x75 results in an 'at rest' (ie. constrained) size of 41x48. But an image size of 64x83 results in an 'at rest' size of 37x48, ie. narrower than the others by 4px.
One thing to bear in mind here is that the ability to provide separate small images for the at rest state is purely and simply for clarity of images - ie. not having to rely on the browser's size reduction rendition of the reduced 'larger' image. It is always the 'large' image that is the important one and the one that is constrained; the 'smaller' image merely replaces the reduced 'large' image when that image is completely 'at rest' in the dock.
Back to the 1st issue :
I'm not entirely clear on exactly what is required to 'fill the entire width of the page', nor am I certain of what that page is, but I assume it's a fixed width website design, eg. 900px (for sake of argument), and that the 'at rest' dock needs to fill the entire 900px (presumably you're allowed half the inter-image gap at either end!).
You have a problem! Because as soon as any image in the dock is hovered over, the ends of the dock are going to exceed your 'page' width! That is the nature of the dock; that is what it does.
If that really is what you need to do, you have 2 ways of getting the 'at rest' dock to match the required width:
set your image sizes and constraint size such that they fit, and/or
apply css left/right padding to each menu item (better if all images are contained in anchors, then just evenly pad the anchors).
Related
I have a webpage that has N DIV elements which end up in a (free flowing) grid. The resulting webpage is too large for the screen and I want to scale so that the N elements are as large as possible, reflowed as required, but fit the screen. The DIV elements are not in encompassed by a table or similar element.
I have been using style.zoom=... to scale and this sort-of works but not on Firefox so I'm trying to use style.transform = scale(..,..) to scale the DIV elements. The DIV elements do scale, but they remain in the same place seeming to take up as much overall screen space as they did before I shrunk them (they seem to 'gain' a lot of surrounding whitespace), the screen doesn't reflow and things still don't fit the screen.
I've been reading up on transform and am thoroughly confused as to what it is supposed to do if the space taken up on screen remains the same even if the item is shrunk!
I want to see all my elements, shrunk to fit the screen and reflowed with no 'big white space' around them. Is this possible?
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.
I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.
See this example http://jsfiddle.net/37aMB/15/
If you resize the area at some points image will have have space at bottom and some time right side container will have space at bottom.
I want to make everything in proportion and with equality. Red backgeound should never be seen
You may try to set fixed size for this banner, and then manipulate zoom style attribute.
Here is modified example. It's not pixel perfect yet, but I have the impression it scales better.
I have a gallery that is page with just a bunch of images. Nothing else.
And I want to resize and reduce/increase the number of images on a row depending on the with of the browser window.
Right now I have a fixed number if images per row.
imgSize = documentWidth/18;
With my browser window (1770px), this produces 18 images on one row รก 98.3px wide.
But if the users window is a lot smaller than mine, let's say 962px, the images will be 53.4px wide which is to small.
I want them around 100px.
So I need to calculate how many images will fit on one row if the window size is X and the image cannot be larger than 120px and smaller than 80px.
Divide the window size by 80 and round up.
Responsive design addresses what you are trying to do. You'd use media queries to specify a different number of columns depending on the width of the window - this is done by giving the images a percentage width. Then you could give the images a min-width as well as max-width to constrain their actual sizes.