IPAD: Web site no longer scrolls!

@LeifDec 25.2014

My web site is fine on PC browsers, but no longer works on an iPad after upgrading the OS. Here is the worst page:

leifgoodwin.co.uk/Fungi/Fungi.html

It is simple HTML manually uploaded to the host. When I click on a letter in the top A-Z bar, it jumps to the link, but when I then try to scroll the page, it always jumps back to th original link position.

It looks to me as if something is forcing an update, due to poor element positioning.

Anyone got any ideas?

Here are some CSS definitions:

[code] #page { font-size:12px; background-color: white; layer-background-color: white; border-width : 0px; border-style : solid; border-color : darkgray; width : 940px; top : 0px; margin-left:0px; margin-right:0px; /*position : relative;*/ z-index : 1; visibility : show; overflow-y: scroll; }

body { font-family: ‘ArialMT’, ‘Arial’, sans-serif; width:940px; background-color:darkgray; margin-top:0; margin-left:auto; margin-right:auto; position: relative; overflow-y: scroll; } [/code]

At present testing is by manual editing, uploading with FileZilla, then refreshing the browser page on the iPad i.e. I have no iPad emulator.

to post a comment

CSS

6 Comments(s) _↴

@jedaisoulDec 25.2014 — #The web page does not respond to the PgDn or PgUp on my Windows 8.1 laptop, so it seems that the problem is not confined to iPads.

Having looked at the code, there seems to be JavaScript code for navigating the menu, the use of which is not clear to me. In any case, it seems to be superfluous. Also your use of anchors as the TARGET of links is antiquated and unnecessary.

I'd strip out the JavaScript and see if that resolves your problem...

@LeifauthorDec 25.2014 — #The web page does not respond to the PgDn or PgUp on my Windows 8.1 laptop, so it seems that the problem is not confined to iPads.

Having looked at the code, there seems to be JavaScript code for navigating the menu, the use of which is not clear to me. In any case, it seems to be superfluous. Also your use of anchors as the TARGET of links is antiquated and unnecessary.

I'd strip out the JavaScript and see if that resolves your problem...[/QUOTE]

Thanks for the comments. What should I use as the TARGET of links in place of anchors? Yes, I am sure the site is antiquated in terms of HTML. ?

Yes the menu is JavaScript. It is below. It is pretty simple, hope you don't mind me posting it here. There is also some JavaScript for the start and end of the page, just document.Write() for some simple HTML to open and close tags.

<i>
 </i>&lt;!-- The drop down menu --&gt;
 
 document.write('&lt;table width="940" border="0" cellpadding="6" cellspacing="0" style="color:green;background-color:gray; text-align:left; "&gt;');
 document.write('  &lt;tbody&gt;');
 document.write('    &lt;tr&gt;');
 document.write('      &lt;td class="subnav" width="50"&gt;&lt;a href="../Title Page/MainPage.html"&gt;Home&lt;/a&gt;&lt;/td&gt;');
 document.write('      &lt;td class="subnav" width="50"&gt;&lt;a href="../Fungi/Fungi.html" onmouseover="hideAll(); showLayer('layer1'); stopTime()"onmouseout="startTime();"&gt;Fungi&lt;/a&gt;&lt;/td&gt;');
 document.write('      &lt;td class="subnav" width="100"&gt;&lt;a href="../Favourites/Favourites.html" onmouseover="hideAll(); showLayer('layer2'); stopTime()"onmouseout="startTime();"&gt;Photography&lt;/a&gt;&lt;/td&gt;');
 document.write('      &lt;td class="subnav" width="70"&gt;&lt;a href="../DigitalVersusFilm/Velvia100-versus-D200.html" onmouseover="hideAll(); showLayer('layer3'); stopTime()"onmouseout="startTime();"&gt;Essays&lt;/a&gt;&lt;/td&gt;');
 document.write('      &lt;td class="subnav" width="100"&gt;&lt;a href="../General/About.html" onmouseover="hideAll(); showLayer('layer4'); stopTime(); " onmouseout="startTime();"&gt;Misc&lt;/a&gt;&lt;/td&gt;');
 document.write('      &lt;td&gt;&lt;/td&gt;');
 document.write('    &lt;/tr&gt;');
 document.write('  &lt;/tbody&gt;');
 document.write('&lt;/table&gt;');
 
 document.write('&lt;div id="layer1"&gt;');
 document.write('  &lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Fungi/Fungi.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;A-Z Fungi&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Fungi/FungiByGroup.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;A-Z Fungi by Group&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Fungi/CommonFungi.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;A-Z Common Fungi&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Fungi/CommonFungiByGroup.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;A-Z Common Fungi by Group&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Fungi/FungusPhotoGroupIndex.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Fungi Photo Index&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/A-Z Notes.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;A-Z Notes&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Colours.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Colour Chart&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Fungi Basic Key.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Basic Keys&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Microscopy.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Microscopy&lt;/a&gt;');
 document.write('  &lt;/p&gt;');
 document.write('&lt;/div&gt;');
 
 document.write('&lt;div id="layer2"&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Favourites/Favourites.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Favourites&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Butterflies/Butterflies.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Butterflies&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Dragonflies/Dragonflies.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Dragonflies&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Damselflies/Damselflies.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Damselflies&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Other Insects/Other Insects.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Other Insects&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../Flora/Flora.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Flora&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Equipment.html" onmouseover="stopTime();"onmouseout="startTime();"&gt;Equipment&lt;/a&gt;');
 document.write('&lt;/div&gt;');
 
 document.write('&lt;div id="layer3"&gt;');
 document.write('  &lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../DigitalVersusFilm/Velvia100-versus-D200.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Digital Versus Film&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../ES1 Review/ES1-Review.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Review: Nikon ES-1 Slide Copier&lt;/a&gt;');
 document.write('  &lt;/p&gt;');
 document.write('&lt;/div&gt;');
 
 document.write('&lt;div id="layer4"&gt;');
 document.write('  &lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Bibliography.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Bibliography&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Booksellers.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Booksellers&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Links.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Links&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/About.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;About&lt;/a&gt;');
 document.write('&lt;/p&gt;');
 document.write('&lt;p class="dropdownnav"&gt;');
 document.write('    &lt;a href="../General/Feedback.html" onmouseover="stopTime();" onmouseout="startTime();"&gt;Feedback&lt;/a&gt;');
 document.write('  &lt;/p&gt;');
 document.write('&lt;/div&gt;');

@jedaisoulDec 25.2014 — #Use ID as the target of an anchor, as in:

[code=html]
 <a href="#target">target</a>
 
 <!-- other code -->
 
 <div id="target">
 
 <!-- some more code -->
 
 </div>
 [/code]

As to the JavaScript, why are you using it to generate the menu code? What purpose does that serve? I.e. Why not simply write the menu code? Also, there seems to be an attempt at making the code compatible with specific browsers which is woefully out of date. E.g. Netscape no longer exists!

@LeifauthorJan 01.2015 — #Thanks again. I have updated the website and it now scrolls on an iPad. It looks as if the JavaScript menu was stuffing the element position calculations. The scrolling now works, and is smooth.

Incidentally a JS menu makes sense, as it means I can add items without having to edit every single page. Most are generated automatically from a database, but that still leaves ~10 to do manually.

@jedaisoulJan 02.2015 — #I use PHP include files for headers, footers and nav-bars. That way they need doing only once.

@excelcare01Jan 07.2015 — #I also use PHP for headers and footers.

Also in #CSS _↴

Footer issue Theoretical question Z-index nightmare in FireFox

Success!

Help @Leif spread the word by sharing this article on Twitter...

Tweet This

IPAD: Web site no longer scrolls!

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IPAD: Web site no longer scrolls!

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴