Göra delay i Div-tagg?

2012-05-08, 12:15

#1

grisapa1

Medlem

Plats: Uppsala

Registrerad: apr 2008

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 redigerad av grisapa1 2012-05-08 klockan 12:26.

__________________
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!

Anmäl

Citera

Gilla

2012-05-08, 12:25

#2

pettiz

Medlem

Plats: Norrköping

Registrerad: jun 2008

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>

Anmäl

Citera

Gilla

2012-05-08, 12:28

#3

keychain

Medlem

Registrerad: feb 2010

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

Anmäl

Citera

Gilla

2012-05-08, 14:20

#4

Yxskaftet

Medlem

Registrerad: okt 2002

http://jsfiddle.net/Fd8Tg/

Anmäl

Citera

Gilla

2012-05-08, 14:24

#5

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:

Ursprungligen inskrivet av keychain

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

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

Anmäl

Citera

Gilla

2012-05-08, 14:30

#6

KeVVa

Medlem

Plats: Visby (& Bålsta)

Registrerad: nov 2010

Plugga lite Jquery också, så får man lite sexigare hemsidor

http://docs.jquery.com/Tutorials

__________________

~. Citera så jag hittar tillbaka .~

Riktig dubstep!

Anmäl

Citera

Gilla

2012-05-08, 14:50

#7

zoolution

Medlem

Registrerad: jun 2005

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);
};

Anmäl

Citera

Gilla

2012-05-08, 17:18

#8

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:

Ursprungligen inskrivet 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);

Anmäl

Citera

Gilla

2012-05-08, 20:13

#9

zoolution

Medlem

Registrerad: jun 2005

Citat:

Ursprungligen inskrivet 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.

Anmäl

Citera

Gilla

2012-05-09, 01:06

#10

You

Medlem

Plats: Göteborg

Registrerad: jan 2007

Citat:

Ursprungligen inskrivet 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?

__________________
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!

Anmäl

Citera

Gilla

2012-05-09, 10:33

#11

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:

Ursprungligen inskrivet av You

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

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.

Anmäl

Citera

Gilla

2012-05-09, 10:42

#12

13ers3rk

Medlem

Plats: Västerås

Registrerad: jan 2010

Citat:

Ursprungligen inskrivet 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?

__________________

GPU: ATI RADEON HD5850 CPU: i5 2500k
Motherboard: P8P67 Pro Rev. 3 RAM: Corsair 4x2 CL9 XMS3
PSU: XFX XXX EDITION 650w Case: Cooler Master 690 II

Anmäl

Citera

Gilla

2012-05-09, 10:54

#13

Fronix

Medlem

Plats: Kawlmar

Registrerad: feb 2009

Citat:

Ursprungligen inskrivet 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!

Anmäl

Citera

Gilla

2012-05-09, 11:16

#14

backfeed

Medlem

Plats: Skellefteå

Registrerad: okt 2008

Citat:

Ursprungligen inskrivet av 13ers3rk

Vem använder IE?

Spela inte dum nu.

__________________
PC-burkar, C-64:or och en Amiga ...

Anmäl

Citera

Gilla

2012-05-09, 11:19

#15

backfeed

Medlem

Plats: Skellefteå

Registrerad: okt 2008

Citat:

Ursprungligen inskrivet 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.

__________________
PC-burkar, C-64:or och en Amiga ...

Anmäl

Citera

Gilla (1)

2012-05-09, 11:21

#16

Yxskaftet

Medlem

Registrerad: okt 2002

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.

Anmäl

Citera

Gilla

2012-05-09, 11:23

#17

backfeed

Medlem

Plats: Skellefteå

Registrerad: okt 2008

Citat:

Ursprungligen inskrivet 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.

__________________
PC-burkar, C-64:or och en Amiga ...

Anmäl

Citera

Gilla

2012-05-09, 14:48

#18

You

Medlem

Plats: Göteborg

Registrerad: jan 2007

Citat:

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

__________________
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!

Anmäl

Citera

Gilla

2012-05-09, 15:39

#19

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:

Ursprungligen inskrivet 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.

Anmäl

Citera

Gilla

2012-05-09, 20:35

#20

You

Medlem

Plats: Göteborg

Registrerad: jan 2007

Citat:

Ursprungligen inskrivet 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.