Forum Mjukvara Programmering och digitalt skapande Tråd

Göra delay i Div-tagg?

1
Skriv svar
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

Senast redigerat
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!

Redigera
Citera flera Citera
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>
Redigera
Citera flera Citera
Permalänk
Inaktiv
●

http://www.w3.org/TR/css3-transitions/

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://jsfiddle.net/Fd8Tg/

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
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 .~

Redigera
Citera flera Citera
Permalänk
Medlem
●

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);
};
Redigera
Citera flera Citera
Permalänk
Medlem
●
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);
};
Gå till inlägget

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);​
Redigera
Citera flera Citera
Permalänk
Medlem
●
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);​
Gå till inlägget

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.

Redigera
Citera flera Citera
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..?

Gå till inlägget

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

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av You:

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

Gå till inlägget

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.

Redigera
Citera flera Citera
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.

Gå till inlägget

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

Redigera
Citera flera Citera
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.

Gå till inlägget

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

ᕦ(ツ)ᕤ

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av 13ers3rk:

Vem använder IE?

Gå till inlägget

Spela inte dum nu.

Visa signatur

5950X, 3090

Redigera
Citera flera Citera
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!

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
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.

Gå till inlägget

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

Redigera
Citera flera Citera
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.

Gå till inlägget

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).

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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).

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Yxskaftet:

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

Gå till inlägget

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.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara