• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Focus nach bestimmter Zeit setzen...

N

Nullahnung

New member
Einen schönen guten Tag,

ich möchte einem lieben Menschen zu Weihnachten in Form einer Homepage was basteln. Allerdings habe ich von JavaScript keine Ahnung. Ich kenn ein bischen Php aber mit dem geht mein Vorhaben nicht. Nun suche ich eine einfache Lösung.

Code: 
<div id="box1"></div>
mit folgenden Css:
Code: 
#box1 {height: 60px; width:60px; background-color:green}
#box1:focus {background-color:red; transform: rotate(30deg)}
Nun möchte ich, dass nach einer bestimmten Zeit (z.B. 10sec) diese Box den focus erhält, und nach einer bestimmten Zeit soll dieses Element den focus verlieren bzw. ein anderes Element den focus erhalten.

Ich weiß, dass dies Grundlagen sind, aber ich habe davon keinen Plan...

Vielen Dank schon mal im Vorraus.
 
wenn ich mich jetzt nicht brutal täusche gibt es kein :focus auf ein DIV, lediglich auf inputs textareas und selects
 
sorry, ich habe schon
<script>
function setFocusToTextBox(){
document.getElementById("box1").focus();
}
</script>
Zum Vergrößern anklicken....
eingefügt und ausprobiert...damit geht das bisher... nur halt nicht automatisch nach zeit und so...
ich würde halt das ganze gern mit css machen, da kenn ich mich besser aus... nur den "Anschubser" brauche ich von JavaScript...
 
TecEye schrieb:
wenn ich mich jetzt nicht brutal täusche gibt es kein :focus auf ein DIV, lediglich auf inputs textareas und selects
Zum Vergrößern anklicken....
i.d.R. gibt es keinen Focus auf Divs, da hast du Recht. Allerdings bin ich mir gerade unsicher, ob das auch für divs mit contenteditable=true gilt.

@Nullahnung: Was genau möchtest du denn machen? - Focus auf Div-Elemente legen macht keinen Sinn, davon hat der Benutzer nichts.
 
danke mal für die Diskussion....

ich kann es mit Martin Luther King halten... I have dream...
also der Benutzer soll nur zuschauen... es ist eine persönliche Geschichte...der Benutzer ruft die Seite auf, und hört eine Musik und dazu möchte ich ein paar kleine Animationen machen. Mit Css krieg ich das hin, das ist nicht das Problem, allerdings soll der Benutzer nicht rumklicken, sondern nur zuschauen... deshalb war mein Gedanke, die verschiedenen Elemente mit focus anzusprechen, dann läuft die css ab und dann kommt das nächste... bis zum Ende vom Lied...

contenteditable=true geht es den focus zu setzen....
 
Zuletzt bearbeitet:
so jetzt hab ich mich schlau gemacht... und mit jQuery beschäftigt...
so geht das....
Code: 
$(document).ready(function(){
	setTimeout(function() {	$('video').addClass('videoRotate');}, 5000);
});
Nun würde ich gern nach einer bestimmten Zeit eine neue Css-Klasse aufrufen:
Code: 
setTimeout(function() {	$('video').addClass('videoOrginal');}, 15000);
aber wie das geht hab ich keine Ahnung...so geht es aufjeden Fall nicht:
Code: 
$(document).ready(function(){
	setTimeout(function() {	$('video').addClass('videoRotate');}, 5000);
	setTimeout(function() {	$('video').addClass('videoOrginal');}, 15000);
});
 
Also ich kann nicht erkennen, warum der letzte Code nicht funktionieren sollte. Poste doch mal den Zusammenhang bzw. beschreibe, was Du genau damit vorhast.
 
also ich will nach laden der Seite die 2 Funktionen nacheinander aufrufen....also nach 5sec rotiert es und verkleinert sich und dann soll nach weiteren 10 sec das orginal wieder erscheinen...
css:
Code: 
.videoOrginal {
transform: scale(1.0,1.0);
transition: 5s
}
.videoRotate {
transform: rotate(720deg)scale(0.1,0.1);
transition: 5s
}
html:
Code: 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	setTimeout(function() {	$('video').addClass('videoRotate');}, 5000);
	setTimeout(function() {	$('video').addClass('videoOrginal');}, 15000);

});
</script>
</head>
<body>
<video id="video" src="<?echo $_SESSION['imagePath']?>morgen.mp4" autoplay muted></video>
</body>
</html>
 
du mußt die vorherige classe auch löschen und danach die neue anhängen
stichwort removeClass()
 
achso.... es wird nicht die alte class ersetzt sondern noch zusätzlich hinzugefügt....
wieder was gelernt....gut ich beschäftige mich grad mal ein paar Stunden damit

gibt es kein Befehl der die alte class einfach ersetzt...?
 
Zuletzt bearbeitet:
nee musste so machen
Code: 
$('video').removeClass('videoRotate');
$('video').addClass('videoOrginal');
kannste auch nicht anhängen, finde es eigentlich ganz gut, weil man eine bestimmte Classe löschen kann wenn du zB mehrere hast

oder so : http://api.jquery.com/toggleclass/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben