Forums

Give help. Get help.

  • # January 4, 2018 at 12:48 pm

    Hi all, I’m new to this and currently writing a site from scratch. I’ve got a few glitches but I’ll start with these two problems!
    This is my site currently in test stage, hence the images are missing.

    http://www.rockclick.co.uk/wiss/index.htm

    I’ve got iframes which scroll fine on desktop browsers, but on my iphone when I tested it, the main iframe doesn’t scroll and therefore fits all text in the frame and stretches my background picture as a result (see the “news” page).
    I’ve tried various codes that I googled and can’t seem to get it working. So before I go down the Mobile App route can this be fixed?

    I am aware as well that the hover drop down menus don’t go away when you touch on them on the mobile device as well.

    Are there any easy fixes to these?
    Important note: I’m fairly new to writing CSS and HTML and so answers in simple English would be very nice so that I can understand. Thanks all!

    # January 4, 2018 at 1:42 pm

    Have you tried this approach?

    Scroll IFRAMEs on iOS

    As far as I know, there is no simple fix for the hover effect…

    # January 6, 2018 at 1:22 am

    Thank you so much Beverleyh – this worked a treat for the hover menus! Much appreciated :-)

    # January 6, 2018 at 1:49 am

    Ah, I just noticed another problem on the hover menus sticky fix. The sub menus aren’t working at all now. Is there a fix for that?

    # January 6, 2018 at 2:22 am

    I can’t see much on mobile but it looks like only the first level drop-downs are triggered by :hover CSS. The sub-menus are activated with JavaScript. For the sticky hover fix to work, the sub-menus would need to be activated via :hover CSS too. From memory, when I looked at the menu before on mobile (iPhone/iPad) the sub-menus didn’t work then either. I just assumed you hadn’t got that far with development.

    # January 6, 2018 at 2:40 am

    If it helps, here’s a CSS-only multi-level dropdown menu tutorial. It works on mobile https://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

    It isn’t responsive, but neither is your site. If you want a responsive CSS-only multi-level dropdown menu at some point, try this http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm

    # January 6, 2018 at 3:01 am

    Yeah I know the sub menus aren’t hoverable. Wasn’t sure how to do that without a complete menus-submenus re-write ;-(
    I’ll check your links out. I’ve fixed my two initial problems and my site is now readable on the iphone! Thanks. I’ll be back I’m sure!

    # January 6, 2018 at 3:27 am

    Would be nice to share what was causing the scrolling issue.

    # January 6, 2018 at 4:40 am

    It’s an IOS glitch. This is the extra piece of CSS I added which fixed it:
    NB the width and height are for my iframe sizes. These can obviously be changed for your own size.

        .scroll-wrapper {
            display: inline-block;
            -webkit-overflow-scrolling: touch !important;
            overflow-y: auto !important;
        }
        .scroll-wrapper, .scroll-wrapper  {
            width: 100%;
            height: 500px;
        }
    
    # January 12, 2018 at 8:02 am

    Just to let anyone know who stumbles across this thread I used these fixes regarding the multi level drop downs (sub menus I call them!):

    #menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {display: block;}

    And added this as javascript

    document.addEventListener(‘click’, function(e) {
    e = e || window.event;
    console.log(e);
    var target = e.target || e.srcElement;
    console.log(target);
    if (target.parentElement.className.indexOf(‘has-submenu’) > -1) {
    e.target.classList.toggle(‘open’);
    }
    }, false);


    (function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS

    It now works fine :-)

    # January 12, 2018 at 9:06 am

    Thanks for the updates. If I’m not mistaken, the function at the bottom reads the same as this:

    document.addEventListener('touchend', function() {});
    
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag