What I'm trying to do is fairly complex.
The basic idea is that I have a wrapper div, say 20 x 20 px, that is hidden and fades in once I hover the mouse over it and fades back out when the mouse is removed. I have this part figured out.
My next step was to include a div containing an image inside the wrapper div. The image div which is bigger (about 300 x 400px), overflows the boundaries of the wrapper div so that the entire image is visible and, as a child of the wrapper div, also fades in upon hover.
This brings me to my issue(s):
1. When I hover over the area, the image fades in like I want it to, but the top right corner is bound by the wrapper border, and it overflows to the bottom left only.
2. When I hover over any area the image covers and not just the wrapper area, the image will appear.
desired result for issue 1: I want to position the image div within the wrapper so that it overflows up and left, as well as down and right. In other words when I hover over the wrapper area, I want the image to fade in completely eclipsing the wrapper area so that the wrapper area is basically centered within the image area
Desired result for issue 2: I ONLY want the fade in effect to be activated when I hover over the 20 x 20 wrapper area. When I hover over any area the 300 x 400 image WOULD cover when visible I don't want anything to happen. On mouse off It wouldn't matter to me if I had to leave the area of the image or the area of the wrapper for the fade out to begin, but if it's possible to limit all hover activation/deactivation to the 20 x 20 area only, that would be cool.
I could so easily use the old image1 over image2; on hover, image 1 fades out to reveal image 2 trick, but it's all hell since I want the fade activation location to be within the area being faded itself.
Isk
UPDATE:
I have figured out issue number 1.
so now I just need to figure out my second problem and I'll be all set.
To get a visual of my progress so far, here's my website: http://silentnoizemusic.com
Scroll down to the area with the billboard that reads "SALES#silentnoizemusic.com" and hover the mouse over the black twitter icon to the upper left of the billboard.
Just as a reminder, I want the fade in action to take place ONLY when I hover the mouse over the twitter Icon area and not when I hover over the area the fading image covers. The image is placed within a smaller div wrapper set to visible overflow. So if you were to set the overflow to hidden you'd see that there is a square area with a yellow border that fades in when you hover over the twitter Icon. When I set the wrapper back to overflow: visible;, I only want that square area to activate the hover function and not any of the area around the square that the invisible overflowing content occupies.
It would be preferable if there was non-javascript solution due to coding restrictions, but if js is the only option then I'll give it a try anyway.
Thanks again,
Isk
This problem is occurring because your image is a child of the wrapper div and hovering over it is considered as hovering over the wrapper div.
If you are not terribly against a Javascript solution, here's my suggestion:
Take the bigger image outside the small wrapper div, i.e. it's no longer a child. But position the wrapper and this image in the same places as before. Then, on an onmouseover event on the smaller div, change the visibility of the image as before. On an onmouseout event, hide the bigger image again.
In order to change the properties of an element in response to actions on some other element you would need Javascript and CSS won't do.
This is the HTML and JS. Put the whole thing in your HTML file:
<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>
<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>
Related
If I make a div that has 50x50px dimension, and I make an image (sprite) that has 50x100px dimension. Then one image is on top of the other.
Now, if I make a hover effect on the div, where the image should change, I would just change the background position from top to bottom as an example. Then when I hover the image changes and so on. Easy...
But, if I use a transition timer, then I will see the image move from the top, to the bottom.
My question is: Is it possible via sprites to make fades instead ? I mean, lets say I have an image that changes color. Then I don't want it to like like the image is going up and down, but just fade in the color of the other image and so on.
Is that possible via sprites, or do I really have to just onclick-change-image events etc. ?
Thanks in advance.
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I'm using a "homemade" php calendar in my site's right sidebar. The site's body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here's a visual representation:
The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.
Thanks.
Edit: Sorry, I forgot to mention the way I'm making the boxes show up. It's entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They're kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.
I don't want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor's screen size.
For Javascript:
Check for the size of the document (to find the right most pixel)..
Check for the right most pixel of the box
Subtract box.right from document.right and move box left by that amount
For CSS:
Make the position of the box absolute and right: -10;
This is more a CSS / Javascript question.
First way: assign {position:absolute; right:0} to the popup div and {position:relative} to the containing div, so it will be floating to the left all the time.
Second way: use javascript / jQuery to calculate the right edge location of the popup div, modify the left if the div is going to poke out of the edge.
What I'd like to do is something like:
<div> (parent, sized to img)
<div> (movable within parent, z-level 1+)
<img /> (z-level 0)
</div>
</div>
With these constraints:
The html img needs to be able to have its src (and size) changed from Javascript.
The top z-level div should be able to have its size changed from Javascript, also it follows the mouse (by javascript). I'd like to use relative positioning, so the coords match the img dimensions. Maybe absolute would use the parent dimensions? (same as img)
The outer div is just there so I can read mouse click positions from it. It should be able to have its sized changed to follow changes in the img src.
I have a use involving high and low res images of the same material. I'd like to show the low res image with a movable zoom box (transparent div with border), then when the user clicks it resizes the img object and outer div and loads the high res image, then scrolls the window to center the corresponding (scaled) spot on the high res image. There's no actual zoom, it just works that way by scrolling the high res.
I've got everything working except the zoom box: it loads the high res and scrolls ok on a click. To be able to set the z-index on the movable box higher than the img but still have the movable box layer use the same coordinates as the fixed div and the img is the problem. The box needs to float over the img. I'm not using the image as a background partly because I need to stretch it in y.
The site owner thought it might help to prevent theft of his images if he squashed them to a distorted aspect ratio. I calculate a height and force the img to use that, which makes them look better. Different images have different aspect ratios, which is why I want Javascript control over the size of the zoom box.
Using the :before and :after pseudo selectors new in CSS3, you can easily have 2 extra layers on the same object.
This is good for applying layers on the same object, as it means that you won't have to be messing about with having to float and adjust the margin of the original element and other such hassles.
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I guess you would like to take a look at several ways to protect Images, as per your last demands. here