JavaScript in eigen website — Forum

Adrien G Startte dit onderwerp 02 dec 2016, 20:54 Kasterlee 8 berichten

Gegroet,

Ik heb de index-pagina van mijn website omgezet van HTML4.01 naar HTM5 met gebruik van CSS voor de pagina-layout.
In de vorige versie was er een JavaScript verwerkt met een werkende slideshow (images die van rechts naar links verschoven).
Zonder iets te veranderen aan dit script constateer ik nu dat dit niet meer werkt in de nieuwe versie.
Heeft iemand enig idee wat misgelopen is?
Hierbij moet ik zeggen dat dit wel werkt in mijn bewerkingsprogramma: http://www.arachnoid.com/arachnophilia

De website waarover het gaat: http://adrienlieve.be/index.html

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 03 dec 2016, 15:05 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

Misschien een cruciale code vergeten ofwel is het javascript vrij oud.
Ik weet niet waar je het javascript gebruikt hebt op je website.

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Adrien G Startte dit onderwerp 03 dec 2016, 15:24 Kasterlee 8 berichten

Beste Coderunner,

De gebruikte Javascript staat op de indexpagina van de website en kan via de broncode gezien worden.

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 03 dec 2016, 16:42 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

Het is inderdaad al een zeer oud javascript.

1- Ofwel verwijder je bovenaan de doctype

Code: Selecteer alles

<!DOCTYPE HTML>

2a- Ofwel laat je het doctype staan en gebruik je onderstaand recenter javascript
In je style bestand "indexstijl.css" voeg je onderstaande code toe

Code: Selecteer alles

/* Container DIV - automatically generated */
.simply-scroll-container { 
position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
position: relative;
overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}

.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}

.simply-scroll-list li img {
border: none;
display: block;
}

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll { 
width: 900px;
height: 112px;
margin-bottom: 1em;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 900px;
height: 112px;
}

/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 150px;
height: 112px;
}

2b- en in je "index.html" pagina vervang je het gehele javascript door

Code: Selecteer alles

<ul id="scroller">
<li><img src="http://adrienlieve.be/banner/1173tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1207tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1229tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1254tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1187tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1749tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1780tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1788tn.jpg" width="150" height="112"></li>
	<li><img src="http://adrienlieve.be/banner/1760tn.jpg" width="150" height="112"></li>
</ul> 

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://logicbox.net/jquery/simplyscroll/jquery.simplyscroll.min.js'></script>
<script>$('#scroller').simplyScroll();
</script>

2c- En om het nu ook in het midden te plaatsen voeg je align="center" toe

Code: Selecteer alles

<table class="tabel1"><tr><td align="center">

Houd me op de hoogte.

Succes.
mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

hovel 03 dec 2016, 17:51 Spanje 1.354 berichten

Ik weet niet zeker of dit het probleem is maar als ik uw website laat valideren voor html5 dan wordt deze fout gegeven:
Afbeelding

Verwijder language="JavaScript1.2". Je kan type="text/javascript" gebruiken (is optioneel) of gewoon <script> zonder meer.

Citeer

coderunner 03 dec 2016, 18:25 Aubauke - Aentwaerepe 1.828 berichten

Beste hovel,

Met wijziging naar <script type="text/javascript"> lost het probleem niet op.

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Adrien G Startte dit onderwerp 03 dec 2016, 20:00 Kasterlee 8 berichten

Dag Hovel,

hovel schreef:Ik weet niet zeker of dit het probleem is maar als ik uw website laat valideren voor html5 dan wordt deze fout gegeven:

Verwijder language="JavaScript1.2". Je kan type="text/javascript" gebruiken (is optioneel) of gewoon <script> zonder meer.

Ik heb mijn pagine op HTML5 laten valideren en alles was ok.
Ik had toen gewoon <script> staan, maar omdat het niet werkte heb ik terug language="JavaScript1.2" gezet.
Zoals Coderunner eveneens zegt: dit gaf geen oplossing aan het probleem.
Ik ga de code van Coderunner proberen en ik hou jullie op de hoogte.

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 03 dec 2016, 21:04 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

Om de slideshow werkend te krijgen moet je het woord <script> (op lijn 32) verwijderen in je code want wat eronder staat is geen script

<h1>Lieve en Adrien nemen u mee op hun reizen met de motorhome</h1>

<script>
<ul id="scroller">

wordt

<h1>Lieve en Adrien nemen u mee op hun reizen met de motorhome</h1>

<ul id="scroller">

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Adrien G Startte dit onderwerp 03 dec 2016, 21:34 Kasterlee 8 berichten

Dag coderunner,

Fout van mijnentwege. Ik had zelf <script> toegevoegd.
Alles werkt nu perfect.

Hartelijk dank voor de geboden hulp.

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 03 dec 2016, 22:01 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

2c- En om het nu ook in het midden te plaatsen voeg je align="center" toe

Code:

<table class="tabel1"><tr><td align="center">

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Adrien G Startte dit onderwerp 03 dec 2016, 22:41 Kasterlee 8 berichten

coderunner,

Dit werkt inderdaad om de slide-show te centreren.

Maar wanneer HTML5 toegepast wordt krijgt men deze opmerking bij de controle:

Error: The align attribute on the td element is obsolete. Use CSS instead.

From line 28, column 27; to line 28, column 45

bel1"><tr><td align="center">↩↩<h1>

Ik zal deze align attribute dus moeten aanpassen via mijn CSS-file.

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 03 dec 2016, 23:12 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

Inderdaad, sorry ... Verwijder in je html code de align="center" in de td tag.

Zoek in je css style bestand indexstijl.css naar de code

/* Container DIV */
.simply-scroll {
width: 900px;
height: 112px;
margin-bottom: 1em;
}

en plaats er volgende code bij,

/* Container DIV */
.simply-scroll {
display: block;
margin-left: auto;
margin-right: auto;
width: 900px;
height: 112px;
margin-bottom: 1em;
}

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Adrien G Startte dit onderwerp 04 dec 2016, 11:15 Kasterlee 8 berichten

Goede morgen Coderunner,

Het centreren van de diashow werkt perfect op deze manier.
Nogmaals mijn beste dank voor de geboden hulp.

Hartelijke groeten,
Adrien

Laptop Medion P6630 met 4,00 GB RAM
OS: Windows7 Home Premium - SP1
64-bits besturingssysteem
Internet Explorer 10

Citeer

coderunner 04 dec 2016, 14:41 Aubauke - Aentwaerepe 1.828 berichten

Beste Adrien G,

Dat is met alle plezier gedaan en bedankt voor de update.

Succes met je website.
Tot de volgende.

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Schrijf gerust een antwoord