Table of Contents (click to jump to topic)

Diagram of an inSite page ............................................................................................................................................ 2

Helpful Links ................................................................................................................................................................... 3
Useful jQuery snippets .................................................................................................................................................. 3
Move content to the end of an element: .......................................................................................................................... 3
Move content to the beginning of an element: ............................................................................................................... 3
Move content after an element: ...................................................................................................................................... 3
Move content before an element: .................................................................................................................................... 3
Change CSS of element: .................................................................................................................................................. 4
Change any attribute: ...................................................................................................................................................... 4
ICM Modifications ......................................................................................................................................................... 4
REMEMBER: Always add extra test pages at the beginning of setting up a new site (before adding any modules to
all) since the modules are only added to all existing pages! ........................................................................................... 4
If you want certain content only visible in ICM .............................................................................................................. 4
To move the Edit Text link to right under the Menu button .................................................................................... 4
Make Edit Text link always on top: .............................................................................................................................. 4
To hide the Go to Style Sheet Builder button............................................................................................................... 4
Search box/bar modifications .................................................................................................................................... 4
Move the search bar ........................................................................................................................................................ 5
Add default text to search box that disappears when in use ........................................................................................... 5
Cart Modifications ......................................................................................................................................................... 6
Move the cart information: ............................................................................................................................................. 6
Pop-out shopping cart ..................................................................................................................................................... 6
Cart information in a menu drop down ...........................................................................................................................7
New/Featured/Sale Items Module modifications.................................................................................................. 8
Scrolling New/Featured/Sale items module................................................................................................................... 8
Menu modifications....................................................................................................................................................... 9
Add text to a sub-menu: .................................................................................................................................................. 9
Add a page to the main menu, but make it non-clickable .............................................................................................. 9
MerchList pages.............................................................................................................................................................. 9
Hide the back button on the Merchlist.aspx page ....................................................................................................... 9
Target certain MerchList pages for specific styling ........................................................................................................ 9
Textbook pages ............................................................................................................................................................... 9
Must click agree to continue to course materials ......................................................................................................... 9
Hide Add to Cart button for new/used rentals ..............................................................................................................10
Hide Add to Cart button based on usage code ...............................................................................................................10

<html> <body>
<form id=aspnetForm>
<div class=dv_Logo>

Diagram of an inSite page

<a href=home.aspx>

<img > Logo is chosen under site settings

<div id=pagewrapper>
<div class=horizontal_menu>
<div class=AspNet-Menu-Horizontal>
<ul class=AspNet-Menu>
<li class=AspNet-Menu-WithChildren>

<li class=AspNet-Menu-Leaf>
<a class=AspNet-Menu-Link>

<a class=AspNet-Menu-Link>
<ul>
<li class=AspNet-Menu-Leaf>
<a class=AspNet-Menu-Link>

<div class=div_top_sec>
<table class=tblTop>
<td>
<div id=ct100> This is the div where your actual content lives.

<table id=tbl_left_cont_right
<td class=div_left_sec
<div class=div_left_sec
<div class=vertical_menu
<div class=AspNet-MenuVertical>
<ul class=AspNet-Menu>
<li class=AspNet-MenuLeaf>

<td class=div_content_sec
<div class=div_content_sec>
If this is a regular ICM page, this is
where your first textboxs content lives.
<div class=main_content>
This div will only appear on pages
that have generated content
(SelectTermDept.aspx, contact.aspx,
etc) This is where the generated
content lives.

<td class=div_right_sec
<div class=div_right_sec
<div class=vertical_menu
<div class=AspNet-MenuVertical>
<ul class=AspNet-Menu>
<li class=AspNet-MenuLeaf>
<a class=AspNet-MenuLink>

<a class=AspNet-MenuLink>
<li class=AspNet-MenuWithChildren>

<li class=AspNet-MenuWithChildren>

<ul>

<ul>
<li class=AspNet-MenuLeaf>

<li class=AspNet-MenuLeaf>
<a class=AspNetMenu-Link>

<div id=ct100>
If this is a regular ICM page, this is
where your second textboxs content
lives.

<div style=clear: both;>

<div id=ct100_ct100_pnl_left
<div id=ct100...>This is
where your actual content
lives

<div class=div_bottom_sec>
<table class=tblBottom>
<td>
<div id=ct100> This is the div where your actual content lives.

<div class=div_footer_sec>
<div class=div_privacy>

<a class=AspNetMenu-Link>

<div style=clear: both;>

<div id=ct100_ct100_pnl_right
<div id=ct100...>this is
where your actual content
lives

Helpful Links
CSS3 Generator
Generator for various CSS3 effects.
Code snippets from CSS-Tricks
Features lots of snippets of HTML, CSS, Javascript and jQuery for cool effects and functionality. Updated frequently.
Can I Use
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
CSS-Conditional comments
An explanation of how to use conditional comments to fix bugs in IE
Easy Slider 1.7
Simple slideshow from an unordered list. Allows for front/back buttons or numbered slides, slides go right to left only
(no transitions)
jQuery Cycle Plugin
Slideshow that allows for fades, zooms, and shuffles.
Nivo Slider
Slider that features 16 different transition effects and simple markup
Smooth Div Scroll
jQuery NailThumb
A jQuery plugin that automatically crops images to a certain size, without messing up their aspect ratio
Facebook feed integration

Useful jQuery snippets

These should all be placed in text modules or in the Style Override. See the jQuery API for more.

Move content to the end of an element:

<script>
$(document).ready(function () {
$(DIVNAMEHERE).appendTo(DIVNAMEHERE);
});
</script>
Ex: The following script will move the horizontal menu div to the end of the dv_Logo div, after the last
element in that div, which is usually the link containing the image.
<script>
$(document).ready(function () {
$(div.horizontal_menu).appendTo(div.dv_Logo);
});
</script>

Move content to the beginning of an element:

<script>
$(document).ready(function () {
$(DIVNAMEHERE).prependTo(DIVNAMEHERE);
});
</script>
Ex: The following script will move the bottom section to the top of the main content section.
<script>
$(document).ready(function () {
$(div.div_bottom_sec).prependTo(div.main_content);
});
</script>

Move content after an element:

<script>
$(document).ready(function () {
$(DIVNAMEHERE).insertAfter(DIVNAMEHERE);
});
</script>
Ex: The following script will move the horizontal menu to show after the dv_Logo div.
<script>
$(document).ready(function () {
$(div.horizontal_menu). insertAfter(div.dv_Logo);
});
</script>

Move content before an element:

<script>
$(document).ready(function () {
$(DIVNAMEHERE).insertBefore(DIVNAMEHERE);
});
</script>
Ex: The following script will move the bottom section before the main content section.
<script>
$(document).ready(function () {
$(div.div_bottom_sec) .insertBefore(div.main_content);
});
</script>

Change CSS of element:

If possible, its always better to use style tags or the stylesheet to change the CSS of an element, but sometimes jquery
can be useful in changing the CSS of certain elements.
<script>
$(document).ready(function () {
$(DIVNAMEHERE).css(background,#FFFFFF);
});
</script>
Ex: The following script will set the background of the div#pagewrapper to white.
<script>
$(document).ready(function () {
$(div#pagewrapper).css(background,#FFFFFF);
});
</script>

Change any attribute:

<script>
$(document).ready(function () {
$(ELEMENT NAME HERE).attr(name,attribute);
});
</script>
Ex: The following script will set the href of the link for the logo to /SelectTermDept.aspx.
<script>
$(document).ready(function () {
$(.dv_Logo a).attr(href,/SelectTermDept.aspx);
});
</script>

ICM Modifications
This section contains tips and tricks specifically for the unpublished, ICM site.

REMEMBER: Always add extra test pages at the beginning of setting up a new site
(before adding any modules to all) since the modules are only added to all existing
pages!
If you want certain content only visible in ICM
Add this to a text module, or add the style part to the stylesheet, and make sure to add the .iCMOnly class to any
elements you want to hide after publishing.
<style>
.aspnetForm .iCMOnly{
display: none;
}
</style>
<span class="iCMOnly">This module contains scripts needed for your page. Please do
not remove. This message will only display in iCM and will not publish.</span>

To move the Edit Text link to right under the Menu button
Add this to the stylesheet
div.module {
position: relative;
}
div.LinkNormal {
position: absolute;
top: 3px;
right: 20px;
}

Make Edit Text link always on top:

Add this to the stylesheet
.LinkNormal {
z-index: 9999;
position: absolute;
}

To hide the Go to Style Sheet Builder button

Add this to the stylesheet
/* For iCM employee interface */
/* Hides the "CSS" link under Admin Tasks */
/* and removes the "Go to Style Sheet Builder" */
/* button under Style Sheet Editor. */
#btnDefaultCss, #lbtnCss, #btnimgCss, #btnBuildCss {
display: none;
}

Search box/bar modifications

Remember to add a vertical search module somewhere on each page

Move the search bar

Add the following to a text module:
<!--This part makes the search and cart appear somewhere else. Change the " WHERE
YOU WANT THE SEARCH TO APPEAR'" to your preferred id or class to make the
search go there-->
<script>
$(document).ready(function() {
$('div#topSearch').appendTo('WHERE YOU WANT THE SEARCH TO APPEAR');
});
</script>
<!--This part renames the search bits to make them easier to append elsewhere. Some
styling is done here, but other stuff is done in style tag-->
<script>
$(document).ready(function() {
$('table.search_v
input[id$=txtSearch]').appendTo('#mySearchField').css('width','166px');
$('table.search_v
input[id$=btnSearch]').appendTo('#mySearchSubmit').attr('value','Search').css('width','
50px').css('font-family','Arial,Helvetica,sans-serif').css('font-size','10px');
$('table.search_v
select[id$=listSearch]').appendTo('#mySearchSelect').css('width','auto');
});
</script>
<style>
/*Search styling starts here*/
/*This styles the dropdown box*/
span#mySearchSelect select {
}
/*This styles the submit button*/
span#mySearchSubmit input {
}
/*This styles the search text box*/
span#mySearchField input {
}
/*This hides the search module*/
.search_v{
display: none;
}
</style>
<!--This is the actual div where the search information is displayed-->
<div id="topSearch"><span id="mySearchSelect"></span>
<span id="mySearchField"></span>
<span id="mySearchSubmit"></span></div>

Add default text to search box that disappears when in use

<script>
$(document).ready(function() {
$('table.search_v
input[id$=txtSearch]').appendTo('#mySearchField').css('width','161px').attr('value','Sear
ch for merchandise').focus(function () {
if(this.value == 'Search for merchandise') { this.value = ''; }
}).blur(function() {
if(this.value == '') {this.value = 'Search for merchandise'}
});
$('table.search_v
input[id$=btnSearch]').appendTo('#mySearchSubmit').attr('value','Search').css('width','
50px').css('font-family','Arial,Helvetica,sans-serif').css('font-size','10px');
$('table.search_v
select[id$=listSearch]').appendTo('#mySearchSelect').css('width','auto');
});
</script>
<style>
/*Search styling starts here*/
/*This styles the dropdown box*/
span#mySearchSelect select {
}
/*This styles the submit button*/
span#mySearchSubmit input {
}
/*This styles the search text box*/
span#mySearchField input {
}
/*This hides the search module*/
.search_v{
display: none;
}
</style>
<!--This is the actual div where the search information is displayed-->
<div id="topSearch"><span id="mySearchSelect"></span>
<span id="mySearchField"></span>
<span id="mySearchSubmit"></span></div>

Cart Modifications
Remember to add a mini cart module somewhere on the page!

Move the cart information:

Add the following to a text module on every page.
<!--This part makes the search and cart appear somewhere else. Change the " WHERE
YOU WANT THE SEARCH TO APPEAR'" to your preferred id or class to make the cart
go there-->
<script>
$(document).ready(function() {
$('div#cart').prependTo('WHERE YOU WANT THE CART TO APPEAR');
});
</script>
<!--This part makes the cart refresh every second, and renames the cart bits so that
they're easier to call elsewhere-->
<script>
$(document).ready(function(){
window.setInterval(function(){
var cartSubTotal = $('#dvCart span[id*=lblCartTotal]').text();
var cartItemCount = $('#dvCart span[id*=lblCount]').text();
$('span#count').html('Items: ' + cartItemCount + '');
$('span#total').html('Subtotal: ' + cartSubTotal + '');
}, 1000);
});
</script>
<style>
/*This styles the entire cart div*/
#cart {
}
/*This styles the links within the cart div*/
#cart a {
}
/*This hides the mini cart module*/
#dvCart{
Display: none;
}
</style>
<!--This is the actual div where the cart information is displayed-->
<div id="cart"><span id="count"></span><span id="total"></span>< a
href=/shoppingcart.aspx>Check Out</a></div>
</div>

Pop-out shopping cart

This script creates a link that, when clicked, opens the shopping cart on top of the page, and creates a transparent dark
overlay on top of the page content. Add this to a text module somewhere on the page.
<div id="mycart"><a>My Cart</a></div>
<div class="black_overlay"></div>
<div class="white_content">
<div id="shoppingheader"><span>Shopping Cart</span><img alt="" src="IMG PATH"
id="closebox" /></div>
<div id="cartinfo">
<div id="cartcount"></div>
<div id="carttotal"></div>
*/CHANGE THIS TO THE CORRECT SHOPPING CART LINK /*
<div id="checkout"><a href="/shoppingcart.aspx">Checkout</a></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//When My Cart is clicked, cart lightbox displays//
$('#mycart').click(function() {
$('div.black_overlay').fadeIn();
$('div.white_content').fadeIn();
});
//When script finishes loading append to banner//
$('#mycart').appendTo('WHERE YOU WANT THE CART LINK);
window.setInterval(function(){
var total = $('span[id*="lblCartTotal"]').text();
var count = $('#dvCart span[id*="lblCount"]').text();
$('#cartcount').html('Total Items In Cart: <span>' + count + '</span>');
$('#carttotal').html('Sub Total: <span>' + total + '</span>');
}, 1000);
$('#closebox').click(function() {
$('.white_content').fadeOut();
$('.black_overlay').fadeOut();
});
});
</script>
<style>
.black_overlay{

display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 500px;
border: 3px solid #FF0101;
background-color: #F7F7F7;
z-index:1002;
}
.white_content div{
margin-bottom: 5px;
}
#shoppingheader{
background-color: #F4D2D2;
color: #000;
height: 50px;
font-size: 20pt;
font-weight: bold;
text-shadow: 1px 1px 2px #666666;
padding: 10px 0 0 10px;
border-bottom: 1px solid #000;
position: relative;
}
#cartinfo {
color: #000
font-weight: bold;
font-size: 14pt;
padding: 10px 0 0 10px;
}
#cartinfo a {
color: blue;
font-weight: bold;
font-size: 12pt;
text-decoration: none;
}
#cartinfo a:hover {
color: red;
}
#cartinfo span {
color: red;
}
#checkout {
width: 100px;
background-image: url(#) ;
background-repeat: no-repeat;
background-position: 0px 0px;
text-align: right;
}
#closebox {
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
}
</style>

Cart information in a menu drop down

Youll want to add .horizontal_menu ul.AspNet-Menu li.AspNet-Menu-Leaf span to your stylesheets horizontal menu
styling (after .horizontal_menu ul.AspNet-Menu li a, .horizontal_menu ul.AspNet-Menu li.AspNet-Menu-Leaf a ) so
that it looks the same as the links in the menu.
<script>
$(document).ready(function(){
window.setInterval(function(){
var cartSubTotal = $('#dvCart span[id*=lblCartTotal]').text();
var cartItemCount = $('#dvCart span[id*=lblCount]').text();
$('span#count').html('Items: ' + cartItemCount + '');
$('span#total').html('Subtotal: ' + cartSubTotal + '');
}, 1000);
});
$(document).ready(function(){
$('a.AspNet-Menu-Link:contains("Cart")').siblings().prepend('<li class="AspNet-MenuLeaf"><span class="AspNet-Menu-Link" id="count"></span></li>');

$('a.AspNet-Menu-Link:contains("Cart")').siblings().prepend('<li class="AspNet-MenuLeaf"><span class="AspNet-Menu-Link" id="total"></span></li>');

});
</script>

New/Featured/Sale Items Module modifications

Scrolling New/Featured/Sale items module
This creates a box that scrolls through items included in the new/featured/sale items module. Download necessary
Javascript files from Smooth Div Scroll. Add this to a text module, and dont forget to add the items module to the
page, as well! Example here
<!--REMEMBER TO CHANGE THE FOLLOWING LINKS TO THE CORRECT STORE NUMBER-->
<script src="/StoreFiles/1-SchoolFiles/1-Scripts/1-jquery.kinetic.js"></script>
<script src="/StoreFiles/1-SchoolFiles/1-Scripts/1-jquery.mousewheel.min.js"></script>
<script src="/StoreFiles/1-SchoolFiles/1-Scripts/1-jquery-ui-1.9.1.custom.js"></script>
<script src="/StoreFiles/1-SchoolFiles/1-Scripts/1-jquery.smoothDivScroll-1.3.js"></script>
<style>
/*This hides the module while the script loads. Make sure your module number is correct: module50 is
new, module51 is featured, module52 is popular, and module53 is checkout*/
div.module51{
display: none;
}
/*You can change sizes and padding of stuff below, but leave all other styling*/
#makeMeScrollable{
width: 210px;
height: 290px;
position: relative;
border: 2px solid #000000;
}
div.featured {
-moz-user-select: none;
float: left;
margin: 0;
padding: 100px 0 0;
position: relative;
width: 210px;
height: 190px;
}
/*Leave the stuff below alone, that's what makes it work*/
div.scrollWrapper {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
div.scrollableArea {
height: 100%;
position: relative;
width: auto;
}
</style>
<!--This changes the featured item bits to divs instead of tds (makes it easier to position in the scroller)
Make sure your module number is correct: module50 is new, module51 is featured, module52 is
popular, and module53 is checkout-->
<script>
$('td.module51item').replaceWith(function(i, html) {
return '<div class="featured">' + html + '</div>';
});
</script>
<!--This bit makes the scrolly stuff work. See http://www.smoothdivscroll.com/options.html for
options on arrows, auto scroll, etc-->
<script type="text/javascript">
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
</script>
<!--This bit appends the divs we made earlier to the scroller-->
<script>
$(document).ready(function () {
$('div.featured').appendTo($('div.scrollableArea'));
});
</script>
<!--This bit is where the scroller lives-->
<div id="makeMeScrollable">
<div class="scrollableArea">
</div>
</div>

Menu modifications
Add text to a sub-menu:
<script>
$(document).ready(function(){
$('a.AspNet-Menu-Link:contains("LINK TEXT")').siblings().append('<li class="AspNetMenu-Leaf"><a>TEXT TO ADD </a></li>');
});
</script>

Add a page to the main menu, but make it non-clickable

This is great for when you want to use the menu builder function of ICM, but you dont want your top-level menu
links to actually go anywhere.
First, youll need to add whichever pages you want to be non-clickable by choosing Add in ICM. Put in the
information you want for the Page Name and Page Title, and make sure you choose to include it in the menu. Now,
expand the Page Link section and set the URL to link to as # and for it to open in the same window.
Then, add the following script to a text box on every page.
$(document).ready(function(){
$('a.AspNet-Menu-Link[href$="#"]').removeAttr("href").css('cursor', 'default');
});

MerchList pages
Hide the back button on the Merchlist.aspx page
For any stores that hide breadcrumbs so that customers can't get to the /merchandise.aspx page, you should also hide
the "Back" button on the Merchlist.aspx page, because that always links the user back to the /merchandise.aspx page.
This script removes that Back button. (Everyone has a back button on their browser anyway, so this link is basically
unneeded.)
<script>
$(document).ready(function() {
$('input[value="Back"]').hide();
});
</script>

Target certain MerchList pages for specific styling

Sometimes stores want a different banner on certain pages, or to hide certain elements. This is a way you can do that a
little easier.
<script>
$(function() {
//Change PUT NUMBER OF MERCHLIST PAGE HERE to the number of the
merchlist page//
if ( document.location.href.indexOf('ID=PUT NUMBER OF MERCHLIST PAGE
HERE) > -1 ) {
//Add any styling here, either with .attr, or .css//
$('img[id$="img_logo"]').attr('src','/example.jpg');
$('div.div_left_sec').css(background,red);
}
});
</script>

Textbook pages
Must click agree to continue to course materials
Some stores want their students to agree to their pricing or return policy before being able to view their books. Add
this to the SelectTermDept page to add a checkbox that is required to be checked before students can proceed.
<!This is the span that contains the link for terms and conditions. Remember to
change the href of the link to point to the right page-->
<span id="termagree">
<input type="checkbox" tabindex="0" name="checkme" value="on" id="checkme" />
<label for="checkme">
<span>I have read and agree with the <a target="_blank" href="#">Terms &amp;
Conditions.</a></span></label>
</span>
<script>
function adoCheckbox() {
// Begin by disabling the submission button //
$('input.btnGetCourseMaterials').attr('disabled','disabled');
// Insert our agreement text and checkbox //
$('#termagree').css('float', 'left').appendTo('td.selectCol2');
// Checkbox events //
$('input#checkme').click(function() {
if($('input#checkme:checked').length) {
// The agreement box is checked, so enable submit button //
$('input[value="Get Course Materials"]').removeAttr('disabled');
} else {
// The agreement box has been unchecked, so disable submit again //
$('input[value="Get Course Materials"]').attr('disabled','disabled');
}
});
}

function pageLoad() {
adoCheckbox();
$('input.btnGetCourseMaterials').live('click', function() {
adoCheckbox();
});
}
$('input.btnGetCourseMaterials').live('click', function() {
adoCheckbox();
});
</script>

Hide Add to Cart button for new/used rentals

These scripts work with hiding the add-to-cart buttons for specific types of items (for instances when they want to
show the price on something but only sell it in store). This CSS hides the add-to-cart button for new and used rentals
(non-serialized). Add it to the stylesheet, or to the CourseMaterials.aspx page
<style type="text/css">
[id$="add_cart_rent_new"] {
display: none;
}
[id$="add_cart_rent_used"] {
display: none;
}
</style>

Hide Add to Cart button based on usage code

This hides the add-to-cart buttons for items based on their usage code (the usage code for this was "INFORMATION
ONLY"). Add it to the CourseMaterials.aspx page in a text module.
<script>
$(document).ready(function() {
$("div.material_info:contains('INFORMATION ONLY')").next().next().hide();
});
</script>