Permalänk

Hjälp med kod till webbsida

Hej!

Jag håller på att bygga en hemsida till vårt UF-företag men är nybörjare inom html etc. och behöver lite hjälp.

På vår Home-page har jag skapat en liten animation som visas medan sidan laddas, men jag vill inte att denna ska behöva komma upp om användaren kommer från en sida på vår hemsida, alltså trycker på länk till förstasidan. Jag har försökt att få fram domänen på den tidigare besökta sidan med "document.referrer" och liknande men utan att lyckas så därför ber jag er om hjälp.

Koden för animationen kommer nedan:

<div class="loader"></div> <style>.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0); background-size: 10%; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(window).load(function() { setTimeout(function(){ $('.loader').fadeOut('slow', function () { }); },1000); }) </script>

Tack på förhand!

Permalänk
Medlem

Är inte expert på jquery. Men varje gång sidan laddar kommer din kodsnutt ladda.
Det du behöver är troligen en cookie som håller reda på om man besökt sidan eller ej, och startar animationen därefter.

Så, läs på hur man hanterar cookies med jquery.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem
Skrivet av ShaRaKuZz:

Hej!

Jag håller på att bygga en hemsida till vårt UF-företag men är nybörjare inom html etc. och behöver lite hjälp.

På vår Home-page har jag skapat en liten animation som visas medan sidan laddas, men jag vill inte att denna ska behöva komma upp om användaren kommer från en sida på vår hemsida, alltså trycker på länk till förstasidan. Jag har försökt att få fram domänen på den tidigare besökta sidan med "document.referrer" och liknande men utan att lyckas så därför ber jag er om hjälp.

Koden för animationen kommer nedan:
<div class="loader"></div>

<style>.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
background-size: 10%;
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut('slow', function () {
});
},1000);
})
</script>

Tack på förhand!

Lägg till en koll på referrer-variabeln, om den kommer från en domän som inte är er egen så visas den.

<script> $(window).load(function() { if(document.referrer.split('/')[2] !== "bosonprotein.com"){ setTimeout(function(){ $('.loader').fadeOut('slow', function () { }); },1000); } }) </script>

Visa signatur

//Zidde

Permalänk
Medlem

@ShaRaKuZz: Vad är egentligen syftet med animationen? Verkar som att ni bara döljer hela sidan i 1 sekund när den redan har laddat färdigt. Eventet "load" triggas ju just när elementet och dess subelement har laddat och ni kallar det på window-objektet.

Om ni hämtar data asynkront och vill visa en spinner eller likande är det bättre att dölja den när all data tagits emot, alltså i callbacken för .ajax() eller vad ni nu händelsevis använder.

Permalänk
Medlem

^ Säger som ovan, just nu verkar du bara fördröja sidan. Är det någonting som laddas på sidan eller har du animationen bara för "coolheten". Är det nr2, skippa animationen.

Permalänk
Medlem

Försök att inte ha mellanslag i filnamnen, exempelvis http://bosonprotein.com/oxygen%20blue.html och http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif

Ersätt mellanslag med _ eller - i filnamn för att snygga till adresserna.