Hello, I successfully created an example with the Slider control and scrolling through some images. However when I hover over any of the images in the scrollable DIV, there is CSS that shows a larger version of the image right above the thumbnail image. Take a look at this link, try hovering over one of the images in the scrollable area at the bottom:
http://www.fronseetest.com/mednikow/shopitem.aspx
- Notice on hover, the larger image is cut off, how do I show this full image? Is there a different setup I should be using with the slider to make this easier?
.hoverbox a:hover .preview
{
display:block;
position:absolute;
top: -195px;
left: -60px;
z-index:200;
}
- as you can see im setting this pop out image's css as absolute and a higher z-index. I would think this would work, but I have an overflow:hidden set on the scrollable div, which I think is breaking it, but I need this to make the scroll work. Any help here guys? Thank you much.
Joe
http://www.fronseetest.com/mednikow/shopitem.aspx
- Notice on hover, the larger image is cut off, how do I show this full image? Is there a different setup I should be using with the slider to make this easier?
.hoverbox a:hover .preview
{
display:block;
position:absolute;
top: -195px;
left: -60px;
z-index:200;
}
- as you can see im setting this pop out image's css as absolute and a higher z-index. I would think this would work, but I have an overflow:hidden set on the scrollable div, which I think is breaking it, but I need this to make the scroll work. Any help here guys? Thank you much.
Joe
6 Answers, 1 is accepted
0
Hello Joe,
In case you have overflow:auto, you would get scrollbars when you show the larger image and I assume this is not what you would expect. That is why, overflow:hidden is not the cause for the problem.
The easiest way to get the expected result, is to define the larger images outside of the boxes_wrapper container.
All the best,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
In case you have overflow:auto, you would get scrollbars when you show the larger image and I assume this is not what you would expect. That is why, overflow:hidden is not the cause for the problem.
The easiest way to get the expected result, is to define the larger images outside of the boxes_wrapper container.
All the best,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Joe
Top achievements
Rank 1
Rank 1
answered on 09 Apr 2009, 08:09 AM
Hmm, that doesnt help too much. I need to setup the larger image within the boxes_wrapper, they are both contained within the same anchor tag, so on hover the larger lines up above the smaller image. See example of first 2 images in the DIVs:
<div id="boxes_wrapper" class="Boxes_Wrapper" >
<div id="boxes_content" class="Boxes_Content" >
<div class="hoverbox">
<div class="li_div"><a href="#"><img src="imgsource" alt="description" /><img src="imgSourceBig" alt="description" class="preview"/></a></div>
<div class="li_div"><a href="#"><img src="imgsource2" alt="description" /><img src="imgSourceBig" alt="description" class="preview" /></a></div>
</div>
</div>
</div>
I guess this really isnt a telerik issue, unless there is a different way of setting up the scrollable div with the slider. You guys have helped me out in the past with CSS issues and seemed pretty good. If you get a chance send another reply, would be much appreciated. Thank you.
Joe
<div id="boxes_wrapper" class="Boxes_Wrapper" >
<div id="boxes_content" class="Boxes_Content" >
<div class="hoverbox">
<div class="li_div"><a href="#"><img src="imgsource" alt="description" /><img src="imgSourceBig" alt="description" class="preview"/></a></div>
<div class="li_div"><a href="#"><img src="imgsource2" alt="description" /><img src="imgSourceBig" alt="description" class="preview" /></a></div>
</div>
</div>
</div>
I guess this really isnt a telerik issue, unless there is a different way of setting up the scrollable div with the slider. You guys have helped me out in the past with CSS issues and seemed pretty good. If you get a chance send another reply, would be much appreciated. Thank you.
Joe
0
Hello Joe,
In case moving the larger image outside of the element with "overflow:hidden" and position, is not an options for you, you will have to use another approach to scroll the images with a RadSlider - an approach that would not use position, top and left properties.
You can, for example, change the marginLeft of the inner DIV element, instead of the left property. In this case you can use elements without position and the only positioned elements would be the larger images. In this case, you will not have problems showing those larger images outside of the scrollable container. I have attached a simple page demonstrating this approach.
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
In case moving the larger image outside of the element with "overflow:hidden" and position, is not an options for you, you will have to use another approach to scroll the images with a RadSlider - an approach that would not use position, top and left properties.
You can, for example, change the marginLeft of the inner DIV element, instead of the left property. In this case you can use elements without position and the only positioned elements would be the larger images. In this case, you will not have problems showing those larger images outside of the scrollable container. I have attached a simple page demonstrating this approach.
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Joe
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2009, 03:09 PM
I see where you were going with this. In that demo, it doesnt actually scroll, the images do pop up though, you are probably close. Not sure how much more time I can spend on this. None of it works in IE6 either. If there is a quick fix to that sample page I will take a look again else I may just get rid of the pop-out image functionality. Let me know if you can assist any further. Thank you for your help.
0
Hello Joe,
Indeed I did not test the page in IE6 - only in IE7, IE8, FF, Opera, Safari and Chrome. This turns out to be a IE6 problem that can be easily fixed with "zoom:1", applied to the link elements. I have attached the modified version of the page.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Indeed I did not test the page in IE6 - only in IE7, IE8, FF, Opera, Safari and Chrome. This turns out to be a IE6 problem that can be easily fixed with "zoom:1", applied to the link elements. I have attached the modified version of the page.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
mrktai
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2009, 11:00 PM
Oh I said it wasnt working before but I think it was because I was using a 2008 version of the web.ui DLL. Switched to the latest and it works perfect now! Can't thank you enough! Thanks. You guys know your stuff over there.
Joe
Joe