Slideshow JS met ajax

donderdag 13 mei 2010 19:52

Acties:

0 Henk 'm!

Topicstarter

Ik wil een Javascript slideshow laten weergeven in een bepaalde html-file. Deze html-file wordt door middel van ajaxcode in de indexfile, dynamisch geopend in een mainframe gedeelte van de pagina(CSS 'Frames').

De slideshow werkt wel als je de html-pagina los opent.
De slideshow werkt overal waar je deze gebruikt in de index, in elk CSS-Frame etc

Echter als je de links (html-files) opent via de index, dan werkt de slideshow niet!

HTML: 300.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//NL"
      "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
  <title>Interface AC Ryon PlayOn! HD</title>
    <META name="keywords" lang="NL" content="Interface AC Ryon PlayOn! HD">      
    <META name="copyright" content="Eltjan">
  <script type="text/javascript" src="script/image.js"></script> 
</HEAD>
<BODY onload="runSlideShow();">
<IMG SRC="pictures/PreviewWindow.png"/>

<DIV STYLE="position:absolute; top:12%; left: 1.5%">
  <img src="pictures/Gallery_1.jpeg" name="SlideShow"/>
</div>

</BODY>
</HTML>

Nog geprobeerd de js file aan te passen met:

JavaScript: image.js

1	Window.onload = runSlideShow;

en:

JavaScript:

oldLoad = window.onload;
window.onload = function(){
 runSlideShow();
 if(oldLoad){
  oldLoad();
  }
}

Beide aanpassingen werken ook niet.

[ Voor 41% gewijzigd door ToFast op 13-05-2010 21:37 ]

donderdag 13 mei 2010 20:22

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Klopt het pad naar je JS? Waarom staat er een image tag voor je body? En Window.onload bestaat sowieso niet. Verder: Debuggen: Hoe doe ik dat?. En als je code post, gebruik dan code tags a.u.b.

[ Voor 31% gewijzigd door RobIII op 13-05-2010 20:23 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 13 mei 2010 20:43

Acties:

0 Henk 'm!

ToFast

Topicstarter

RobIII schreef op donderdag 13 mei 2010 @ 20:22:
Klopt het pad naar je JS? Waarom staat er een image tag voor je body? En Window.onload bestaat sowieso niet. Verder: Debuggen: Hoe doe ik dat?. En als je code post, gebruik dan code tags a.u.b.

Considered done..

- Er stond geen image tag voor de body, die body tag hoort voor 'onload'.Nu de gehele code gepost.
- Index.htm en de html file staan in de root directory. Hij laat in het mainframe wel het eerste plaatje zien, dus het pad is goed.

[ Voor 22% gewijzigd door ToFast op 13-05-2010 20:46 ]

donderdag 13 mei 2010 20:46

Acties:

0 Henk 'm!

Jermaine

Zet het zaakje eens online, dat maakt 't al een stuk makkelijker.

donderdag 13 mei 2010 21:05

Acties:

0 Henk 'm!

ToFast

Topicstarter

Jermaine schreef op donderdag 13 mei 2010 @ 20:46:
Zet het zaakje eens online, dat maakt 't al een stuk makkelijker.

http://congres-go-computer.awardspace.info/
http://congres-go-computer.awardspace.info/300.html

Het gaat erom dat als je op de link 300 klikt, deze rechts wordt geladen. Normale afbeeldingen, tekst etc wordt wel geladen, alleen de slideshow functie niet.

Bij de directe html link zie je dat het werkt.

[ Voor 27% gewijzigd door ToFast op 13-05-2010 21:07 ]

donderdag 13 mei 2010 21:09

Acties:

0 Henk 'm!

Anoniem: 147126

Je gebruikt 2x de body-tag, en hebt 2 div's niet afgesloten. Hier (in Firefox) werkt de slideshow volgens mij trouwens wel, maar misschien dat andere browsers er niets van kunnen maken door de incorrecte HTML.

donderdag 13 mei 2010 21:23

Acties:

0 Henk 'm!

ToFast

Topicstarter

Anoniem: 147126 schreef op donderdag 13 mei 2010 @ 21:09:
Je gebruikt 2x de body-tag, en hebt 2 div's niet afgesloten. Hier (in Firefox) werkt de slideshow volgens mij trouwens wel, maar misschien dat andere browsers er niets van kunnen maken door de incorrecte HTML.

Ik had het niet in de gaten dat die functie onload direct bij de bovenste body-tag gezet kon worden - uploaded
DIVS - uploaded

Maar de slideshow werkt hier wel als je direct naar 300.html gaat (ook online) via Firefox 3.6.3 en IE8 maar niet via de homepagina als je op 300 klikt en hij rechts in het CSS-frame wordt geladen.

donderdag 13 mei 2010 21:42

Acties:

0 Henk 'm!

Anoniem: 147126

Hint: Als je met AJAX de pagina 'laad' in die div, dan komt de content van die pagina dus ook echt in die Div te staan. Die pagina die je er dus in zet moet dus geen <html>, <head>, <body> etc bevatten. De body onload werkt daarom ook niet. Het is geen iframe

donderdag 13 mei 2010 21:47

Acties:

0 Henk 'm!

ToFast

Topicstarter

Anoniem: 147126 schreef op donderdag 13 mei 2010 @ 21:42:
Hint: Als je met AJAX de pagina 'laad' in die div, dan komt de content van die pagina dus ook echt in die Div te staan. Die pagina die je er dus in zet moet dus geen <html>, <head>, <body> etc bevatten. De body onload werkt daarom ook niet. Het is geen iframe

Ah kijk, dat begrijp ik. Op welke manier kan je die body onload dan aanroepen en dat die in div 'laad'? Of de html wel laten staan en dan in de html file script taal met tags, waar je iets in de trend van aanroept?:

code: filename

oldLoad = window.onload;
window.onload = function(){
 runSlideShow();
 if(oldLoad){
  oldLoad();
  }
}

donderdag 13 mei 2010 21:51

Acties:

0 Henk 'm!

Anoniem: 147126

Wat je kunt doen is <script type="text/javascript" src="script/image.js"></script> in de header van de hoofdpagina plaatsen, en in 300.html alleen:

HTML:

<IMG SRC="pictures/PreviewWindow.png"/>
<DIV STYLE="position:absolute; top:12%; left: 1.5%">
  <img src="pictures/Gallery_1.jpeg" name="SlideShow"/>
</div>
<script type="text/javascript">runSlideShow();</script>

Dan wordt de functie runSlideShow eenmaal uitgevoerd zodra het geplaatst wordt, denk ik.

donderdag 13 mei 2010 21:51

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

ToFast schreef op donderdag 13 mei 2010 @ 21:47:

[code=language,line,tabwidth,filename]

IMHO een mooie demonstratie van je hele probleem

Als je nou eens gaat proberen te begrijpen waar je mee bezig bent in plaats van alles zomaar blind te copy/pasten.

Anoniem: 147126 schreef op donderdag 13 mei 2010 @ 21:51:

Dan wordt de functie runSlideShow eenmaal uitgevoerd zodra het geplaatst wordt, denk ik.

Code die je middels AJAX binnen haalt wordt niet (zomaar) uitgevoerd. Maar dat is prima te vinden op Google.

[ Voor 38% gewijzigd door RobIII op 13-05-2010 21:55 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 13 mei 2010 22:06

Acties:

0 Henk 'm!

kluyze

Waarom in een onload? Als je het met ajax doet dan zet je eerst die html code op de juiste plaats en dan roep je daarna de functie toch gewoon zelf aan.

donderdag 13 mei 2010 22:12

Acties:

0 Henk 'm!

ToFast

Topicstarter

Bedankt RobIII. Hiermee kan ik wel uit de voeten.

Kijk, ik hoef niet van alle code te weten wat het doet of dat mensen mij code gaan voorkauwen. Ik leer omgaan met allerlei talen die ik al redelijk succesvol weet te combineren. Ik gebruikte in een eerdere webpagina al 'ajax' code, CSS, PHP en een MySQL database (weergeven en inserten van data). Hetzij op een voor jullie simpel niveau, maar dat ik dat allemaal al werkend kreeg, is grotendeels te danken aan het zoeken naar alle informatie op het web en de vele uren werk.

Soms loop je echt hard vast op onderdelen, waarbij wat hulp van anderen een uitkomst is. Natuurlijk had ik al gekeken naar het pad en eventueel hoofdletter gebruik. Ik was er waarschijnlijk nooit achtergekomen dat de meeste HTML content wel weergegeven wordt, maar javascript code (en wellicht andere code) niet.

Wat je noemt is geen demonstratie van mijn probleem, dat was snel-snel even iets posten waarvoor mijn excuses.

[ Voor 6% gewijzigd door ToFast op 13-05-2010 22:14 ]

donderdag 13 mei 2010 23:13

Acties:

0 Henk 'm!

ToFast

Topicstarter

Waar ik nu mee zit is dat Ajax via httpRequests de externe html file van de server ophaalt, maar dat de Javascript file de files lokaal ophaalt, waarvan de namen in een array zitten(slideshow).

Dit is een paar stappen verder op de goede weg, maar het werkt helaas dus niet voor de slideshow.

HTML:

1	<a href="javascript:ajaxpage('300.html', 'maincontent'); loadobjs('script/image.js')"> 300</a>

vrijdag 14 mei 2010 00:43

Acties:

0 Henk 'm!

ToFast

Topicstarter

Update:

Aardig wat gestoeid en ajax demo's bekeken en getest. Het wilde maar niet lukken.

Toch heb ik een aardige workaround gevonden, die misschien niet zo netjes is, maar wel de moeite waard om hier te posten in het geval meer mensen hier tegen aanlopen. Het bespaart veel tijd.

Een onzichtbare iframe (regel 1):

HTML:

<iframe onload="runSlideShow()" src="javascript:false;" style="border: 0; width: 1px; height: 1px; position: absolute; top: -100px; left: -100px;"></iframe>
<IMG SRC="pictures/PreviewWindow.png"/>
<DIV STYLE="position:absolute; top:12%; left: 1.5%">
  <img src="pictures/Gallery_1.jpeg" name="SlideShow"/>
</div>

De html pagina wordt nog steeds geladen in het CSS-frame 'maincontent' van de hoofdpagina:

HTML:

1	<a href="javascript:ajaxpage('300.html', 'maincontent');"> 300</a>

Waarom een JS object toevoegen niet werkt, weet ik echter nog steeds niet. In de demo van dynamicdrive.com werkt het wel, maar dat is ook geen slideshow.

[ Voor 17% gewijzigd door ToFast op 14-05-2010 00:56 ]

zondag 16 mei 2010 15:55

Acties:

0 Henk 'm!

bindsa

Heb net even gekeken naar je online demo, een paar dingen die me opvielen:

- Misschien is het een idee om de scripts uit je HTML te halen en die in losse .js bestanden te stoppen
- Zorg dat je eerst alle HTML errors fixt voordat je JS gaat debuggen, IE bijvoorbeeld wil nog wel eens weigeren scripts uit te voeren als hij de HTML daarvoor niet goed begrijpt.

HTML:

1	<p class=normaltext >

Dat vinden browsers niet zo leuk

Dit hebben ze liever:

HTML:

1	<p class="normaltext" >

HTML:

1
2
3

<div id="framecontentTop">
  <IMG SRC="pictures/Titel_low.png" WIDTH="1280" HEIGHT="157" ALT="titel" ALIGN="LEFT" BORDER="0" VSPACE="0" HSPACE="0"/>
</div>

Misschien is het voor jezelf gemakkelijker om óf alles uppercase óf alles lowercase te houden, dan raak je minder snel in de war

Bovendien is het vaak niet zo handig om plaatjes te gaan resizen met HTML, zorg dat de plaatjes die je aanlevert de juiste breedte en hoogte hebben (dit kan evt. met PHP).

HTML:

1	<class="navigeerpaneel">

Wat is dat?

HTML:

1	<FONT SIZE="+2">

Gebruik van de FONT tag is niet zo handig, CSS is makkelijker, zo hou je de opmaak gescheiden van de HTML en blijft het overzichtelijk. Bovendien is gebruik van de FONT tag niet toegestaan in het door jou gebruikte doctype (STRICT). Kijk eens naar bijv. validator.w3.org

HTML:

  <a href="javascript:ajaxpage('300.html', 'maincontent');"> 300</a> <br>
    <a href="javascript:ajaxpage('Robin hood.html', 'maincontent');"> Robin hood </a> <br>
    <a href="javascript:ajaxpage('V for vendetta.html', 'maincontent');"> V for Ventta </a> <br>
    <a href="javascript:ajaxpage('Clash of the Titans.html', 'maincontent');"> Clash of the Titans </a> <br>
    <a href="javascript:ajaxpage('Wall-e.html', 'maincontent');"> Wall-e </a> <br>
    <a href="javascript:ajaxpage('Just Wright.html', 'maincontent');"> Just Wright </a> <br>

Volgens mij doe je hier dingen dubbel. Bijv. de Clash of the Titans.html informatie heb je eigenlijk al. En aangezien de 2de parameter van ajaxpage() in jouw source altijd maincontent is kan je die misschien beter default maken.

Misschien is dit een idee:
- Hang een event handler aan A-tags
- Zodra er op een link wordt geklikt pak je de innerHTML van die link (filmtitel)
- Daar plak je .html aan vast
- Die pagina laadt je met ajax

Zo blijft je source overzichtelijk en doe je geen dingen dubbel. Een kladje in code (jQuery om dat iets beter in m'n hoofd zit dan JS atm, maar het is ook zeker mogelijk met gewone JS)

JavaScript:

$('a').click(function() {
   var title = $(this).innerHTML();
   title = title + '.html';
   //Laad je pagina hier met AJAX
});

Kan zijn dat er ergens een syntax errortje zit, zoals gezegd, het is een kladje, maar de strategie moet zo helder zijn

Ik hoop dat je er wat mee kan.

[ Voor 3% gewijzigd door bindsa op 16-05-2010 15:57 ]

zaterdag 29 mei 2010 18:16

Acties:

0 Henk 'm!

Gomez12

L0calh0st schreef op zondag 16 mei 2010 @ 15:55:
Een kladje in code (jQuery om dat iets beter in m'n hoofd zit dan JS atm, maar het is ook zeker mogelijk met gewone JS)

Ik mag toch hopen dat JS alles kan doen wat je met jquery kan...

zaterdag 29 mei 2010 18:19

Acties: