Permalänk
Medlem

Göra delay i Div-tagg?

Jag håller på med ett skolprojekt där jag ska göra en webbsida med lite grejer.

Hursomehelst så har jag gjort en Div ruta framför ett flashobjekt. Divrutan ska ligga framför flashobjektet vilket det också gör men jag vet inte hur jag lägger delay på div rutan? Flashobjektet ska nämligen spela innan div rutan kommer fram.

Finns det något bra script eller kommand för att göra en divruta osynlig i kanske 1 sekund? Går det göra så att den fadar in efter 1 sekund? Vore ju helt supersnyggt.

Hoppas någon kan hjälpa mig!

Mvh
Andreas Ahlström

Visa signatur

Lista på min dator och kringutrustning hittar du HÄR
Citera för svar! Beskök gärna min Youtubekanal! Där lägger jag upp musik jag skapar!

Permalänk
Medlem

en snabb google sökning.
detta kanske kan vara något

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Showing a div on Time delay using javascript</title> <style type="text/css"> body { background-color:#FFF; } /* style for hidden div */ #hide { border: 1px solid black; background-color:#C09; width: 400px; height: 400px; padding: 10px; margin: 0 auto; } </style> </head> <body> <p>DIV ON TIME DELAY </p> <!-- HIDDEN DIV SET TO DISPLAY AFTER 2 SECONDS - THIS CAN BE CHANGED BELOW --> <div id="hide" style="visibility: hidden">CONTENT OF DIV GOES HERE</div> <script type="text/javascript"> function showIt() { document.getElementById("hide").style.visibility = "visible"; } setTimeout("showIt()", 2000); // after 2 sec </script> <p> We'll see if this works ! Div set to show after 2 seconds. <p> Ba da bing! I think it does... ;-) tested in FFox and IE7</p> </body> </html>

Permalänk
Permalänk
Permalänk

Det är väl inte att rekommendera att förlita sig helt på css3 transitions med tanke på webbläsarstödet..?

Permalänk
Medlem

Plugga lite Jquery också, så får man lite sexigare hemsidor
http://docs.jquery.com/Tutorials

Visa signatur

~. Citera så jag hittar tillbaka .~

Permalänk

Knåpade ihop detta lite kvickt. Easy peasy!

Kalla på metoden nedan, funktionen kallas med en delay på 1000ms, därefter fade:as den in med en animation på 500ms.

/** * Fade in a element after 1000 ms. * @param $element {Object} jQuery element object. */ var showElement = function($element) { "use strict"; // Call anonymous function after 1000 ms. setTimeout(function() { // Fade in the element, animation duration 500 ms. $element.fadeIn(500, function() { // Do something when faded in... }); }, 1000); };

Permalänk
Skrivet av zoolution:

Knåpade ihop detta lite kvickt. Easy peasy!

Kalla på metoden nedan, funktionen kallas med en delay på 1000ms, därefter fade:as den in med en animation på 500ms.

/** * Fade in a element after 1000 ms. * @param $element {Object} jQuery element object. */ var showElement = function($element) { "use strict"; // Call anonymous function after 1000 ms. setTimeout(function() { // Fade in the element, animation duration 500 ms. $element.fadeIn(500, function() { // Do something when faded in... }); }, 1000); };

Varför använda setTimeout om du ändå ska använda jQuery?
Då tyckte jag att min kodsnutt var smidigare (som gör exakt samma sak):

$('#elementToFade').delay(1000).fadeIn(500);​

Permalänk
Skrivet av mel0dy:

Varför använda setTimeout om du ändå ska använda jQuery?
Då tyckte jag att min kodsnutt var smidigare (som gör exakt samma sak):

$('#elementToFade').delay(1000).fadeIn(500);​

Tittade inte på ditt fiddle exempel. Anledningen till att jag använder setTimeout är enbart ren vana. Har aldrig saknat ett alternativ till setTimeout och därefter inte letat efter en sådan funktion i jQuery.

Man lär sig något nytt varje dag, ditt exempel är givetvis mer kompakt och passande för ändamålet.

Permalänk
Medlem
Skrivet av mel0dy:

Det är väl inte att rekommendera att förlita sig helt på css3 transitions med tanke på webbläsarstödet..?

Du menar det nästan heltäckande stödet?

Permalänk
Skrivet av You:

Så hade förlitat dig helt på css3 transitions för denna uppgift, trots det att IE < 10 inte har stöd för det?
Det innebär ju att man ändå måste använda JavaScript för att visa något med fördröjning.

Permalänk
Medlem
Skrivet av mel0dy:

Så hade förlitat dig helt på css3 transitions för denna uppgift, trots det att IE < 10 inte har stöd för det?
Det innebär ju att man ändå måste använda JavaScript för att visa något med fördröjning.

Vem använder IE?

Visa signatur

PSU: Cooler Master V850 SFX Case: Lian Li O11 Mini
GPU:
RTX 4090 TUF OC CPU: Ryzen 5950x RAM: G.Skill 32GB Trident Z Neo Motherboard: Asus ROG Strix X570-i
Onkyo TX-RZ820 | Advance Paris X-A160 EVO | Dynavoice DF-8

Permalänk
Medlem
Skrivet av mel0dy:

Så hade förlitat dig helt på css3 transitions för denna uppgift, trots det att IE < 10 inte har stöd för det?
Det innebär ju att man ändå måste använda JavaScript för att visa något med fördröjning.

Vad är IE, aldrig hört talas om det?

CSS3 stöds av de flesta browsers som är något vettigt idag, och om läraren tycker att det ska stödja detta IE... Då kan han ta sig och dra dit mossan växer!

Visa signatur

ᕦ(ツ)ᕤ

Permalänk
Medlem
Skrivet av 13ers3rk:

Vem använder IE?

Spela inte dum nu.

Visa signatur

5950X, 3090

Permalänk
Medlem
Skrivet av Fronix:

Vad är IE, aldrig hört talas om det?

CSS3 stöds av de flesta browsers som är något vettigt idag, och om läraren tycker att det ska stödja detta IE... Då kan han ta sig och dra dit mossan växer!

Om det inte vore så att IE fortfarande är flitigt använd av väldigt många, så hade argumentet hållit. Tyvärr är det inte så i dagsläget. Att ignorera IE är tämligen dumt.

I dagsläget är jQuery bästa alternativet, förutom för paranoida individer som har javascript avstängt förstås.

Visa signatur

5950X, 3090

Permalänk

Ok, det är jobbigt att utveckla till IE.
Så vi ignorerar en av de största webbläsarna.
Ska börja göra så på jobbet också.
Hoppas bara inte hantverkaren som kommer hem till mig i eftermiddag tar genvägar pga lathet.

Permalänk
Medlem
Skrivet av mel0dy:

Ok, det är jobbigt att utveckla till IE.
Så vi ignorerar en av de största webbläsarna.
Ska börja göra så på jobbet också.
Hoppas bara inte hantverkaren som kommer hem till mig i eftermiddag tar genvägar pga lathet.

Precis. Jag tror jag skiter i IE jag också. Det är ju ändå bara 100% av vår kundbas på jobbet som kör IE.

Visa signatur

5950X, 3090

Permalänk
Medlem
Skrivet av Yxskaftet:

Så hade förlitat dig helt på css3 transitions för denna uppgift, trots det att IE < 10 inte har stöd för det?
Det innebär ju att man ändå måste använda JavaScript för att visa något med fördröjning.

Ja, det skulle jag. Dels är 55% stöd bland användarna idag och 100% stöd i nästa generations webbläsare rätt så bra, och dels så handlar det om funktionalitet som absolut inte är kritisk för applikationen (och dessutom degraderar fint när funktionalitet saknas).

Permalänk
Skrivet av You:

Ja, det skulle jag. Dels är 55% stöd bland användarna idag och 100% stöd i nästa generations webbläsare rätt så bra, och dels så handlar det om funktionalitet som absolut inte är kritisk för applikationen (och dessutom degraderar fint när funktionalitet saknas).

Nu har vi ju ingen aning om funktionaliteten är kritisk eller inte.
Om du inte använder js så kommer ju elementet som ska visas med fördröjning visas med en gång utan fördröjning så att bakomliggande aldrig syns. Eller så får man välja att inte visa elementet alls.

Permalänk
Medlem
Skrivet av Yxskaftet:

Nu har vi ju ingen aning om funktionaliteten är kritisk eller inte.

Om det är "kritisk funktionalitet" att dölja ett Flash-objekt med något annat element så anser jag att man gör något fel. Oavsett så går det att bygga runt genom att som du säger inte visa elementet, alltid visa det eller dylikt beroende på hur det ser ut.