Probleem met i-frames in mijn Blogger template en CSS / mobiele weergave

    Hallo,


    Ik ben een website aan het bouwen (de site is nog lang niet af) op het blogplatform BLOGGER. Nu gebruik ik een blogger-theme , dat oorspronkelijk bedoeld is om er een video website mee te bouwen, ik heb het met CSS aangepast aan mijn eigen smaak maar ik ben nog niet echt een kanjer in CSS. DE desktop weergave van mijn website is best ok, maar als ik hem op mijn iPad bekijk ziet het er niet uit.


    De HTML code van mijn template kun je in dit bestandje bekijken.


    Het belangrijkste probleem echter is de weergave van i-frames. Omdat in de HTML-code van het template i-frames een vaste afmeting hebben, kan ik op andere pagina's in mijn site geen mooie i-frames plaatsen omdat het zo in het template verwerkt is.


    De maker van het template is er echter mee gestopt dus ik kan daar niet meer terecht voor support, zeker omdat ik de free versie heb gekozen.


    Is er hier iemand die mij kan helpen met het HTML template van mijn site en de CSS code om deze te optimaliseren zodat het er ook op de mobiel goed uitziet?


    Als tegenprestatie kan ik je dan een gratis pagina aanbieden op mijn site :)


    Alvast bij voorbaat hartelijk dank :)

    Klopt het (dus) dat de combinatie mobiel + i-frames voor problemen zorgt?


    Een i-frame is in wezen een aparte site / venster in je site. Alles wat daarin gebeurt is ook letterlijk en figuurlijk begrensd door dit venster. Als je deze begrenzing wilt doorbreken zul je:

    • ofwel tussen je site en het i-frame moeten communiceren,
    • ofwel af moeten stappen van i-frames

    In het eerste geval zijn er waarschijnlijk nog aanvullende randvoorwaarden, zo moeten het "parent frame" en het i-frame zich op hetzelfde domein bevinden en van hetzelfde protocol (http, https etc) gebruik maken anders zullen browsers dit om veiligheidsredenen niet (zomaar) toestaan.


    Wanneer hier aan voldaan is dan zou je (theoretisch :p) met wat kunst- en vliegwerk via JavaScript vanuit het i-frame instructies kunnen geven om in het parent frame een filmpje te openen. Je hebt dan in principe de begrenzingen van het i-frame omzeild, maar aan andere kant, door de introductie van het i-frame veroorzaak je in zekere zin zelf deze beperkingen. Je bent dan dus ook min of meer oplossingen aan het verzinnen voor een probleem wat je zelf geïntroduceerd hebt.


    Maar als ik hier echt buiten het kader zou denken (teehee) dan zou ik zeggen dat je op je site allerlei verschillende soorten content wilt laten zien waar je tegelijkertijd zelf de controle over wilt hebben. Wat je in wezen wilt is dus een dynamische website. En het liefst "uit één stuk" zodat je één document hebt waar alles in zit. Achter elke dynamische website steekt vaak een (server side) scripting taal waarmee je verschillende stukken functionaliteit kunt invoegen in een enkel document, maar dan moet je wel die mogelijkheid (en enige kennis) hebben natuurlijk.


    Nu weet ik niet of de mate van vrijheid die je wilt in combinatie met wat je wilt echt goed of makkelijk haalbaar is op een medium als blogspot.com. Een andere mogelijkheid die ik eventueel zie is dat je via JavaScript dynamisch content inlaadt (met behulp van zogenaamde AJAX calls). Ook via die weg kun je in principe afstappen van het gebruik van i-frames maar rechtstreeks één document bakken + direct serveren zou natuurlijk een veel directere weg zijn.


    Misschien zou je het ook als volgt kunnen zien: je wilt méér met je site en begint nu tegen obstakels te lopen. De vraag is dan: wil je om deze obstakels heen, wil je deze wegnemen (maar dan loop je wellicht tegen andere beperkingen van blogspot aan) en hoeveel moeite wil je hiervoor doen? Of wil je wellicht iets anders waarmee dit mogelijk wel makkelijk(er) kan? Denk bijvoorbeeld aan, ik noem maar een zijstraat, goedkope webhosting i.c.m. een wordpress pakket ofzo?


    NB: persoonlijk, heb even door de broncode getuurd, vind ik dat de source al behoorlijk vol zit met allerlei (onnodige?) JavaScript. Als je hier aan gaat sleutelen wordt het misschien ook nodeloos complex(er) dus wat dat betreft zit je al met een redelijk grote erfenis van allerlei zut. Dat werkt niet fijn - het is een blok aan je been :/. Voor wat je wilt doen kan het volgens mij allemaal een stuk simpeler.

    Het zit zo, als ik een blog wil schrijven op mijn blogger blog en ik wil bijvoorbeeld een widget installeren in dat blog,dan toont dat widget niet in de i-frame maat die ik zelf wil hebben maar in wat in het template verwerkt is. Ik weet niet of je het bestandje hebt gedownload zodat je kunt zien wat ik bedoel. Ik kom er zelf niet uit.


    Ook als ik een extra pagina wil toevoegen waarin ik bijvoorbeeld een contact formulier wil embedden of een forum, dan toont het in de i-frame maat die in het template verwerkt is en niet in het formaat van het widget dat ik wil installeren, en dat vindt ik lelijk...


    Ik weet niet wat ik moet doen om het op te lossen omdat het een template is dat eigenlijk bedoeld is als een soort Youtube-site, maar ik heb het omgebouwd tot een advertentie site, ik was blij met de layout van het template maar het doet niet wat ik wil.


    Normaliter, als ik gewoon een standaard template neem van Blogspot, kan ik er elk i-frame in plakken wat ik wil en dan toont het ook in het formaat dat ik wil, het is alleen zo dat dit template beperkingen heeft wat i-frames betreft, daar ben ik later pas op gestuit toen de website zich verder ontwikkelde en om nu weer een heel nieuw template te nemen alles weer opnieuw te doen zie ik niet zitten, dat is me teveel werk, het moet toch mogelijk zijn dat dit 'fixed' i-frame probleem op te lossen?


    Ook de CSS-code krijg ik niet op orde....


    In ieder geval hartelijk dank voor je zeer uitgebreide antwoord :)

    Hm, als ik in de broncode van de blogpagina kijk zie ik dat de breedte van de chat-widget 832 pixels is.


    Als je vervolgens op "832" zoekt in het broncode-bestand van hierboven dan vind je deze terug onder widget id "HTML11".


    Misschien als je het daar aanpast?


    En op een soortgelijke wijze zou je kunnen proberen de andere i-frame widgets ook zo aan te passen.


    Ik kan verder ook niet direct overzien hoe alle (widget)interacties verlopen.


    Ook in je browser (o.a. in Chrome) kun je een tablet-view simuleren in developer modus (meestal onder de F12 toets als deze is geactiveerd, klik vervolgens op het mobiel/tablet icoontje om te schakelen tussen desktop en tablet/mobiele weergave). Daar zou je eens wat kunnen spelen met CSS-instellingen. Na een page-refresh of wegnavigeren zijn deze wel weg, dus even goed bijhouden wat je wijzigt om tot het gewenste / een gewenster resultaat te komen.


    Het probleem met het verder uitontwikkelen van een mobiele versie als de desktop versie er al ligt is dat je dan meestal weer dingen moet gaan afbreken / uitkleden. Als een site o.a. voor mobiel wordt ontwikkeld dan wordt de mobiele variant meestal eerst gebouwd geloof ik ("mobile first") omdat het makkelijker is om daarna uit te breiden in plaats van de andere kant op te werken.

    Oef, wat een gedoe..... danjewel weer, het wordt dus lastig.


    Ik kwam wel op een idee....


    De chat is een third-party widget en maakt gebruik van het volgende script:



    <script id="cid0020000229431837476" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 832px;height: 550px;">{"handle":"gratisadverteren","arch":"js","styles":{"a":"0084EF","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0084EF","l":"0084EF","m":"0084EF","n":"FFFFFF","p":"10","q":"0084EF","r":100,"fwtickm":1}}</script>



    Nu heb ik een webshop op https://arhoz-zohrt.pixels.com is het mogelijk om deze webshop in een zelfde soort scriptje te verwerken? Zodat het niet in een i-frame laadt, maar net zoals de chat middels een javascript? Dan ben ik dat probleem met een omleiding kwijt.


    Nu heb ik zelf van Javascriptjes niet zoveel kaas gegeten. Hoe zou ik dit dan moeten doen?


    In ieder geval hartelijk dank voor je hulp weer :)


    P.s.: Ik ga jouw mogelijkheid eens onderzoeken en kijken of ik eruit kan komen ...

    Hangt er een beetje vanaf hoe die widget werkt, mogelijk schrijft deze HTML waarbij dus ook een i-frame wordt gecreëerd, maar mogelijk pakt 'ie dus de afmetingen uit de style-tag of is deze op een of andere manier instelbaar via andere parameters. En misschien kun je zelfs de methode-van-integratie kiezen (inline via AJAX-calls of toch via een i-frame). Zou je even in de documentatie van deze widget moeten duiken, mits die er is.

    Jeetje, zo technisch ben ik (nog) niet haha, ik ben geen professionele ICT-er dit is eigenlijk gewoon een hobby van mij maar ik wil graag leren en ik wil gewoon en website hebben die goed werkt en dat doet het op dit moment niet.


    Het widget verwijst eigenlijk naar een pagina:



    http://gratisadverteren.chatango.com/


    Deze pagina is op een of andere manier in dit bovenstaande scriptje verwerkt.


    Ik heb geprobeerd om mijn url in het scriptje te plakken maar dat werkt niet....


    Ik hoop dat er nog iemand anders meekijkt die misschien een oplossing heeft.


    Hartelijk dank :)

    ik betwijfel of je javascript o.i.d. kwijt kan op pixels.com, je zou het kunnen vragen op hun community https://pixels.com/discussions.html
    Dit helpt je mogelijk ook wel op weg met kennis uitbreiding, deze cursus is drie dagen gratis:

    Citaat van Zohra

    Aha ja, dan kan je het beste de producten los toevoegen en linken naar je website.


    iframes zijn verleden tijd ik adviseer je dit echt niet te gebruiken. Mocht je het perse willen dan kan je middels deze plugin een "responsive" iframe invoegen:


    https://www.jqueryscript.net/d…e-iFrame-Resizer/example/


    Een javascript "embed" is wel wat lastiger, hiervoor moet de content van je pixels.com website in een json o.i.d aangeleverd worden waarna je heb op je website kan vertalen naar html.

    Ja ik denk ook dat er niks anders opzit.... aangezien het template het ook niet toelaat. Ik heb niet zoveel verstand van programmeren helaas. OF ik moet overstappen naar een ander template met meer mogelijkheden en dan gaandeweg de oude look een beetje overnemen maar om tot deze look te komen moest ik heel veel werk verrichten.


    In ieder geval hartelijk dank voor al je huip en advies :)

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login