
Best Answer RhetoricalRuvim, 07 September 2013 - 04:29 PM
Oh, no, that's not what I meant. Here is more like it:Hi RhetoricalRuvim
the javascript function dose not work with out this line:document.body.appendChild(btn);it's will be like this:function myFunction(){ var btn= document.createElement ("a"); document.body.appendChild(btn); btn.href= "#"; // no need for id= because everything's run in the DOM // the programmer can add 'id' if they want to, though btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; btn.style.display= "block"; btn.style.width= "205px"; btn.style.height= "61px"; btn.style.lineHeight= "61px"; btn.style.borderRadius= "25px"; btn.appendChild (document.createTextNode ("Button")); return btn; }Also if i don't put name for the function,
How could i call it ?
var myfunction= function (){ var btn= document.createElement ("a"); btn.href= "#"; // no need for id= because everything's run in the DOM // the programmer can add 'id' if they want to, though btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; btn.style.display= "block"; btn.style.width= "205px"; btn.style.height= "61px"; btn.style.lineHeight= "61px"; btn.style.borderRadius= "25px"; btn.appendChild (document.createTextNode ("Button")); return btn; }, and then do something like this:
document.body.appendChild (myfunction ());; I was thinking more of a 'you-make-the-button--I-will-put-it-anywhere-I-like' type of thing.
How would you explain the fact that there even is HTML DOM in existence? Maybe for 95% of the time the HTML+CSS thing should work, but it is useful to have code that dynamically makes things.@RhetoricalRuvim -- Why the devil would you do that from javascript in the first place?!? Rule #1 of good scripting, NEVER replicate CSS functionality given the lack of scripting off graceful degradation? Separation of presentation from content? The whole 'ability to restyle without changing markup or scripting' thing?!? Ringing any bells?
If I were to do that from scripting, it would probably go:function makeButton(txt){ var d=document, button = d.createElement('a'); button.className = 'button'; button.appendChild(d.createTextNode(txt)); return button; }Style on a HTML element has no malfing business in the scripting any more than it does the markup -- well, unless it's behavior. EVEN on elements that only work scripting on (the only legitimate time to generate elements in the scripting) that's just sloppy/bad coding practice that just makes the lives of people trying to reskin later (and that WILL happen sooner or later) harder. Admittedly, I'm one of the nutters who wants to see STYLE made obsolete as a tag and deprecated as an attribute!
It would also be nice to see an auto-width padding version instead of the fixed width fixed-height garbage. Now, the term "garbage" might sound harsh, but fixed size elements are the antithesis of accessible design. Switching to a dynamic metric for elastic layouts is kind-of a must-have if you care about people actually using the page.
Getting an error code on the site now, but took a look last night. I assumed it was incomplete/nonfunctional since the 'give me the code' thing wasn't a button, didn't do anything and the site was hemorrhaging scripting errors like crazy... When/if you get it back up I'll take a closer look.
Of course from the output pasted into the posts above, it would be nice if the gradient was ACTUALLY CSS3 instead of the Safari/Chrome -webkit vendor prefixed version.
...that Chrome no longer uses. BIG TIP, Google, Mozilla and Opera have all DROPPED vendor prefixes - just in time for IE to start using them.
Oh, also be sure to use class instead of ID for this, someone might want to use it more than once on a page!
The main thing I didn't like about the HTML+CSS w/ ID attribute is that - as far as I can tell - there is no way of specifying an ID for the button in that button maker program, and the program just uses 'btn' for every button made. That is not very convenient because a person may want multiple buttons with different styles (or even with the same style) while the ID attribute can only be used on one element at a time in order for the page to be "valid."
Changing 'id' to 'class' can perhaps work, but it would also be helpful to have a separate input field on that page for the button class name.
Also it would be nice to have a "button code importer" for going the other way around (the "inverse" of "Give Me My Code"), which would be helpful for editing a button's style later on in the development process.
Though it's still not very difficult to make some functionality that would make a piece of JavaScript dynamic HTML DOM code. How about this?:
function SetCSS (element_array, style_string /* brackets are optional */){ var outer= ""; var inner= ""; var block; var arr= style_string.split (""); var lvl= 0; var a, b; var i, j; var name, value; var elems= (!element_array.nodeType)? element_array: [element_array]; for (i= 0; i < arr.length; i++){ if (lvl) inner += arr[i]; if (arr[i] == "{") lvl++; else if (arr[i] == "}"){ lvl--; if (!lvl) break; } else if (!lvl) outer += arr[i]; } if (inner) block= inner; else block= outer; arr= block.split (";"); for (i= 0; i < arr.length; i++){ a= arr[i].split (":"); if (a.length < 2) continue; name= a[0].trim (); value= a[1].trim (); if (!name) continue; b= name.split ("-"); j= 1; if (!b[0]) j++; for (; j < b.length; j++){ b[j]= b[j].substr (0, 1).toUpperCase () + b[j].substr (1); } name= b.join (""); for (j= 0; j < elems.length; j++) elems[j].style[name]= value; } } function MakeButton (name, opt_id, style_string){ var btn= document.createElement ("a"); if (opt_id) btn.id= opt_id; if (style_string) SetCSS (btn, style_string); btn.appendChild (document.createTextNode (name)); return btn; }I have not tested it thoroughly, but, ideally, you pass the button "name" (or button text, rather), a (optional) button id in case of CSS, and a (also optional) CSS style string to initialize the "button" to. So something like:
var mybutton= MakeButton ("My Button Text", false, "#btn{ background:-webkit-linear-gradient(#00a6fc,#1734d6); display:block; width: 200px; text-align:center; text-decoration:none; color:#fff; font-family:arial; font-size:24px; height: 50px; line-height: 50px; border-radius: 10px; }"); document.body.appendChild (mybutton);should work.
@JasonKnight: Are you at least okay with that type of DOM CSS?
Here's a test HTML file that uses the dynamic method while still using the "CSS" stuff:
<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=us-ascii"> <title> Test </title></head><body><script type="text/javascript" src="SetCSS.js"></script> <div id="mycss" style="display: none;"> #btn{ background:-webkit-linear-gradient(#ffa6fc,#1734d6); display:block; width: 200px; text-align:center; text-decoration:none; color:#fff; font-family:arial; font-size:24px; height: 50px; line-height: 50px; cursor: pointer; border: 1px black solid; border-radius: 10px; } </div> <script type="text/javascript"> var mybutton= MakeButton ("My Button Text", false, "#btn{ background:-webkit-linear-gradient(#00a6fc,#1734d6); display:block; width: 200px; text-align:center; text-decoration:none; color:#fff; font-family:arial; font-size:24px; height: 50px; line-height: 50px; border-radius: 10px; }"); document.body.appendChild (mybutton); var secondbutton= MakeButton ("Button 2 Text", false, document.getElementById ("mycss").textContent); document.body.appendChild (secondbutton); </script></body>The SetCSS.js file just has the two functions I defined earlier (SetCSS () and MakeButton ()). Go to the full post
