Context
I am using dojox/Widget/Toaster in the page, but its position is at the extreme corners (br or tr). And on the extreme corners, there are headers and footers having the same colour as that of the background of Toaster.
Question
What I want is, to display the Toaster either slightly above the footer, or slightly below the header, so that the colours don't overlap. How can I achieve that?
Figured it out myself!
The solution is to change the CSS of .dijitToasterClip and specify the top and left attributes with the offset from top and left of the screen.
Related
I'm trying to achieve a metaball effect by blurring svg's (CSS Blur), then applying CSS contrast to the parent div to get hard edges back. Below is an example. For some reason, the filter does a weird thing on the edges.
I believe i would need to first extend the div to be bigger than the viewport, but some elements are dependent on VW and would therefore scale in an unexpected manner.. Anyone have an idea of how to expand the filter past the viewport edges?
Don't really know how to approach this, i would like the blur to extend past the viewport but retain current layout.
EDIT:
Needed to add white background to container div to make the contrast behave in the way i wanted. ( not go crazy on the viewport edges)
In short, I want a fixed background position relative to an element on a flexible layout.
http://devwp.steveforest.com/
So the background remains well positioned to the dark gray sidebar at the left if you change the screen size. The correct position is as it is right now if you put the browser to ~1920px wide.
The only way I found so far is to use a lot of "#media screen and (min-width:Xpx)" in CSS but that's not pretty (and using a lot of lines in my CSS) and perfectly fluid.
Is there a better way to achieve that? I don't mind using javascript/jQuery.
I would personally cut the background image in two pieces. Place the right piece on your right side and position it to the left and place the left side to the left and position it to the right.
I'm creating my portfolio, I drew some layout but now I've problem with code. As You can see on the image.
Visualisation:
the black area will be a photo
the white area will be a normal bacround color / maybe also image i'll see.
Full width scalable
I want to use background image that will be scalable and the problem is that I've no idea how to resolve problem with the links (grey field). Because I want link gaps to start at the end of the screen and end before the white background (at the boarder).
I was thinking about the image maps but it is not a good solution... Maybe You've got an idea.
I've found similiar problem (about positioning link gaps according to background position - scaleable) - Link is here - stackoverflow
Now I have the same problem like in the question above - it is working if I won't use proportional background scaling.
It's a tricky layout.. BUT! (I assume full-width scaleable and fixed aspect ratio)
Since you know the angle of the intersection of the areas will be the same. If you put your links at known y-axis percentages from top corner you will have a fixed precentage in the x-axis.
Then if you choose to go full browser width you could use 'position: fixed'(CSS) for the links together with scaling and top/bottom/left/right(CSS).
Otherwise i believe you could use relative positioning with the same principle.
Hope that will get you on your way!
I'm designing a page that has a Content Area which scales against a diagonally striped background.
The Content Area div is a fixed width that will scale vertically with content. Because the border is a drop shadow, I have a repeating background image (40px wide by 80px high) that has to line up with the page background image. I need the div to scale in multiples of 80px high so that the repeating backgrounds concur with each other.
Is there an elegant solution that will allow me to scale the Content Area div so that it always displays at a multiple of 80px high? If not, is there another approach I can take to solving this problem rather than scaling the div to a multiple of 80px?
Thanks in advance!
Ryan
Unless you absolutely need the drop shadow to appear in older browsers, you can generate it with the CSS3 box-shadow property instead of using an image. This is much more flexible as the shadow is generated by the browser and will fall nicely on the background regardless of how things line up.
Jimmy's idea is solid, assuming the browser supports this css property. Another, weirder idea to consider might be to have jquery insert a div into the DOM that has fixed positioning and is offset to your content div and a z-index that would put it behind your content div. Then you could this new under-div an opacity (you can use fadeTo but maybe there's something better). Basically give the content div a real shadow by having an identically sized div underneath with 50% opacity.
why dont you leave the stripped background out of the content areas and use a transparent png for the images that will use a drop shadow. Since you're already trying to use javascript to fix a css problem, why not use DD_belatedPNG so that the alpha transparency will display correctly in IE6
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.