SitePoint Accordion Tutorial not working with Ubuntu's FireFox?

HTML & CSS
1

I used the following tutorial but it appears as though there is some kind of conflict.

This Tutorial works OK
http://blogs.sitepointstatic.com/examples/tech/css3-target/accordionvert.html#acc4

My site fails :frowning:
http://ampHtmlDemo.tk/index.php

The accordion works OK with Ubuntuā€™s Chrome, Opera, Verdana and Tor browsers but refuses point blank to open with FireFox?

Just tested with an iPad Mini 2 and Safari, FireFox and Opera work OK?

I cleared all the FireFox cookies and still no joy :frowning:

Any suggestions?

1 Like
2

It works for me in Firefox 49.0.1 in Windows.
The transitions are not as smooth as in the tutorial, but the accordion does open.

1 Like
3

Your section elements look wonky. Youā€™ve got acc for each id, and youā€™ve got some invalid (I think) characters in there as well.

2 Likes
4

Many thanks for spotting a possible problem. I will check the script tomorrow on the desktop.

Seems strange the other browsers are working okā€¦

@SamA74 apart from being a bit jerky.

5

Iā€™m aware that AMP pages donā€™t validate in the conventional way that hml5 does, though I donā€™t know exactly what is and is not valid in AMP. But there are quite a few (html5) validation errors in there.
I thought the differences were mainly a few amp specific elements and attributes. But some errors I see are things lke conventional element nesting issues and whitespace in IDs.

This alternative validation is one thing about AMP I was curious about. As in Iā€™m sure Googleā€™s own browsers would accept and interpret it correctly, but how will other browsers read it?

1 Like
6

FWIW, I can confirm itā€™s not working for me in Firefox 50 on Ubuntu Gnome 16.04.

7

Try validating with these tools:

On the desktop the Chrome Browser Extension validated ok.

8

JavaScript is essential. I have yet to implement the canonical link to no JavaScript, maybe tomorrowā€¦

9

I know that about AMP, and I had enabled JS. Still didnā€™t work.

1 Like
10

It doesnā€™t work with Chrome 54 on Win7 either. It opens, but there are no transitionsā€¦the demo does work.

1 Like
11

The AMP Validator gives it a pass. But Iā€™m not sure how far I trust it.



</p< ```

Apparently that is valid code. :shifty:

2 Likes
12

@sam74

The ā€œspacerā€ was moved to the common ā€œincs/footer.phpā€ after a long arduous day. Looks as though I am going to be busy tomorrow :slight_smile:

1 Like
13

It seems AMP validation is not as straightforward as one would hope.
Valid amp tags may fail conventional validation.
But it seems the amp validator will let ordinary validation errors slip through, as if it is only checking the amp compliance, not validation overall.

2 Likes
14

@Sam74

It seems AMP validation is not as straightforward as one would hope.
Valid amp tags may fail conventional validation.

I agree and have found several similar anomalies.

I am convinced Googleā€™s approach of creating the new technique and to disregard the tried and tested W3.org validation tools is hindering Amp progress.

15

Not working for me (Firefox 50 on Windows)

1 Like
16

Hi,

Its not working in Firefox Windows for me and its because of the invalid id refs and fragment identifiers.

Changing the ids to a valid format makes it work in Firefox.

   <section id="acc_incs/_header.php">
     <h2><a href="#acc_incs/_header.php"> incs/_header.php </a></h2>

You canā€™t have invalid characters and spaces in ids and the fragment identifier must match and not have spaces at the end either.

Making the changes above makes the accordion work in Firefox.

2 Likes
17

Tried it on FF50 this time and not working.

That has been my concern with AMP. If they medal with the spec, then do they expect all the makers of all the other browsers to support their version of it?

1 Like
18

@Sam74, @SpacePhoenix, @PaulOB, @TechnoBear, @DaveMaxwell

I discovered how to create the alternative amp-canonical link also minus JavaScript :slight_smile: The ā€œbodyā€ content, associated files and CSS are validated and the same files used in the AMP version. Notice the .php7 file extension. The top menu home link calls the AMP version.

http://amphtmldemo.tk/index.php7

The FireFox accordion errors were due to a PHP error where I was trying to build a Dynamic Accordion by iterating over an array of links.

It is so much easier to to create pages and be able to validate the content :slight_smile:

19

I still donā€™t see the transition effect thatā€™s in the demoā€¦is that OK with you? Or is just the open/close you were looking for (at which point, I embarassingly admit I misunderstood the problemā€¦)

1092Ɨ627 535 KB
555Ɨ627 262 KB

1 Like
20

The original problem of not opening was solved and I tried changing the colors and tied myself in knots.

Also the copy I made was jumping all over the page.

Now it does not jump, the color scheme is more to my liking but still requires some tedious tweaking :frowning:

Edit:

The long term plan is to select a component, only about five now available, enter a couple of essential parameters such as title and the style sheet. Allow the user to edit the generated sample. Submit and render the modified template so the user can copy and paste the complete AMP page to run on their own server.

At the moment available tutorials and demos are clunky.

Edit:
I like your animated screen dumps.