Loading effect in JavaScript with CSS sample code

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Exequiel
    Contributor
    • Jul 2012
    • 288
    #1

    Loading effect in JavaScript with CSS sample code

    posted my code for loading effect... My only problem is that, my code doesn't work in Internet Explorer
    Code:
    <html>
<head>
<title>Progress Bar Sampol ni Zick</title>
<script type="text/javascript">
var prog_width = 500;
 
function loading()
 {
   var lod = document.getElementById('progress_bar');
   var E    = lod.style.width.match(/\d+/);
 
   if (E == prog_width)
    	{window.location="http://facebook.com/exequiel.s.vibar";} 
			lod.style.width = parseInt(E) + 1 + 'px';
 }
 
 var E_load;
window.onload = function() {
  E_load = setInterval("loading();", 10);
}
</script>
<style>
#progress_bar{
	 background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); background: -webkit-radial-gradient(circle, #09C, #09C, #FFF,#09C, #09C, #09C, #FFF); background: -moz-radial-gradient(circle, #09C, #09C, #FFF,#09C, #09C, #09C, #FFF);
  	background: -ms-radial-gradient(circle, #09C, #09C, #FFF,#09C, #09C, #09C, #FFF); border-radius: 1em 9em; border-radius-topleft: 1em; border-radius-topright: 7em;
	}
#border{ border: 3px solid #069; width:500px; height:30px; overflow:hidden; border-radius: 1em 9em; border-radius-topright: 7em; border-radius-topleft: 1em; box-shadow: 0px 5px 1px #888;
	}
</style>
    </head>
<body>
        <div id="border">
            <div id="progress_bar" style="height:30px; width:0px;"/> 
        </div>
</body>
</html>
    Last edited by Niheel; Jul 23 '12, 05:15 AM.
    Tags: None
    • Claus Mygind
      Contributor
      • Mar 2008
      • 571
      #2
      First off you are trying to load a constant and not a function when you put quotes around it
      this
      E_load = setInterval("loading();", 10);

      should be this
      E_load = setInterval(loa ding(), 10);

      Next I am not sure if you want this to be in the if statement or not but your indentation seems to indicate that you do

      if (E == prog_width)
      {window.locatio n="http://facebook.com/exequiel.s.viba r";}
      lod.style.width = parseInt(E) + 1 + 'px';

      The command is not between the { } brackets of the if statement. Not that this will change the execution but perhaps it should look like this

      if (E == prog_width)
      {window.locatio n="http://facebook.com/exequiel.s.viba r";}
      lod.style.width = parseInt(E) + 1 + 'px';


      If it suppose to be part of the if statement then it should be coded like this.

      if (E == prog_width)
      {window.location ="http://facebook.com/exequiel.s.viba r";
      lod.style.width = parseInt(E) + 1 + 'px';}

      Lastly your timer interval is very small and would hardly be noticed at all 1000 is one second

      I don't have the image or object you are trying to load so I cannot replicate what you are trying to do.

        Comment

        • Exequiel
          Contributor
          • Jul 2012
          • 288
          #3
          hehe... thank you for the response.... I just posted my code for loading effect... My only problem is that, my code doesn't work in Internet Explorer.... :)

            Comment

            • Claus Mygind
              Contributor
              • Mar 2008
              • 571
              #4
              Are you trying to delay the display with setInterval. If you are, you may want to try setTimeOut instead. That should work in IE.

                Comment

                • Exequiel
                  Contributor
                  • Jul 2012
                  • 288
                  #5
                  setTimeOut? What is it and How? :)

                    Comment

                    • lyodmichael
                      New Member
                      • Jul 2012
                      • 75
                      #6
                      Code:
                      <html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('I am displayed after 3 seconds!')",3000)
}
</script>
</head>
<body>

<form>
<input type="button" value="Display timed alertbox!" onclick="timedMsg()" />
</form>

</body>
</html>
                      btw, your effect and code is great thx.

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          it looks very close to this: http://bytes.com/topic/javascript/in...e-progress-bar cant test it in latest IE - since i dont use any windows machine - but basicly it should work.

                          as i understand the intention of the code above - it should display a progress bar and when its at 100% it loads a new page. what exactly is not working, and in which version of IE it doesn't work?

                            Comment

                            • Exequiel
                              Contributor
                              • Jul 2012
                              • 288
                              #8
                              file version: 8.0.7600.16385? . . That's the version of my IE. . . I think my code doesn't work in all version of IE . . .

                                Comment

                                • gits
                                  Recognized Expert Moderator Expert
                                  • May 2007
                                  • 5390
                                  #9
                                  this seems like a plain css issue when you just use:

                                  Code:
                                  #progress_bar {
    background: red;
}
                                  it works. so its not the code - its the style that doesn't work in IE. may be have a look here.
                                  Last edited by gits; Jul 24 '12, 08:22 AM.

                                    Comment

                                    Previous template Next
                                    Working...