Gebruik JQuery

musicscore · Post by **musicscore** » Sun Apr 10, 2011 11:00 am

Ik probeer, nu al een beetje wanhopig, een jquery script aan de praat te krijgen dat automatisch de hoogte van een iframe aanpast aan de inhoud.

Ik heb jquery in een map geplaats (map naam \js)

Vervolgens heb ik onderstaande in mijn template opgenomen :

Code: Select all

  
<head>
<__script__ type="text/javascript" src="/js/jquery-1.4.3.min.js"></__script>
<__script__ type="text/javascript" src="../js/jquery.iframe-auto-height.plugin.js">
jQuery('iframe').iframeAutoHeight();
</__script>

Dit is de eerste keer dat ik ook maar iets met jQuery doe en tot nu toe geen succes :

De bij het script geleverde tekst hieronder :

Code: Select all

#  jQuery iframe auto height plugin

## Usage:

* include jquery in your page
* include js/jquery.iframe-auto-height.plugin.js
* use the variable jQuery or its alias $ and pass a selector that matches one or more iframes

`jQuery('iframe').iframeAutoHeight();` will resize all iframes on the page

`$('iframe.photo').iframeAutoHeight();` will resize only iframes with the css class photo

`$('iframe').iframeAutoHeight({heightOffset: 20});` optionally add some buffer to the bottom (unit is pixels) 

code can be called from within $(document).ready or after iframes are declared in markup
see index.html

## Summary:

original code by NATHAN SMITH; see [http://sonspring.com/journal/jquery-iframe-sizing](http://sonspring.com/journal/jquery-iframe-sizing)

The plugin will resize an iframe to the height of its contents

will NOT work if the iframe contains a page from another domain

When viewing code locally (file:///) Google chrome will throw errors, 
works fine in Firefox locally and should work
ok in all browsers when served from the same domain. 

with IE8 it seems better to not specify the height attribute on the iframe

so far tested on 

* IE8 on windows
* Firefox 3.6 on windows
* Chrome 6 on windows
* Firefox 3.6 on Mac

Ik denk dat als ik eenmaal eenmaal een JQuery script aan de praat krijg ik meteen begrijp hoe ik ook andere scripts kan integreren.

Wie o wie kan mij even helpen, een tip geven.

RonnyK · Post by **RonnyK** » Sun Apr 10, 2011 12:16 pm

In de gelinkte zip staat een voorbeeld in de index.html, waar vanuit je geplakte logica naar verwezen wordt.

<__script__ type="text/javascript">
// match all iframes / use jQuery or alias $
jQuery('iframe').iframeAutoHeight();

// only panoramic.html iframe with some extra height
// $('iframe.photo').iframeAutoHeight({heightOffset: 50});

// NOTES: you can wrap this in document ready if you like
// but IE8 didn't always like it
</__script>

Het gemarkeerde stuk, wat in de vb-index.html onderaan staat, geeft aan dat ALLE iframes geresized worden. De regel eronder, met "// $"-startend, kun je gebruiken om een specifieke iframe te targetten.

Daarnaast is het van belang om te kijken of JQuery gevonden wordt. Je zou vanuit de source van je pagina eens kunnen kijken of je kunt doorklikken op de 2 bestanden die je ge-include hebt. Als het goed is wordt dan de inhoud van de files getoond.

Ronny

RonnyK · Post by **RonnyK** » Sun Apr 10, 2011 12:22 pm

Belangrijkste is volgens mij dat je eerst alles aanroept...

Code: Select all

    <__script__ type="text/javascript" src="js/jquery-1.4.3.min.js"></__script>
    <__script__ type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></__script>

Code: Select all

<__script__ type="text/javascript">
      jQuery('iframe').iframeAutoHeight();
</__script>

en vervolgens aangeeft wat er moet gebeuren. Bij jou staat de iframe set in dezelfde script-check van de include...

musicscore · Post by **musicscore** » Sun Apr 10, 2011 12:32 pm

RonnyK,

Stom van mij om niet eerst inderdaad in de bijgeleverde html files te kijken. Ga meteen weer proberen en kijken of ik met jouw tip en de bijgeleverde index.html wel e.e.a. aan het werken krijg.

PS: Was trouwens weer een geweldige dag zaterdag in Amersfoort.
Bedankt.

Musicscore

RonnyK · Post by **RonnyK** » Sun Apr 10, 2011 12:38 pm

Probeer het eerst maar eens met de aanroepen uit mijn laatste reply. Ik denk namelijk dat het enige punt wat je verkeerd had gedaan, was het aanroepen van de iframe logic IN de aanroep van de JQuery.

Dus door de JQuery aanroep eerst met de </__script> af te sluiten, zou je de aanroep kunnen doen voor de iframe.

Ronny

musicscore · Post by **musicscore** » Sun Apr 10, 2011 1:06 pm

Bedankt RonnyK

Ik heb nu het volgende geprobeerd:

Code: Select all

{literal}
<__script__ type="text/javascript" src="js/jquery-1.4.3.min.js"></__script>
<__script__ type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></__script>
{/literal}

  </head>

  </__body>

{literal}
<__script__ type="text/javascript"  jQuery('iframe').iframeAutoHeight();</__script>
{/literal}

en

Code: Select all


{literal}
<__script__ type="text/javascript" src="js/jquery-1.4.3.min.js"></__script>
<__script__ type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></__script>

<__script__ type="text/javascript"  jQuery('iframe').iframeAutoHeight();</__script>
{/literal}

  </head>

Wanneer ik

Code: Select all

<__script__ type="text/javascript"  jQuery('iframe').iframeAutoHeight();</__script>

opneem is mijn hele template naar de knoppen.
Vraag mij af of deze jqueryscript werkt. Of doe ik toch nog iets verkeerd ??

Musicscore

M@rtijn · Post by **M@rtijn** » Sun Apr 10, 2011 1:26 pm

<__script__ type="text/javascript"> jQuery('iframe').iframeAutoHeight();</__script>

Je mist een '>'

musicscore · Post by **musicscore** » Sun Apr 10, 2011 3:29 pm

Ook dat geprobeerd maar het lijkt erop dat het gewoon niet werkt.

Code: Select all

{literal}
<__script__ type="text/javascript" src="js/jquery-1.4.3.min.js"></__script>
<__script__ type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></__script>

<__script__ type="text/javascript">jQuery('iframe').iframeAutoHeight();</__script>
{/literal}

  </head>

en

Code: Select all

{literal}
<__script__ type="text/javascript" src="js/jquery-1.4.3.min.js"></__script>
<__script__ type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></__script>
{/literal}

  </head>

  </__body>

{literal}
<__script__ type="text/javascript">  jQuery('iframe').iframeAutoHeight();</__script>
{/literal}

Nog iemand een idee ??

Musicscore

RonnyK · Post by **RonnyK** » Sun Apr 10, 2011 7:48 pm

heb je een link?

Ronny

musicscore · Post by **musicscore** » Sun Apr 10, 2011 8:17 pm

RonnyK

Ik heb je een PM gestuurd met de link en gebruikersaccount en wachtwoord.

Bedankt alvast.

CMS Made Simple Forums

Gebruik JQuery

Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery

Re: Gebruik JQuery