{"id":25162,"date":"2016-09-23T03:01:46","date_gmt":"2016-09-22T17:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25162"},"modified":"2016-09-23T05:49:57","modified_gmt":"2016-09-22T19:49:57","slug":"html-and-css-more-button-ideas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-css-more-button-ideas-tutorial\/","title":{"rendered":"HTML and CSS More Button Ideas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/like_button.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML and CSS More Button Ideas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/like_button.jpg\" title=\"HTML and CSS More Button Ideas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML and CSS More Button Ideas Tutorial<\/p><\/div>\n<p>Our recent WordPress &#8220;is mentioned by&#8221; functionality nuances, last talked about with <a target=_blank title='WordPress Is Mentioned By Code Download Progress Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-code-download-progress-tutorial\/'>WordPress Is Mentioned By Code Download Progress Tutorial<\/a>, brought to mind another nuance in our mind, which we&#8217;d like to discuss today.  And for that discussion we want to hook up with the previously written <a title='HTML Button Ideas Primer Tutorial' href='#hbipt'>HTML Button Ideas Primer Tutorial<\/a> shown below.<\/p>\n<p>There, we talked more about button event thoughts related to Javascript, but today we want to reiterate our admiration of the linking of Javascript DOM thoughts with CSS ideas by starting off with a reiteration of a compartmentalization of design thoughts we try to pursue around here regarding web applications, that being &#8230;<\/p>\n<ul>\n<li>we create HTML elements with a defined attribute &#8220;id&#8221; when we intend to involve Javascript DOM thinking &#8230; or hashtag navigation, truth be told &#8230; and separately in HTML static code (but here we link the two via dynamic Javascript DOM) we like to have it so &#8230;<\/li>\n<li>we create HTML elements with a defined property &#8220;class&#8221; (Javascript DOM property &#8220;className&#8221;) when we intend to involve CSS styling thinking<\/li>\n<\/ul>\n<p> &#8230; and the link between the two worlds involving statically defined CSS like, today&#8217;s &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.likebutton {<br \/>\n <font color=green>cursor:pointer;<\/font><br \/>\n display:inline;<br \/>\n text-decoration:none;<br \/>\n border:2px solid yellow;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; ready to be called into play by the dynamically happening Javascript DOM code such as, today&#8217;s &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt; function change(what) { what.className+=' ' + 'likebutton'; } &lt;\/script&gt;<br \/>\n<\/code> <\/p>\n<p> &#8230; in combination with the static <i>&lt;body&gt;<\/i> HTML (emoji as used for recent <a target=_blank title='WordPress Is Mentioned By Code Download Progress Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-code-download-progress-tutorial\/'>WordPress Is Mentioned By Code Download Progress Tutorial<\/a>) like &#8230;<\/p>\n<p><code><br \/>\n&lt;[nonButtonHTMLtag] onclick='change(this);'&gt;&amp;#9758;&lt;\/[nonButtonHTMLtag]&gt;<br \/>\n<\/code> <\/p>\n<p>This is reflected by today&#8217;s HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/like_button.html_GETME\">like_button.html<\/a> associated with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/like_button.html\">live run<\/a> link, where, we once again show how some totally non-button type HTML element types like <i>p<\/i> or <i>span<\/i> or any of the <i>h<\/i>&#8216;s can be &#8230;<\/p>\n<ol>\n<li>statically styled, via static CSS, to be looking like a button (and see below about &#8220;acting&#8221; like a button too) &#8230; or &#8230;<\/li>\n<li>dynamically styled via Javascript DOM adding the HTML element&#8217;s <i>class<\/i>Name on the fly to hook into the static CSS, to be looking like a button (and see below about &#8220;acting&#8221; like a button too)<\/li>\n<\/ol>\n<p>Now, if you&#8217;re wondering with element types like the HTML <i>a<\/i> tag, can you have any meaning just showing CSS rather than some reference to action via event logic, what we do today to simulate an action, is to use the CSS <a target=_blank title='Claytons' href='https:\/\/www.youtube.com\/watch?v=ylH43Tcaj60'><i>&#8220;Clayton&#8217;s&#8221;<\/i><\/a> action, the <a target=_blank title='Useful link, thanks' href='http:\/\/stackoverflow.com\/questions\/13630229\/can-i-have-an-onclick-effect-in-css'>:active pseudo-class<\/a> &#8230; what we&#8217;ve read being the closest you can get in CSS to simulate an &#8220;onclick&#8221; event without doing one, invoking the CSS as per &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.likebutton:active {<br \/>\n border:2px solid green;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>We revisited <a title='HTML Button Ideas Primer Tutorial' href='#hbipt'>HTML Button Ideas Primer Tutorial<\/a> today to add a <font color=green>Stop<\/font> <font color=green>Press<\/font> to remember that nuance of a thing you can do &#8230; but it pays to be user experience (<a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a>) conscious these days &#8230; to involve the CSS <a target=_blank title='CSS cursor property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_cursor.asp'>cursor<\/a> property to better simulate the look and feel of a button when you are doing the simulation via the base HTML element types that are non-button in their nature, and so probably have native to them CSS <i>cursor<\/i> values not very suitable for the &#8220;button&#8221; feel of usage.<\/p>\n<p>There&#8217;s another &#8220;subtheme&#8221; to today&#8217;s work. <\/p>\n<blockquote><p>\nAn <i>onclick<\/i> event flows up through the hierarchies.\n<\/p><\/blockquote>\n<p>We use this fact to have the parent HTML td (cell) element of the right hand column cells that contain the dynamic Javascript DOM linking code to static CSS class definition &#8220;button&#8221; looks, latch onto the user&#8217;s clicks of these emojis, which results firstly in the execution of the &#8220;function change(what)&#8221; logic above, but then flow on up through to the parent HTML td (cell), statically defined like &#8230;<\/p>\n<p><code><br \/>\n&lt;td onclick='wellthen(this);'&gt;[emoji HTML goes here]&lt;\/td&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and so, fire &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nfunction wellthen(what) {<br \/>\n  var bits=what.innerHTML.split(' onclick=');<br \/>\n  var lbits=what.innerHTML.split('likebutton');<br \/>\n  if (bits.length &gt; 1 && lbits.length &lt;= 2) {<br \/>\n    what.innerHTML=what.innerHTML.replace(' onclick=' + bits[eval(-1 + bits.length)], ' class=\"likebutton\" onclick=' + bits[eval(-1 + bits.length)]);<br \/>\n  }<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/code> <\/p>\n<p> &#8230; to use a <i>parent innerHTML property change method<\/i> of adding into the web application&#8217;s written out HTML textarea emoji HTML display, to update it for the added <i> class=&#8221;likebutton&#8221; <\/i> parts to the HTML of the webpage.  As you can see Javascript DOM and event logic sit quite usefully with hierarchy, if you want to use this functionality.<\/p>\n<hr>\n<p id='hbipt'>Previous relevant <a target=_blank title='HTML Button Ideas Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-button-ideas-primer-tutorial\/'>HTML Button Ideas Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Button Ideas Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.jpg\" title=\"HTML Button Ideas Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Button Ideas Primer Tutorial<\/p><\/div>\n<p>HTML is full of possibilities to simulate the pressing or touching action of a button.<\/p>\n<p>Some HTML element types we show in a button pressing style today with our HTML programming source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html-GETME\" title='button_ideas.htm'>button_ideas.htm<\/a> are &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_button.asp' title='Button information from w3schools'><i>button<\/i><\/a> tag<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_input.asp' title='Input button information from w3schools'><i>input type=&#8221;button&#8221;<\/i><\/a> tag<\/li>\n<li><i><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_a.asp' title='A link information from w3schools'>a<\/i><\/a> tag<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_input.asp' title='Input file information from w3schools'><i>input type=&#8221;file&#8221;<\/i><\/a> tag<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_div.asp' title='Div information from w3schools'><i>div<\/i><\/a> tag<\/li>\n<\/ul>\n<p>&#8230; for each of these we can, when pressing them, converge on a common <a target=_blank title='Onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'><i>onclick<\/i><\/a> event piece of Javascript code.<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nfunction doalert(ib) {<br \/>\n  alert(\"Clicking \" + ib.id.replace('_', ' ').replace('_', ' '));<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>With the <i>input type=&#8221;file&#8221;<\/i> it goes on with extra native functionality to browse for a file that may later be uploaded somewhere.<\/p>\n<p>Please know there would be many other types of HTML elements you could use in this way as well.<\/p>\n<p>Being different HTML elements they are capable of other functionalities, but the most common event we program for, the click, is very useful in lots of places.<\/p>\n<p>In Javascript this <i>onclick<\/i> event can be automated on many HTML elements via the Javascript DOM idea to &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById([theElementID]).click();<br \/>\n<\/code><\/p>\n<p>So the next time you want to &#8220;act&#8221; spare some thought for the ways you can (CSS) style that HTML element where you want to &#8220;act&#8221;.<\/p>\n<p>Try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.htm\" title='live run'>live run<\/a> if you like, and see you soon.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>When we originally wrote this blog posting we&#8217;d forgotten that for the non-button like HTML elements (like for <i>div<\/i> and <i>a<\/i> element types above) there would be a default CSS <a target=_blank title='CSS cursor property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_cursor.asp'>cursor<\/a> that is not quite so user experience (<a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a>) &#8220;good&#8221; for &#8220;button&#8221; thinking as it would be for a &#8230; &#8220;button&#8221; type of element &#8230; doh!  But it makes for a better user experience, if you really want the user to feel they are pressing a button, to use a CSS &#8220;cursor:pointer&#8221; style property setting for a more conventional user &#8220;button&#8221; experience (on those <i>div<\/i> and <i>a<\/i> element types above).  The HTML software <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html-GETME\" title='button_ideas.htm'>button_ideas.htm<\/a> link and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.htm\" title='Click picture'>live run<\/a> links above now reflect this change, and you may, for comparison&#8217;s sake, now, be interested in the details of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html-GETME\" title='button_ideas.htm'>this change<\/a> and how it <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html\" title='Old button_ideas.html has no cursor:pointer bits'>used to run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d13295' onclick='var dv=document.getElementById(\"d13295\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=html\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13295' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d25162' onclick='var dv=document.getElementById(\"d25162\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25162' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our recent WordPress &#8220;is mentioned by&#8221; functionality nuances, last talked about with WordPress Is Mentioned By Code Download Progress Tutorial, brought to mind another nuance in our mind, which we&#8217;d like to discuss today. And for that discussion we want &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-css-more-button-ideas-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,17,37],"tags":[174,210,281,354,385,400,549,564,576,652,861,997,1976,1319],"class_list":["post-25162","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-button","tag-class","tag-css","tag-dom","tag-emoji","tag-event","tag-gui","tag-hierarchy","tag-html","tag-javascript","tag-onclick","tag-programming","tag-pseudo-class","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25162"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=25162"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25162\/revisions"}],"predecessor-version":[{"id":25185,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25162\/revisions\/25185"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}