JS Progress Bar

ts230 · 1. März 2009

Hallo!
Wie kann ich mit JS eine ProgressBar machen?
Alles was ich probiert hab geht nicht so wirklich...

Flex · 1. März 2009

Einen Fortschrittsbalken für was?
Bilder laden? Etwas im Hintergrund rechnen lassen? Dateiupload?

ts230 · 1. März 2009

Der soll dafür da sein dass der zeigt das die 15 MB XML-Datei geladen wird.

Ich hab jetzt was zusammengebastelt.
Wie kann ich die ProgressBar so machen,dass der Balken immer hin und her geht(Marquee?)
So dass der hin und her "Schwabbelt"

ts230 · 1. März 2009

Ich (denke?) das "schwabbneln" hingekrigt zu haben!
mit diesem COde:

HTML:

 <marquee behavior="alternate">
   <span class="ProgressBarInner">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </span>
  </marquee>

Nur komischer Weise bewegts ich garnichts! noch nicht einmal mit einem normalen marquee Auf dieser Seite gehts aber!
Noch nicht mal das:

HTML:

 <marquee behavior="alternate">TS</marquee>

Quaese · 1. März 2009

Hi,

funktioniert bei mir tadellos.

Hast du eventuell Positionierungsangaben in ProgressBarInner? Stehen hier relative, absolute oder fixed, verweigert der Balken jede Bewegung.

Ciao
Quaese

ts230 · 1. März 2009

Mein ganzes CSS für dei PBar ist das:

CSS:

.ProgressBar{
/*height:30px;*/
width:600px;
border:1px solid #000;
background:url(img/bgPro.png);
color:#000000;
}
.ProgressBarInner{
background:url(img/Pro.png);
color:orange;
height:28px;
}

Ich sehe dort keine Positionsangaben.
Hier das ganze HTML:

HTML:

<div class="ProgressBar" id="ph2">
  <marquee behavior="alternate">
   <span class="ProgressBarInner">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </span>
  </marquee>
 </div>
 <marquee behavior="alternate">TS</marquee>

Und der Rest meines CSS:

CSS:

body {margin: 0; padding: 0; font: normal 82% sans-serif; background-color:#3399CC;}

h1 {margin: 0; margin-bottom: 0px; padding: 8px; color: #ffffff; background-color: #006633;}

.tagline {font-size: 60%; color: #ffffff;}



#search {float: left; width: 99%; padding: 5px; text-align: left;background-color:#6287BC:}



#bread {margin-top: 0px; margin-bottom: 10px; padding: 5px; border-top: solid 1px #000000; border-bottom: solid 1px #000000; background-color: #6287BC; text-align: center;}

#bread a {margin-left: 2px; margin-right: 2px; color: #000000; text-decoration: none;}

#bread a:hover {text-decoration: underline;}



#left {float: left; width: 18%; border: solid 1px #cccccc; margin-bottom: 15px; background-color: #65B1D7; border-top: 0;}

#left ul {list-style: none; margin: 0; padding: 0;}

#left li {margin: 0px; padding: 0px;}

#left a {display: block; width: 95.5%; margin: 0px; padding: 2px; border: solid 1px #ffffff; color: #0066cc; text-decoration: none;}

#left a:hover {border: solid 1px #0066cc; background-color: #0066cc; color: #ffffff;}

#left h3 {margin: 0; padding: 2px;text-align:center; font-weight: normal; background-color: #6578D7; border-top: solid 1px #000000; border-bottom: solid 1px #000000;}



#content {margin-left: 20%; padding: 0; border-left: solid 1px #cccccc; border-top: 0; border-bottom: solid 1px #ffffff;  background-color: #95CAE4;}

#content h3 {margin: 0; text-align:center; padding: 2px; font-weight: normal; background-color: #8D9DE2; border-top: solid 1px #000000; border-bottom: solid 1px #000000;}

#content p {margin: 5px; color: #000000;}

#content a {color: #0066cc; text-decoration: none;}

#content a:hover {color: #0000ff; text-decoration: underline;}

#content .point {margin: 3%; padding: 0px; border: solid 1px #000000; border-top: 0; background-color: #65B1D7;}

#content .point h3 {background-color:#3499CB;}

#content .code {margin: 3%; padding: 7px; border: solid 1px #cccccc; background-color: #eeeeee; font: normal 100% courier; color: #000000;}



#footer {clear: both; margin-top: 0px; padding: 5px; border: solid 1px #cccccc; background-color: #28749A;}

#footer p {float: left; margin: 0;}

#footer h5 {margin: 0; text-align: right; color: #000000;}

#footer a {margin-left: 2px; margin-right: 2px; color: #000000; text-decoration: none;}

#footer a:hover {text-decoration: underline;}

.calcBtn {width:50px;}
.NormalBtn{border:1px solid black;
background:#95CAE4;
height:25px;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;}
.NormalBtn:hover{border:1px solid black;
background:#B5DAF4;}
.toolbtn{background-color:darkgreen;color:lightgreen;height:23px;border:1px solid #000;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
}
.toolbtn:active{
background-color:green;
color:lightgreen;
height:23px;
border:1px solid #000;}
textarea{background-color: #95CAE4;
border:1px solid black;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
}
#over {background:url(shadowlight.gif) repeat;
	 position: absolute; 
	 left: 0;
	 top: 0;
	 z-index: 100;
	 width: 100%; 
	 height: 100%;
	 margin: 0;
	 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	 -moz-opacity:0.80;
	 -khtml-opacity:0.80;
	 }
#normal {margin: 0; padding: 0; font: normal 82% sans-serif; background-image: url(blocksbg1.jpg); background-attachment: fixed;}



.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.qmmc {position:relative;zoom:1;z-index:10;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}
.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc .qmcbox{cursor:default;display:inline-block;position:relative;z-index:1;}
.qmmc .qmcbox a{display:inline;}
.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none;}
.qmmc li:hover>ul{left:auto;}
#qm0 ul {top:100%;}
#qm0 ul li:hover>ul{top:0px;left:100%;}


	#qmparent{
background-color:#33CC66;	
	}
	#qm0	
	{	
		width:auto;
		background-color:transparent;
	}
	
	#qm0 a	
	{	
	/*	padding:6px 40px 6px 8px;*/
		margin:0px 0px 0px 0px;
		background-color:transparent;
		color:#000000;
		font-size:11px;
		text-decoration:none;
		text-align:left;
	}

	#qm0 a:hover	
	{	
		text-decoration:underline;
	}

	#qm0 li:hover>a	
	{	
		text-decoration:underline;
	}

	body #qm0 .qmactive, body #qm0 .qmactive:hover	
	{	
		background-color:transparent;
		text-decoration:underline;
	}

	#qm0 div, #qm0 ul	
	{	
		padding:5px;
		margin:-1px 0px 0px 0px;
	/*	background-color:#ECF1E9;#PopUpMenu*/
			background-color:transparent;
		border-width:1px;
		border-style:solid;
		border-color:#698A59;
	}
	#qm0 div a, #qm0 ul a	
	{	
		padding:2px 40px 2px 5px;
		background-color:transparent;
		color:#444444;
		border-width:0px;
		border-style:none;
		border-color:#000000;
	}

	#qm0 div a:hover	
	{	
		color:#698A59;
		text-decoration:underline;
	}
	
	#qm0 ul li:hover>a	
	{	
		color:#698A59;
		text-decoration:underline;
	}
	
	body #qm0 div .qmactive, body #qm0 div .qmactive:hover	
	{	
		background-color:transparent;
		color:#698A59;
	}
	
	#qm0 .qmtitle	
	{	
		cursor:default;
		padding:3px 0px 3px 4px;
		color:#444444;
		font-size:11px;
		font-weight:bold;
	}
	
	#qm0 .qmdividerx	
	{	
		border-top-width:1px;
		margin:4px 0px 4px 0px;
		border-color:#BFBFBF;
	}

	#qm0 .qmdividery	
	{	
		border-left-width:1px;
		height:15px;
		margin:4px 2px 0px 2px;
		border-color:#BFBFBF;
	}
	
.PopUpMenu{
border:1px solid black;
background-color:#fff;
z-index:750;
width:100px;
margin:0px 0px 0px 0px;
}
.PopUpMenu ul{
margin:0;
padding:0;}
.PopUpMenu li:hover{background-color:#2648ee;
color:#fff;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
list-style:none;
cursor:pointer;
padding:0px;
margin:1px 0px 1px 0px;
}
.PopUpMenu li{background-color:#fff;
color:#000;
list-style:none;
color:#000;
border-radius:3px;}
.ProgressBar{
/*height:30px;*/
width:600px;
border:1px solid #000;
background:url(img/bgPro.png);
color:#000000;
}
.ProgressBarInner{
background:url(img/Pro.png);
color:orange;
height:28px;
}

Quaese · 1. März 2009

Hi,

funktioniert bei mir anstandslos. Gibts das vielleicht irgendwo online?

Ciao
Quaese

ts230 · 1. März 2009

Ich kann ja mal alle Dateien ZIP-en und hochladen.
Hoffe das hilft.

Quaese · 2. März 2009

Hi,

offensichtlich hat der FF Probleme, wenn ein marquee-Element anschliessend in das Dokument eingebunden wird. Um es zum Laufem zu bekommen, muss es "angestossen" werden. Als Workaround könnte hier das Auslösen eines mouseover-Events dienen, innerhalb dessen mit der Methode start die Bewegung initiiert wird.

Dazu musst du in der main.js folgendes notieren:

Code:

function setVisible(vis,element){
  $("service").style.display="none";
  Effect.Fade("service", {duration: 1});
  document.getElementById("service").innerHTML="Loading...";
  document.getElementById(Elements[element]);
  document.getElementById("service").innerHTML=document.getElementById(Elements[element]).innerHTML;
  document.getElementById("service").style.height=document.getElementById(Elements[element]).style.height;
  window.setTimeout("Effect.Appear('service', {duration: .8})",1010);

  if(Elements[element]=="Settings"){
    var arrMarquee = document.getElementById("service").getElementsByTagName("marquee");
    for(var i=0; i<arrMarquee.length; i++){
      arrMarquee[i].onmouseover = function(){ this.start();}
      myFireEvent("mouseover",arrMarquee[i]);
    }
  }
}

function myFireEvent(eventType, objElem){
  try{
    // Falls der Browser das createEvent-Objekt untestützt (Mozilla, ...)
    if(document.createEvent){
      // Eventobjekt erstellen (hier: Mausevent)
      var objEvt = document.createEvent("MouseEvents");
      // Mausevent initialisieren
      objEvt.initMouseEvent(eventType, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      // Events auslösen
      objElem.dispatchEvent(objEvt);
    // Falls der Browser das createEventObject-Objekt untestützt (IE)
    }else if(document.createEventObject){
      // Eventobjekt erstellen
      var objEvt = document.createEventObject();
      // Eventtype festlegen und an Element gebunden auslösen
      objElem.fireEvent('on' + eventType, objEvt);
    }
  }catch(e){}
}

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese

ts230 · 7. März 2009

Leider geht es immer noch nicht

JS Progress Bar

ts230

Gesperrt

Flex

(aka Felix Jacobi)

ts230

Gesperrt

ts230

Gesperrt

Quaese

Moderator

ts230

Gesperrt

Quaese

Moderator

ts230

Gesperrt

Anhänge

Quaese

Moderator

ts230

Gesperrt

Neue Beiträge