sneeuw op je website

Status
Niet open voor verdere reacties.
Hoi Droomwever,
Voordat ik aan het script toekom, eerst even wat andere dingen.

Ontbrekende images
Ik weet niet of het je al is opgevallen, maar als ik de site online bekijk zijn alle achtergrond-afbeeldingen weggevallen: het logo, de kop, enz.:

bellee-ff.png

site in Firefox

Als je je site thuis lokaal bekijkt, zie hem wel compleet. Dit zit 'm in het stylesheet, daar staat bv. bij de body {...}:
Code:
body {
    ...
    background: #523724 url(file:///C|/Users/MSI/Documents/cssetoile/images/bellet-body-bg.png) repeat-y;
    ...
}
Ook bij de #header, de #logolink:hover, de #paginatitelBackground en de #benedenBackground staan de verwijzingen naar de afbeeldingen er zo in.
Maar ... die verwijzen naar bestanden op jouw harde schijf (file:///C|), en als ik de site online ga bekijken, probeert de browser de afbeeldingen bij mij in de aangegeven map op mijn harde schijf te zoeken.
En daar staan ze natuurlijk niet, want die map heb ik niet en de afbeeldingen ook niet! :rolleyes:

Nu staan de afbeeldingen al wel online in de images-map, dus je hoeft er in het stylesheet www.belle-etoile.be/belleetoile-styles.css alleen maar dit van te maken:
Code:
body {
    ...
    background: #523724 url(images/bellet-body-bg.png) repeat-y;
    ...
}
En voor de andere op dezelfde manier: dan kan iedereen ze zien! :)

=======

Html-errors
Er staat ook op de pagina:
HTML:
<body id="home"><overzicht.php>
<!--  begin snow-->
<script language="JavaScript1.2"
 src="snow2.js"
 type="text/javascript"></script> 
 <!-- end snow  -->
... maar:
  • Een element <overzicht.php> bestaat niet en geeft een html-fout. Waarschijnlijk wordt daar een commentaar-regel bedoeld, dan hoort er nog wat bij en dan is het wel goed: <!-- overzicht.php -->
  • Het script snow2.js wordt door de browser vergeefs op de server gezocht (daar staat het niet op), en bovendien is het hier overbodig, want eronder staat het sneeuwscript op de pagina zelf (misschien met php er in gezet, dat kan ik niet zien).
Het begin van de pagina hoeft dan alleen maar te zijn:
HTML:
<body id="home"><!-- overzicht.php -->

=======

PHP-include?
Er staat nu in de broncode die ik ontvang:
HTML:
<div id="content">
  <div id="nieuwsregel">
<div id="nieuwsregel">
		<p>Spetterende eindejaars actie zie <a href="nieuwsbrief.php">NIEUWSBRIEF</a></p>
	</div>
</div>
Dat is een keer de <div id="nieuwsregel"> en zijn </div> te veel.
Waarschijnlijk staat op je php-pagina:
HTML:
<div id="content">
    <div id="nieuwsregel">
        <?php include("includes/nieuwsregel.htm"); ?>
    </div>
... enz.
of iets dergelijks, en staat de <div> er ook in de nieuwsregel-fragment bij:
HTML:
<div id="nieuwsregel">
     <p>Spetterende eindejaars actie zie <a href="nieuwsbrief.php">NIEUWSBRIEF</a></p>
</div>
Dan komt ie er inderdaad dubbel in. De <div id="nieuwsregel"> en de </div> kan dan helemaal uit het fragment, dat dan alleen maar wordt:
HTML:
<p>Spetterende eindejaars actie zie <a href="nieuwsbrief.php">NIEUWSBRIEF</a></p>

======

Sneeuwvlokjes-script
Dan het script.
mijn vraag is nu hoe kan ik alle pagina's met 1 bestand bereiken
kan dat via CSS en aparte include regel bijv in CSS ?
  • Nee, niet met CSS, en er is ook geen aparte include met PHP voor nodig.
  • Het kan later op elke pagina aangehaakt worden zoals nu de niet bestaande snow2.js wordt aangehaakt.

Maar weer eerst iets anders!
Het dwarrelende sneeuwvlokjes-script doet het wel in Internet Explorer (in ieder geval in IE versie 7) ...
... maar het doet het niet in andere browsers! :shocked:


  • In Firefox, Chrome, Opera en Safari kom er maar één zielig sneeuwvlokje, helemaal onderaan (en het valt ook niet): zoals in het screenshot hierboven.

Ai! Dat kan kloppen, want het is een behoorlijk verouderd script (van 6 jaar geleden) en het heeft script-fouten die Internet Explorer door de vingers ziet maar de andere browsers niet. Die werken volgens de standaarden, en wat fout is wordt dan niet toegepast.

Ik zal kijken of ik er iets beters van kan maken.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Dag CSShunter

vooreerst een opluchting dat ik nu weet waarom ik op mijn laptop die images niet zag!
beginneling zijn ......
ik zal nu ook uitzoeken waarom in chrome en in mozilla de muziek niet werkt.
Ik werk met een defaultpagina, die blanco blijft en doorschakelt naar overzicht via muziek.htm
hieronder default.htm

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<head>
<title>belle etoile</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head> 
<frameset rows="*, 0" frameborder="0">
<frame src="overzicht.php" frameborder="0" marginwidth="0" marginheight="0">
<frame src="muziek.htm" name="music" marginheight="0" marginwidth="0" frameborder="0" noresize>/
<embed src="relax.mp3" hidden="true" autostart="true" loop="true">
<noframes>
<p>Your user agent does not support frames or is currently configured not to display frames. However
you may visit <a href="overzicht.php">the page that was supposed to be here</a></p>
</noframes>
</frameset>
</html>

en hier muziek.htm

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Website met muziek</title>
<!-- include SM2 library -->

<!--</script>-->
</head>
<body>

</body>
</html>

Intussen wellicht een snow gevonden die werkt in chrome en mozilla
Zie http://www.belle-etoile.be/praktischeinfo.php

Zou die ook werken in Opera en Safari ?
script dat zou kunnen werken:
HTML:
<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit [url]http://rainbow.arch.scriptmania.com/scripts/[/url]
  for this script and many more
*/

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}

</SCRIPT>
 
Laatst bewerkt door een moderator:
Hoi Droomwever,
Intussen wellicht een snow gevonden die werkt in chrome en mozilla
Zou die ook werken in Opera en Safari ?
Ja, deze doet het in Firefox, Chrome, Opera, Safari en Internet Explorer (versie 7 getest, maar IE8 en IE9 zullen het ook wel doen).

Ik vind deze van scriptmania.com mooier dan de andere van cyber-web.biz.
Hier zijn de vlokjes van verschillend formaat, dat lijkt al veel echter, en ze komen ook niet zo plompverloren naar beneden zeilen.

Deze heeft echter op je pagina hetzelfde nadeel als de andere: bij Firefox, Chrome en Safari komt er onderaan een horizontale scrollbalk bij - die niet nodig is, en bovendien uit zichzelf groeit en krimpt. Dat speelt al op een beeldscherm van 1290*1024px. Bij kleinere beeldschermen of windows (bv. de maat 1024*768px voor tablets) wordt dit erger. Schuif je de overbodige scrollbar naar rechts, dan zie je naast de pagina-inhoud (die nu niet meer gecentreerd staat) alleen maar lege ruimte.

Verder werkt deze niet met een afbeelding van een sneeuwvlokje, maar met allemaal sterretjes *** lettertekens, waardoor je niet een beter gelijkende eigen afbeelding van een sneeuwvlokje kunt gebruiken.

Maar ... ik ben dus bezig een nieuw script te maken, dat beide nadelen niet heeft en dat ook in alle browsers werkt, plus nog wat extra instelmogelijkheden heeft. En erg makkelijk in het gebruik.

Wordt vervolgd: het is bijna af! :)
CSShunter
 
Sneeuwscript voor dwarrelende sneeuwvokjes en andere neerzwevende dingen!

Hoi Droomwever en anderen,
Het had wat voeten in aarde en voor Internet Explorer was het soms flink muggelen, maar:

Boeren, burgers en buitenlui - en webmasters:
Met blijdschap kan ik hier (als primeur voor helpmij.nl) presenteren:


  • Een javascript om sneeuwvlokjes mooi over je pagina te laten dwarrelen.
  • In te stellen: hoeveelheid, snelheid, wisselen van formaat of niet, en al of niet herhalen na de eerste sneeuwbui.
  • Verder volautomatisch.
  • Ook geschikt voor andere voorwerpen die naar beneden moeten zweven: paaseieren, parachutes, papavers, paprika's, paarden, paddenstoelen, panda's, piano's, pastelpotloden en de rest van het alfabet.
  • Eenvoudig toe te voegen met één (1) regel javascript-verwijzing (en het plaatje van het sneeuwvlokje).
  • Met een boogje om nadelen van andere sneeuwscripts heengelopen.
  • Doet het in Firefox, Chrome, Opera, Safari en Internet Explorer 7 / 8 / 9.
  • Lichtgewicht: maar 12kB, en niets anders ervoor nodig.

Er kan ook een stop-knop toegevoegd worden.
Een aantal demo-pagina's zijn aanwezig.
Toelichtingen voor verschillende mogelijkheden van gebruik zitten erbij.
En achtergrond-info over de uitbreiding van het oorspronkelijke script.



=====

Voor Belle-Étoile heb ik de scriptregel aan de homepage geplakt, en zie hier de test: belle-etoile-overzicht.htm met verse sneeuw.

Succes!

Met vriendelijke groet,
CSShunter
 
S *CH* I° T* TE¨` REN D*

Hopelijk vinden veel gebruikers dit antwoord, want veel hebben deze vraag bekeken!!
:rolleyes::rolleyes::rolleyes:
Dankjewel CCSHUNTER

MAAR in mijn website komen de linken in het hoofdmenu niet meer beschikbaar in Internet exp wel in Chrome
ik heb www.belle-etoile.be/http://www.belle-etoile.be/behandelingenperm.php
met het script geladen. De Link in de nieuwsregel werkt wel.
Op de overige pagia's is het script voorlopig uitgeschakeld
Droomwever
 
Laatst bewerkt:
Hoi Droomwever,
Ja, natuurlijk weer grappen en grollen van Internet Explorer... :confused:
En ik had het niet gezien, op mijn testpagina was dat ook zo - en ook het logo was niet meer hoverbaar en klikbaar...

Maar als je voor IE toevoegt aan je stylesheet dat de #header een relatieve positie heeft (wat ie eigenlijk al per definitie heeft) ...
Code:
#header {
	padding-top: 20px;
	height: 135px;
	background: #432D1D url(images/bellet-sprite.png) no-repeat 0 20px;
	position: relative;
	}
... dan komen de menu-links en het logo weer terug. :)



Met vriendelijke groet,
CSShunter
___________
PS: Als je een vervolgvraag hebt, is het handiger om er een nieuw bericht van te maken. Bij een nieuw bericht krijgen de "abonnees" op een vraag altijd een e-mailtje van helpmij dat er een nieuw bericht is, bij een wijziging niet. - Nu staat het als aanpassing van je oude bericht, dat ik al gezien had: dus geluk dat ik nog eens keek!
 
En nog een ander tipje voor de perm-pagina (e.a. soortgelijke pagina's).
Als je dit doet:
  • Table binnen de <div id="content">: width="790" (ipv 840).
  • Tweede <td>: width="542" (ipv 582)
.. dan blijven de lettertjes van de rechterkolom mooi binnen de achtergrond.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan