I need a slider like this one
http://itunes.apple.com/us/app/sparrow/id417250177?mt=12 (on Screenshots)
http://storymatters.com/showcase/there-is-an-app-for-that#slideshowWrap
Ideas?
That's just a custom scroll bar that works on webkit browsers: http://css-tricks.com/examples/WebKitScrollbars/ Here's an example
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
IE has a way to style scrollbars too, not as customizable though...
body {
scrollbar-arrow-color:#ffffff;
scrollbar-base-color: #ffffff;
scrollbar-dark-shadow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3d-light-color:#ffffff;
}
So, if you want this to work across browsers, you're out of luck. The only way to do it is to write your own custom html for a scroll bar with the divs set to overflow: hidden
Related
I have the body/html of my page set up like this with CSS:
body, html {
height: 100%;
margin: 0px;
padding: 0px;
font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, " sans-serif";
font-size: 14px;
display: flex;
flex-direction: column;
background: #282828;
min-width: 100%;
min-height: 100%;
}
I then have a popup that I occasionally append to the page (body) using JQuery. This popup is DIV as follows:
.error_popup_container {
width: 400px;
height: auto;
padding: 10px;
background: #454545;
border: solid #fafafa 2px;
border-radius: 1px;
z-index: 3;
position: absolute;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
left: 50%;
top: 50%;
margin: -50px 0 0 -200px; /* 50px = half of height, 140px = half of width */
}
The issue is that the div only appears in the middle of the page if the user hasn't scrolled.
If the user has scrolled the div will be out of view.
I need the div to appear in the middle of the page no matter how far they have scrolled. Any ideas?
I've played around a ton but haven't found the cause. I'm sure it's something simple.
Agree with the position: fixed; and to keep it centered, I would use:
/*modal-wrapper*/ {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
If the modal will ever be longer than a small viewport, you could add a media query breakpoint with an overflow-y: scroll; property.
I think you probably just want to use position: fixed
I managed to customize the scrollbar area with pure css but haven't been able to figure out how to make it so that the scroll area (white) is hidden. I only want the bar itself, is this possible?
fiddle: https://jsfiddle.net/jzhang172/2qh2yy2o/
jQuery(document).ready(function(){
jQuery('.scrollbar-inner').scrollbar();
jQuery('html').scrollbar();
});
body{
height:1000px;
background:blue;
}
.scrollbar-inner{
height:100px;
width:100%;
overflow:auto;
}
.content{
height:1000px;
width:100%;
}/*************** SCROLLBAR BASE CSS ***************/
/* For the "inset" look only */
html {
overflow: auto;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
background:transparent;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #545454;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.10/jquery.scrollbar.min.js
"></script>
<div class="scrollbar-inner"><div class="content"></div></div>
I'm stuck on this one. Anyone up for a css puzzle?
I need the element displaying the scrolling text to remain fixed while scrolling down the page but then to be able to move if scrolled horizontally.
I made a jsfiddle to demo the issue. You can find it here: http://jsfiddle.net/6tPpE/
HTML:
<body>
<section id="front_page">
<div id = "ticker_placer">
<div id="ticker_holder">
<div id="ticker_ribbon">
<ul id ="ticker">
<li>Scrolling on Jin & Juice</li>
</ul>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
width: 700px;
height: 700px;
background:yellow;
}
#ticker_placer {
position: absolute;
left: 0px;
width: 68%;
min-width: 871px;
z-index: 1;
}
#ticker_holder {
position: fixed;
width: 68%;
min-width: 871px;
}
#ticker_ribbon {
position:relative;
padding: 0 10px;
margin: 0 0 0 -10px;
width: 400px;
height: 35px;
background: rgba(0,0,0,.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow:
inset 0 1px rgba(255,255,255,.3),
inset 0 10px rgba(255,255,255,.2),
inset 0 10px 20px rgba(255,255,255,.25),
inset 0 -15px 30px rgba(0,0,0,.3),
inset 0 -1px 6px rgba(0,0,0,.3);
}
#ticker_ribbon:before, #ticker_ribbon:after {
content:" ";
border-top:10px solid rgba(0,0,0,.6);
position:absolute;
bottom:-10px;
}
#ticker_ribbon:before {
border-left:10px solid transparent;
left:0;
}
#ticker_ribbon:after {
border-right:10px solid transparent;
right:0;
}
.tickercontainer {
position: absolute;
left: 0;
width: 400px;
}
.mask {
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 1000px;
font: 10px;
font-family: "KeplerStd-Regular";
src: url('Fonts/KeplerStd-Regular.ttf') format('truetype');
list-style-type: none;
color: white;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 5px 0;
padding: 0;
}
section#front_page {
position: relative;
margin: 0 2.5%;
width: 400px;
height: 400px;
background: green;
box-shadow: 0 0 10px -2px #AAAAAA;
}
$(window).scroll(function(){
$('#ticker_holder').css('left',-$(window).scrollLeft()+26);
});
This sets the positon of the div whenever it scrolls left..
Using scrollLeft() I get the amount of scrolling and this 26px is for positioning it properly..so setting the left property..
Working Fiddle:http://jsfiddle.net/6tPpE/1/
You need to make the body the same width as the fixed element:
body {
width: 400px;
}
So I wanted to create an overlay so I created a div called 'background' where in there is a div inside it called 'overlay-box', which is the one that will popup. So my problem is that since the page is scrollable, I want the popup to be in the center whether the screen's focus is in the bottom part or in the top part of the page.
.background {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-box{
background: #fff;
padding: 1%;
width: 50%;
position: relative;
top: 15%;
left: 50%;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.background {position:fixed} change this in background.
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.