Verktyg Visningsval
2012-05-08, 13:15   #1

grisapa1

Medlem

Plats: Uppsala

Registrerad: apr 2008

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 redigerad av grisapa1 2012-05-08 klockan 13: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!
grisapa1 är inte uppkopplad
2012-05-08, 13: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>
pettiz är inte uppkopplad
2012-05-08, 13:28   #3

keychain

Avstängd

keychains avatar

Registrerad: feb 2010

http://www.w3.org/TR/css3-transitions/
keychain är inte uppkopplad
2012-05-08, 15:20   #4

Yxskaftet

Medlem

Registrerad: okt 2002

http://jsfiddle.net/Fd8Tg/
Yxskaftet är inte uppkopplad
2012-05-08, 15:24   #5

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:
Ursprungligen inskrivet av keychain Visa inlägg
Det är väl inte att rekommendera att förlita sig helt på css3 transitions med tanke på webbläsarstödet..?
Yxskaftet är inte uppkopplad
2012-05-08, 15:30   #6

KeVVa

Medlem

KeVVas avatar

Plats: Visby (& Bålsta)

Registrerad: nov 2010

Plugga lite Jquery också, så får man lite sexigare hemsidor
http://docs.jquery.com/Tutorials
__________________
DNews: Are Trolls Jerks In Real Life?
~. Citera så jag hittar tillbaka .~
KeVVa är uppkopplad nu
2012-05-08, 15:50   #7

zoolution

Medlem

zoolutions avatar

Registrerad: jul 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);
};
zoolution är inte uppkopplad
2012-05-08, 18:18   #8

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:
Ursprungligen inskrivet av zoolution Visa inlägg
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);​
Yxskaftet är inte uppkopplad
2012-05-08, 21:13   #9

zoolution

Medlem

zoolutions avatar

Registrerad: jul 2005

Citat:
Ursprungligen inskrivet av mel0dy Visa inlägg
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.
zoolution är inte uppkopplad
2012-05-09, 02:06   #10

You

Medlem

Yous avatar

Plats: Göteborg

Registrerad: jan 2007

Citat:
Ursprungligen inskrivet av mel0dy Visa inlägg
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!
You är inte uppkopplad
2012-05-09, 11:33   #11

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:
Ursprungligen inskrivet av You Visa inlägg
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.
Yxskaftet är inte uppkopplad
2012-05-09, 11:42   #12

13ers3rk

Medlem

13ers3rks avatar

Plats: Västerås

Registrerad: jan 2010

Citat:
Ursprungligen inskrivet av mel0dy Visa inlägg
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
13ers3rk är inte uppkopplad
2012-05-09, 11:54   #13

Fronix

Medlem

Fronixs avatar

Plats: Kawlmar

Registrerad: feb 2009

Citat:
Ursprungligen inskrivet av mel0dy Visa inlägg
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!
__________________
Fractal Design Arc | Intel Core i7 2600K | Asus P8Z68 Deluxe | Corsair Vengeance 32GB (1600MHz) DDR III | Intel 320 Series 120GB x 2 | MSI GeForce GTX 590 3GB | DELL U2312HM x 3 --> Galleriet
Fronix är inte uppkopplad
2012-05-09, 12:16   #14

backfeed

Medlem

backfeeds avatar

Plats: Skellefteå

Registrerad: okt 2008

Citat:
Ursprungligen inskrivet av 13ers3rk Visa inlägg
Vem använder IE?
Spela inte dum nu.
__________________
PC-burkar, C-64:or och en Amiga ...
backfeed är inte uppkopplad
2012-05-09, 12:19   #15

backfeed

Medlem

backfeeds avatar

Plats: Skellefteå

Registrerad: okt 2008

Citat:
Ursprungligen inskrivet av Fronix Visa inlägg
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 ...
backfeed är inte uppkopplad
2012-05-09, 12: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.
Yxskaftet är inte uppkopplad
2012-05-09, 12:23   #17

backfeed

Medlem

backfeeds avatar

Plats: Skellefteå

Registrerad: okt 2008

Citat:
Ursprungligen inskrivet av mel0dy Visa inlägg
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 ...
backfeed är inte uppkopplad
2012-05-09, 15:48   #18

You

Medlem

Yous avatar

Plats: Göteborg

Registrerad: jan 2007

Citat:
Ursprungligen inskrivet av Yxskaftet Visa inlägg
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!
You är inte uppkopplad
2012-05-09, 16:39   #19

Yxskaftet

Medlem

Registrerad: okt 2002

Citat:
Ursprungligen inskrivet av You Visa inlägg
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.
Yxskaftet är inte uppkopplad
2012-05-09, 21:35   #20

You

Medlem

Yous avatar

Plats: Göteborg

Registrerad: jan 2007

Citat:
Ursprungligen inskrivet av Yxskaftet Visa inlägg
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.
__________________
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!
You är inte uppkopplad
Senaste nyheterna

Redaktionens senaste nyhetsrubriker

Sök jobb