I would like to create an indeterminate HTML+CSS progress bar so it looks like the one on Vista:
(source: microsoft.com)
I would like to:
horizontally adjust it to progress bar width (minimum and maximum width may be defined)
don't use Javascript but rather just animated GIF
having only one moving indicator on the whole width
Any suggestions how to do this?
NO, NO, NO! It is possible
Using CSS overflow: hidden and keyframe, it can be possible.
For the keyframe, I used from left:-120px(width of the glowing object) to left:100%
The structure I used:
<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>
The updated, compact structure using :before and :after:
<div class="loader7">
<span></span>
<div class="greenlight"></div>
</div>
The gradient, masking, glowing and all the effects cost an expensive structure. If anyone has a better idea, please let me know.
At this date, webkit only solution(the ellipse mask for the glow):
Added SVG mask for Firefox and other browsers that do not support -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/
css - width:100%
no Javascript means you will have to do it with html5 which is a bit trickier. An animated GIF would work only if you decide to make the bar fixed-width (otherwise the gif will be skewed)
to move it: javascript or html5
The easiest way: javascript (like it or not... ;) )
GIF-only solution
Vista's indeterminate progress bar doesn't loop right after it goes off on the right...
So I could create a wide enough GIF image and when progress bar would be narrow it would take longer for it to loop and when it'd be wider it loops again sonner. :)
Time of each repeat is the same in both cases but in narrow bar it takes less to get to the end than on the wider ones.
Related
http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
What approach to use to make an odd shaped menu on a website, like attached? Each piece of the circle should be a separate link. Hovering the mouse should be rather precise, especially near the middle. (The absolute 20px middle could be no link at all, if not posible to be 100% precise)
I've seen irregular menus made using overlapping rectangles, like here: http://www.vanityclaire.com/
Shapes are overlapping, but menu is made from rectangles, a little cheating takes place. However, in my case, the amount of overlapping is too much to use any such technique. Is there any chance to do it in browser/device compatible way, other than just use flash?
Actually, you can do it using CSS3 - see my demo: http://dabblet.com/gist/3116939 //
EDIT: version that also works in IE9 http://dabblet.com/gist/3117278
The idea is to have a div .pie with "slices"
<ul class="pie">
<li class="slice" id="s1">
<a class="slice-contents" href="#slice1"></a>
</li>
<li class="slice" id="s2">
<a class="slice-contents" href="#slice2"></a>
</li>
<!-- and so on -->
</div>
You make the pie to be a disc using border-radius: 50%;
You skew and rotate each slice. You bring back the contents of the slices to a non-skewed rectangular shape (which can also prove useful if you want to have text on the slices) and then you set the background.
SVG can do it. But not available in old browsers.
You can try image maps, or SVG (with a fallback / polyfill).
Wondering if I can get some help here. In the fiddle I have most of the necessary markup.
http://jsfiddle.net/theDawckta/54z3J/
I cannot figure out how to make the columnItem in column 1 to extend to the bottom of the row. What I would like to see in column 1 is the green fill up the red row part while leaving the black content the same size.
I think it's impossible, so good luck, I have had enough of this.
I actually cut out quite a bit of your code, so apologies in advance if you needed those extra divs (but it shouldn't be too difficult to add them in later). Also, you may want to test this in IE--I'm not sure what version this cuts out on (but I think it works in IE7+).
HTML
<div class="row">
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
</div>
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
<div class="columnItem">
<p>Content</p>
</div>
</div>
</div>
CSS
.row {
overflow:hidden;
}
.column {
float:left;
width:50%;
padding-bottom:10000px;
margin-bottom:-10000px;
}
/* You can remove everything under this comment */
.columnItem {
padding:10px;
margin:5px;
background:blue;
}
.column:nth-of-type(1) {
background:yellow;
}
.column:nth-of-type(2) {
background:pink;
}
How it works
It's really quite simple. Each row hides everything past where the actual content is (with overflow:hidden; while each column pushes itself downward 10,000 pixels with padding-bottom:10000px;, and then back up again with margin-bottom:-10000px;. The number of pixels can be increased or decreased, just make sure it's large enough to fit your content.
P.S. - Anything is possible, the impossible just takes longer. ~ NSA
Omer Ben-Nahum suggested tables, but I'm not sure that is how you want to mark up your content. There really is no way to achieve this effect using CSS, but you can use some workarounds that give the site the appearance that you were able to get it to work. Look into using Faux Columns as an alternative to tables.
bfroh's solution is one i've used several times before, but in general I usually use a background image to emulate situations like this (where the content in one div isn't making it tall enough)
The wrapping container's background image could have the background color for the entire left div and just set that to 'repeat-y'
Dealing with these sort of issues (in my experience) either pretty much entails the hack that bfroh posted or a solution like this.
Hope it helped!
You cannot do it using css, but you can do this via javascript method.
I wouldn't recommend that because it means that you will have to run the script each time the content changes and I'm not sure you always know when it does.
If this issue is important to you, I suggest you use tables.
I have a problem,no matter what browser I use(after tests,I found this problem only exists in IE6, and I guess it may be related to the iframe), a black vertical bar always show up when I open the page at first time,but the problem just occur on some PCs and notebooks,and when I move the browser, the black bar changes or disappears at the meantime.I snaped two screenshots:
http://vilence.host152.ftp18.cn/pics/p1.jpg http://vilence.host152.ftp18.cn/pics/p1.jpg
http://vilence.host152.ftp18.cn/pics/p2.jpg http://vilence.host152.ftp18.cn/pics/p2.jpg
Check for the hardware problem first and then check for the borders and border colors sometimes we fail to manage the div and their alignments specially with complex structure of the position:abosule or relative or fixed, I frames does i have some kind of things. But divs does lots of same type mistakes..
do to give wrapper for every div like
<div id="content-wrapper" class="outer-cls wrapper">
<div id="content" class="inner-cls inner">CONTENT HERE</div>
</div>
this technique make debugging and themeing easy . I was having same type of problem lot of time. ;)
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.