I'm using the jquery modal overlay pretty much out of the box as shown here:
http://flowplayer.org/tools/demos/overlay/index.htm
However, I have a dynamic search box within my overlay and when the contents are long I want to have a vertical scroll bar. So I added overflow:auto; to the CSS like this:
.simple_overlay {
/* must be initially hidden */
display:none;
overflow:auto;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
max-height:600px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
Unfortunately, this automatically adds a horizontal scroll bar because of the close button:
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(../img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
I've played around with a few different options but with no luck. I don't have a huge amount of CSS knowledge unfortunately. If anyone could help me get the overlayed cross but no horizontal scroll bar that would be lovely.
Thank you
Tom
EDIT A friend on twitter helped me fix it. Basically I've just added another div inside the popup and set the scroll on that like this:
HTML:
<div class="simple_overlay" id="asearch">
<div id="searchbox">
<form id="amazonsearch" style='float:left;'>
<input class="title" id="amazon-terms">
<button>Search!</button>
</form>
<div id="amazon-results"></div>
</div><!--seachbox-->
</div><!--Overlay-->
CSS:
#searchbox {
overflow:auto;
width:500px;
min-height:200px;
max-height:500px;
}
Then the close cross is always positioned correctly and doesn't intefere with the scroll since the scroll only applies to the inner div :)
Maybe try overflow-y:auto instead? I'm unsure of level of browser support of that property these days.
Related
I'm using css3 PIE in order to create circle through border-radius(in IE8). It is working fine normally.
but when i'm trying to change the background color of circle, that element is turning into square.
my code looks like this.
.menuIco {
width:16px;
height:16px;
border-radius:8px;
position:relative;
z-index:101;
background-color:#38B6E7;
}
.active .menuIco {
background-color:#F1F1F1;
}
my html looks like this..
<div> <!-- i am adding .active class to this div using jquery -->
<div class="menuIco"> </div>
</div>
when i add active class to parent div(using Jquery dynamically) the menuIco (circle) should change its color. But the border-radius property is collapsing.
can anyone help me how to fix this!
Thanks in advance.
Set your border-radius to 100%.
Here's a LIVE DEMO for you to see.
.menuIco {
width:100px;
height:100px;
border-radius:100%;
position:relative;
z-index:101;
background-color:#38B6E7;
}
I have made the width and height to 100px so as to show it on a larger scale. (this can be resized as necessary)
EDIT
Depending on your browser, you should look to include the other prefixes, is shown in this fiddle
the border radius is defined by:
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
If you check out this link (http://noahsdad.com/state-fair-texas-2011/) you'll notice that scrolling side bar to the left of the content area. I'm trying to get it to be closer to the content area, any ideas how on to do this?
Thanks.
In the options of the plug in they give me this, I'm assuming I have to make the css changes in their code, instead of my own stylesheet?
#dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #BBBBBB;
float:left;
margin-left:-120px;
margin-right:5px;
margin-top:10px;
position:absolute;
z-index:9999;
}
Change the margin-left element of #dd_ajax_float to something like -100px instead of -120px
I was able to add this to your page and make it work..not sure where you are linking the style sheet for that floating area
<style type="text/css">
#dd_ajax_float
{
margin-left: -100px !important;
}
</style>
I have a bizzare issue, I have a DIV that scrolls inside my page... But within that div I have 'header' that is FIXED.... and because my layout is fluid (100%) wide,it is making the "FXED" div cover over the scrollbars of the div below....
What is the best way to fix this? I have attached a simple screenshot of what's going on... hope it helps.
/* BLUE SECTION */
.floatingHeaderBox {
width: 100%;
}
/* RED BOX BELOW */
.contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}
.contentBoxRight{ overflow:auto; overflow-x:hidden; }
i think you can do it like this http://jsfiddle.net/yuliantoadi/bXukG/1/
i don't have your html, so i made it by my self.
If your floatingHeaderBox is inside your scroll box like this:
<div class="contentBoxRight">
<div class="floatingHeaderBox">Hdr</div>
</div>
You can just add a negative left margin to account for scrollbar. since x-overflow is set to hidden, you will not be able to tell that it moved. Add padding or a sub container to get your desired space back on the left side.
.floatingHeaderBox {
width: 100%;
margin-left:-18px;
}
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)