Mobile phone,.. won't scroll

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Evolvan
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Mobile phone,.. won't scroll

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">&nbsp;</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&nbsp;Part&nbsp;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&nbsp;Part&nbsp;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">&#xe5ce;</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>

User avatar
BaconFries
 
 
Posts: 4602
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

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).

User avatar
Pablo
 
Posts: 17332
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

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
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Re: Mobile phone,.. won't scroll

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.

User avatar
Pablo
 
Posts: 17332
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

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.

User avatar
crispy68
 
 
Posts: 556
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

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.

User avatar
BaconFries
 
 
Posts: 4602
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

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.

Image

Evolvan
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Re: Mobile phone,.. won't scroll

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?
Last edited by Evolvan on Mon Dec 24, 2018 12:19 pm, edited 1 time in total.

User avatar
BaconFries
 
 
Posts: 4602
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

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
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Re: Mobile phone,.. won't scroll

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.
Last edited by Evolvan on Tue Dec 25, 2018 3:05 am, edited 1 time in total.

User avatar
Pablo
 
Posts: 17332
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

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
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Re: Mobile phone,.. won't scroll

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?

User avatar
crispy68
 
 
Posts: 556
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

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
 
 
Posts: 12
Joined: Sat Nov 24, 2018 1:18 am

Re: Mobile phone,.. won't scroll

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.

User avatar
crispy68
 
 
Posts: 556
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

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 Reply