Top
Phpuniverset logo
 

INDHOLD

Forside

Script libary

Job annoncer

Tips og Tricks

Konkurrence

Downloads

Dokumenter

PHP bog shop

Forum

Online udviklere


ARTIKLER

CSS

Diverse

E-handel / annoncer

Grafik

Html

Internet

Javascript

Linux

PHP/MySQL

Programmer

Flash

Søgemaskiner

Windows

C / C++


INFO

Information

Annoncering

Kontakt

Forside Forum Javascript Preloader Animation Object problem.

Preloader Animation Object problem.


 

Preloader Animation Object problem.

DaviDisDK  

Hej 
Jeg er ved at at lave et preloader object. 
Det vil bare ikke som jeg vil håber på at en af jer kan hjælpe mig. 

Jeg har to problemer. 
1. Jeg kan ikke få animationen til at køre uden at definere "var progress = 0;". Hvis jeg
underlader denne globale variabel så bliver this.progress opfattet som Nan. Selom jeg
skulle mene at this.progress = 0; i konstruktoren ville give det samme resultatat?

2.I <div id="progress"> ville jeg gerne oprette id dynamisk så hvert nyt objekt har sit
eget id jeg kan tilgå fra updatePreloader().

Jeg er lige begyndt at lave objekter så det er nyt for mig. 

Javascript:
var progress = 0;
function preloader(showAt)
{
    this.showAt = showAt
    this.timer;
    this.progress = 0;
    this.updatePreloader = updatePreloader;
    this.startPreloader = startPreloader;
    this.stopPreloader = stopPreloader;

    this.show = function show()
    {
        document.getElementById(this.showAt).innerHTML = '<div style="width:200px; height:15px;
border:1px solid #000000;"><div id="progress" style="position:absolute; width:0px;
height:15px; background-color:#0099FF;"></div></div>';
    }

    this.hide = function hide()
    {
        document.getElementById(this.showAt).innerHTML = "";
    }
}

function updatePreloader()
{
    if(this.progress >= 200)
    {
        this.progress = 0;
    }
    this.progress += 5;
    temp = this.progress;
    document.getElementById("progress").style.width = temp + "px"; 
}

function stopPreloader()
{
    this.hide();
    clearTimeout(this.timer);
}

function startPreloader()
{
    this.show();
    this.timer = setInterval("this.updatePreloader()", 100);
}

xhtml:
<script type="text/javascript" language="javascript" src="preloader.js"></script>
<script type="text/javascript">
<!--
var pre = new preloader("main");
var pre1 = new preloader("main2");
-->
</script>
<title>Untitled Document</title>
</head>

<body>
<div id="main"></div>
<a href="#" onclick="pre.stopPreloader()">Stop</a>
<a href="#" onclick="pre.startPreloader()">Start</a>
<div id="main2"></div>
<a href="#" onclick="pre1.stopPreloader()">Stop</a>
<a href="#" onclick="pre1.startPreloader()">Start</a>

</body>
</html>




Dato : 26.10.2007, 15:16

Visninger : 3108

Points : 0

 

Du skal embedde diverse funktioner i "mother" funktionen ellers har de hvert deres "this"
object, der er også et alternativ ved at udbygge "mother" funktionen med prototype eg.

function someBase() {
 this.test = "test";
 function alertMe() {
  alert (this.test);
 }
}

eller:

function someBase() {
 this.test = "test";
}

someBase.prototype.alertMe = function() {
 alert (this.test);
}


Dato : 12.08.2008, 18:00

Svar af : ungamed  

 

hah, det har du jo også gjort, sry var lidt for hurtig..

Dato : 12.08.2008, 18:01

Kommentar af : ungamed  

 

nej, den er vist god nok.. selvom du referere til funktionerne inde i "classen" skal de
stå i den for at have adgang til "this".


Dato : 12.08.2008, 18:20

Kommentar af : ungamed  

 

Nu er det snart et år siden jeg sad med problemet, så det var skægt at se hvor meget man
har rykket sig siden da. 

Men du har ret. :)

Jeg lavede koden lidt om og nu virker det fint, selvom det er lidt ubrueligt så paster jeg
koden ind her hvis nogen skulle side med samme problem en dag- 


OBS: Bemærk hvordan updatePreloader refereres i setInterval metoden da dette er yderst
essentielt.

Kode:
<html>
<head>
<title>A useless preloader</title>
<script type="text/javascript">
<!--
function Preloader(showAt)
{
    //Private Properties
    var root = this;
    var timer;
    var progress = 0;
    var container;
    var bar;
    
    //Create The Preloader Graphics
    container = document.createElement("div");
    container.style.width = "200px";
    container.style.height = "15px";
    container.style.border = "1px solid";
        
    bar = document.createElement("div");
    bar.style.position = "absolute";
    bar.style.width = "0px";
    bar.style.height = "15px";
    bar.style.backgroundColor = "#0099FF";
        
    container.appendChild(bar);
    
    //Private Methods
    function updatePreloader()
    {
        if(progress >= 200)
        {
            root.stopPreloader();
            return;
        }
        progress += 2;
        bar.style.width = progress + "px"; 
    }
    
    //Public Methods
    this.stopPreloader = function()
    {
        document.getElementById(showAt).removeChild(container);
        clearTimeout(timer);
    }
    
    this.startPreloader = function()
    {
        document.getElementById(showAt).appendChild(container);
        timer = setInterval(function(){ updatePreloader(); }, 50);
    }
}


var preloader0 = new Preloader("example0");
var preloader1 = new Preloader("example1");
-->
</script>
</head>

<body>
<div id="example0"></div>
<a href="#" onclick="preloader0.stopPreloader()">Stop</a>
<a href="#" onclick="preloader0.startPreloader()">Start</a>
<div id="example1"></div>
<a href="#" onclick="preloader1.stopPreloader()">Stop</a>
<a href="#" onclick="preloader1.startPreloader()">Start</a>

</body>
</html> 


Dato : 12.08.2008, 22:21

skrevet af : Gæst  

 

Nu er det snart et år siden jeg sad med problemet, så det var skægt at se hvor meget man
har rykket sig siden da. 

Men du har ret. :)

Jeg lavede koden lidt om og nu virker det fint, selvom det er lidt ubrueligt så paster jeg
koden ind her hvis nogen skulle side med samme problem en dag- 


OBS: Bemærk hvordan updatePreloader refereres i setInterval metoden da dette er yderst
essentielt.

Kode:
<html>
<head>
<title>A useless preloader</title>
<script type="text/javascript">
<!--
function Preloader(showAt)
{
    //Private Properties
    var root = this;
    var timer;
    var progress = 0;
    var container;
    var bar;
    
    //Create The Preloader Graphics
    container = document.createElement("div");
    container.style.width = "200px";
    container.style.height = "15px";
    container.style.border = "1px solid";
        
    bar = document.createElement("div");
    bar.style.position = "absolute";
    bar.style.width = "0px";
    bar.style.height = "15px";
    bar.style.backgroundColor = "#0099FF";
        
    container.appendChild(bar);
    
    //Private Methods
    function updatePreloader()
    {
        if(progress >= 200)
        {
            root.stopPreloader();
            return;
        }
        progress += 2;
        bar.style.width = progress + "px"; 
    }
    
    //Public Methods
    this.stopPreloader = function()
    {
        document.getElementById(showAt).removeChild(container);
        clearTimeout(timer);
    }
    
    this.startPreloader = function()
    {
        document.getElementById(showAt).appendChild(container);
        timer = setInterval(function(){ updatePreloader(); }, 50);
    }
}


var preloader0 = new Preloader("example0");
var preloader1 = new Preloader("example1");
-->
</script>
</head>

<body>
<div id="example0"></div>
<a href="#" onclick="preloader0.stopPreloader()">Stop</a>
<a href="#" onclick="preloader0.startPreloader()">Start</a>
<div id="example1"></div>
<a href="#" onclick="preloader1.stopPreloader()">Stop</a>
<a href="#" onclick="preloader1.startPreloader()">Start</a>

</body>
</html> 


Dato : 12.08.2008, 22:45

skrevet af : Gæst  




Login for at skrive et indlæg :



   Brugernavn

Password
 

+ Opret en ny Bruger, Klik her

+ Glemt brugernavn/password

 

Send Artikel/anmeldelse til: phpuni@phpuniverset.dk

Tilbage til oversigt

© Copyright 2000 Propelcom Phpuniverset's politik om personlige oplysninger, artikler & Koder Phpuniverset er optimeret til Mozilla 1024 * 768 Phpuniverset version: 3.0 beta
Webhost : Ignesco.dk

Bund