HTML Box for CSS & JavaScriptThe HTML Box allows for more Advanced HTML, Advanced CSS, Advanced JavaScript and Google Library APIs.
The HTML box features:
Advanced HTMLHTML in Google Sites is filtered , only allowing certain HTML tags and attributes. Using the the
HTML Box , a larger selection of HTML is gradually becoming available to Google Sites through the
HTML Box .
For Example HTML comments, HTML5 and webkit attributes etc...
Advanced HTML for HTML Box More Advanced CSS like Opacity and position animation.
CSS for
HTML Box
More Advanced Javascript.
Javascript for
HTML Box
| Google APIsGoogle Develop many Google APIs for there products and services such as google Plus and Google Maps etc..Some APIs do not require Javascript nor API Keys and can be created by URL parameters.
Dynamic Images / Graphics
[Example below in Jquery Slider]
Dynamic Icons This gives developers the ability to access data or development UIs [User Interfaces] from these APIs.
The HTML Box is restricted to specific Google APIs from the Google API Library.
Google API Library
APIs for
HTML Box Testing..
jQuery Slider - HTML Box Example:Jquery Slider HTML Box Example from the Google Sites Support Guides.
Use the "Prev" and "Next" Links to change the slide.
To recreate the Jquery slider above, copy the
code below, and then in Google Sites:Insert > HTML Box and then paste the copied
code .Save (HTML Box) and also Save (webpage) to preview
This example uses dynamic images so you do not have to upload/reference images to achieve the same result.
The
highlighted code are some important settings/code to take note of for understanding and making adjustments to the Javascript / CSS and HTML.Javascript:
Google API Library Reference
Slide Count : No of Slides to display
Slide Size
CSS:
Height and width of the CSS Display
HTML:
Slides 1 & 2 need to be placed within the
<DIV> tagsA simplified HTML only view:
... <div class="carousel" style="display:none;"> <div class="items"> <div>Slide 1 Content</div> <div>Slide 2 Content</div> </div> ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"> </script> <script> var current_slide = 0; // zero-based var slide_count = 2; var slide_size = 400; var Direction = { LEFT: -1, RIGHT: 1 }; /** * Moves to the next slide using the direction (dx) parameter. */ var nextSlide = function(dx) { current_slide = (current_slide + slide_count + dx) % slide_count; // Calculate the new value for css 'left' property and animate. var left_offset = '-' + (current_slide * slide_size) + 'px'; $('.items').animate({'left': left_offset}, 300); }; $('.right-button').click(nextSlide.bind(null, Direction.RIGHT)); $('.left-button').click(nextSlide.bind(null, Direction.LEFT)); $('.carousel').show(); </script> <style> .carousel { width: 400px; height: 200px; position: relative; overflow: hidden; background-color:#ccc; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } .items { width: 1200px; position: absolute; } .items > div { width: 400px; height: 180px; font-size: 10px; display: table-cell; /* vertical-align: middle; */ text-align: center; } .nav { position: absolute; bottom: 5px; right: 15px; } .button { cursor: pointer; font-width: bold; } </style> <div class="carousel" style="display:none;"> <div class="items"> <div><!--FIRST SLIDE --> <div style="text-align: center"> <div style="background-color: #999; padding-top: 1px;
padding-right: 125px; padding-bottom: 1px; padding-left: 125px;
border-top-width: 1px; border-right-width: 1px; border-bottom-width:
1px; border-left-width: 1px; border-top-style: solid;
border-right-style: solid; border-bottom-style: solid;
border-left-style: solid; border-top-color: rgb(153, 153, 153);
border-right-color: rgb(153, 153, 153); border-bottom-color: rgb(153,
153, 153); border-left-color: rgb(153, 153, 153)"><img
src="//images-focus-opensocial.googleusercontent.com/gadgets/proxy?url=https://chart.googleapis.com/chart?chst%3Dd%255fsimple%255ftext%255ficon%255fleft%26chld%3DNEW%257C14%257Cf30%257Cstar%257C24%257Cf30%257Cfff&container=focus&gadget=a&rewriteMime=image/*"></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><br> <span style="line-height: normal; font-size: small"><font
color="#ff0000" style="font-weight:
bold">*</font><b><font
color="#ffffff"> </font><a
href="http://www.goopal.org/Google-Sites-Embed/google-sites-voice-control"
style="color: rgb(0, 0, 0)" target="_self">Voice Control
in Google Sites
>></a></b></span></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><b style="font-size: small; line-height:
normal"><font color="#ff0000">*</font><font
color="#ffffff"> </font></b><b
style="font-size: small; line-height: normal; color: rgb(255, 255,
255)"><a
href="http://www.goopal.org/google-sites-features/google-plus-profile-widget"
style="font-size: small; line-height: normal; color: rgb(255, 255,
255)" target="_self">Google Plus Profile Widget
>></a></b></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><i><br> </i></div> </div> </div> <div>
<!--SECOND SLIDE --> <div
style="background-color: #999; padding-top: 1px; padding-right: 125px;
padding-bottom: 1px; padding-left: 125px; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
rgb(153, 153, 153); border-right-color: rgb(153, 153, 153);
border-bottom-color: rgb(153, 153, 153); border-left-color: rgb(153,
153, 153)"><img
src="//images-focus-opensocial.googleusercontent.com/gadgets/proxy?url=https://chart.googleapis.com/chart?chst%3Dd%255fsimple%255ftext%255ficon%255fleft%26chld%3DUpdates%257C14%257Cf30%257Cstar%257C24%257Cf30%257Cfff&container=focus&gadget=a&rewriteMime=image/*"></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><font
color="#ff0000"><i>Update</i>:</font> <a
href="http://www.goopal.org/google-sites-business/google-spreadsheets/spreadsheet-output/tq-table-query"
target="_self">Spreadsheet Table Query (tq) to
HTML</a></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><font
color="#ff0000"><i>Update</i>:</font> <a
href="http://www.goopal.org/Google-Sites-Embed/google-code---custom-maps/google-static-maps"
target="_self">High Resolution for Static Maps</a></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><i style="color: rgb(255, 0,
0)">Update</i><span style="color: rgb(255, 0,
0)">: </span><a
href="http://www.goopal.org/google-sites-html/wysiwyg-html-examples/html-hyperlink"
target="_self">Link Markup for Rich Snippets</a></div> <div style="background-color: #ccc; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width:
1px; border-top-style: solid; border-right-style: solid;
border-bottom-style: solid; border-left-style: solid; border-top-color:
#ccc; border-right-color: #ccc; border-bottom-color: #ccc;
border-left-color: #ccc"><br> </div> </div> </div> <div class="nav">
<!--NAVIGATION TEXT--> <span class="button left-button">prev</span> <span class="button right-button">next</span> </div> </div> |