Αλλαγή κειμένου σε σελίδα βάσει χρόνου.

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

Αλλαγή κειμένου σε σελίδα βάσει χρόνου.

Δημοσίευση από nikos-manias » 03 Φεβ 2010 11:53

Καλημέρα σε όλους.

Προσπαθώ να ενσωματώσω στη σελίδα μου ένα "εφε" που
βρήκα στη σελίδα http://www.finesoftware.eu/
Συγκεκριμένα θέλω να φτιάξω και εγώ την αρχική έτσι ώστε να
αλλάζει συνεχώς το κείμενο που έχω τοποθετήσει μέσα σε κάποιο div με άλλο,
μετά από κάποια sec. Και αυτή η διαδικασία να γίνεται συνεχόμενα και κυκλικά.
Όντας όμως εντελώς άπειρος με τη Javascript νομίζω ότι ψάχνω σε λάθος μέρος!

Έχω σκεφτεί ότι μπορώ να δημιουργήσω π.χ. 3 div με τα διαφορετικά κείμενα που θέλω και να εμφανίζω κάθε φορά μόνο το ένα αλλάζοντας τις ιδιότητες τους από το Javascript.

Θα μπορούσε κάποιος να μου δώσει κάποιες γενικές οδηγίες (για παράδειγμα κάποιες βασικές συναρτήσεις που θα μπορούσα να χρησιμοποιήσω) ώστε να μπορέσω να ξεκινήσω έστω το ψάξιμο προς τη σωστή γραμμή;

Σας ευχαριστώ πολύ.

Άβαταρ μέλους
inFamous
Δημοσιεύσεις: 388
Εγγραφή: 07 Φεβ 2010 12:38
Επικοινωνία:

Αλλαγή κειμένου σε σελίδα βάσει χρόνου.

Δημοσίευση από inFamous » 07 Φεβ 2010 20:54

Αν και δεν το έχω δοκιμάσει πιστευών πως αν το κάνεις στην php με μία switch ;)
Εικόνα

nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

Αλλαγή κειμένου σε σελίδα βάσει χρόνου.

Δημοσίευση από nikos-manias » 10 Φεβ 2010 11:27

Βρήκα στο internet ένα javascript το οποίο δουλεύει μια χαρά και κατάφερα να κάνω αυτό που θέλω.
Δυστυχώς όμως,ενώ σε όλους τους browsers(firefox,chrome,safari,opera) δουλεύει κανονικά στον IE η εναλλαγή δεν γίνεται ομαλά αλλά τdiv το οποίο προκειται να "σβήσει" επικαλύπτει το div που θα εμφανιστεί.

Παραθέτω και τον κώδικα του αρχειου Javascript.
Δυστυχώς έχω κολλήσει για τα καλα εδω και μερικές μέρες ψάχνοντας για μια λύση!

Αν γνωρίζει κάποιος τι μπορώ να κάνω θα με βοηθήσει πάρα πολύ!!!

Σας ευχαριστώ.



window.onload = fadeContent;

function fadeContent()
{
var cf = new Crossfader( new Array("panel1","panel2","panel3"), 700, 5000 );
//document.write("call made!");
}

var useBSNns;
var categories=new Array("cat1","cat2","cat3");

if (useBSNns)
{
if (typeof(bsn) == "undefined")
bsn = {}
var _bsn = bsn;
}
else
{
var _bsn = this;
}





_bsn.Crossfader = function (divs, fadetime, delay )
{
this.nAct = -1;
this.aDivs = divs;

for (var i=0;i<divs.length;i++)
{
document.getElementById(divs).style.opacity = 0;
//document.getElementById(divs).style.position = "absolute";
document.getElementById(divs).style.filter = "alpha(opacity=0)";
document.getElementById(divs).style.visibility = "hidden";


}

this.nDur = fadetime;
this.nDelay = delay;

this._newfade();
}


_bsn.Crossfader.prototype._newfade = function()
{
if (this.nID1)
clearInterval(this.nID1);

this.nOldAct = this.nAct;
this.nAct++;
if (!this.aDivs[this.nAct]) this.nAct = 0;

if (this.nAct == this.nOldAct)
return false;

document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
document.getElementById(categories[this.nAct]).style.backgroundColor="#EBEBEB";

this.nInt = 50;
this.nTime = 0;

var p=this;
this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}


_bsn.Crossfader.prototype._fade = function()
{
this.nTime += this.nInt;

var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
var op = ieop / 100;
document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";


if (this.nOldAct > -1)
{
document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
document.getElementById(categories[this.nOldAct]).style.backgroundColor="#ffffff";
}

if (this.nTime == this.nDur)
{
clearInterval( this.nID2 );

if (this.nOldAct > -1)
document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";


var p=this;
this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
}
}



_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
{
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}


MasterX
Δημοσιεύσεις: 92
Εγγραφή: 13 Οκτ 2009 13:29
Επικοινωνία:

Αλλαγή κειμένου σε σελίδα βάσει χρόνου.

Δημοσίευση από MasterX » 17 Φεβ 2010 14:45

inFamous έγραψε:Αν και δεν το έχω δοκιμάσει πιστευών πως αν το κάνεις στην php με μία switch ;)
Δε νομίζω να μπορεί να γίνει με php, γιατί θέλεις η αλλαγή να γίνεται χωρίς να ξαναφορτώνεται η σελίδα.
Θα το έκανα ώς εξής.

Στo header

Κώδικας: Επιλογή όλων

<script>
var text=new Array&#40;&#41;;
text&#91;&#93;="keimeno 1";
text&#91;&#93;="keimeno 2";
text&#91;&#93;="keimeno 3";
var current=0;

function change&#40;&#41;
&#123;
    document.getElementId&#40;"text"&#41;.innerHTML=text&#91;current&#93;;
   current++;
   if&#40;current>text.length&#40;&#41;&#41;
    current=0;
   setTimeOut&#40;"change&#40;&#41;",20000&#41;;  ====>η αλλαγή να γίνει κάθε 20sec
&#125;
</script>

Κώδικας: Επιλογή όλων

<body>
<span id='text'></span>
<script>change&#40;&#41;;</script>
</body>

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες