[Solved] Toolbox + responsive menu werkt niet op iPhone

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
Adheera
Forum Members
Forum Members
Posts: 212
Joined: Sat Dec 10, 2011 12:19 pm

[Solved] Toolbox + responsive menu werkt niet op iPhone

Post 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
Last edited by Adheera on Sat Jan 23, 2016 12:45 pm, edited 1 time in total.
Top
mev
Power Poster
Power Poster
Posts: 371
Joined: Wed Apr 25, 2007 5:00 pm

Re: Toolbox + menu werkt niet op iPhone

Post 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
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Toolbox + menu werkt niet op iPhone

Post 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.
Top
Adheera
Forum Members
Forum Members
Posts: 212
Joined: Sat Dec 10, 2011 12:19 pm

Re: Toolbox + menu werkt niet op iPhone

Post 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.
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Toolbox + menu werkt niet op iPhone

Post 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
Top
Adheera
Forum Members
Forum Members
Posts: 212
Joined: Sat Dec 10, 2011 12:19 pm

Re: Toolbox + menu werkt niet op iPhone

Post 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
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Toolbox + menu werkt niet op iPhone

Post 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.
Top
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:
Contact Rolf

Re: Toolbox + menu werkt niet op iPhone

Post 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.
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Top
Adheera
Forum Members
Forum Members
Posts: 212
Joined: Sat Dec 10, 2011 12:19 pm

Re: Toolbox + menu werkt niet op iPhone

Post 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.
Top
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:
Contact Rolf

Re: Toolbox + menu werkt niet op iPhone

Post 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 !
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Top
Adheera
Forum Members
Forum Members
Posts: 212
Joined: Sat Dec 10, 2011 12:19 pm

Re: Toolbox + menu werkt niet op iPhone

Post 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.
Top
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:
Contact Rolf

Re: Toolbox + menu werkt niet op iPhone

Post 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"... :-\
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Top
Post Reply

Return to “Dutch - Nederlands”