The HTML5 progress Element

The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.

Here is the basic markup for the progress element:

<progress></progress>

As per the standard defined by W3C, the progress element represents the completion progress of a task. A progress element must have both a start tag (i.e. <progress>) and an end tag (i.e. </progress>), even though it looks like a replaced element (like an input). This is good though, as it helps with fallback content as we'll cover later.

Apart from the global attributes, it can have two more attributes:

States of progress bar

A progress bar can be in two states - indeterminate and determinate.

1. Indeterminate

Indeterminate state of the progress bar in Chrome 29 on Mac OS 10.8

Based on your combination of browser and operating system, the progress bar can look different. Zoltan "Du Lac" Hawryluk covers the cross browser behavior of progress element in great depth in his article on HTML5 progress bars (which is definitely worth reading). Wufoo has some screenshots of how it looks on other operating systems on their support page for progress.

It's pretty easy to target and style an indeterminate progress bar because we know that it doesn't contain the value attribute. We can make use of CSS negation clause :not() to style it:

progress:not([value]) {
       /* Styling here */
    }

2. Determinate

Throughout this article, we'll only focus on styling the determinate state of the progress bar. So let's change the state by adding the max and value attribute.

<progress max="100" value="80"></progress>

Without applying any CSS, the progress bar looks like this in Chrome 29 on Mac OS 10.8.

Determinate state of the progress bar in Chrome 29 on Mac OS 10.8
Note that only adding the max attribute doesn't change the state of the progress bar because the browser still doesn't know what value to represent.

This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let's not worry about the fallback techniques for supporting older browsers that don't understand the progress element.

Styling progress bars

We can target determinate progress bars using the progress[value] selector. Using progress only is fine as long as you know that you do not have any indeterminate progress bars in your markup. I tend to use the former because it provides clear distinction between the two states. Just like any other element we can add dimensions to our progress bar using width and height:

progress[value] {
      width: 250px;
      height: 20px;
    }

This is where the fun part ends and things get complicated because each category of browsers provide separate pseudo classes to style the progress bar. To simplify things, we don't really care about which versions of each browser support the progress element, because our fallback technique will take care of the rest. We classify them as follows:

WebKit/Blink (Chrome/Safari/Opera)

Google Chrome, Apple Safari and the latest version of Opera (16+) falls into this category. It is evident from the user agent stylesheet of webkit browsers, that they rely on -webkit-appearance: progress-bar to style the appearance of progress element.

User-agent stylesheet of webkit browsers

To reset the default styles, we simply set -webkit-appearance to none.

progress[value] {
      /* Reset the default appearance */
      -webkit-appearance: none;
       appearance: none;
    
      width: 250px;
      height: 20px;
    }
Progress bar appearance after reset

On further inspecting the progress element in Chrome Developer Tools, we can see how the spec is implemented.

Chrome Developer Tools Snapshot

WebKit/Blink provides two pseudo classes to style the progress element:

First we'll style the -webkit-progress-bar (the container):

progress[value]::-webkit-progress-bar {
      background-color: #eee;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
Styling progress bar container

Next we'll style the -webkit-progress-value (the bar) with multiple gradient backgrounds. One for striping, one for top to bottom shadowing, and one for left to right color variation. We'll use the -webkit- prefix for the gradients since we're using it for the progress bar itself anyway.

progress[value]::-webkit-progress-value {
      background-image:
    	   -webkit-linear-gradient(-45deg, 
    	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
    	                           rgba(0,0, 0, .1) 66%, transparent 66%),
    	   -webkit-linear-gradient(top, 
    	                           rgba(255, 255, 255, .25), 
    	                           rgba(0, 0, 0, .25)),
    	   -webkit-linear-gradient(left, #09c, #f44);
    
        border-radius: 2px; 
        background-size: 35px 20px, 100% 100%, 100% 100%;
    }
Styling progress bar value

Adding Animation

At the time of writing only WebKit/Blink browsers support animations on progress element. We'll animate the stripes on -webkit-progress-value by changing the background position.

@-webkit-keyframes animate-stripes {
       100% { background-position: -100px 0px; }
    }
    
    @keyframes animate-stripes {
       100% { background-position: -100px 0px; }
    }

And use this animation on the -webkit-progress-value selector itself.

-webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;

Pseudo Elements

At the time of writing only WebKit/Blink browsers support pseudo elements ::before and ::after on progress bar. By simply looking at the progress bar, it is not possible to tell the actual value. We can solve this problem by displaying the actual value right at the tail-end of the progress bar using either ::before or ::after.

progress[value]::-webkit-progress-value::before {
      content: '80%';
      position: absolute;
      right: 0;
      top: -125%;
    }
Pseudo elements in action

Interestingly, content: attr(value) doesn't work on progress bars. However, if you explicitly specify the text inside the content attribute, it works! I haven't been able to find out the reason behind this behavior. Since this works only on WebKit/Blink browsers, there is no good reason to embed content inside pseudo elements, at least for now.

Similarly, ::after is used to create nice little hinge effect at the end of the progress bar. These techniques are experimental and not really recommended to be used if you are aiming for cross-browser consistency.

progress[value]::-webkit-progress-value::after {
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      border-radius: 100%;
      right: 7px;
      top: 7px;
      background-color: white;
    }

2. Firefox

Similar to WebKit/Blink, Firefox also uses -moz-appearence: progressbar to paint the progress element.

Firebug screenshot

By using appearence: none we can get rid of the default bevel and emboss. This unfortunately leaves behind a faint border in Firefox which can be removed by using border: none. This also solves the border issue with Opera 12.

progress[value] {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      
      /* Get rid of default border in Firefox. */
      border: none;
      
      /* Dimensions */
      width: 250px;
      height: 20px;
    }
Faint border in Firefox and Opera

Firefox provides a single pseudo class (-moz-progress-bar) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox.

progress[value]::-moz-progress-bar { 
      background-image:
        -moz-linear-gradient(
          135deg, 
          transparent 33%, 
          rgba(0, 0, 0, 0.1) 33%, 
          rgba(0, 0, 0, 0.1) 66%, 
          transparent 66% 
        ),
        -moz-linear-gradient(
          top, 
          rgba(255, 255, 255, 0.25), 
          rgba(0, 0, 0, 0.25)
        ),
        -moz-linear-gradient(
          left, 
          #09c, 
          #f44
        );
    
      border-radius: 2px; 
      background-size: 35px 20px, 100% 100%, 100% 100%; 
    }

Firefox doesn't support ::before or ::after pseudo classes on progress bar, nor does it allow CSS3 keyframe animation on progress bar, which gives us a slightly reduced experience.

3. Internet Explorer

Only IE 10+ natively supports progress bar, and only partially. It only allows changing the color of the progress bar value. IE implements value of the progress bar as the color attribute rather than the background-color.

progress[value]  {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
    
      /* Get rid of default border in Firefox. */
      border: none;
    
      /* Dimensions */
      width: 250px;
      height: 20px;
    
      /* For IE10 */
      color: blue; 
    }

What about browsers that don't support them?

The progress element is natively supported in: Firefox 16+, Opera 11+, Chrome, Safari 6+. IE10+ is partially supports them. If you want to support older browsers, you've got two options.

1. Lea Verou's HTML5 progress polyfill

Lea Verou's excellent polyfill adds almost full support for Firefox 3.5-5, Opera 10.5-10.63, IE9-10. This also adds partial support in IE8. It involves including progress-polyfill.js file in your HTML and adding CSS selectors that the script file uses. To know more about its usage, check out the CSS source code of the project page.

2. HTML fallback

This is my preferred (no-js) approach. It makes use of a common technique that is also used by audio and video elements.

<progress max="100" value="80">
        <div class="progress-bar">
            <span style="width: 80%;">Progress: 80%</span>
        </div>
    </progress>

Simulate the look and feel of progress bar using div and span inside the progress tag. Modern browsers will ignore the content inside the progress tag. Older browsers that cannot identify progress element will ignore the tag and render the markup inside it.

.progress-bar {
      background-color: whiteSmoke;
      border-radius: 2px;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    
      width: 250px;
      height: 20px;
      
      position: relative;
      display: block;
    }
      
    .progress-bar > span {
      background-color: blue;
      border-radius: 2px;
    
      display: block;
      text-indent: -9999px;
    }

It is fairly common to use both the techniques in conjunction and it is perfectly safe for production sites. Once you get hold of styling a single progress bar, then adding styles for multiple progress bars is merely an exercise which can be accomplished using classes.

See the Pen Skillset using HTML5 progress bars with CSS3 animations by Pankaj Parashar (@pankajparashar) on CodePen

The demo should run fine for all the browsers including Internet Explorer (down to IE 8). The progress bar color is blue in all the versions of Internet Explorer. Opera 11 and 12 doesn't permit changing the progress bar color. Hence, it shows the default green color. The demo uses additional markup to display some meta information about the progress bar and the percentage value.

For additional reading, check out the HTML5 Doctor article. It covers some similar ground but has some bits about a few additional attributes as well as how to update the bar with JavaScript if you need that.

The HTML5 progress Element is a post from CSS-Tricks

]]> The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an... http://css-tricks.com/html5-element/ https://my3.my.umbc.edu/api/v0/pixel/news/34838/guest@my.umbc.edu/f7691509f92cef07a061c4d8f482137c/api/pixel article css html javascript mysql php sql tricks Web Developer - Build Group https://my3.my.umbc.edu/groups/retired-583 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197 Web Developer - Build Group 0 0 true Wed, 28 Aug 2013 15:09:50 -0400 Wed, 28 Aug 2013 15:09:50 -0400 The HTML5 progress Element

The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.

Here is the basic markup for the progress element:

<progress></progress>

As per the standard defined by W3C, the progress element represents the completion progress of a task. A progress element must have both a start tag (i.e. <progress>) and an end tag (i.e. </progress>), even though it looks like a replaced element (like an input). This is good though, as it helps with fallback content as we'll cover later.

Apart from the global attributes, it can have two more attributes:

States of progress bar

A progress bar can be in two states - indeterminate and determinate.

1. Indeterminate

Indeterminate state of the progress bar in Chrome 29 on Mac OS 10.8

Based on your combination of browser and operating system, the progress bar can look different. Zoltan "Du Lac" Hawryluk covers the cross browser behavior of progress element in great depth in his article on HTML5 progress bars (which is definitely worth reading). Wufoo has some screenshots of how it looks on other operating systems on their support page for progress.

It's pretty easy to target and style an indeterminate progress bar because we know that it doesn't contain the value attribute. We can make use of CSS negation clause :not() to style it:

progress:not([value]) {
       /* Styling here */
    }

2. Determinate

Throughout this article, we'll only focus on styling the determinate state of the progress bar. So let's change the state by adding the max and value attribute.

<progress max="100" value="80"></progress>

Without applying any CSS, the progress bar looks like this in Chrome 29 on Mac OS 10.8.

Determinate state of the progress bar in Chrome 29 on Mac OS 10.8
Note that only adding the max attribute doesn't change the state of the progress bar because the browser still doesn't know what value to represent.

This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let's not worry about the fallback techniques for supporting older browsers that don't understand the progress element.

Styling progress bars

We can target determinate progress bars using the progress[value] selector. Using progress only is fine as long as you know that you do not have any indeterminate progress bars in your markup. I tend to use the former because it provides clear distinction between the two states. Just like any other element we can add dimensions to our progress bar using width and height:

progress[value] {
      width: 250px;
      height: 20px;
    }

This is where the fun part ends and things get complicated because each category of browsers provide separate pseudo classes to style the progress bar. To simplify things, we don't really care about which versions of each browser support the progress element, because our fallback technique will take care of the rest. We classify them as follows:

WebKit/Blink (Chrome/Safari/Opera)

Google Chrome, Apple Safari and the latest version of Opera (16+) falls into this category. It is evident from the user agent stylesheet of webkit browsers, that they rely on -webkit-appearance: progress-bar to style the appearance of progress element.

User-agent stylesheet of webkit browsers

To reset the default styles, we simply set -webkit-appearance to none.

progress[value] {
      /* Reset the default appearance */
      -webkit-appearance: none;
       appearance: none;
    
      width: 250px;
      height: 20px;
    }
Progress bar appearance after reset

On further inspecting the progress element in Chrome Developer Tools, we can see how the spec is implemented.

Chrome Developer Tools Snapshot

WebKit/Blink provides two pseudo classes to style the progress element:

First we'll style the -webkit-progress-bar (the container):

progress[value]::-webkit-progress-bar {
      background-color: #eee;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
Styling progress bar container

Next we'll style the -webkit-progress-value (the bar) with multiple gradient backgrounds. One for striping, one for top to bottom shadowing, and one for left to right color variation. We'll use the -webkit- prefix for the gradients since we're using it for the progress bar itself anyway.

progress[value]::-webkit-progress-value {
      background-image:
    	   -webkit-linear-gradient(-45deg, 
    	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
    	                           rgba(0,0, 0, .1) 66%, transparent 66%),
    	   -webkit-linear-gradient(top, 
    	                           rgba(255, 255, 255, .25), 
    	                           rgba(0, 0, 0, .25)),
    	   -webkit-linear-gradient(left, #09c, #f44);
    
        border-radius: 2px; 
        background-size: 35px 20px, 100% 100%, 100% 100%;
    }
Styling progress bar value

Adding Animation

At the time of writing only WebKit/Blink browsers support animations on progress element. We'll animate the stripes on -webkit-progress-value by changing the background position.

@-webkit-keyframes animate-stripes {
       100% { background-position: -100px 0px; }
    }
    
    @keyframes animate-stripes {
       100% { background-position: -100px 0px; }
    }

And use this animation on the -webkit-progress-value selector itself.

-webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;

Pseudo Elements

At the time of writing only WebKit/Blink browsers support pseudo elements ::before and ::after on progress bar. By simply looking at the progress bar, it is not possible to tell the actual value. We can solve this problem by displaying the actual value right at the tail-end of the progress bar using either ::before or ::after.

progress[value]::-webkit-progress-value::before {
      content: '80%';
      position: absolute;
      right: 0;
      top: -125%;
    }
Pseudo elements in action

Interestingly, content: attr(value) doesn't work on progress bars. However, if you explicitly specify the text inside the content attribute, it works! I haven't been able to find out the reason behind this behavior. Since this works only on WebKit/Blink browsers, there is no good reason to embed content inside pseudo elements, at least for now.

Similarly, ::after is used to create nice little hinge effect at the end of the progress bar. These techniques are experimental and not really recommended to be used if you are aiming for cross-browser consistency.

progress[value]::-webkit-progress-value::after {
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      border-radius: 100%;
      right: 7px;
      top: 7px;
      background-color: white;
    }

2. Firefox

Similar to WebKit/Blink, Firefox also uses -moz-appearence: progressbar to paint the progress element.

Firebug screenshot

By using appearence: none we can get rid of the default bevel and emboss. This unfortunately leaves behind a faint border in Firefox which can be removed by using border: none. This also solves the border issue with Opera 12.

progress[value] {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      
      /* Get rid of default border in Firefox. */
      border: none;
      
      /* Dimensions */
      width: 250px;
      height: 20px;
    }
Faint border in Firefox and Opera

Firefox provides a single pseudo class (-moz-progress-bar) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox.

progress[value]::-moz-progress-bar { 
      background-image:
        -moz-linear-gradient(
          135deg, 
          transparent 33%, 
          rgba(0, 0, 0, 0.1) 33%, 
          rgba(0, 0, 0, 0.1) 66%, 
          transparent 66% 
        ),
        -moz-linear-gradient(
          top, 
          rgba(255, 255, 255, 0.25), 
          rgba(0, 0, 0, 0.25)
        ),
        -moz-linear-gradient(
          left, 
          #09c, 
          #f44
        );
    
      border-radius: 2px; 
      background-size: 35px 20px, 100% 100%, 100% 100%; 
    }

Firefox doesn't support ::before or ::after pseudo classes on progress bar, nor does it allow CSS3 keyframe animation on progress bar, which gives us a slightly reduced experience.

3. Internet Explorer

Only IE 10+ natively supports progress bar, and only partially. It only allows changing the color of the progress bar value. IE implements value of the progress bar as the color attribute rather than the background-color.

progress[value]  {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
    
      /* Get rid of default border in Firefox. */
      border: none;
    
      /* Dimensions */
      width: 250px;
      height: 20px;
    
      /* For IE10 */
      color: blue; 
    }

What about browsers that don't support them?

The progress element is natively supported in: Firefox 16+, Opera 11+, Chrome, Safari 6+. IE10+ is partially supports them. If you want to support older browsers, you've got two options.

1. Lea Verou's HTML5 progress polyfill

Lea Verou's excellent polyfill adds almost full support for Firefox 3.5-5, Opera 10.5-10.63, IE9-10. This also adds partial support in IE8. It involves including progress-polyfill.js file in your HTML and adding CSS selectors that the script file uses. To know more about its usage, check out the CSS source code of the project page.

2. HTML fallback

This is my preferred (no-js) approach. It makes use of a common technique that is also used by audio and video elements.

<progress max="100" value="80">
        <div class="progress-bar">
            <span style="width: 80%;">Progress: 80%</span>
        </div>
    </progress>

Simulate the look and feel of progress bar using div and span inside the progress tag. Modern browsers will ignore the content inside the progress tag. Older browsers that cannot identify progress element will ignore the tag and render the markup inside it.

.progress-bar {
      background-color: whiteSmoke;
      border-radius: 2px;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    
      width: 250px;
      height: 20px;
      
      position: relative;
      display: block;
    }
      
    .progress-bar > span {
      background-color: blue;
      border-radius: 2px;
    
      display: block;
      text-indent: -9999px;
    }

It is fairly common to use both the techniques in conjunction and it is perfectly safe for production sites. Once you get hold of styling a single progress bar, then adding styles for multiple progress bars is merely an exercise which can be accomplished using classes.

See the Pen Skillset using HTML5 progress bars with CSS3 animations by Pankaj Parashar (@pankajparashar) on CodePen

The demo should run fine for all the browsers including Internet Explorer (down to IE 8). The progress bar color is blue in all the versions of Internet Explorer. Opera 11 and 12 doesn't permit changing the progress bar color. Hence, it shows the default green color. The demo uses additional markup to display some meta information about the progress bar and the percentage value.

For additional reading, check out the HTML5 Doctor article. It covers some similar ground but has some bits about a few additional attributes as well as how to update the bar with JavaScript if you need that.

The HTML5 progress Element is a post from CSS-Tricks

]]> The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an... http://css-tricks.com/html5-progress-element/ https://my3.my.umbc.edu/api/v0/pixel/news/35031/guest@my.umbc.edu/8d2c9d3ad626840680da35673375ac5d/api/pixel article css html javascript mysql php sql tricks Web Developer - Build Group https://my3.my.umbc.edu/groups/retired-583 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197 Web Developer - Build Group 0 0 true Wed, 28 Aug 2013 15:09:50 -0400 Bits Blog: Researcher Controls Another Person’s Brain Over the Internet Researchers at the University of Washington were able to send a brain signal from one person through the Internet to control another person’s hand.
    






]]> Researchers at the University of Washington were able to send a brain signal from one person through the Internet to control another person’s hand.      http://bits.blogs.nytimes.com/2013/08/27/researcher-controls-another-persons-brain-over-the-internet/?partner=rss&emc=rss https://my3.my.umbc.edu/api/v0/pixel/news/34842/guest@my.umbc.edu/f129d2cce390ffceb070038cd51c8c9a/api/pixel devices internet new technology york Web Developer - Build Group https://my3.my.umbc.edu/groups/retired-583 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197 Web Developer - Build Group 0 0 true Wed, 28 Aug 2013 14:51:18 -0400 Thu, 29 Aug 2013 18:09:20 -0400 Box Tips Box has a URL that is catered to tips and tools to help with using the product.  Here is the link:  http://success.box.com .  If interested take a look.  Also remember you can find information in the Campus wiki at http://wiki.umbc.edu .

Thanks,
DPS IT
http://dpsit.umbc.edu
]]> Box has a URL that is catered to tips and tools to help with using the product.  Here is the link:  http://success.box.com .  If interested take a look.  Also remember you can find information in... http://success.box.com https://my3.my.umbc.edu/api/v0/pixel/news/34837/guest@my.umbc.edu/381754fb884b8a281c93059ccdd78e3a/api/pixel Division of Professional Studies (DPS) - Internal https://my3.my.umbc.edu/groups/retired-127 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/xsmall.png?1445265821 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/original.jpg?1445265821 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/xxlarge.png?1445265821 https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/xlarge.png?1445265821 https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/large.png?1445265821 https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/medium.png?1445265821 https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/small.png?1445265821 https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/xsmall.png?1445265821 https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/127/197b422c8f32c16605c5a4a1b25659b5/xxsmall.png?1445265821 Division of Professional Studies (DPS) - Internal https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/xxlarge.jpg?1377715293 https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/xlarge.jpg?1377715293 https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/large.jpg?1377715293 https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/medium.jpg?1377715293 https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/small.jpg?1377715293 https://assets2-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/xsmall.jpg?1377715293 https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/034/837/95a4c08b069b1c01250ffeda1f8e7f7b/xxsmall.jpg?1377715293 0 0 true Wed, 28 Aug 2013 14:43:14 -0400 Where is my cable jack?

Page edited by Carlos Mckinney

Icon

In Chesapeake, Potomac, Susquehanna and Patapsco, the cable jack is located on the bottom or side of the communications box.  In the new wing of Patapsco, the jack may be on the drywall (not cinder block) walls. In Erickson and Harbor, one jack is located in each common room.  In Hillside, Terrace, Westhills and Walker Avenue Apartments, the jack is located in the common or living room.

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online · View Changes Online
]]> Page edited by Carlos Mckinney Icon In Chesapeake,... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189559 https://my3.my.umbc.edu/api/v0/pixel/news/34828/guest@my.umbc.edu/24c0c0b2bb347f8bf58f4787aadbaac5/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 1 0 true Wed, 28 Aug 2013 13:59:21 -0400 Tue, 03 Sep 2013 16:54:15 -0400 Can I use a cable TV splitter?

Page added by Carlos Mckinney

While we cannot officially recommend the use of a splitter, if there are multiple televisions in a dorm room or apartment a splitter may be used.  Make sure the splitter is of a high quality, and is rated for at least 860 MHz.  Finally, use a splitter that provides as many ports as you need, but no more.

Icon

Remember:  a two-port splitter cuts the signal strength of each port in half.  A four port cuts each port in half again, and so on.  From our testing, a four-port splitter should still provide a usable signal to all four ports, provided all other considerations have been optimized.

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online
]]> Page added by Carlos Mckinney While we cannot officially recommend the use of a splitter, if there are multiple televisions in a... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189557 https://my3.my.umbc.edu/api/v0/pixel/news/34829/guest@my.umbc.edu/1376b55476ff15f058584672386bcab7/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 0 0 true Wed, 28 Aug 2013 13:55:50 -0400 What kind of coaxial cable should I use?

Page added by Carlos Mckinney

It is recommended that a high quality RG6 coaxial cable is used.  The cable should be free of kinks, nicks and cuts to damage it for maximum signal quality.  Also, the length of the cable should be minimized to provide the best possible signal.

Icon

Coaxial cables may be purchased from the UMBC Bookstore, or from any number of retailers or big box stores in the area.

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online
]]> Page added by Carlos Mckinney It is recommended that a high quality RG6 coaxial cable is used.  The cable should be free of kinks,... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189554 https://my3.my.umbc.edu/api/v0/pixel/news/34830/guest@my.umbc.edu/75925a67eece74a0f34e90f4adfbad40/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 0 0 true Wed, 28 Aug 2013 13:53:15 -0400 I have a TiVo. Will it work with the system?

Page edited by Carlos Mckinney

A series 2 TiVo device should work with the system, provided an external converter box is used.  Unfortunately the Series 4 TiVo does not have the inputs for an external converter box.

Icon

Unfortunately, we do not currently have CableCARDs (as most Clear QAM systems don't). Additionally, since we do not have CableCARDs, the TiVo Series 4 device cannot tune to any channels.  At this time, the Series 4 TiVo is incompatible, but we are still investigating ways to get all TiVos to work as intended. 

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online · View Changes Online
]]> Page edited by Carlos Mckinney A series 2 TiVo device should work with the system, provided an external converter box is used.... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189551 https://my3.my.umbc.edu/api/v0/pixel/news/34831/guest@my.umbc.edu/b2076c388ca4e57151d93ebaf6d0d05f/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 0 0 true Wed, 28 Aug 2013 13:48:07 -0400 So many channels and I still don't see my favorite one. How do I request it?

Page added by Carlos Mckinney

Requesting a new channel is easy.  Put in an RT ticket listing the channel name, and any compelling arguments for it.

Icon

While we will do our best to honor the request, some channels may not be available due to technical limitations, availability, or cost.

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online
]]> Page added by Carlos Mckinney Requesting a new channel is easy.  Put in an RT ticket listing the channel name, and any compelling... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189549 https://my3.my.umbc.edu/api/v0/pixel/news/34832/guest@my.umbc.edu/e23f577e2d1a4483295bf04a2d189da9/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 0 0 true Wed, 28 Aug 2013 13:45:29 -0400 I'm not sure if I got all the channels. How many do we have?

Page added by Carlos Mckinney

About 146.

Icon

There may be a slight variance since local channels have been known to add or remove sub-channels from time to time.  When this happens, the system is updated automatically.

Rate this Article

Was this helpful? Yes | No | Correct or Suggest an Article | Request Help

View Online
]]> Page added by Carlos Mckinney About 146. Icon... https://wiki.umbc.edu/pages/viewpage.action?pageId=41189547 https://my3.my.umbc.edu/api/v0/pixel/news/34833/guest@my.umbc.edu/2e73357bb97e13a0b6f9bdf06ca78475/api/pixel faq UMBC FAQ https://my3.my.umbc.edu/groups/retired-428 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/original.png?1787842653 https://assets4-my.umbc.edu/images/avatars/group/1/xxlarge.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/xlarge.png?1787842653 https://assets1-my.umbc.edu/images/avatars/group/1/large.png?1787842653 https://assets2-my.umbc.edu/images/avatars/group/1/medium.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/small.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xsmall.png?1787842653 https://assets3-my.umbc.edu/images/avatars/group/1/xxsmall.png?1787842653 UMBC FAQ 0 0 true Wed, 28 Aug 2013 13:43:49 -0400