JavaScript - Different Random Post Widget For Blogger?

I work for a university in Texas, and recently my boss indicated he wanted me to build a "help button" widget for our computers. We run both Mac and Windows, and will be upgrading to Windows 7 soon, as I understand it supports widgets. According to the guide I'm working my way through, Widgets can built using a combination of HTML and Javascript. While I know HTML, I know next to nothing about Javascript, hence, my question. Here's what I need the script to do: Pull the logged in username, pull the machine name, pull the time and date, then throw up a dialogue box which will send everything to an e-mail address/server. Does anyone know a spot for me to begin? I must confess, I'm a little befuddled by Javascript.

Thanks

Hello, Im a coding noob and trying to make this widget display in 3 columns. Can some one help me? I am able to do it with simple css modifications, but the container still only shows up as 1 column rather than 3. Any ideas?
Code:

      <!-- Show static HTML/CSS as a placeholder in case js is not enabled - javascript include will override this if things work -->
      <style type="text/css" media="screen">
  .gr_custom_container_1318614690 {
    /* customize your Goodreads widget container here*/
    border: 1px solid gray;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding: 10px 5px 10px 5px;
    background-color: #FFFFFF;          
    color: #000000;          
    width: 300px
  }
  .gr_custom_header_1318614690 {
    /* customize your Goodreads header here*/
    border-bottom: 1px solid gray;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    font-size: 120%
  }
  .gr_custom_each_container_1318614690 {
    /* customize each individual book container here */
    width: 100%;
    clear: both;
    margin-bottom: 10px;
    overflow: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid #aaa;
  }
  .gr_custom_book_container_1318614690 { 
    /* customize your book covers here */
    overflow: hidden;
    height: 60px;
    
      float: left;
      margin-right: 4px;
      width: 39px;
      }
  .gr_custom_author_1318614690 {
    /* customize your author names here */
    font-size: 10px;
  }
  .gr_custom_tags_1318614690 {
    /* customize your tags here */
    font-size: 10px;
    color: gray;
  }
  .gr_custom_rating_1318614690 {
    /* customize your rating stars here */
    float: right;
  }
</style>

      <div id="gr_custom_widget_1318614690">
            <div class="gr_custom_container_1318614690">
    <h2 class="gr_custom_header_1318614690">
    <a href="http://www.goodreads.com/review/list/6131699-kevin?shelf=read&amp;utm_medium=api&amp;utm_source=custom_widget" style="text-decoration: none;">Kevin's bookshelf: read</a>
    </h2>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&amp;utm_source=custom_widget" title="The Great Gatsby"><img alt="The Great Gatsby" border="0" src="http://photo.goodreads.com/books/1273944449s/4671.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&amp;utm_source=custom_widget">The Great Gatsby</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/3190.F_Scott_Fitzgerald">F. Scott Fitzgerald</a>
          </div>
        
        
        
      </div>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&amp;utm_source=custom_widget" title="Where the Sidewalk Ends"><img alt="Where the Sidewalk Ends" border="0" src="http://photo.goodreads.com/books/1168052448s/30119.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&amp;utm_source=custom_widget">Where the Sidewalk Ends</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/435477.Shel_Silverstein">Shel Silverstein</a>
          </div>
        
        
        
      </div>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&amp;utm_source=custom_widget" title="The Alchemist"><img alt="The Alchemist" border="0" src="http://photo.goodreads.com/books/1287827991s/865.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&amp;utm_source=custom_widget">The Alchemist</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/566.Paulo_Coelho">Paulo Coelho</a>
          </div>
        
        
        
      </div>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&amp;utm_source=custom_widget" title="Slaughterhouse-Five"><img alt="Slaughterhouse-Five" border="0" src="http://photo.goodreads.com/books/1316813479s/4981.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&amp;utm_source=custom_widget">Slaughterhouse-Five</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/2778055.Kurt_Vonnegut">Kurt Vonnegut</a>
          </div>
        
        
        
      </div>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&amp;utm_source=custom_widget" title="Of Mice and Men"><img alt="Of Mice and Men" border="0" src="http://photo.goodreads.com/books/1309211906s/890.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&amp;utm_source=custom_widget">Of Mice and Men</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/585.John_Steinbeck">John Steinbeck</a>
          </div>
        
        
        
      </div>
            <div class="gr_custom_each_container_1318614690">
        
          <div class="gr_custom_book_container_1318614690">
            <a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&amp;utm_source=custom_widget" title="Lord of the Flies"><img alt="Lord of the Flies" border="0" src="http://photo.goodreads.com/books/1165637417s/7624.jpg" /></a>
          </div>
        
        
          <div class="gr_custom_rating_1318614690">
            <img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
          </div>
        
        
          <div class="gr_custom_title_1318614690">
            <a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&amp;utm_source=custom_widget">Lord of the Flies</a>
          </div>
        
        
          <div class="gr_custom_author_1318614690">
            by <a href="http://www.goodreads.com/author/show/306.William_Golding">William Golding</a>
          </div>
        
        
        
      </div>
    <br style="clear: both"/>
  <center>
    <a href="http://www.goodreads.com/"><img src="http://www.goodreads.com/images/widget/widget_logo.gif" alt="goodreads.com" style="border:0;" /></a>
  </center>
  <noscript>
    Share <a href="http://www.goodreads.com">book reviews</a> and ratings with Kevin, and even join a <a href="http://www.goodreads.com/group/">book club</a> on Goodreads.
  </noscript>
  </div>

      </div>
      <script src="http://www.goodreads.com/review/custom_widget/6131699.Kevin's%20bookshelf:%20read?cover_position=left&amp;cover_size=small&amp;num_books=6&amp;order=a&amp;shelf=read&amp;show_author=1&amp;show_cover=1&amp;show_rating=1&amp;show_review=1&amp;show_tags=1&amp;show_title=1&amp;sort=date_added&amp;widget_bg_color=FFFFFF&amp;widget_bg_transparent=&amp;widget_border_width=1&amp;widget_id=1318614690&amp;widget_text_color=000000&amp;widget_title_size=medium&amp;widget_width=medium" type="text/javascript" charset="utf-8"></script>

With Blogger you have to 'pre-install' the jQuery code into the main coding, which I already did. Installed correctly, per help of other online forums. The problem I'm having now, is the CSS & HTML is coming together beautifully, but the hover effects are not working on the two drop-down options with multiple links. It is supposed to yield this: Ardor | CSS MenuMaker

This is the proposed Javascript, that for some reason is not working.
Code:

<script type="text/javascript">
(function($){
$(document).ready(function(){

$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
  $('#cssmenu #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }); });
})(jQuery); </script>

The HTML portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

The CSS portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

It generates into a drop-down menu that uses jQuery as part of the effects (simple fade drop-down); any help is greatly appreciated. Java is not my forte

Hello everyone!

I got this:

<center><script type="text/javascript">
var imgs1 = new Array("http://img687.imageshack.us/img687/4438/kamslide3.jpg","http://img143.imageshack.us/img143/5968/kamslide2.jpg","http://img696.imageshack.us/img696/7066/kamslide1.jpg");

var alt1 = new Array();
var currentAd1 = 0;
var imgCt1 = 3;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",7000);
</script>
<img src="http://img687.imageshack.us/img687/4438/kamslide3.jpg" id="adBanner1" border="0" width="861" height="267" /></center>


It looks like this: http://dolollies.blogspot.com

How can I make the image fade??

Hey there. first post here.
I ran across this google maps widget for an archos 5 internet media tablet. Located he http://www.poorbrothertom.com/blog/c...dget_downloads
ZIP file he http://www.poorbrothertom.com/Archos/Google_Maps.zip

I've been trying to get this app working, to no avail. I've tried contacting the programmer, and theres been no response, and Im completely stumped on how to get this working.

Any help on this code would be absolutely great.

Thanks in advance.

Hello everyone~ I hope this will be a very simple question for someone on here. I am a current web design/development major at the art institute kansas city, and this has stumped me and my teacher pretty hard...

I am trying to implement the window widget javascript like the one found he http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/ Where it looks like windows are opening up on the web page. It gave some fairly specific directions: upload these two files to your server and add these tags to create the functions that are called from the linked files. It sounded fairly simple.

I uploaded and linked the two files from my server to the test page I was making, and then created my code and my links (the links call on the code to call on the linked script to open the window with your information.) However, somewhere in the midst of there, something isn't working and I can't figure out what. When I click the link on the test page, instead of opening a window, the link opens with a # in the URL bar after the web address.

You can see what I'm talking about he http://zero7starz.com/test/home.html and see the source code and everything. The files that are in my "test" directory are the two files I needed linked, the home.html file, and the file I'm trying to call "Lingo.html".

Can anyone on here see what the issue is? Or any other information you need from me I'll be happy to provide, but I wasn't sure what else I needed to include in here besides my source code.

Much appreciated!
-Jay

Ok so I'm making a music website for a project and we have the official Twitter widget in the sidebar. It is an external javascript file as the website must be XHTML 1.0 compliant. What I'm trying to do is make this dynamic so that when viewing different artist pages, the widget changes to that artist's Twitter Feed. I have gotten this to work when the script was fully on the page, by echoing a PHP variable in the javascript, but when it's external I can't figure it out. The file MUST be external so that it passes the XHTML 1.0 Validator. Here's the widgets code(significantly shortened, the full code is too long to post here):
Code:

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width:  'auto',
  height: 300,
  theme: {
    shell: {
      background: '#000000',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#ff5454'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('choiceprize').start();

All we need is to pass a string to the .setUser('choiceprize') here ^ so that instead of 'choiceprize' it is our variable.
Any help is appreciated!

How do I retrieve input/selections from this calendar widget on this site: moongarm.99k.org

Hi,

How can I set the following widget so it opens the links (pages) in a new window?


Code:

<SCRIPT charset="utf-8" type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/oweg0a-20/8018/9000c5f7-9ce1-4eb6-887f-0491e54add7d"> </SCRIPT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Foweg0a-20%2F8018%2F9000c5f7-9ce1-4eb6-887f-0491e54add7d&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT>

Thanks in advance!
Regards
Rain Lover

Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.

I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page.

My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top.

Javascript counts the top panel as 0, the second panel as 1 etc etc.

So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story.

My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added.

Thanks!

Hi All,

I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help.

Code:

function addToParent( formName, selectName, name, label ) {

    var parent       = window.opener;
    var selectWidget = parent.document.forms[formName].elements[selectName];

    if( selectWidget ) {

        var length = selectWidget.length;
        selectWidget[length] = new Option( name, label, false, false );
    }
}

When I tried to debug, internet explorer shows an error in the following line

Code:

selectWidget[length] = new Option( name, label, false, false );

Is there anything wrong with this statement ??

Hi guys! This is the website -> http://toplistmovies.blogspot.com/.

Im having trouble about the posts below the slides.

In firefox i see this ->
http://s16.postimage.org/v4nmny4ar/fasdfalsdjf.png

In Chrome i see this ->
http://s16.postimage.org/uges505kz/fasdfasdfasdf.png

This is the code ->
Code:

<div class='Image thumb' style='overflow:hidden;'>

<b:if cond='data:post.isFirstPost'> 
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var default_thumbnail="http://3.bp.blogspot.com/-WxjumWhIM5E/TwKvb6jtXoI/AAAAAAAAEG0/hBQHJnIO5eE/s000/default.png";

if(image_url == "") image_url= default_thumbnail;
var nova = image_url.replace('s72-c', 's400', image_url);
image_tag='<img src="'+nova+'" style="width:260px;" alt="'+post_title+'"/>';

if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<a expr:href='data:post.url'><script>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));</script>
</a>
</div>



<div class='information'> 
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</div>
</div>

<div class='postBoxMeta'>
<div class='postDate'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
if (timestamp != '') {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var data = timesplit[2];
var date_dd = data.replace("de", "", timesplit[2]);
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<span class='day'><script type='text/javascript'>document.write(date_dd);</script>Dia</span> <br/>
<span class='month'><script type='text/javascript'>document.write(date_mmm);</script></span>
</div>

Hi,

I'm not much of a programmer, I have this script for randomly rotate a bunch of pictures.
What do you change to make to change from one another, not random?

Thanks
Denny

<script language="javascript">

var delay=5000 //set delay in miliseconds
var curindex=0
var i = 0
var randomimages=new Array()

randomimages[0]="...image01.jpg"
randomimages[1]="...image02.jpg"
randomimages[2]="...image03.jpg"
randomimages[3]="...image04.jpg"
randomimages[4]="...image05.jpg"
randomimages[5]="...image05.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
i = Math.floor(Math.random()*(randomimages.length))
document.write('<img border=2 name="defaultimage" src="'+randomimages[i]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))))
{
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]

}
setInterval("rotateimage()",delay)
</script>

I have a text file(quotes.txt) with 35+ quotations, separated by a single line break. Is it possible for a DIV to display a random quotation from quotes.txt each time the user visit my home page?

Alright, I need a little help with my javascript. I'm a bit of a novice when it comes to programming so I apologize if this appears trivial.

I have an element ID that begins with bb + a randomized number between 1-100,000. This number changes after every action so what I need is a way to retrieve this new value each time and implement it into my code. I can view the number using firebug but I need a way to automate this process. Do any of you have some advice about how I could approach this problem?