Core
Junior Member
Posts: 54
|
Post by Core on Jul 2, 2009 0:39:37 GMT -5
TableSkirt: A function / Object that allows you to quickly modify the Style of your RunBasic generated SQL or Data tables. Updated 8/30/09Note: The demo below will not work with IE Tested on FF and Chrome as of this writing. If you test this please let me know if the miniEditor hangs on you, providing you did not make a mistake on the syntax end. TableSkirt Object creates / alters the CSS for you. You simply pick Colors and table graphics from the library file or create your own custom graphics to add to the library. If your tables have a #handle TableSkirt will work. TableSkirt ONLY works with RunBasic generated tables. ...... and Yes I got the name from the JavaScript library called TableCloth. My version doesn't come close to what TableCloth does. What it does:You go from this boring looking SQL table that will drive viewers away from your site ........ . . . .......... to a classy looking table with four lines of code!......OK six(6) lines if you count the <script> tags The above SQL table was modified with TableSkirt and has a "Hover" affect added to the row that the mouse is over. The following lines of code modified it. #tblSkirt skirtSql(#two, "/TableImg/glossyBlue.gif", "B", "#104E8B", "#BFEFFF", "650px","#D1EEEE"). . . <script type='text/javascript'> RB.tableStripes('B'); RB.tblHiLite('#90EE90', 'B'); RB.tableCaption('B'); </script>"
Here are a few more samples that have been modified. NOTE that all of these examples are the same db. You can Render the same db as many times as you like with different styles on the same page. More TableSkirting....... Please feel FREE to Modify any code as needed your input would be greatly appreciated and educational. The Code: ' - ' ---------- taBleSkIrT ---------- ' -
function skirtSql(#db, File$, tblClass$, thBdrColor$, thTxtColor$, tblWidth$, trBgColor$, tblSize$)
if left$(File$, 1) = "#" then thColor$ = File$ else thColor$ = "" end if
if tblClass$ = "" then tblErr$ = "ERROR: A ""Class"" must be assigned to your table in order to render correctly." call tblError tblErr$ end if
if thBdrColor$ = "" then thBdrColor$ = "#C0C0C0" if thTxtColor$ = "" then thBdrColor$ = "#000000" if tblWidth$ = "" then tblWidth$ = "600px" if trBgColor$ = "" then trBgColor$ = "#FFFFCC" if tblSize$ = "" then tblSize$ = "m"
if #db isnull() then tblErr$ = "ERROR: Data table not found!" call tblError tblErr$ end if
size$ = lower$(tblSize$) Select case size$ case "s" fontSize$ = "65%" paddingTB$ = "2px" paddingLR$ = "8px"
case "m" fontSize$ = "75%" paddingTB$ = "4px" paddingLR$ = "11px"
case "l" fontSize$ = "88%" paddingTB$ = "6px" paddingLR$ = "15px" end Select
' -------- Preset Variables -------- tblBdrColor$ = "#dddddd" cptBgColor$ = "white"
' -------- Preset Images -------- cptImage$ = "url(/TableImg/grayBars.png);" hdrImage$ = "url('"+File$+"');"
' -------- Classes for CSS -------- thClass$ = tblClass$ + "THmod" tdClass$ = tblClass$ + "TDmod" trClass$ = tblClass$ + "TRmod" CPTclass$ = tblClass$ + "capAlt" ' JavaScript adds capAlt to the element class
#db cssclass(tblClass$) #db thclass(thClass$) #db trclass(trClass$)
cssclass "table.";tblClass$;"", "{ margin-top: 0.5em; border: 1px solid ";tblBdrColor$;"; border-collapse: collapse; width: ";tblWidth$;"; font-family: arial; font-size: ";fontSize$;"; }"
cssclass "caption.";CPTclass$;"", "{ background-color: ";cptBgColor$;"; padding: ";paddingTB$;" ";paddingLR$;"; background-image: ";cptImage$;"; border: 1px dotted #C0C0C0; font-family: arial; font-size: 100%; }"
cssclass "th.";thClass$;"","{ border: 1px solid ";thBdrColor$;"; border-bottom: 4px solid ";thBdrColor$;"; padding: ";paddingTB$;" ";paddingLR$;"; background-image: ";hdrImage$;"; background: ";thColor$;"; background-repeat: repeat-x; color: ";thTxtColor$;"; text-align: center; font-family: arial; }"
cssclass "td", "{ padding: ";paddingTB$;" ";paddingLR$;"; }" cssclass "tr.";trClass$;"", "{ background-color: ";trBgColor$;"; border-bottom: 1px dotted #C0C0C0; border-top: 1px dotted #C0C0C0; }"
cssclass "tr.alt", "{ background-color: white; }"
'------ JavaScript Object ------ html "</div> <script type='text/javascript'> var RB = {};
RB.getElementsByClassName = function(newClass) { var ElementArr = []; ElementArr = document.getElementsByTagName('*'); var match = []; var patternMatch = new RegExp('(^| )' +newClass+ '(|$)'); for (var x = 0; x < ElementArr.length; x++) { if (patternMatch.test(ElementArr[x].className)) { match[match.length] = ElementArr[x]; } } return match; };
RB.tableStripes = function(tblClass) { var myTables = RB.getElementsByClassName(tblClass); for (var w = 0; w < myTables.length; w++) { var tbodys = myTables[w].getElementsByTagName('tbody'); for(var i = 0; i < tbodys.length;i++) { var rows = tbodys.getElementsByTagName('tr'); for (var k = 1; k < rows.length; k+=2) { rows[k].className = 'alt'; } } } };
RB.tableCaption = function(tblClass) { var myTables = RB.getElementsByClassName(tblClass); for (var p = 0; p < myTables.length; p++) { var newCaption = myTables.getElementsByTagName('caption'); for (var x = 0; x < newCaption.length; x++) { newCaption[x].className = tblClass + 'capAlt'; } } };
RB.tblHiLite = function(HiLiteColor, tblClass) { var myTables = RB.getElementsByClassName(tblClass); for (var p = 0; p < myTables.length; p++) { var tbodys = myTables .getElementsByTagName('tbody'); for (var i = 0; i < tbodys.length; i++) { var rows = tbodys.getElementsByTagName('tr'); for (var k = 1; k < rows.length; k++) { rows[k].onmouseover = function() { this.style.backgroundColor=HiLiteColor }; rows[k].onmouseout = function() { this.style.backgroundColor='' }; } } } };
</script>" End function
Sub tblError a$ html " <script type = 'text/javascript'> alert('";a$;"'); </script>" End sub
- Changed the JS Object name from Core to RB. - Modified the 'Caption' method. Thanks StefanPendl - Modified post to show new RB object and not Core
|
|
|
Post by StefanPendl on Jul 3, 2009 2:34:53 GMT -5
Thanks for this easy to use framework to get nice looking tables ;D
|
|
Core
Junior Member
Posts: 54
|
Post by Core on Jul 3, 2009 11:15:23 GMT -5
Thanks for the kind words. But I have one problem with the JavaScript. 'FireBug' shows an error when this method is called: Core.tableCaption = function(tblClass) { var myCaption = Core.getElementsByClassName(tblClass); for (var p = 0; p < myCaption.length; p++) { var newCaption = myCaption.getElementsByTagName('caption'); newCaption .className = tblClass + 'capAlt'; } };
It tell me that 'p' is 'Undefined' ' myCaption' should be the Array of all the Tables based on the Class, passed as a variable, to the method. 'p' should be '0' or first entry in the Array. So basically I believe its saying 'The Table, based on that Class name' doesn't exist.' I need to clean that error up. I had a problem with altering the CSS class with RunBasic I wonder if this error has to do with the Rendering of the table from RunBasic?? The Caption CSS class is only modified After RunBasic Renders the table. Maybe I'm just missing something. Respectfully, Core
|
|
|
Post by StefanPendl on Jul 4, 2009 2:45:58 GMT -5
Thanks for the kind words. But I have one problem with the JavaScript. 'FireBug' shows an error when this method is called: Core.tableCaption = function(tblClass) { var myCaption = Core.getElementsByClassName(tblClass); for (var p = 0; p < myCaption.length; p++) { var newCaption = myCaption.getElementsByTagName('caption'); newCaption .className = tblClass + 'capAlt'; } };
It tell me that 'p' is 'Undefined' I think the second p should not be a variable, but a literal zero. Core.tableCaption = function(tblClass) { var myCaption = Core.getElementsByClassName(tblClass); for (var p = 0; p < myCaption.length; p++) { var newCaption = myCaption.getElementsByTagName('caption'); newCaption[0].className = tblClass + 'capAlt'; } };
If you like to cycle through the caption elements, you need to use a second for loop.
|
|
|
Post by StefanPendl on Jul 4, 2009 3:16:42 GMT -5
The example on your site should be runnable, so people can better learn from it. run "TableSkirt", #tblSkirt render #tblSkirt '. '// RB code here '. sqliteconnect #DB9, "buggs.db" text$ = "select ID,USERNAME,DESCRIPTION,EMAIL from entries" #DB9 execute(text$) #DB9 caption("Modified table with Graphic header, Stripes, Row Highlights, and Caption Image") #DB9 link("ID", "viewEntry")
'-- Add new class -- #tblSkirt skirtSql(#DB9, "/TableImg/BlkGrayBar.png", "M", "#551A8B", "white", "800px","#FFBBFF") render #DB9 '. '. // JavaScript is called AFTER the RENDER statement '. html "<script type='text/javascript'> Core.tableStripes('M'); Core.tblHiLite('#DC143C', 'M'); Core.tableCaption('M'); </script>"
#DB9 disconnect() wait
|
|
|
Post by StefanPendl on Jul 4, 2009 3:19:24 GMT -5
Using a loop for the second element takes care of the problem with the table caption function. If you get an array it is best to handle it as an array. Core.tableCaption = function(tblClass) { var myCaption = Core.getElementsByClassName(tblClass); for (var p = 0; p < myCaption.length; p++) { var newCaption = myCaption.getElementsByTagName('caption'); for (var i = 0; i < newCaption.length; i++) { newCaption.className = tblClass + 'capAlt'; } } };
|
|
|
Post by StefanPendl on Jul 4, 2009 3:22:16 GMT -5
You are not setting cptBgColor$, so the error console barks at it too, if you use it in the style, set it.
|
|
|
Post by JackWebb on Jul 5, 2009 0:23:38 GMT -5
Nice work Core!
Jack
|
|
Core
Junior Member
Posts: 54
|
Post by Core on Jul 5, 2009 11:11:55 GMT -5
Using a loop for the second element takes care of the problem with the table caption function. If you get an array it is best to handle it as an array. Core.tableCaption = function(tblClass) { var myCaption = Core.getElementsByClassName(tblClass); for (var p = 0; p < myCaption.length; p++) { var newCaption = myCaption.getElementsByTagName('caption'); for (var i = 0; i < newCaption.length; i++) { newCaption.className = tblClass + 'capAlt'; } } };
StefanPendl I shot myself in the foot with that one! The 'Caption' was the last Method I wrote. I made a bunch of noob mistakes. For one, instead of 'myCaption' I should of used 'myTables'. By using 'myCaption' I confused myself and did not realize that was the 'Table' array and not the 'caption' array. Thanks for pointing that out. So I revamped it and all methods that call on the 'ElementsByClass' method use the 'myTables' variable. Also I removed the 'Core' object name and renamed it 'RB'. No real reason for this other then it looks better. Interactive Demo?.... Awsome idea. I spent 5 minutes putting that Demo together, and it probably, looks like it to. I will work on a better demo as it will be nice to see others 'add-on' to the 'RB' object with new methods. I'll spend the rest of my July 4th weekend thinking about a concept for a better demo. I have ONE question to ask. This started off as a 'practice test' I wanted to see if JS Objects can be implanted in RB code and then loaded with the 'Run' command. The JS could have just as easily been in its own file and loaded from the Head. The concept of RB/JS objects together and called with the 'Run' command does anyone believe this is a sound thing to do? Or not economical. Some ideas for new Methods: - Making an entire 'highlighted row' clickable. - Making the 'clickable' field (column) active with a 'pop-up' on hover. Maybe an image of the person or some more detailed data. Jack, Thanks for the kind words and please feel free to modify or add anything to the code that will make it better. One thing for sure there is hundreds of JS references and sites but currently only ONE for RB. So it goes without saying that the more people comment and ask questions. The more people 'post' examples regardless how savy or not those examples are there is something to be learned. Respectfully, Core
|
|
|
Post by Janet on Jul 5, 2009 12:47:00 GMT -5
One thing for sure there is hundreds of JS references and sites but currently only ONE for RB. So it goes without saying that the more people comment and ask questions. The more people 'post' examples regardless how savy or not those examples are there is something to be learned. Respectfully, Core How true, Core. And I love it when RB users take the time to post examples, like you did, and then others come along and give suggestions for modifications. This is an awesome community! ;D If you do get that demo going, you might consider adding it to the Run BASIC WikiSite and posting the link here. You might even add TableSkirt to the Run BASIC WikiSite. I am such a novice with JavaScript, so I truly appreciate all the code that you and others share so generously, Core. Thank you so much. Janet
|
|
Core
Junior Member
Posts: 54
|
Post by Core on Aug 30, 2009 21:59:07 GMT -5
Created new demo. Does not run in IE tested on FF and Chrome only. At times the miniEditor hangs may need some refining. Demo : TableSkirt DemoPlease let me know of any errors. Respectfully, Core
|
|
|
Post by StefanPendl on Aug 31, 2009 3:30:32 GMT -5
FF shows errors with your CSS files pageOne.css and pageTwo.css through the error console.
The miniEditor hangs each time I try to run the code, even after opening it in a fresh browser session and changing nothing.
Before the page does not show in IE too, there is something very bad in the source code of the site.
See specifications in the signature.
|
|
Core
Junior Member
Posts: 54
|
Post by Core on Aug 31, 2009 9:43:07 GMT -5
Well I see.
Made some changes to the miniEditor, tested remotely and it ran fine. Still have my CSS errors as this I with repair when I get back to the server location.
Can't get the pageOne to load on IE? Still some work to do. Thanks for the input.
Respectfully, Core
|
|
|
Post by StefanPendl on Aug 31, 2009 13:47:45 GMT -5
The miniEditor is working 100% now in FF, but the line numbers are only at each second line starting with line 10.
line 10 is labeled 10, line 11 has no label, line 12 is labeled 11 and so forth, this makes it hard to insert the code at the correct place. It would be better to tell the visitor to add the lines before or after any other line, instead of relying on the line numbers.
I can load the initial page in IE8 now, but if I enter the miniEditor, I can not load any of your pages at all until I close and reopen IE.
|
|
Core
Junior Member
Posts: 54
|
Post by Core on Sept 1, 2009 21:05:59 GMT -5
......... but the line numbers are only at each second line starting with line 10....... I can load the initial page in IE8 now, but if I enter the miniEditor, I can not load any of your pages at all until I close and reopen IE. Hmm... I didn't see that issue with the line numbers but I changed the JS slightly. Hopefully resolved. As for IE, I get the Http 500 error. Unfortunatly I do not have the time to invest anymore on this demo Other then minor changes here and there. I did take your advise on changing the wording of the instructions. Thanks for all the help. Respectfully, Core
|
|