Databases
StackOverflow2013
Postsdbo
POHow to test if jquery is loading properly?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to test if jquery is loading properly?
    text
    copied!<p>I have a jquery/CSS carousel that contains a and li tags. Everything seems to be displaying correctly in terms of the html and styling but it seems like the jquery isn't loading b/c there is no functionality on the carousel. I've tried looking at the scripts tab in Firebug and could only see a breakpoint listed undefined for jquery js library v1.6.2 from the google library I'm calling. I'm a designer trying to learn more development so any help is appreciated! Thanks, </p> <p>Here is my code</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;hiLounge&lt;/title&gt; &lt;link href="/css/reset.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/touchcarousel.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/black-and-white-skin.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.touchcarousel-1.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/cufon.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/League_Gothic_400.font.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; Cufon.replace ('h1', 'h2', 'ul#nav li'); &lt;/script&gt; &lt;script&gt; jQuery(function($) { $("#carousel").touchcarousel({ itemsPerMove: 4, pagingNav: true, // Enable paging nav. Overrides snapToItems. // Snap to first item of every group, based on itemsPerMove. pagingNavControls: true, // Paging controls (bullets). autoplay:true, // Autoplay enabled. autoplayDelay:3000, // Delay between transitions. autoplayStopAtAction:true, // Stop autoplay forever when user clicks arrow or does any other action. scrollbar: true, // Scrollbar enabled. scrollbarAutoHide: false, // Scrollbar autohide. scrollbarTheme: "light", // Scrollbar color. Can be "light" or "dark". transitionSpeed: 600, // Carousel transition speed (next/prev arrows, slideshow). directionNav:true, // Direction (arrow) navigation (true or false). directionNavAutoHide:false, // Direction (arrow) navigation auto hide on hover. // On touch devices arrows are always displayed. loopItems: false, // Loop items (don't disable arrows on last slide and allow autoplay to loop). keyboardNav: false, // Keyboard arrows navigation. dragUsingMouse:true, // Enable drag using mouse. scrollToLast: true, // Last item ends at start of carousel wrapper. itemFallbackWidth: 500, // Default width of the item in pixels. (used if impossible to get item width). baseMouseFriction: 0.0012, // Container friction on desktop (higher friction - slower speed). baseTouchFriction: 0.0008, // Container friction on mobile. lockAxis: true, // Allow dragging only on one direction. useWebkit3d: false, // Enable WebKit 3d transform on desktop devices. // (on touch devices this option is turned on). // Use it if you have only images, 3d transform makes text blurry. onAnimStart: null, // Callback, triggers before deceleration or transition animation. onAnimComplete: null, // Callback, triggers after deceleration or transition animation. onDragStart:null, // Callback, triggers on drag start. onDragRelease: null // Callback, triggers on drag complete. }); }); &lt;/script&gt; &lt;style rel="stylesheet" type="text/css"&gt; body { background: #ffffff; text-align: center; font-family: helvetica, arial, sans-serif; line-height: 25px; margin-top: 0px; } h1 { font-size: 34px; line-height: 24px; color: #007a3d; } a:link { color: #007a3d; text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: #007a3d; } #container { width: 960px; margin: auto; text-align: center; } #container #godbar { width: 960px; height: 32px; margin: auto; position: fixed; background: url(images/godbar_bg.jpg) repeat-x; border-left: 1px solid #dbc25e; border-bottom: 1px solid #dbc25e; border-right: 1px solid #dbc25e; } #container #godbar #godbarIcons { width: 100%; height: 32px; float: right; text-align: right; margin-top: 5px; margin-right: 5px; } #container #godbar #godbarIcons ul { display: inline; } #container #godbar #godbarIcons li { display: inline; padding-right:13px; } #container #header { width: 960px; height: 150px; margin-bottom: 0; padding-bottom: 0; } #container #logo { width: 233px; height: 94px; margin: 0; padding: 0; padding-top: 35px; } #container #header #logo h1{ width: 233px; height: 94px; clear: both; display: block; margin: 0 0 0 15px; background: url(images/logo.jpg) no-repeat; text-indent: -9999px; } #container #header #logo h1 a { display: block; width: 233px; height: 94px; } #container ul#nav { width: 100%; height: 44px; text-align: center; margin: 0 auto; padding: 0; background: url(images/navigation_bg.jpg) repeat-x; list-style: none; display: block; } #container ul#nav a:hover { text-decoration: none; } #container ul#nav li { margin-top: 5px; display: inline-block; float: left; text-align: center; padding-top: 5px; padding-right: 0; padding-left: 15px; text-transform: uppercase; } #container ul#nav a { color: #FFF; } #container carousel { position: relative; width: 100%; margin: 0 auto; } #container #carousel li { display: inline; list-style: none; margin: 0 auto; padding: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;!--GODBAR--&gt; &lt;div id="godbar"&gt; &lt;div id="godbarIcons"&gt; &lt;ul&gt; &lt;li id="godbarFacebook"&gt;&lt;a href="http://www.facebook.com/hilounge" target="_blank"&gt;&lt;img src="images/godbar_fb.png" alt="hilounge on Facebook" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarTwitter"&gt;&lt;a href="http://www.twitter.com/hilounge" target="_blank"&gt;&lt;img src="images/godbar_twitter.png" alt="hilounge on Twitter"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarInstagram"&gt;&lt;a href="http://www.instagram.com/hilounge" target="_blank"&gt;&lt;img src="images/godbar_instagram.png" alt="hilounge on Instagram" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarPinterest"&gt;&lt;a href="http://www.pinterest.com/hilounge" target="_blank"&gt;&lt;img src="images/godbar_pinterest.png" alt="hilounge on Pinterest" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarGplus"&gt;&lt;a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"&gt;&lt;img src="images/godbar_gplus.png" alt="hilounge on Goolge plus" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarRss"&gt;&lt;a href="http://feeds.feedburner.com/hilounge" target="_blank"&gt;&lt;img src="images/godbar_rss.png" alt="hilounge RSS feed" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li id="godbarEmail"&gt;&lt;a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&amp;amp;loc=en_US" target="_blank"&gt;&lt;img src="images/godbar_email.png" alt="hilounge email" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END GODBARICONS--&gt; &lt;/div&gt; &lt;!--END GODBAR--&gt; &lt;!--BEGIN HEADER--&gt; &lt;div id="header"&gt; &lt;!--BEGIN LOGO--&gt; &lt;div id="logo"&gt; &lt;h1&gt;&lt;a href="index.html"&gt;hiLounge&lt;/a&gt;&lt;/h1&gt; &lt;/div&gt; &lt;!--END LOGO--&gt; &lt;!--BEGIN NAVIGATION--&gt; &lt;ul id="nav"&gt; &lt;h2 class="nav"&gt;&lt;li&gt;&lt;a href="#"&gt; News &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Entertainment &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Fashion &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Munchies &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Design &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Reviews &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt; Contests &lt;/a&gt;&lt;/li&gt; &lt;/h2&gt; &lt;/ul&gt; &lt;!--END NAVIGATION--&gt; &lt;/div&gt; &lt;!--END HEADER--&gt; &lt;!--BEGIN CAROUSEL--&gt; &lt;div id="carousel" class="touchcarousel black-and-white"&gt; &lt;ul class="touchcarousel container"&gt; &lt;!-- TouchCarousel items, place any HTML content inside them (img tag is inserted as an example) --&gt; &lt;li class="touchcarousel-previous"&gt; &lt;img src="images/previous.jpg" width="20" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;a href="#"&gt;&lt;img src="images/carousel-image.png" width="184" height="184" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;a href="#"&gt;&lt;img src="images/carousel-image2.png" width="184" height="184" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;img src="images/carousel-image.png" width="184" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;img src="images/carousel-image2.png" width="184" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;img src="images/carousel-image.png" width="184" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-next"&gt; &lt;img src="images/next.jpg" width="20" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;img src="images/carousel-image2.png" width="184" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-item"&gt; &lt;img src="images/carousel-image.png" width="184" height="184" /&gt; &lt;/li&gt; &lt;li class="touchcarousel-next"&gt; &lt;img src="images/next.jpg" width="20" height="184" /&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END CAROUSEL--&gt; &lt;!--BEGIN MAIN--&gt; &lt;div id="primaryContent"&gt; &lt;h1&gt;&lt;a href="#"&gt; 10 Best Bongs You Wish You Made&lt;/a&gt;&lt;/h1&gt; &lt;a href="#"&gt;&lt;img src="images/featured-post-featured-image.png" alt="Post Title" /&gt;&lt;/a&gt; &lt;!--BEGIN POSTMETADATA--&gt; &lt;div id="postMetaData"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/date-icon.jpg" /&gt; March 26, 2013&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/category-icon.jpg" /&gt; Entertainment&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/author-icon.jpg" /&gt; James Scaggs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END POSTMETADATA--&gt; &lt;p&gt; In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and... &lt;a href="#"&gt; Read More&lt;/a&gt; &lt;/p&gt; &lt;!--BEGIN POSTSHARINGBUTTONS--&gt; &lt;div id="postSharingButtons"&gt; &lt;ul&gt; &lt;li&gt;Like&lt;/li&gt; &lt;li&gt;Tweet&lt;/li&gt; &lt;li&gt;G+&lt;/li&gt; &lt;li&gt;Pin it&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END POSTSHARINGBUTTONS--&gt; &lt;a href="#"&gt;&lt;img src="images/read-more.jpg" /&gt; Read More &lt;/a&gt; &lt;!-- BEGIN RECENTPOSTS--&gt; &lt;h2&gt;Recent Posts&lt;/h2&gt; &lt;div id="recentPosts"&gt; &lt;h1&gt;&lt;a href="#"&gt;5 MUST FOLLOW MARIJUANA FACEBOOK PAGES&lt;/a&gt;&lt;/h1&gt; &lt;img src="images/featured-image-1.png" alt="post-title" /&gt; &lt;!--BEGIN RECENTPOSTMETADATA--&gt; &lt;div id="recentPostMetaData"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/date-icon.jpg" /&gt; March 26, 2013&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/category-icon.jpg" /&gt; Entertainment&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/author-icon.jpg" /&gt; James Scaggs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END RECENTPOSTMETADATA--&gt; &lt;p&gt; In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and... &lt;a href="#"&gt; Read More&lt;/a&gt; &lt;/p&gt; &lt;!--BEGIN POST SHARING BUTTONS--&gt; &lt;div id="postSharingButtons"&gt; &lt;ul&gt; &lt;li&gt;Like&lt;/li&gt; &lt;li&gt;Tweet&lt;/li&gt; &lt;li&gt;G+&lt;/li&gt; &lt;li&gt;Pin it&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END POST SHARING BUTTONS--&gt; &lt;h1&gt;&lt;a href="#"&gt;7 MARIJUANA INFOGRAPHICS YOU DON'T WANT TO MISS&lt;/a&gt;&lt;/h1&gt; &lt;img src="images/featured-image-1.png" alt="post-title" /&gt; &lt;!--BEGIN RECENTPOSTMETADATA--&gt; &lt;div id="recentPostMetaData"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/date-icon.jpg" /&gt; March 26, 2013&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/category-icon.jpg" /&gt; Entertainment&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/author-icon.jpg" /&gt; James Scaggs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END RECENTPOSTMETADATA--&gt; &lt;p&gt; In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and... &lt;a href="#"&gt; Read More&lt;/a&gt; &lt;/p&gt; &lt;!--BEGIN POST SHARING BUTTONS--&gt; &lt;div id="postSharingButtons"&gt; &lt;ul&gt; &lt;li&gt;Like&lt;/li&gt; &lt;li&gt;Tweet&lt;/li&gt; &lt;li&gt;G+&lt;/li&gt; &lt;li&gt;Pin it&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--END POSTSHARINGBUTTONS--&gt; &lt;/div&gt; &lt;!--END RECENTPOSTS--&gt; &lt;/div&gt; &lt;!--END MAIN--&gt; &lt;/div&gt; &lt;!--END CONTAINER--&gt; &lt;div id="footerWrap"&gt; &lt;div id="footer"&gt; &lt;div id="footerLogo"&gt; &lt;a href="index.html"&gt;&lt;img src="images/footer-logo.jpg" alt="hiLounge" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;!--end footerLogo--&gt; &lt;p&gt; &lt;a href="#"&gt;About Us&lt;/a&gt; &lt;a href="#"&gt;Contact Us&lt;/a&gt; &lt;a href="#"&gt;Legal&lt;/a&gt; &lt;a href="#"&gt;Advertising&lt;/a&gt; &lt;/p&gt; &lt;p id="footerInfo"&gt;copyright (c) 2013 &lt;a href="http://www.hilounge.com"&gt;hiLounge&lt;/a&gt; &lt;/p&gt; &lt;/div&gt; &lt;!--END FOOTER--&gt; &lt;/div&gt; &lt;!--END FOOTERWRAP--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the added CSS for the jquery carousel:</p> <pre><code> /******************************************************\ * * Base TouchCarousel stylesheet * * Contents: * * 1. Main containers * 2. Carousel items * 3. Arrows(direction) navigation * 4. Paging navigation * 5. Scrollbar * 6. Cursors * \******************************************************/ /******************************************************\ * * 1. Main containers (carousel size, background) * \******************************************************/ .touchcarousel { position: relative; display: block; width: 100%; height: 200px; float: right; left: 0px; margin-bottom: 10px; /* style is removed after carousel is inited, use !important if you want to keep it*/ overflow: hidden; } .touchcarousel .touchcarousel-container { position: relative; padding: 0; list-style: none; margin-top: 5px; display: inline-block; float: left; text-align: center; padding-top: 5px; padding-right: 0; } .touchcarousel .touchcarousel-wrapper { position: relative; overflow:hidden; width: 100%; height: 100%; } /******************************************************\ * * 2. Carousel items (item styling, spacing between items) * \******************************************************/ .touchcarousel .touchcarousel-item { /* use margin-right for spacing between items */ margin: 0 1 0 0; padding: 0; float: left; } .touchcarousel .touchcarousel-previous { float: left; } .touchcarousel .touchcarousel-next { position: relative; float: right; } /* Last carousel item */ .touchcarousel .touchcarousel-item.last { margin-right: 0 !important; } /******************************************************\ * * 3. Arrows(direction) navigation * \******************************************************/ /* arrow hitstate and icon holder */ .touchcarousel .arrow-holder { height: 100%; width: 45px; position: absolute; top: 0; display: block; cursor: pointer; z-index: 25; } .touchcarousel .arrow-holder.left { left: 0; } .touchcarousel .arrow-holder.right { right: 0; } /* arrow icons */ .touchcarousel .arrow-icon{ width: 45px; height: 90px; top:50%; margin-top:-45px; position: absolute; cursor: pointer; } .touchcarousel .arrow-icon.left { } .touchcarousel .arrow-icon.right { } .touchcarousel .arrow-holder:hover .arrow-icon { } .touchcarousel .arrow-holder.disabled { cursor: default; } .touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; } /******************************************************\ * * 4. Paging navigation * \******************************************************/ .touchcarousel .tc-paging-container { width:100%; overflow:hidden; position:absolute; margin-top:-20px; z-index:25; } .touchcarousel .tc-paging-centerer { float: left; position: relative; left: 50%; } .touchcarousel .tc-paging-centerer-inside { float: left; position: relative; left: -50%; } /* Paging items */ .touchcarousel .tc-paging-item { float:left; cursor:pointer; position:relative; display:block; text-indent: -9999px; } .touchcarousel .tc-paging-item.current { } .touchcarousel .tc-paging-item:hover { } /******************************************************\ * * 5. Scrollbar * \******************************************************/ .touchcarousel .scrollbar-holder { position: absolute; z-index: 30; left: 6px; right: 6px; bottom: 5px; height:4px; overflow: hidden; } .touchcarousel .scrollbar { position: absolute; left:0; height:4px; bottom: 0px; } .touchcarousel .scrollbar.dark { background-color: rgb(130, 130, 130); background-color: rgba(0, 0, 0, 0.5); } .touchcarousel .scrollbar.light { background-color: rgb(210, 210, 210); background-color: rgba(255, 255, 255, 0.5); } /******************************************************\ * * 6. Cursors * \******************************************************/ /* IE and Opera use "move", FF uses -moz-grab */ .touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; } .touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; } /* Cursor that used when mouse drag is disabled */ .touchcarousel .auto-cursor{ cursor:auto; } /* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload