JavaScript - Vertical Sliding Effect Like On Tumblr's Front Page
Hi,
I am somewhat new to HTML, AJAX, and CSS. I'm wish to implement something similar to what Tumblr does on their front page where you click on the bottom footer bar, and the page horizontally shifts up keeping part of the original page (specifically, the email sign up) visible while exposing more content. I know the simplest is to have the entire content on the page and just "hide" and "show" the interested components "on click" of the bottom footer bar div-tag. But I like the sliding animation. Does YUI or JQuery provide the ability to do the animation? Or is this even a Javascript related functionality - ie should I look at HTML5 or CSS? Thanks Jack Similar TutorialsI am looking to scan a page, find all the url's on the page. Once I have them, I want to append the front of the url (hardcoded and never changes) with hardcoded code. Like a Find and Replace. for example: locate the front of all the urls which is - wincfprod032 and replace with wincfprod032.jewels I had a plugin created and the Jquery is not working correctly. Can anyone help me sort this out? I have exhausted all other options. Thanks. You can see this 'calendar' plugin here (near bottom of page): http://billboardfamily.com/blogs/ ISSUES: 1) The calendar sliding effect needs to be left/right as opposed to from the bottom. 2) 2 months should always be shown at all times 3) After you go through all months...it freezes completely 4) Is there anyone who can improve the navigation buttons? They are pretty weak at the moment. Here is the code: Code: <?php add_action('widgets_init', 'pc_widgets_init'); define('PCAL_CAT', 6); function pc_widgets_init() { register_widget('pc_widget'); } function get_post_calendar_html(){ global $wp_version; ?> <style type="text/css"> .wp-calendar{ width:160px;} .wp-calendar div.calendar {width:100%;} .wp-calendar caption { color:#48B05A; font-weight:bold; margin-bottom:6px; padding:0; text-transform:uppercase; font-size:.9em; text-align:left; } .wp-calendar tr {margin-bottom:0;} .wp-calendar td, .wp-calendar th.days {width:26px;height:26px;padding:0;margin:0 1px 1px 0;border:none;} .wp-calendar td.pad, .wp-calendar th.days {background-color:#eeeee7;} .wp-calendar th.days {text-align:center;padding-top:6px;height:20px;} table.mini {margin-right:-1px;} .wp-calendar td.view-item {margin:0; background-color:#d9d9cd; text-align:center;width:25px;height:20px; padding:6px;} .wp-calendar td.view-item a {text-align:center;padding-top:6px;color:#333;font-weight:bold;} .wp-calendar td.today {background-color:#48b05a;} .wp-calendar td.today a {color:#fff;} </style> <script type="text/javascript"> function pcal_prev(){ if(jQuery(".wp-calendar:visible").length > 1){ jQuery(".wp-calendar:visible:first").slideUp('slow'); jQuery(".wp-calendar:visible:last").next('.wp-calendar:hidden:first').show('slow'); } } function pcal_next(){ if(jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden').length){ jQuery(".wp-calendar:visible:last").hide('slow'); jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden:last').show('slow'); } } </script> <span class="calendar_nav_bar"><a onclick="pcal_next()"><—</a> <span><?php echo $browse; ?></span> <a onclick="pcal_prev()">—></a> </span> <?php pcal_get_posts(); } function pcal_get_posts(){ global $wpdb, $wp_locale; $thisyear = gmdate('Y', current_time('timestamp')); $thismonth = gmdate('m', current_time('timestamp')); $lastmonth = $thismonth-1; $lastyear = $thisyear; if($thismonth == -1){ $lastmonth = 12; $lastyear -=1; } get_post_calendar($thismonth,$thisyear); // Get months this year and next with at least one post $future = $wpdb->get_results("SELECT DISTINCT MONTH(post_date) AS month, YEAR(post_date) AS year FROM $wpdb->posts WHERE post_date <='$lastyear-".($lastmonth+1)."-01' AND post_type = 'post' AND post_status = 'publish' ORDER BY post_date DESC"); $x= 0; //Hide counter, after the first one, it will disappear foreach($future as $now){ get_post_calendar($now->month,$now->year,$x); $x++; } } // Calendar Output... function get_post_calendar( $thismonth ='', $thisyear='', $hide=0) { global $wpdb, $timedifference, $wp_locale; $unixmonth = mktime(0, 0 , 0, $thismonth, 1, $thisyear); // week_begins = 0 stands for Sunday $week_begins = intval(get_option('start_of_week')); $add_hours = intval(get_option('gmt_offset')); $add_minutes = intval(60 * (get_option('gmt_offset') - $add_hours)); if($hide) $style = "display:none;"; echo '<table class="wp-calendar" style="'.$style.'"> <caption>' . $wp_locale->get_month($thismonth) . ' ' . $thisyear . '</caption> <thead> <tr>'; $myweek = array(); for ( $wdcount=0; $wdcount<=6; $wdcount++ ) { $myweek[] = $wp_locale->get_weekday(($wdcount+$week_begins)%7); } foreach ( $myweek as $wd ) { $day_name = (true == $initial) ? $wp_locale->get_weekday_initial($wd) : $wp_locale->get_weekday_abbrev($wd); echo "\n\t\t<th abbr=\"$wd\" scope=\"col\" class='days' title=\"$wd\">$day_name</th>"; } echo ' </tr> </thead> <tbody> <tr>'; // Get days with posts $dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date) FROM $wpdb->posts LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) WHERE MONTH(post_date) = '$thismonth' AND YEAR(post_date) = '$thisyear' AND post_type = 'post' AND post_status = 'publish'" ."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')", ARRAY_N); if ( $dayswithposts ) { foreach ( $dayswithposts as $daywith ) { $daywithpost[] = $daywith[0]; } } else { $daywithpost = array(); } if ( strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'camino') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari') ) $ak_title_separator = "\n"; else $ak_title_separator = ', '; $ak_titles_for_day = array(); //sets the Density Thermometer $ak_posts_for_day = array(); $ak_post_titles = $wpdb->get_results("SELECT ID, post_title, DAYOFMONTH(post_date) as dom " ."FROM $wpdb->posts LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) " ."WHERE YEAR(post_date) = '$thisyear' " ."AND MONTH(post_date) = '$thismonth' " ."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')" ); // print_r($wpdb); if ( $ak_post_titles ) { foreach ( $ak_post_titles as $ak_post_title ) { if ( empty($ak_titles_for_day['day_'.$ak_post_title->dom]) ) $ak_titles_for_day['day_'.$ak_post_title->dom]['title'] = ''; if ( empty($ak_titles_for_day["$ak_post_title->dom"]) ){ // first one $ak_titles_for_day["$ak_post_title->dom"]['title'] = str_replace('"', '"', wptexturize($ak_post_title->post_title)); $ak_titles_for_day["$ak_post_title->dom"]['id'] =$ak_post_title->ID; }else{ $ak_titles_for_day["$ak_post_title->dom"]['title'] .= $ak_title_separator . str_replace('"', '"', wptexturize($ak_post_title->post_title)); } $ak_posts_for_day["$ak_post_title->dom"] +=1; } } // See how much we should pad in the beginning $pad = calendar_week_mod(date('w', $unixmonth)-$week_begins); if ( 0 != $pad ) { echo "\n\t\t".'<td colspan="'.$pad.'" class="pad"> </td>'; } $daysinmonth = intval(date('t', $unixmonth)); for ( $day = 1; $day <= $daysinmonth; ++$day ) { if ( isset($newrow) && $newrow ) echo "\n\t</tr>\n\t<tr>\n\t\t"; $newrow = false; if ( $day == gmdate('j', (time() + (get_option('gmt_offset') * 3600))) && $thismonth == gmdate('m', time()+(get_option('gmt_offset') * 3600)) && $thisyear == gmdate('Y', time()+(get_option('gmt_offset') * 3600)) ){ echo '<td class="today view-item">'.'<span>'.$day.'</span>'; }elseif(in_array($day, $daywithpost)){ echo '<td class="haspost view-item">'; echo '<a href="'.get_permalink($ak_titles_for_day[$day]['id'] ).'" title="'.$ak_titles_for_day[$day]['title'].'" '.$onclick1.' >'.$day.'</a>'; }else{ echo '<td class="view-item">'.'<span>'.$day.'</span>'; } // any posts on that day? if ( in_array($day, $daywithpost) ) { //Outputs the Density Thermometer along with the day... } else { } echo '</td>'; if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) $newrow = true; } $pad = 7 - calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins); if ( $pad != 0 && $pad != 7 ) echo "\n\t\t".'<td class="pad" colspan="'.$pad.'"> </td>'; echo "\n\t</tr>\n\t</tbody>\n\t</table>"; } /*Add Dashboard Widget via function wp_add_dashboard_widget()*/ function pc_setup_dashboard_widget() { wp_add_dashboard_widget( 'pc_add_dashboard_widget', __( 'Posts Calendar' ), 'pc_add_dashboard_widget' ); } function pc_add_dashboard_widget(){ pcal_getposts(0); } class pc_widget extends WP_Widget { function pc_widget() { $widget_ops = array('classname' => 'pc_widget', 'description' => __( "Show your blog's Future Posts in the sidebar.") ); echo $this->WP_Widget('pc_widget', __('Posts Calendar Sidebar'), $widget_ops); } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['browse'] = strip_tags($new_instance['browse']); $this->flush_widget_cache(); $alloptions = wp_cache_get( 'alloptions', 'options' ); if ( isset($alloptions['pc_widget']) ) delete_option('pc_widget'); return $instance; } function flush_widget_cache() { wp_cache_delete('pc_widget', 'widget'); } function form( $instance ) { $title = isset($instance['title']) ? esc_attr($instance['title']) : ''; $title = isset($instance['browse']) ? esc_attr($instance['browse']) : ''; ?> <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title'); ?></label> <input type="text" name="<?php echo $this->get_field_name('title'); ?> id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title;?>"> <p><label for="<?php echo $this->get_field_id('browse'); ?>"><?php _e('"Browse Post" text'); ?></label> <input type="text" name="<?php echo $this->get_field_name('browse'); ?> id="<?php echo $this->get_field_id('browse'); ?>" value="<?php echo $browse;?>"> </p> <?php } function widget($args, $instance) { global $wpdb; $cache = wp_cache_get('pc_widget', 'widget'); if ( !is_array($cache) ) $cache = array(); if ( isset($cache[$args['widget_id']]) ) { echo $cache[$args['widget_id']]; return; } ob_start(); extract($args); $title = apply_filters('widget_title', empty($instance['title']) ? __('Scheduled Posts') : $instance['title']); $browse = empty($instance['browse']) ? __('Browse Posts') : $instance['browse']; ?> <?php echo $before_widget; ?> <?php echo $before_title; ?><?php if ( $title ) echo $title; ?><?php echo $after_title; ?> <div id="pc"> <?php get_post_calendar_html();?> </div> <?php echo $after_widget; ?> <?php $cache[$args['widget_id']] = ob_get_flush(); wp_cache_add('pc_widget', $cache, 'widget'); } } ?> I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates. The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps. Here is the entire Javascript code that goes into the head tag: Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - var Abouttop=124 var Newstop=195 var Profilestop=258 var Issuestop=351 var Extrastop=423 var Linkstop=499 var Forumtop=571 var menuleft=-118 var pace=14 var step var direction var pause=25 var thismenu var vorzeichen=1 var vorzeiAbout=-1 var vorzeiNews=-1 var vorzeiProfiles=-1 var vorzeiIssues=-1 var vorzeiExtras=-1 var vorzeiLinks=-1 var vorzeiForum=-1 var menuismoving="no" function gotourl(thisurl) { alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.") } function inite() { if (document.layers) { document.About.left=menuleft document.News.left=menuleft document.Profiles.left=menuleft document.Issues.left=menuleft document.Extras.left=menuleft document.Links.left=menuleft document.Forum.left=menuleft document.About.top=Abouttop document.News.top=Newstop document.Profiles.top=Profilestop document.Issues.top=Issuestop document.Extras.top=Extrastop document.Links.top=Linkstop document.Forum.top=Forumtop } if (document.all) { document.all.About.style.posLeft=menuleft document.all.News.style.posLeft=menuleft document.all.Profiles.style.posLeft=menuleft document.all.Issues.style.posLeft=menuleft document.all.Extras.style.posLeft=menuleft document.all.Links.style.posLeft=menuleft document.all.Forum.style.posLeft=menuleft document.all.About.style.posTop=Abouttop document.all.News.style.posTop=Newstop document.all.Profiles.style.posTop=Profilestop document.all.Issues.style.posTop=Issuestop document.all.Extras.style.posTop=Extrastop document.all.Links.style.posTop=Linkstop document.all.Forum.style.posTop=Forumtop } } function getmenuname(clickedmenu) { if (menuismoving=="no") { if (document.layers) { thismenu=eval("document."+clickedmenu) } if (document.all) { thismenu=eval("document.all."+clickedmenu+".style") } step=pace checkdirection() movemenu() } } function checkdirection() { if (document.layers) { if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout} if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews} if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles} if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues} if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras} if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks} if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum} } if (document.all) { if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout} if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews} if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles} if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues} if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras} if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks} if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum} } menuismoving="yes" } function movemenu() { if (document.layers) { if (step>=0) { thismenu.left+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) } } if (document.all) { if (step>=0) { thismenu.posLeft+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) } } } // - End of JavaScript - --> </SCRIPT> Code: This is the CSS code that also goes into the head tag: <style type="text/css"> #About {position:absolute;left:-1000px;} #News {position:absolute;left:-1000px;} #Profiles {position:absolute;left:-1000px;} #Issues {position:absolute;left:-1000px;} #Extras {position:absolute;left:-1000px;} #Links {position:absolute;left:-1000px;} #Forum {position:absolute;left:-1000px;} .baseline { position:absolute; left:250px; top:100px; font-family:Arial; font-size:9pt; color:000000; } </STYLE> And I'm not sure if this is needed or not, but just in case, here is everything between the body tags Code: <body onLoad="inite()" topmargin="0" leftmargin="0"> <DIV ID="About"> <IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0> <MAP NAME="Aboutdec99.gif"> <AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')"> <AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp"> <AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp"> <AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp"> <AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp"> </MAP></DIV> <DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0> <MAP NAME="Newsdec99.gif"> <AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')"> <AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp"> <AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp"> </MAP></DIV> <DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0> <MAP NAME="Profilesdec99.gif"> <AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')"> <AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp"> <AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp"> <AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp"> <AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp"> </MAP></DIV> <DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0> <MAP NAME="Issuesdec99.gif"> <AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')"> <AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp"> <AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp"> <AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp"> </MAP></DIV> <DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0> <MAP NAME="Extrasdec99.gif"> <AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')"> <AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp"> <AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp"> <AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp"> </MAP></DIV> <DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0> <MAP NAME="Linksdec99.gif"> <AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')"> <AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com"> <AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum"> <AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html"> <AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com"> </MAP></DIV> <DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0> <map name="menu_tab_test.jpg"> <AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum"> </map></DIV> </body> And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol. http://www.newwarriors.net I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much! Im looking for a script to show a sliding popup from bottom right to upward direction after the page is loaded with a close button to.
I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab. How do I individually create a pagination for each tab? <?php // Begin session, initiate database connection, etc. require_once('./includes/base.php'); // If logging out, delete session variables if($_GET['logout'] == 1){ @$_SESSION = array(); @session_unregister($_SESSION['userID']); @session_unregister($_SESSION['userName']); @session_unregister($_SESSION['userUser']); @session_unregister($_SESSION['userPass']); @session_destroy(); } // Display header require("./templates/$template/header.php"); ?> <div id="blurb" align="right"> <script language="javascript"> function isClear() { document.myForm[0].value=''; return true; } </script> <!-- new search --> <?php ob_start(); if(!empty($_SESSION['userID']) and !empty($_POST['user'])){ echo '<form action="search.php" method="post" name="myForm"> <input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/> <input type="submit" name="serachuser" value="search"/></form>'; } ?> </div> <br> <div id="blurb" align="justify"> <em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah.... </div> <br> <div id="container-5"> <ul> <li><a href="#fragment-13"><span>Blogs</span></a></li> <li><a href="#fragment-14"><span>Links</span></a></li> <li><a href="#fragment-15"><span>Images</span></a></li> </ul> <div id="fragment-13"> <?php $sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC "); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time = reltime($row['postTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a> '.$row['postComments'].' , Time elapsed: '.$time.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-14"> <?php $sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC"); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time1 = reltime($row['linksTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a> '.$row['linksComments'].' , Time elapsed: '.$time1.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-15"> <?php // test grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20'); ?> </div> </div> <?php // Display footer require("./templates/$template/footer.php"); ?> <table align="center"><tr><td align="center"> <script type="text/javascript" defer="defer"> var gallery=new virtualpaginate("virtualpage",10) gallery.buildpagination("gallerypaginate") </script> </td></tr></table> Thank you ....... Hi first time poster scratching his head. I am dipping into php to create a user profilepage.php template on a wordpress site. I have managed against all odds to create a user profile that will take info from Code: ?php the_author_meta('occupation'); ? etc, but my head is spinning trying to create an accordion for a photogallery Code: ?php echo do_shortcode("[photosmash]"); ? and youtube playlist Code: ?php (the_author_meta('youtube_playlist')); ? so I want to click on an image "MY VIDEOS" and the youtube playlist drops down, ditto with MY PHOTOS, click on the image and the gallery appears. The page with all the required content showing is http://traditionalpainter.com/andy-crichton I would really appreciate it if someone can point me in the right direction to code that will hide the gallery and video until required. Thanks in advance. Hi everyone, I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything. This is a perfect example of what I'm looking for: www.mimeartist.com Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature. Thanks. I want to insert this star trail effect script to page below but star trail doesn't appear on most areas and script corrupts several objects' position. How can I insert it successfully? http://www.orkinosfilm.com/melissa/index.html Code: <head> <style type="text/css"> body {overflow: scroll; overflow-x: hidden;} .anyClass { position: relative; visibility: hidden; left: -5000px; } </style> </head> <body bgcolor="#000000"> <p><!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2"> <!-- /* Submitted by Marcin Wojtowicz [one_spook@hotmail.com] Featured on JavaScript Kit (http://javascriptkit.com) Modified by JK to be IE7+/ Firefox compatible For this and over 400+ free scripts, visit http://javascriptkit.com */ var trailLength = 10 // The length of trail (8 by default; put more for longer "tail") var path = "cursor_star.png" // URL of your image var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes var i,d = 0 function initTrail() { // prepares the script images = new Array() // prepare the image array for (i = 0; i < parseInt(trailLength); i++) { images[i] = new Image() images[i].src = path } storage = new Array() // prepare the storage for the coordinates for (i = 0; i < images.length*3; i++) { storage[i] = 0 } for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '" width='+(16-i)+' height='+(16-i)+'></div>') } trail() } function trail() { // trailing function for (i = 0; i < images.length; i++) { // for every div/layer document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate d = d+2 } for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind storage[i] = storage[i-2] } d = 0 // reset for future use var timer = setTimeout("trail()",10) // call recursively } function processEvent(e) { // catches and processes the mousemove event if (window.event) { // for IE storage[0] = window.event.y+standardbody.scrollTop+10 storage[1] = window.event.x+standardbody.scrollLeft+10 } else { storage[0] = e.pageY+12 storage[1] = e.pageX+12 } } initTrail() document.onmousemove = processEvent // start capturing //--> </script><!--webbot bot="HTMLMarkup" endspan --></p> </body> Hi all, am trying to create a page which will automatically scroll to the bottom, then go back to the top and start again. im very new to javascript and have done my best to peice together bits of scripts that do simular things the code below is what ive managed to come up with, it sort of works but am sure is full of mistakes Code: <SCRIPT type='text/javascript'> var CurrentScroll=0; var maxDisplacement=0; function pageReset() { CurrentScroll=0; window.scrollTo(0,0); } function pageScroll() { window.scrollTo(0,10000000); if( typeof self.pageYOffset!='undefined' ){ maxDisplacement=self.pageYOffset; } if( document.compatMode && document.compatMode != 'BackCompat' ){ maxDisplacement=document.documentElement.scrollTop ; } if( document.body && typeof(document.body.scrollTop)!='undefined' ){ maxDisplacement=document.body.scrollTop; window.scrollTo(0,0); } while(CurrentScroll <= maxDisplacement){ window.scrollBy(0,1); // horizontal and vertical scroll increments scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds CurrentScroll = (CurrentScroll + 1); } if(CurrentScroll == maxDisplacement){ pageReset(); } } </SCRIPT> if anyone can help it would be greatly appreciated thanks in advance Scoob I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript"> function Change_Big_One(thumb){ document.getElementById('BigOne').src=thumb.src.replace("_th","") } </script> HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hi all, I have a question (probably simple, as I'm a novice) for you. I'm finishing a tumblr theme in which I have my menu stick to the top of the window as I scroll down, and unstick when I scroll back up. It's working fine, except that if I scroll down and then refresh the page, the menu goes back to the middle of the page. Hard to explain, but you can see for yourself on my test page. Is there any way to make the menu stay on top through a refresh? My complete code is included below (apologies for its ugliness). Thanks in advance. Jon Code: <html> <head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <meta name="color:Highlight" content="#ff0" /> <meta name="if:Show Portrait" content="0"/> <meta name="if:Show RSS Link" content="0"/> <meta name="if:Small Permalink" content="0"/> <meta name="font:Title" content="Futura"/> <meta name="font:Body" content="Courier New"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function(e){ $el = $('.fixed'); if ($(this).scrollTop() > 320 && $el.css('position') != 'fixed'){ $('.fixed').css({'position': 'fixed', 'top': '0px'}); } if ($(this).scrollTop() < 320 && $el.css('position') == 'fixed'){ $('.fixed').css({'position': 'relative', 'top': ''}); } }); </script> <style type="text/css"> body { background: #fff; margin-left: auto; margin-right: auto; width: 600px; font: 13px {font:Body}; color: #000; } body a { color: #000; } body a:hover { background-color: {color:Highlight}; text-decoration:none; } #desc { font-size: 12px; } .fixed { background-color: #fff; position:fixed; top: 310; width:100%; z-index:100; } #footer { text-align: center; font-size: 11px; color: #ccc; padding-top: 20px; padding-bottom: 20px; } #footer a { color: #ccc; } #header { {block:IfNotShowPortrait} top: 140px; {/block:IfNotShowPortrait} {block:IfShowPortrait} top: 100px; {/block:IfShowPortrait} text-align: center; position: relative; } #menu { width: 600px; border-bottom: 1px dashed; background: #fff; font-size: 11px; text-align: center; position: absolute; } #menu a { text-decoration: none; } #newer { float: right; margin-left: -60px; } #notes { color: #ccc; {block:IfNotSmallPermalink} border-bottom: 1px dashed; margin-bottom: 30px; {/block:IfNotSmallPermalink} {block:IfSmallPermalink} margin-top: 20px; margin-bottom: 45px; text-align: center; {/block:IfSmallPermalink} font-size: 11px; } #notes a { color: #ccc; {block:IfSmallPermalink} text-decoration: none; {/block:IfSmallPermalink} } #notes a:hover, #footer a:hover { color: #000; } #notes_page { margin-top: 30px; } #notes_page ol { list-style: none; padding: 0px; margin: 0px; width: 600px; } #notes_page li { padding: 2px; background-color: #fff; margin-top: 2px; } #older { float: left; margin-right: -60px; } #photo, #video { text-align: center; } #photo img { max-width: 600px; } #post_container { {block:IfNotShowPortrait} margin-top: 340px; {/block:IfNotShowPortrait} {block:IfShowPortrait} margin-top: 260px; {/block:IfShowPortrait} } #quote { font-size: 18px; } #title a { font: 36px {font:Title}; font-style: italic; letter-spacing: 10px; text-decoration: none; } {CustomCSS} </style> </head> <body> <div class="fixed"><p><div id="menu"> <div id="older"> {block:NextPage} <a href="{NextPage}">← Older</a> {/block:NextPage} </div> <a href="/">Home</a> / <a href="/archive">Archive</a> {block:IfShowRSSLink} / <a href="{RSS}">RSS</a> {/block:IfShowRSSLink} {block:HasPages} {block:Pages} / <a href="{URL}">{Label}</a>{/block:Pages} {/block:HasPages} {block:AskEnabled} / <a href="/ask">Ask</a>{/block:AskEnabled} {block:SubmissionsEnabled} / <a href="/submit">Submit</a>{/block:SubmissionsEnabled} <div id="newer"> {block:PreviousPage} <a href="{PreviousPage}">Newer →</a> {/block:PreviousPage} </div><p> </div></div> <div id="header"> {block:IfShowPortrait}<img src={PortraitURL-64}>{/block:IfShowPortrait}<p> <div id="title"><a href="/">{Title}</a></div><br> {block:Description}<div id="desc">{description}</div>{/block:Description}<p> </div><p> <div id="post_container"> {block:Posts} {block:Text} {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title} {Body} {/block:Text} {block:Photo} <div id="photo">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</div> {block:Caption}{Caption}{/block:Caption} {/block:Photo} {block:Photoset} {Photoset-500} <div id="caption">{block:Caption}{Caption}{/block:Caption}</div> {/block:Photoset} {block:Quote} <div id="quote">"{Quote}"</div><p> {block:Source} ~ {Source}{/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description}{Description}{/block:Description} {/block:Link} {block:Chat} {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> {/block:Chat} {block:Video} <div id="video">{Video-500}</div> {block:Caption}{Caption}{/block:Caption} {/block:Video} {block:Audio} {AudioPlayerBlack} {block:Caption}{Caption}{/block:Caption} {/block:Audio} {block:Answer} <h3>{Asker} asked: {Question}</h3> {Answer} {/block:Answer} <div id="notes"> {block:IfSmallPermalink}<a href="{Permalink}">↵</a>{/block:IfSmallPermalink} {block:IfNotSmallPermalink} <p><br> {block:Date}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}{/block:IfShowDate} {block:RebloggedFrom} / Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a> {/block:Tags}{/block:HasTags} {/block:IfNotSmallPermalink} </div> {/block:Posts}</div> {block:PermalinkPage} <div id="notes_page"> {block:PostNotes} {PostNotes} {/block:PostNotes} </div> {/block:PermalinkPage} <div id="footer"> Theme by <a href="http://toxicjungle.co">Jon</a>. </div> </p> </body> </html> I would like to have a popup in front at all times, for instruction purpose, even when user doing something in back page, such as type something, select and change to new page, etc. This popup can only be closed by either click at "Close" button or "X" at top right corner. Hello. Been searching all night for a way to do this, so thanks in advance for any help forthcoming. I'd like to be able to create a list of post titles that share the same tag in tumblr (rather than a list of tags). Tumblr allows you to filter your posts by tag by typing in a url, but this brings up a full page of posts, and I'd just like a list of the titles that I can then use as a menu. Hope this all makes sense. I'd imagine this is fairly simple as the capability to filter by tag already exists, but I cannot for the life of me work out how to do it. Thanks again. I popup a txt msg queue window - it sits in the background - it reloads the msg queue every minute - when a new one pops into the queue I want to bring window to the front but the following code doesn't do that. Am I doing this right? PHP Code: function init() { document.forms[0].btn_close_window.focus(); } i've been trying to toy with this script, which works fine.. except for a few things http://jsfiddle.net/f9j9a/112/ what i would like it to do is to, for instance, always keep div1 on top.. no matter what other div is clicked and when you've brought one of the divs to the front and click on a different one, i want it to move directly behind the newly clicked div.. so is has to mimic the way it works on your OS any ideas?? I'm trying to make this menu go up and down when the arrows are clicked. Right now, it shows all of them and I can't figure out how to make it so that it only shows the first 9 and will show the rest in the menu when it's clicked. I really don't know where to start. I found some scripts but they turned out really funky. Even if it's something super simple is cool, just where to begin?? Here is the menu: Code: <div class="arrow_holder"><span onclick="document.getElementById('down').display = 'none'; document.getElementById('up').display = 'block';" ><img src="images/arrow-up.png" alt="" border="0" /></span></div> //video1 <div class="portfolio_details" onclick="change_video(1);"> <div class="work_thumb"><img src="images/12.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>12 FL OZ</strong><br />Narrative / Television</a></div> </div> //video2 <div class="portfolio_details" onclick="change_video(2);"> <div class="work_thumb"><img src="images/catch.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>THE CATCH: COSTA RICA</strong><br />Narrative / Television</a></div> </div> //video3 <div class="portfolio_details" onclick="change_video(3);"> <div class="work_thumb"><img src="images/cole.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>COLE PETTICOAT P.I.</strong><br />Narrative / Television</a></div> </div> //video4 <div class="portfolio_details" onclick="change_video(4);"> <div class="work_thumb"><img src="images/mayan_thumb.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>MAYAN BLUE</strong><br />Documentary</a></div> </div> //video5 <div class="portfolio_details" onclick="change_video(5);"> <div class="work_thumb"><img src="images/marine.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>MARINE INVESTIGATORS</strong><br />Documentary</a></div> </div> //video6 <div class="portfolio_details" onclick="change_video(6);"> <div class="work_thumb"><img src="images/police.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>DISH POLICE</strong><br />Commercial</a></div> </div> //video7 <div class="portfolio_details" onclick="change_video(7);"> <div class="work_thumb"><img src="images/septic.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>SUPER SEPTIC MIKE ROBE</strong><br />Commercial</a></div> </div> //video8 <div class="portfolio_details" onclick="change_video(8);"> <div class="work_thumb"><img src="images/adultswim.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>ADULT SWIM - HAIKU</strong><br />Commercial</a></div> </div> //video9 <div class="portfolio_details" onclick="change_video(9);"> <div class="work_thumb"><img src="images/miller.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>MILLER LITE / FALCONS</strong><br />Commercial</a></div> </div> //video10 <div class="portfolio_details" onclick="change_video(10);"> <div class="work_thumb"><img src="images/trulite.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>TRUCLEAR HD PLUS</strong><br />Commercial</a></div> </div> //video11 <div class="portfolio_details" onclick="change_video(11);"> <div class="work_thumb"><img src="images/tara.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>TARA JEWELRY</strong><br />Commercial</a></div> </div> //video12 <div class="portfolio_details" onclick="change_video(12);"> <div class="work_thumb"><img src="images/boomerang.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>BOOMERANG VAMPIRES</strong><br />Commercial</a></div> </div> video13 <div class="portfolio_details" onclick="change_video(13);"> <div class="work_thumb"><img src="images/gapower.jpg" alt="" border="0" /></div> <div class="work_name"><a href="#"><strong>GA POWER FALCONS</strong><br />Commercial</a></div> </div> <div class="arrow_holder"><span onclick="document.getElementById('up').display = 'none'; document.getElementById('down').display = 'block';" ><img src="images/arrow-down.png" alt="" border="0" /></span></div> </div> Hi all, I am new to this forum and still fairly new to website design and coding. My girlfriend is a fashion designer and I said I would build her a website (one of those things I said whilst watching the football). I am trying to find if a script exists to have an image slide-show which moves to the right when the cursor moves to the right and so on for the left. We have managed to find someone else who has done exactly what she wants but it's in flash and I have no experience at all in flash. So I was wondering if anyone knows of a script which does the exact same thing? Below is the link to the site where they have managed to do what we are looking for in Flash: http://www.matthewwilliamson.com/collections.php Any help would be greatly appreciated. Cheers guys So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop) The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer. I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help. So to begin with, this is my HTML for the thumbnail navbar: Code: <div class="scrollWrapper"> <div class="controlsPrev"></div> <div class="controlsNext"></div> <div class="scrollableArea"> <p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p> <p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p> <p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p> <p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p> <p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p> <p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p> <p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p> <p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p> <p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p> <p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p> </div> </div> </div> CSS Styling (external sheet): Code: div.scrollWrapper { background-color:#252525; width:960px; height:115px; display:block; overflow:hidden; } div.scrollableArea { height:115px; } div.scrollableArea p { margin:0; } div.controlsPrev { height:115px; width:65px; background-color:#FFFFFF; position:absolute; } div.controlsNext { height:115px; width:65px; background-color:#FFFFFF; position:absolute; right:195px; } My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height. The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely: 1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked). 2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat. Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own. I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause. Cheers dudes, Johnny. Hi, I'm relatively new to javascript, I am trying to create a sliding menu, everything is working fine other than the hyperlinks are not working, they open if you right click and select open link, but not with a normal click. Any help will be very appreciated, you can acsess the javascript he http://justifi.co.uk/menu.js the css he http://justifi.co.uk/menu.css and the html he http://justifi.co.uk/menu.html Thank you in advance; James |