Mobile phone,.. won't scroll

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

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

Mobile phone,.. won't scroll

Post by Evolvan »

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: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

Post by BaconFries »

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: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

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: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

Post by crispy68 »

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: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

Post by BaconFries »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Mobile phone,.. won't scroll

Post by BaconFries »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

Post by crispy68 »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Mobile phone,.. won't scroll

Post by crispy68 »

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.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

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

Re: Mobile phone,.. won't scroll

Post by Evolvan »

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
 
 
Posts: 17
Joined: Thu Aug 29, 2013 1:53 pm

Re: Mobile phone,.. won't scroll

Post by German »

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 8)
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

In Page Properties -> Advanced -> Compatibility you can enable "Use Safari mobile background fix". which will disable parallax for iOS devices.
German
 
 
Posts: 17
Joined: Thu Aug 29, 2013 1:53 pm

Re: Mobile phone,.. won't scroll

Post by German »

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
 
 
Posts: 17
Joined: Thu Aug 29, 2013 1:53 pm

Re: Mobile phone,.. won't scroll

Post by German »

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>

...

:arrow: 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 :wink:

Thank You - WWB is very good application
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Mobile phone,.. won't scroll

Post by Pablo »

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
 
 
Posts: 17
Joined: Thu Aug 29, 2013 1:53 pm

Re: Mobile phone,.. won't scroll

Post by German »

Ok. Thank`s for Your Work! :)
Post Reply