Working with custom html5 plugin source code outside of plugin

Discussion Forums > Plugins, Customizing, Source Code

Replies: 20 Views: 123

Ag-Chieve Lost but trying Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	confirm \| cancel 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. Title Comments 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 Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	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 Comments Try adding this in the head. <meta name="viewport" content="width=device-width, initial-scale=1"> Fred

Ag-Chieve Lost but trying Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments "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 Posts: 240 Reg: Oct 08, 2011 Hands Up ! 12,500	06/27/12 07:36 AM (13 years ago) Is the screen bouncing around and then moving back to the center ? Comments Is the screen bouncing around and then moving back to the center ?

Ag-Chieve Lost but trying Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments 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 Posts: 193 Reg: May 22, 2011 Bucharest 5,830	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	06/27/12 07:59 AM (13 years ago) Thanks for the tip. The code already comes with the viewport meta tag. Comments Thanks for the tip. The code already comes with the viewport meta tag.

MDG2 Apple Fan Posts: 102 Reg: May 08, 2012 Princeton, New ... 5,020	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. Comments 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 Posts: 240 Reg: Oct 08, 2011 Hands Up ! 12,500	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments 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 Posts: 2524 Reg: May 30, 2011 UK 35,740	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. Comments It'll be the table. As mdg suggests, use div tags, or give the table and cells percentage widths.

Ag-Chieve Lost but trying Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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? Comments I'll give that a shot. Do you mean to put the div tag around the entire table?

Paul Rogers Android Fan Posts: 2524 Reg: May 30, 2011 UK 35,740	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments 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 Posts: 2524 Reg: May 30, 2011 UK 35,740	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments Okay, cool. Now I have to study up on what divs are and how they work. Thanks again.

Ag-Chieve Lost but trying Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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. Comments 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 Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	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. Comments 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 Posts: 124 Reg: Apr 16, 2012 Winnipeg 9,090	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> Comments <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 Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	06/27/12 02:19 PM (13 years ago) I think that's the rite of passage to becoming a "real" web developer. Fred Comments I think that's the rite of passage to becoming a "real" web developer. Fred

Login + Screen Name Required to Post Login 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.

Discussion Forums > Plugins, Customizing, Source Code

Working with custom html5 plugin source code outside of plugin

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments