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 comments, HTML5 and webkit attributes etc...

Advanced HTML for HTML Box

Updates via Google Plus Page

Advanced CSS

More Advanced CSS like Opacity and position animation.

CSS for HTML Box

Updates via Google Plus Page

Advanced JavaScript

More Advanced Javascript.

Javascript for HTML Box

Updates via Google Plus Page

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.

Static Google Maps

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

Updates via Google Plus Page

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

<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"> 
<span class="button left-button">prev</span>
  
<span class="button right-button">next</span>
</div>
</div>