Mobile phone,.. won't scroll

Evolvan · Post by **Evolvan** » Sun Dec 23, 2018 1:05 am

I can't get my page to scroll on a mobile phone. I have erased the anchor and arrow to the top on the page. Nothing seems to be out of place, it just won't scroll down the page. Here is the code, but it won't really do me any good if I can't change a problem will it? How should I unstick my page so I can scroll to the bottom. https://www.kingmetals3d.com this index page gets stuck about 1/2 way down on two different android phones. If I use chrome developer tools and simulate a phone I get the same frustrating situation. Thanks everyone.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Master_page</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="K6.css" rel="stylesheet">
<link href="Master_page.css" rel="stylesheet">
<script src="jquery-1.12.4.min.js"></script>
<script src="wb.stickylayer.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wwb14.min.js"></script>
<script>
$(document).ready(function()
{
$("#Navigation").stickylayer({orientation: 5, position: [0, 0], delay: 0, keepOriginalPos: true});
$("a[href*='#Top']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#wb_Top').offset().top }, 600, 'linear');
});
function TopScroll()
{
var $obj = $("#wb_Top");
if (!$obj.hasClass("in-viewport") && $obj.inViewPort(false))
{
$obj.addClass("in-viewport");
ShowObjectWithEffect('back_to_top', 0, 'fade', 500);
}
else
if ($obj.hasClass("in-viewport") && !$obj.inViewPort(true))
{
$obj.removeClass("in-viewport");
ShowObjectWithEffect('back_to_top', 1, 'fade', 500);
}
}
if (!$('#wb_Top').inViewPort(true))
{
$('#wb_Top').addClass("in-viewport");
}
TopScroll();
$(window).scroll(function(event)
{
TopScroll();
});
});
</script>
</head>
<body>
<div id="container">

<div id="wb_Top">
<a id="Top"> </a>
</div>
<picture id="wb_Picture3">
<img src="images/PDR Logo_white.png" id="Picture3" alt="" srcset="">
</picture>
<div id="wb_Text4">
<span style="color:#FFFFFF;font-family:Arial;font-size:13px;">All Rights Reserved.</span></div>
<div id="wb_def">
<span style="color:#000000;font-family:Arial;font-size:13px;">Default</span></div>
<div id="wb_800">
<span style="color:#000000;font-family:Arial;font-size:13px;">800</span></div>
</div>
<div id="Layer_1">
<div id="Layer_1_Container">
<div id="wb_GoMenu1">
<form id="GoMenu1" role="menu">
<select id="GoMenu1_select" name="GoMenu1" onchange="OnGoMenuFormLink(this)">
<option class="_self" value="#" selected>Select a link</option>
<option class="_self" value="./index.html" role="menuitem">Home</option>
<option class="_self" value="./About.html" role="menuitem">About</option>
<option class="_self" value="./Services.html" role="menuitem">Services</option>
<option class="_self" value="./3dpartcatalog1.html" role="menuitem">3d Part Catalog</option>
<option class="_self" value="./contact55.html" role="menuitem">Contact</option>
</select>
</form>
</div>
<div id="wb_Text2">
<span style="color:#F0FFF0;font-family:'Open Sans';font-size:27px;"><strong>Precision Detail and Rendering</strong></span></div>
<div id="wb_Title_320">
<span style="color:#FFFFFF;font-family:Arial;font-size:24px;"><strong>Precision Detail and Rendering</strong></span></div>
<div id="wb_Title_Default">
<span style="color:#FFFFFF;font-family:'Open Sans';font-size:48px;"><strong>Precision Detail and Rendering</strong></span></div>
<div id="wb_320">
<span style="color:#000000;font-family:Arial;font-size:13px;">320</span></div>
<div id="wb_480">
<span style="color:#000000;font-family:Arial;font-size:13px;">480</span></div>
<div id="wb_768">
<span style="color:#000000;font-family:Arial;font-size:13px;">768</span></div>
</div>
</div>
<div id="Navigation">
<div id="Navigation_Container">
<div id="wb_CssMenu1">
<ul role="menubar">
<li class="firstmain"><a role="menuitem" href="./index.html" target="_self">Home</a>
</li>
<li><a role="menuitem" href="./About.html" target="_self">About</a>
</li>
<li><a role="menuitem" href="./Services.html" target="_self">Services</a>
</li>
<li><a role="menuitem" href="./3dpartcatalog1.html" target="_self">3d Part Catalog</a>
</li>
<li><a role="menuitem" href="http://www.kingmetals3d.com/contact55.html" target="_self">Contact</a>
</li>
</ul>
</div>
<div id="wb_CssMenu2">
<ul role="menubar">
<li class="firstmain"><a role="menuitem" href="./index.html" target="_self">Home</a>
</li>
<li><a role="menuitem" href="./About.html" target="_self">About</a>
</li>
<li><a role="menuitem" href="./Services.html" target="_self">Services</a>
</li>
<li><a role="menuitem" href="./3dpartcatalog1.html" target="_self">3d Part Catalog</a>
</li>
<li><a role="menuitem" href="http://www.kingmetals3d/contact55.html" target="_self">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div id="back_to_top">
<div id="back_to_top_Container">
<div id="wb_arrow">
<a href="#Top"><div id="arrow"><i class="material-icons"></i></div></a></div>
</div>
</div>
<div id="Layer_3">
<div id="Layer_3_Container">
<picture id="wb_Picture2">
<img src="images/PDR Logo_white.png" id="Picture2" alt="" srcset="">
</picture>
<div id="wb_Text5">
<span style="color:#FFFFFF;font-family:Arial;font-size:13px;">All Rights Reserved.</span></div>
<picture id="wb_Picture4">
<source media="(max-width:969px)" srcset="images/PDR Logo_white.png">
<img src="images/PDR Logo_white.png" id="Picture4" alt="" srcset="">
</picture>
</div>
</div>
<div id="Layer1">
<div id="Layer1_Container">
<picture id="wb_Picture1">
<img src="images/PDR Logo_white.png" id="Picture1" alt="" srcset="">
</picture>
<div id="wb_Text_2">
<span style="color:#FFFFFF;font-family:Arial;font-size:13px;">All Rights Reserved.</span></div>
</div>
</div>
</body>
</html>

BaconFries · Post by **BaconFries** » Sun Dec 23, 2018 6:13 am

Just as related posts/threads about this it is most likely related to the use of the parallax effect. Note not all mobile browsers support this. Try temporarily removing the effect and see if that resolves it, if it does then you can disable parallax for smaller screens, then you can set a different background mode for the smaller breakpoint(s).

Post by **Pablo** » Sun Dec 23, 2018 8:30 am

It seems to work correct for me, on my iPhone and Chrome.
What exactly do I need to do to see the problem?

Evolvan · Post by **Evolvan** » Sun Dec 23, 2018 6:58 pm

I'm not using a parallax effect.

The problem can be viewed at www.kingmetals3d.com if you see a 320 written in black in the upper left corner of the banner it denotes that you are in the 320 breakpoint range where the problem is occurring.

Post by **Pablo** » Sun Dec 23, 2018 8:26 pm

Can you please be more specific about "won't scroll" ?
What did you expect to see and what do you see on your computer?
ON my computer me, I can scroll the content.

crispy68 · Post by **crispy68** » Sun Dec 23, 2018 9:00 pm

I see the issue on my Samsung galaxy s7. Can you please share your project file? Would me much easier to determine the cause.

BaconFries · Post by **BaconFries** » Sun Dec 23, 2018 9:40 pm

You have placed code at the start of the page as can be seen in the following screenshot. Please remove this and upload again and see if this resolves your issue.

Evolvan · Post by **Evolvan** » Mon Dec 24, 2018 3:27 am

Remove the code? How do I do that? I do not see a reasonable way to remove any html at all?
Rebuild the entire page from scratch because it looks like I don't have an html editing option in this software other than adding.
How do i post my wbs file here?

BaconFries · Post by **BaconFries** » Mon Dec 24, 2018 3:45 am

Remove the code? How do I do that?

You remove the same way you added it. (Possibly added by you using Page HTML start of page.)

Rebuild the entire page from scratch because it looks like I don't have an html editing option in this software other than adding.

No you do not have to rebuild (See previous answer) Note WB is not a HTML Editor it is a HTML Generator so you cannot directly edit in the program.

how do i post my wbs file here?

Compress as a zip file upload to your own host/server then provide a url or upload to one of the many file sharing hosts such a Mediafire and provide the url/link they give.

Evolvan · Post by **Evolvan** » Mon Dec 24, 2018 2:52 pm

http://www.kingmetals3d.com/WBS/K6.zip Here is the project file.

The index page does not work on android devices at the 320 break point.
It does not work on simulated phone devices when previewed in Chrome using the developer tools.

I have tried every overflow function.

I even installed a layer that ran down past the point where the mysterious uneditable malfunction is occuring
which sort of worked, but just caused erradict scrolling behavior.

I started with a template from http://dapsonishmeal. com

I viewed the code, copied it, moved it to notepad and will now try and reinmport it back into WYSIWYG. Is this really the only option for making html changes to a project page?

I am going on days with this now and am just about at the end of my rope with this.

Post by **Pablo** » Mon Dec 24, 2018 3:40 pm

The link to your project does not work for me.

The code you have added to the page was either added via Page HTML or Site HTML.
Please remove the code from the start of the page (and any other code you may have added).

Why?
Because adding code like this will make the entire page invalid and the results in the browser will be undefined.

Also, note that filenames should not have spaces.
Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... f=10&t=131

Evolvan · Post by **Evolvan** » Tue Dec 25, 2018 3:14 am

http://www.kingmetals3d.com/WBS/K6.zip I fixed the link to the project file. i do not see in the page html where i have an option to make deletions or changes to the html. it doea not show in the constraining editing tabs.. is that where it would show up?

crispy68 · Post by **crispy68** » Tue Dec 25, 2018 5:21 am

The code that BaconFries is referring to can be found by clicking on Page --> Site HTML --> start of page. The Google font code here needs removed.

Another thing I noticed is you have several layers in each breakpoint of duplicate objects. Why? You dont need to duplicate objects. The same layers, text, etc. are to be used in each breakpoint so there is no need to duplicate them.

No offense but the page is a complete mess. Your default is 970px but you have a 800 and 768 BP. There is not much difference between these 2. I would nix the 800 BP.

Cleaning the above will not fix your issue but will make for better code.

The problem lies with the sticky layer and it being hidden in your breakpoints. The problem is you have the CSS menu on this layer. I would replace the CSS menu with the responsive menu. If you still want to use the GoMenu in the BP's, then you can shrink the Responsive menu down and hide it and place the GoMenu also on the sticky layer so that you can keep it visible. This will fix your issue with it getting stuck half way down.

View demo here: https://www.wizbangwebdesign.com/demo/k6

Evolvan · Post by **Evolvan** » Wed Dec 26, 2018 2:47 am

So, you can not tell me what the problem is? No matter how bad the other problems are it still gives me a workable solution and I have not yet started cleaning the page, but have only gotten it to a presentable fasion. So, if I can not get this software to work on a mobile phone is it your suggestion that I should find a software that will work with mobile phones? Perhaps I can enquire on Reddit about it or something. All I was wanting was the page to not stick on a mobile phone which will encompass a huge percentage of first encounter business contacts. If I can not do that I will have to enter other forums describing my encounter to see if I can find a better solution. I feel like I didn't spend enough time doing this.

crispy68 · Post by **crispy68** » Wed Dec 26, 2018 3:45 am

I did state what the issue is.

The problem lies with the sticky layer and it being hidden in your breakpoints.

The problem you are going to have with the setup you have now is the fact you have the CSS menu on this layer which wont allow you to shrink it down small enough on your mobile site. This causes the sticky layer to be wider than the BP. Visible objects should always be kept within the BP boundaries. Since you hid the sticky layer it did not cause issues with the width but is causing the issues as you scroll.

My suggestion in the last post was to use the Responsive menu in place of the CSS menu and add the go menu to it also. This way the menu is always in the sticky layer and it doesnt need to be hidden in any of the BP's. This will fix the issue.

Did you view my demo above on your phone? It no longer sticks.

Here is a link to the updated WB file: https://www.wizbangwebdesign.com/demo/k6/k6-demo.wbs

Take a look at the index page and the master page to see the changes.

Post by **Pablo** » Wed Dec 26, 2018 8:34 am

Step 1
Remove the code from the Site HTML.
The code is invalid and breaks the page layout.

Step 2
I agree with crispy68, there is too much duplicated content and nested layers. You will need to simplify the layout (re-use layers/objects in breakpoints) then it will be much easier to maintain the pages and locate errors.

Step 3
Check out crispy68's demo project, I think he has done a great job cleaning up your layout.

Evolvan · Post by **Evolvan** » Thu Dec 27, 2018 1:36 am

Okay, Thank you so much. I will look into using a different navigation menu.
I see the problem that it is causing with the GO menu.
Crispy68 let me know if you need anytype of CAD item / Rendering or 3d print design.
I would be happy to return the favor.

German · Post by **German** » Thu May 23, 2019 5:33 am

BaconFries wrote: Sun Dec 23, 2018 6:13 am Just as related posts/threads about this it is most likely related to the use of the parallax effect. Note not all mobile browsers support this. Try temporarily removing the effect and see if that resolves it, if it does then you can disable parallax for smaller screens, then you can set a different background mode for the smaller breakpoint(s).

Hello

Have a such problem (parallax on desktop version + on 320 version stop scrolling, android mobiles, chrome) for several years. Think that problem will be solved.

What means "if it does then you can disable parallax for smaller screens"?

Try (a lot of variants) and also to change properties of "Problem Desktop Layer" from "parallax" to other (on 320 is already hidden)

Thank You for Answers

Post by **Pablo** » Thu May 23, 2019 6:14 am

In Page Properties -> Advanced -> Compatibility you can enable "Use Safari mobile background fix". which will disable parallax for iOS devices.

German · Post by **German** » Thu May 23, 2019 9:45 pm

It does not work this way - Problem with "Android + Chrome". Have You other variants for test? May be we can use some code for Problem Layer like..

detectBrowserSize() < 1200..

German · Post by **German** » Thu May 23, 2019 10:39 pm

I solved the problem with special code for Problem Layer with Parallax "$('#Layer2').parallax();"...

Firsly - problem solution code:

New Part:

{
if (screen.width > 480) $('#Layer2').parallax();
}

All Code Before:

<script src="wb.parallax.min.js"></script>
<script src="wb.rotate.min.js"></script>
<script src="wwb14.min.js"></script>
<script>
$(document).ready(function()
{
var Carousel1Opts =
{
delay: 6000,
duration: 500,
easing: 'linear',
mode: 'forward',
direction: '',
scalemode: 2,
pagination: true,
pagination_img_default: 'images/page_default.png',
pagination_img_active: 'images/page_active.png',
start: 0
};
$("#Carousel1").carousel(Carousel1Opts);
$('#Layer2').parallax();
$('img[data-src]').lazyload();
});
</script>

All Code After:

<script src="wb.parallax.min.js"></script>
<script src="wb.rotate.min.js"></script>
<script src="wwb14.min.js"></script>
<script>
$(document).ready(function()
{
var Carousel1Opts =
{
delay: 6000,
duration: 500,
easing: 'linear',
mode: 'forward',
direction: '',
scalemode: 2,
pagination: true,
pagination_img_default: 'images/page_default.png',
pagination_img_active: 'images/page_active.png',
start: 0
};
$("#Carousel1").carousel(Carousel1Opts);
{
if (screen.width > 480) $('#Layer2').parallax();
}
$('img[data-src]').lazyload();
});
</script>

...

Now a QUESTION - How to insert this command for Layer from WWB with out editing code with "Hands and NotePad++"?

* it's not a good way to change files after publishing..

+ May be it will be realised in new Version of WWB like checkbox option?)) it is not rare problem for several years

Thank You - WWB is very good application

Post by **Pablo** » Fri May 24, 2019 6:18 am

I'm sorry, you cannot edit the code directly in the software. WWB is not a code editor, the HTML does not exits until you publish the page.
I will investigate if this workaround can be implemented in a future version.

German · Post by **German** » Fri May 24, 2019 8:18 am

Ok. Thank`s for Your Work!

www.wysiwygwebbuilder.com

Mobile phone,.. won't scroll

Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll

Re: Mobile phone,.. won't scroll