Help Zoeken Gebruikerslijst Registreer Profiel Log in om je privé berichten te bekijken Inloggen

JavaScript in eigen website

 
Plaats Reactie    SeniorenNet Forum Index // Eigen website Vorige onderwerp :: Volgende onderwerp  
Auteur Bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Vr 02 Dec 2016, 21:54    Onderwerp: JavaScript in eigen website Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Za 03 Dec 2016, 16:05    Onderwerp: Reageer met quote

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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Za 03 Dec 2016, 16:24    Onderwerp: Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Za 03 Dec 2016, 17:42    Onderwerp: Reageer met quote

Beste Adrien G,

Het is inderdaad al een zeer oud javascript.

1- Ofwel verwijder je bovenaan de doctype
Code:
<!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:
/* 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:

<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:
<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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
hovel

Geregistreerd op: 31-5-2005
Woonplaats: Zele

BerichtGeplaatst: Za 03 Dec 2016, 18:51    Onderwerp: Reageer met quote

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.




_________________
ASUS F554L, Intel Core i7, 3,1Ghz, 8GB, 500GB; Windows 10 (x64), Compaq Presario CQ70, dual-core, 2Ghz, 3GB, 1TB; Windows 10 (x32), Comodo Internet Security, FreeCommander, CCleaner, Defragler; Linux Mageia-6; LibreOffice, Firefox, Thunderbird, Gimp.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Za 03 Dec 2016, 19:25    Onderwerp: Reageer met quote

Beste hovel,

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

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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Za 03 Dec 2016, 21:00    Onderwerp: Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Za 03 Dec 2016, 22:04    Onderwerp: Reageer met quote

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
Quote:
<h1>Lieve en Adrien nemen u mee op hun reizen met de motorhome</h1>

<script>
<ul id="scroller">

wordt
Quote:
<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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Za 03 Dec 2016, 22:34    Onderwerp: Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Za 03 Dec 2016, 23:01    Onderwerp: Reageer met quote

Beste Adrien G,

Quote:
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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Za 03 Dec 2016, 23:41    Onderwerp: Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Zo 04 Dec 2016, 0:12    Onderwerp: Reageer met quote

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
Quote:
/* Container DIV */
.simply-scroll {
width: 900px;
height: 112px;
margin-bottom: 1em;
}


en plaats er volgende code bij,
Quote:
/* 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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Adrien G

Geregistreerd op: 6-9-2008
Woonplaats: Kasterlee

BerichtGeplaatst: Zo 04 Dec 2016, 12:15    Onderwerp: Reageer met quote

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
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
coderunner

Geregistreerd op: 27-3-2006
Woonplaats: Aubauke - Aentwaerepe

BerichtGeplaatst: Zo 04 Dec 2016, 15:41    Onderwerp: Reageer met quote

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.
Naar boven
Bekijk gebruikers profiel Stuur privé bericht
Berichten van afgelopen:   
Plaats Reactie    SeniorenNet Forum Index // Eigen website Tijden zijn in EET (Europa)
Pagina 1 van 1

 
Ga naar:  
Je mag geen nieuwe onderwerpen plaatsen
Je mag geen reacties plaatsen
Je mag je berichten niet bewerken
Je mag je berichten niet verwijderen
Ja mag niet stemmen in polls
BELANGRIJK:
SeniorenNet heeft GEEN banden met de auteurs van berichten op dit Forum.
SeniorenNet is commercieel, religieus en politiek volledig onafhankelijk.
De mening, inhoud, gevolg, informatie of doel van de berichten vertegenwoordigt enkel deze van de auteur van het bericht en dus niet noodzakelijk deze van SeniorenNet.