11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:
    Bijdrager
    MrPapple

    jquery probleem

    Hallo iedereen,

    Samen met een collega experimenteer ik een beetje met JQuery. Nu proberen we een html pagina in te laden in een div. We doen exact wat de tutorials zeggen maar helaas zonder resultaat. Kan iemand mij vertellen wat we fout doen?

    Dit is de code (niet helemaal koosjer):

    <br />
    <!DOCTYPE html><br />
    <htm><br />
    <head><br />
    <title>test</title><br />
    <style type="text/css"></p>
    <p>    .divPage</p>
    <p>    {</p>
    <p>        width:300px;<br />
            height:200px;<br />
    		background-color:#00FF00;</p>
    <p>    }<br />
    </style><br />
    <script src="http://code.jquery.com/jquery-1.5.js"></script><br />
    <script><br />
      $(document).ready(function () {<br />
      		$('#test').load('gelukt.html');<br />
    		//alert('Load was performed.');<br />
      });<br />
      </script><br />
    </head></p>
    <p><body><br />
    	<div id=test class=divPage></p>
    <p>    </div><br />
    </body><br />
    </html><br />
     

    De pagina ‘gelukt.html’ staat in dezelfde map.

    Alvast bedankt voor de hulp!

    Niels

    Bijdrager
    MrPapple

    Ik merk net dat de code vervormd is tijdens het kopiĆ«ren. Kan het helaas niet meer aanpassen, hierbij de “propere versie”:

    <br />
    <!DOCTYPE html><br />
    <htm><br />
    <head><br />
    <title>test</title><br />
    <style type="text/css"></p>
    <p>.divPage {<br />
    width:300px;<br />
    height:200px;<br />
    background-color:#00FF00;<br />
    }<br />
    </style><br />
    <script src="http://code.jquery.com/jquery-1.5.js"></script><br />
    <script><br />
    $(document).ready(function () {<br />
    $('#test').load('gelukt.html');<br />
    alert('Load was performed.');<br />
    });<br />
    </script><br />
    </head></p>
    <p><body><br />
    <div id=test class=divPage></p>
    <p></div><br />
    </body><br />
    </html><br />
     
    Bijdrager
    RoyHochstenbach

    Je hebt een typefout gemaakt in het begin. <htm> moet <html> zijn;)
    Daarnaast mogen er geen HTML tags in een STYLE tag verschijnen.

    Hier de juiste code:

    <br />
    <!DOCTYPE html><br />
    <html><br />
    <head><br />
    <title>test</title><br />
    <style type="text/css"><br />
    .divPage {<br />
    width:300px;<br />
    height:200px;<br />
    background-color:#00FF00;<br />
    }<br />
    </style><br />
    <script src="http://code.jquery.com/jquery-1.5.js"></script><br />
    <script><br />
    $(document).ready(function () {<br />
    $('#test').load('gelukt.html');<br />
    alert('Load was performed.');<br />
    });<br />
    </script><br />
    </head></p><p><body><br />
    <div id=test class=divPage></p><p></div><br />
    </body><br />
    </html><br />
     
    Bijdrager
    MrPapple

    Hmm, raar…

    Precies tijdens het kopieren iets fout gegaan… In mijn code staan de html tags niet in de style tags…:confused:

    Ondertussen hebben we de oplossing: onze proxy server blokkeert de verbinding met de jquery server zodat we de library niet kunnen laden. Wanneer we de jquery-1.5.js file lokaal plaatsen lukt het wel!

    Nog een vraagje: weet iemand hoe we bijvoorbeeld apple.com kunnen inladen in een div? We hebben al van alles geprobeerd maar het lukt niet.:cry:

    Bijdrager
    RoyHochstenbach
    MrSharky op 16 maart 2011

    Nog een vraagje: weet iemand hoe we bijvoorbeeld apple.com kunnen inladen in een div? We hebben al van alles geprobeerd maar het lukt niet.:cry:
    Je zou een IFRAME in een DIV tag kunnen plaatsen.
    Bijvoorbeeld:

    <br />
    <div><br />
    	<iframe src="http://www.google.com"></iframe><br />
    </div><br />
     
    Bijdrager
    MrPapple

    Maar ja, iFrame is deprecated he… We zoeken eigenlijk een vervanging daarvoor:lol:

    Bijdrager
    Bonkie

    je zou kunnen kijken naar dit:

    http://www.w3.org/TR/WD-frames-970331

    dit:

    <br />
    <IFRAME src="foo.html" width=400 height=500 scrolling=auto<br />
         frameborder=1><br />
      that unfortunately your user agent doesn't support. Alternatively you<br />
      can get the related document <a href="foo.html">here</a>.<br />
      </IFRAME><br />
     

    wordt:

    <br />
     <object width="400" height="500"><br />
      <PARAME name=scrolling value=auto><br />
      <PARAME name=frameborder value=1><br />
      that unfortunately your user agent doesn't support. Alternatively you<br />
      can get the related document <a href="foo.html">here</a>.<br />
      </object><br />
     
    Bijdrager
    macjk
    <br />
    </p><p><body><br />
     

    lijkt me ook niet goed je kan niet een tag sluiten als je hem nog niet geopend hebt. Je plaatst ze ook tussen de head en de body lijkt me niet de bedoeling.

    Haal al je p tags maar weg ze voegen niks toe.

    In je css geef je ook <p> op dat kan zonder de haakjes

    <br />
    p.divPage {<br />
     

    moet het worden

    <br />
    <div id="test" class="divPage"></p><p></div><br />
     

    Je vergat de “

    Ik denk dat je nog even een basis cursus html nodig hebt voordat je aan ingewikkelde zaken als jQuery begint.

    Bijdrager
    tinus_omt

    Je kunt niet de browser de inhoud van een pagina op een andere server in een element op een pagina van jouw server laten stoppen, dat mag niet. De enige manier dat dat kan is met frames of iframes, maar dan is het eigenlijk een apart document waar je verder niet echt aan kunt komen. Als dat namelijk wel kon, kon je bijvoorbeeld iemand anders zijn gmail.com inbox (wat ook een webpagina is) in een van je elementen stoppen en dan daarmee gaan prutsen. Dat mag natuurlijk niet.

    Er zijn twee oplossingen:

    1. Gebruik een frame of iframe
    2. Zorg dat je server de externe pagina laadt voor de gebruiker.

    Beide oplossingen hebben nadelen.

    Als er iets in de externe pagina gebeurt waarvoor veiligheid vereist is, is er een grote kans dat de pagina die een frame zit zal proberen te “ontsnappen” waardoor je eigen pagina verdwijnt. Anders zijn er namelijk rare truuks mogelijk (waarbij je iets over het frame zet wat een heel klein beetje transparant is, zodat je de gebruiker kunt verleiden op elementen te klikken van het document in het frame zonder dat hij het in de gaten heeft).

    Als je zelf voor proxy gaat spelen en de externe pagina voor de gebruiker laadt, kun je geblokkeerd worden door de externe partij omdat dat geen normaal gebruik is. Bovendien ben je met 1 dingetje natuurlijk niet klaar, webpaginas gebruiken allerlei losse onderdelen en je zult moeten beslissen welke van die dingen je door je proxy laat gaan en welke niet. Ergens moet je ophouden en daarvoor moet je het doorgestuurde document gaan bewerken.

    Bij een proxy gaat het natuurlijk ook weer mis als beveiliging een rol gaat spelen; je kunt het niet maken om gebruikers via jouw proxy in te laten loggen op een externe site, want dan kun je hun gegevens stelen. Dat is in ieder geval zeker tegen de regels van de externe site, waardoor je het risico gaat lopen geblokkeerd te worden.

    Ik vraag me eerlijk gezegd af wat je probeert te bereiken als je een element wil maken waar bijvoorbeeld de Apple homepagina in zit. Zoals uitgelegd is dat niet gemakkelijk, en daar heeft eigenlijk niemand problemen mee omdat het niet erg zinvol is.

    Bijdrager
    macjk

    Ik heb het net getest met onderstaande code en dat werkt.

    Copy paste van code lijkt niet goed te werken bekijk hier de code

    Werkt echter alleen met gegevens die op je eigen domein staan.

    Bijdrager
    Sver

    Hallo, ik heb een webpagina met 3 divs (kaders)van 60px width, maar ik zou die moeten kunnen vergroten naar 100px als ik er met de muis over ga aan de hand van de width functie, maar ik weet niet of dit correct is? (in de div is ingesteld width: 60px) Het 2de punt de kaders moeten hun gewone (60px) terug aannemen van zodra ik er buiten ga met mijn muis.

    <script>
    $( “div” ).on( “mouseover”, function() {
    $( this ).css({
    width: function( index, value ) {
    return parseFloat( value ) * 2;
    }
    });
    });
    </script>

11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.