Page 1 of 1
[Solved] Toolbox + responsive menu werkt niet op iPhone
Posted: Mon Dec 14, 2015 3:07 pm
by Adheera
Toolbox Autolightbox en (Flexy) menu werken niet samen in een responsive menu op een iPhone.
Het menu kun je niet uitklappen.
Het werkt niet met het Flexy menu en ook niet met een ander menu
Het idiote is dat als ik de broncode kopieer en er een gewone html-pagina van maak dat het dan wel werkt.
Maar.....ik ontdek nu dat de Lightbox niet werkt als er een responsive menu op staat.
http://beeldaccent.nl/test.html in CMSms met Flexy menu
http://beeldaccent.nl/test2.html in CMSms met andermenu
http://beeldaccent.nl/test-pagina.html html-pagina met dezelfde code als test.html .
Snapt iemand hier iets van?
Weet iemand een andere lightbox, simpel in gebruik voor de klant.
Gallery kan niet...ze wil foto's van verschillende grootte
Re: Toolbox + menu werkt niet op iPhone
Posted: Sat Dec 19, 2015 11:26 pm
by mev
Adheera, ik zie dat ook in Chome op een desktop, er niks uitklapt van het menu. Ook niet op de ../testpagina.html
Overigens begint op die laatste pag. het tekstblok met "test in de CMS -2", niet naast het bovenste menu-item, maar pas een heel stuk naar onder wanneer de menu-items alle gepasseerd zijn.
Dit dus ook in Chrome - desktop.
Misschien is er ook wat anders aan de hand?
willemijn
Re: Toolbox + menu werkt niet op iPhone
Posted: Sat Dec 19, 2015 11:43 pm
by velden
Eerst:
jQuery plugin Fancybox wordt in de header (html source regel 22) al aangeroepen terwijl de jQuery library nog niet is geinclude (regel 98).
Dit is heel snel te zien in de console van desktop browsers.
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Dec 20, 2015 12:39 pm
by Adheera
mev: gek bij mij werkt ie goed in Chrome
In alle browsers op een desktop werkte ie goed
Venster versmallen -> menu schuift naar boven en klapt keurig uit.
Het probleem zit in de iPhone met Safari.
Velden: ik had de js onderaan gezet omdat Toolbox zelf de code erop zet...net vóór de body>
js bovenaan gezet, Fancybox werkt, maar nou blijft het menu open staan op
http://beeldaccent.nl/test1.html
Op
http://beeldaccent.nl/test2.html ander menu wel goed op desktop
http://beeldaccent.nl/test.html in CMS - Flexy menu - Fancybox werkt niet
Klapt niet uit op iPhone - desktop menu wel goed)
http://beeldaccent.nl/test2.html in CMSms - ander menu - Fancybox werkt - goed op desktop - klapt niet uit op iPhone
Broncode gekopieerd van beide pagina's en op een html-pagina geplakt. Dus buiten de cms
http://beeldaccent.nl/test-pagina.html geen verschil
http://beeldaccent.nl/test-pagina2.html werkt helemaal perfect op iPhone
Hoe kan dat?
Dat op test2.html het menu op de iPhone niet uitklapt
en test-pagina2.html - zelfde code - wel werkt.
Heel gepuzzel om het duidelijk te maken
Hoop dat dat gelukt is.
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Dec 20, 2015 2:20 pm
by velden
Adheera wrote:
Hoe kan dat?
Dat op test2.html het menu op de iPhone niet uitklapt
en test-pagina2.html - zelfde code - wel werkt.
Dat kan niet eigenlijk
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Dec 20, 2015 6:08 pm
by Adheera
Dat kan niet eigenlijk
Nee, lijkt me ook niet.
Het is echt die Toolbox
Op
http://tonnysikkes.nl/ werkt dat Flexy menu perfect.
Weet je een andere lightbox plug-in, gebruiksvriendelijk voor m'n klant?
Gallery niet, de foto's moeten verschillend van grootte zijn
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Dec 20, 2015 8:19 pm
by velden
Er is een verschil tussen de één en de ander en dat is te zien in Chrome (in ieder geval in iPhone 'emulatie' mode).
Het element <ul class="flexy-menu vertical"> heeft event listeners voor 'touchcancel' en 'touchstart'. Die lijken ergens mee te komen vanuit Toolbox javascript en bestaan alleen in de 'CMSMS' versie van de pagina (test.html).
Die lijkt ervoor te zorgen dat de click niet doorkomt.
Hoe en wat verder weet ik niet.
Ik begrijp verder je probleem met Gallery niet helemaal. Als je de size van images in Gallery heel hoog zet zal deze ze niet aanpassen.
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Jan 10, 2016 12:37 pm
by Rolf
Zet
Code: Select all
<__script__ type="text/javascript" src="js/jquery-1.10.1.min.js"></__script>
<__script__ type="text/javascript" src="js/flexy-menu.js"></__script>
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery(".flexy-menu").flexymenu( {
speed: 400,
type: "vertical",
align: "left",
indicator: true
} );
} );
</__script>
eens in de <head> </head> sectie van de het sjabloon, boven de Toolbox code.
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Jan 10, 2016 1:45 pm
by Adheera
Rolf wrote:Zet eens in de <head> </head> sectie van de het sjabloon, boven de Toolbox code.
Die code staat al bovenaan op
http://beeldaccent.nl/test1.html , maar dan geeft 't Flexy-menu geen mooi rijtje op de desktop, wel op de iPhone...waar ie ingeklapt hoort te zijn
http://beeldaccent.nl/test2.html met ander menu...staat die code ook bovenaan
Het zit 'm echt in die Toolbox die niet wil samenwerken met een responsive menu.
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Jan 10, 2016 2:08 pm
by Rolf
Wil je de breedte eens toevoegen aan de CSS:
Code: Select all
.flexy-menu li {
...
...
width: 100%;
}
PS. op pagina
http://beeldaccent.nl/test1.html !
Re: Toolbox + menu werkt niet op iPhone
Posted: Sun Jan 10, 2016 3:03 pm
by Adheera
Ja nu wel op
http://beeldaccent.nl/test1.html een mooi rijtje op de desktop, maar 't Flexy-menu is uitgeklapt op de iPhone.
Re: Toolbox + menu werkt niet op iPhone
Posted: Mon Jan 11, 2016 11:16 am
by Rolf
Ik heb even in de Admin meegekeken.
De Toolbox module plaatst zelf CSS en jQuery in je template en daar heb je geen invloed op. De volgorde van jQuery ten opzichte van andere functies (hier het menu) klopt dan niet. Toch wel een behoorlijke ontwerpfout...
Ik heb de AutoLightBox functie in de module uitgezet en de jQuery en CSS handmatig in het sjabloon geplaatst. Nu werkt het wel, al is het een rottige "work around"...
