Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 20    Views: 123

Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
06/27/12 06:42 AM (13 years ago)

Working with custom html5 plugin source code outside of plugin

Hi, I hope I'm allowed to post this here, as it's only marginally related to BT. I had a custom html5 plugin in my app but I need to update it weekly so I decided to go with a custom url plugin instead and just link it to a web page that I could update without having to force people to update the app every week. I grabbed the source code from the custom html5 plugin page and stuck it in notepad and after some tweaking it looks fine. The only problem is that instead of the page 'locking' in at the sides and only allowing for vertical scrolling, the page just kinda 'floats' around in the browser, meaning it's wider than the device screen and I can move it in any direction. Would I be able to change this behaviour in the control panel advance settings or is there something in the html itself I can change? I see that the code has a viewport meta tag, which I've read is supposed to make the page as wide as the device screen but that doesn't seem to be working with this particular page in either iOS or Android. That might have something to do with the page having a table on it. Perhaps the table is too wide. I've tried sticking the whole thing into a container in the skeleton framework, hoping it would resize with the device but that didn't work either (at least not how I tried it). (Check out the skeleton framework at getskeleton.com, by the way. I can attest that it works quite well with simple text pages.) This is probably some simple fix for a true web developer but I'm just dipping my toes into html so I'm not sure what to do about it. If you think you know the solution but want to see the code, just pm me or send me an email at sales(at)ag-chieve.ca. Thanks.
 
Fred@mySkylla com
Android Fan
Profile
Posts: 5259
Reg: Oct 03, 2011
location unknow...
62,560
like
06/27/12 07:15 AM (13 years ago)
Try adding this in the head. <meta name="viewport" content="width=device-width, initial-scale=1"> Fred
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 07:17 AM (13 years ago)
"I see that the code has a viewport meta tag, which I've read is supposed to make the page as wide as the device screen but that doesn't seem to be working with this particular page in either iOS or Android." That is already there.
 
Paddy
Lost but trying
Profile
Posts: 240
Reg: Oct 08, 2011
Hands Up !
12,500
like
06/27/12 07:36 AM (13 years ago)
Is the screen bouncing around and then moving back to the center ?
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 07:41 AM (13 years ago)
It does bounce around in the browser but it doesn't centre itself again. When it 'hits' the side of the browser, it lights up blue for a split second and bounces off. I think that's the scroll bounce, if I'm not mistaken.
 
Vali
buzztouch Evangelist
Profile
Posts: 193
Reg: May 22, 2011
Bucharest
5,830
like
06/27/12 07:58 AM (13 years ago)
Hi, What I always used to do when working with custom HTML pages is I just take the initial format that BT provides in the Custom HTML, text page and than just add my content inside the <body> </body> And looking at my screens, Fred is right with the line you should include.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 07:59 AM (13 years ago)
Thanks for the tip. The code already comes with the viewport meta tag.
 
MDG2
Apple Fan
Profile
Posts: 102
Reg: May 08, 2012
Princeton, New ...
5,020
like
06/27/12 08:03 AM (13 years ago)
Do you have to use a table? If not I suggest using the div tag and don't specify the width.
 
Paddy
Lost but trying
Profile
Posts: 240
Reg: Oct 08, 2011
Hands Up !
12,500
like
06/27/12 08:04 AM (13 years ago)
In the bt control panel under advanced setting for the screen there should be prevent scroll bounce. Otherwise here is a good explanation of viewport : http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19 wow...what a long link ! Edit : mdg is right..the table is probably messing you up.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 08:06 AM (13 years ago)
I'll give the scroll bounce thing a try. I'll kick myself if it's just that simple. @mdg The information should be conveyed in a table, as that makes it the easiest to read.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 08:12 AM (13 years ago)
Scroll bounce stopped the bouncing but didn't lock the page in place like I'm trying to do. I'll give that page a read that you linked to. Maybe the table widths etc. are overriding the meta tag or something.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
06/27/12 08:26 AM (13 years ago)
It'll be the table. As mdg suggests, use div tags, or give the table and cells percentage widths.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 08:27 AM (13 years ago)
I'll give that a shot. Do you mean to put the div tag around the entire table?
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
06/27/12 08:29 AM (13 years ago)
The problem will be the table, is it fixed width, ie px sizes? Use percentages. Wrapping it in a div will be pointless if you have fixed widths in the table.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 08:31 AM (13 years ago)
The table does have fixed pixel sizes. I'll go ahead and try the percentage thing and wrap it in a div. I'll update as to how that worked. Thanks for the suggestions.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
06/27/12 08:35 AM (13 years ago)
What mdg suggested is to remove the whole table and use divs instead. It's a much better approach for all sorts of reasons. If you must have a table, there's no need to wrap it in a div, just make the table widths percentages and that will do the job.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 08:37 AM (13 years ago)
Okay, cool. Now I have to study up on what divs are and how they work. Thanks again.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 11:09 AM (13 years ago)
I tried a variety of things that involve changing the widths to percentages, wrapping the table in a div and wrapping the whole thing in the skeleton resizing framework. I've managed to stop most of the movement but it still moves slightly side to side. I'm gonna give it a break to maintain sanity. Thanks for all the help, everybody.
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
06/27/12 11:42 AM (13 years ago)
I use tables and I set the table width to 100% and it works fine. Divs are better, but tables can be used. This helps with iPad layouts too. I also found having an embedded image can give the same 'wobble' effect. If I set fixed widths for images over 312 pixels (in portrait mode) I had a problem. Now I set embedded images to width xx%, I don't set the height and the graphic looks the way I want on an iPhone and good on an iPad too.
 
Ag-Chieve
Lost but trying
Profile
Posts: 124
Reg: Apr 16, 2012
Winnipeg
9,090
like
06/27/12 02:02 PM (13 years ago)
<p>Got everything sorted out for anyone who is interested. Turns out the code I grabbed from BT had the entire page set up as a 'table', meaning my headings and stuff that preceded the table that I had created for my information were set up in their own cells that were considered part of a larger 'table' on the page. So I got rid of those table elements, changed my headings to just be headings and fixed up the actual table that I had created for my info and now it doesn't bounce all over the place.</p> <!--I'm only about 50% sure that the above paragraph makes any sense at all.--> <p>A real web developer probably woulda spotted that right away but it took much tinkering and observing on my part to figure it out.</p> <p>Thanks everyone!</p>
 
Fred@mySkylla com
Android Fan
Profile
Posts: 5259
Reg: Oct 03, 2011
location unknow...
62,560
like
06/27/12 02:19 PM (13 years ago)
I think that's the rite of passage to becoming a "real" web developer. Fred
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.