HTML Box


HTML Box for CSS & JavaScript


The HTML Box allows for more Advanced HTML, Advanced CSS, Advanced JavaScript  and Google Library APIs.

The HTML box features:

  • Numbered Lines for code reference
  • Full Color Code
  • Support for Comments <Script>,<Style> and many HTML tags
  • Autosized Gadget Output
  • Inherited Google Sites Design / CSS
  • Automatic Error/Debugger
  • Standardization / Schema Filter 
  • Support Google API Library Javascript -  Javascript CDN Content Delivery Network  [Always Check API Versions supported]


Advanced HTML


HTML 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 commentsHTML5 and webkit attributes etc...

Advanced HTML for HTML Box


Advanced CSS


More Advanced CSS like Opacity and position animation.

CSS for  HTML Box 



Advanced JavaScript


More Advanced Javascript.

Javascript for  HTML Box 







Google APIs

Google 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.















jQuery Slider - HTML Box Example Code:


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.


Highlighted code explained:

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> tags

A simplified HTML only view:
...
<div class="carousel" style="display:none;">
<div class="items">
<div>Slide 1 Content</div>
<div>Slide 2 Content</div>
</div>
...

Example HTML Code:

<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&amp;container=focus&amp;gadget=a&amp;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">&nbsp;</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&nbsp;Google&nbsp;Sites &gt;&gt;</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">&nbsp;</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 &gt;&gt;</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&amp;container=focus&amp;gadget=a&amp;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)">:&nbsp;</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>
&nbsp;&nbsp;
<span class="button right-button">next</span>
</div>
</div>