JavaScript - Sliding Div? Swap Html?

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

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.

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>

I have a slider that slides the content from the top to bottom when a link/button is clicked. I want it to slide out from the right side of the button and move left to right. Is this possible by just adjusting the code I already have? Thanks.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Accordion Style DIV Menu</title>
<link href="format.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript" src="javascript.js"> </script>
</head>

<body>
	<div id="wrapper">

		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>

		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>
</html>

javascript.js:

Code:

$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 } 
		  
	 });
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();

});

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()">&lt;&mdash;</a> <span><?php echo $browse; ?></span>
<a onclick="pcal_prev()">&mdash;&gt;</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('"', '&quot;', 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('"', '&quot;', 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">&nbsp;</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.'">&nbsp;</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');
	}



}


?>

Hello.
I've created this sliding panel where I click the Sidebar button and it slides out or in. But I would like to make it run more smoothly. I tried storing references to the elements within the MoveSidebar() as this.variables, so that they wouldn't be re-defined each time, but then FF spits out that 'this.sidebar.style' is undefined?!

How can I make it run more smoothly, or get FF to recognise 'this.sidebar.style' please (once I reinstate all the this.references)? Here's the whole page and the button is also attached for ease of testing. Andy.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Sidebar Panel</title>
    <style type="text/css">
        #sidebar {
            display: inline-block;
            position: fixed;
            top: 200px;
            right: -100px;
        }
        #sidebar img {
            cursor: pointer;
        }
        #sidebar ul {
            display: inline-block;
            list-style-type: none;
            padding: 0; margin: 0;
            background: lightgrey;
            margin-left: -4px;
            height: 97px;   /* same as the image */
        }
        #sidebar li {
            display: inline;
        }
        #sidebar a {
            float: left;
            clear: left;
            width: 90px;
            text-decoration: none;
            padding: 2px 5px;
        }
    </style>
    <script type="text/javascript">
        var theTimer;
        function MoveSidebar() {
            var sidebar = document.getElementById('sidebar');
            var sideRight = parseInt(sidebar.style.right || "-100px");
            var out = document.getElementById('sideImage').out;
            if ( out && sideRight <= 0 ) {
                sidebar.style.right = (sideRight + 2) + 'px';
            }
            else if ( !out && sideRight >= -100 ) {
                sidebar.style.right = (sideRight - 2) + 'px';
            }
            else {
                clearInterval(theTimer);
            }
        }
        function InitSide() {
            document.getElementById('sideImage').onclick = function () {
                this.out = ( this.out ) ? false : true;
                clearInterval(theTimer);
                theTimer = setInterval(MoveSidebar,10);
            }
        }
        window.onload = InitSide;
    </script>
</head>
<body>
    <h1>Creating a Sidebar Panel Button</h1>
    <div id="sidebar">
        <img src="images/sidebar.png" id="sideImage">
        <ul>
            <li><a href="#home">Home</a></li>  
            <li><a href="#about">About</a></li>
            <li><a href="#further">Further Info</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

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.

Please can anyone help?

hello I am novice when it comes to writing code and as i'm writing some code for a sliding puzzle game, i have managed to display the images.

but now i need to write the functions to see if the image when clicked on is next to the blank one and then to move them if this is true.


<Html>
<Head>
<Title> Sliding Puzzle Game</Title>

<Script Language = "JavaScript">

var images = new Array();
//var initialise
var id = 0;
alert("starting");
window.onerror = handleError;

function handleError(strMessage, strURL, intLine)
//the above function catches any errors and display what and where.
{
document.write("<br/>The following Error occurred:");
document.write("<br/>Message: " + strMessage);
document.write("<br/>Code: " + strURL);
document.write("<br/>On line: " + intLine);
}



function Write2screen(){

var k=0;

for (i=0; i< 4; i++) {
for (j=0; j<4; j++) {

id++; //give picture unique id after each iteration

images[k] = "Images/" + k + ".jpg";
document.write(" <img src= '"+images[k]+"' id='"+id+"'/>");
k++;
}
document.write("<br/>");
}
}



function CanMoveTile() {
// checks to see whether the cell at postion cellNum
// is next to the black tile and returns true if and
// only if this is the case

}

function moveTile(id) {
// this function moves the tile that was clicked on (if the tile can actually be moved)

}


Write2screen();

</Script>
</Head>
<body onClick=moveTile(id)>

</body>
</Html>


many thanks in advance

Hi guys... for my first project, me and my friend (who is a graphic artist) will make his portfolio site...

I'm planning a single page website, where on the center part there will be a 960 x 500 gallery. He already have 50+ drawings ready for his gallery, the concept in my mind is for him to categorize his drawings, then those categories will become some sort of tabs, then the whole galley will occupy the said dimension above. I'm planning to display maybe around 5 thumbnails per tab, I want to make it sort of like a slide show gallery, it will also have a previous and next button then upon clicking the thumbnail, a full version of that image will pop-up but not in a new window, it will be within that page and will have a close button to go back to the main page...

most portfolio sites I've seen were using this kind of preview in their gallery...

How can I do this things/effect, I've read somewhere that this can be done using AJAX...

Sorry if I'm not clear on what I've said as I'm still a newbie specially with this XML and AJAX thing... Thanks for having the time reading my post, looking forward for your help... ^_^

How do I store an object reference inside a variable when I want the object reference to to reference the first "ul" html element nested inside the current object (as referenced by this keyword)?

var slideList = ???

I am trying to create a sliding menu.

Hi all,

I'm trying to create a thumbnail gallery where if the user moves the mouse over the thumbnail, a panel slides up covering half the thumbnail, showing you options for that particular thumbnail. The panel should slide back down (and disappear) when the mouse is moved off the thumbnail.

I have this working he http://disarmer.freeservers.com/test/slide4.html

The problem I'm having is that at the moment the Javascript references the sliding panel directly, using var slidingDiv = document.getElementById("theme_details");, but I need to reference the sliding DIV dynamically, i.e. as a function of the argument passed by the parent DIV (the thumbnail itself).

Here is the HTML and Javascript:

Code:

<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="slider4.css" />
<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<script type="text/javascript" language="javascript">
//<![CDATA[

	var startPosition = 0;
	var stopPosition = -70;
	var slideAmount = 4;
	var goingUp = false;
	var goingDown = false;
		
	function slideUp(theme) {
	
		// find class to slide
		//var slidingDiv;
		//for (i=0; i<theme.childNodes.length; i++){
		//	if (theme.childNodes[i].nodeName=="DIV") slidingDiv=theme.childNodes[i];
		//}
		var slidingDiv = document.getElementById("theme_details");
	
		slidingDiv.style.display="block"; // show sliding class
		if ( !goingDown && (parseInt(slidingDiv.style.top) > stopPosition) ) {
			goingUp = true;
			slidingDiv.style.top = parseInt(slidingDiv.style.top) + -slideAmount + "px";
			slidingDiv.style.height = parseInt(slidingDiv.style.height) + slideAmount + "px";
			setTimeout(slideUp, 10);
		}
		goingUp=false;
	}

	function slideDown(theme) {
		
		// find class to slide
		//var slidingDiv;
		//for (i=0; i<theme.childNodes.length; i++){
		//	if (theme.childNodes[i].nodeName=="DIV") slidingDiv=theme.childNodes[i];
		//}
		var slidingDiv = document.getElementById("theme_details");
	
		if ( !goingUp && (parseInt(slidingDiv.style.top) < startPosition) ) {
			goingDown=true;
			slidingDiv.style.top = parseInt(slidingDiv.style.top) + slideAmount + "px";
			slidingDiv.style.height = parseInt(slidingDiv.style.height) + -slideAmount + "px";
			setTimeout(slideDown, 10);
		}
		else {
			slidingDiv.style.display="none"; // hide sliding class
			goingDown=false;
		}
	}
	
//]]>
</script>
</head>
<body>

	<div id="theme_frame" onmouseover="slideUp(this);" onmouseout="fixOnMouseOut(this,event,'slideDown(this)');">
		<img id="crap" src="http://www.featherfolly.co.uk/photos/tn_Extraordinary_Fluffy_Cream_Feathers.jpg" alt="" />
			
		<div id="theme_details" style="display:none; top:0px; height: 0px;">
			Feather Info<br />
			<a href="">Buy It</a><br />
			<a href="">Try It</a>
		</div>
	</div>
	
</body>
</html>

I've tried iterating through the parent DIV's children, finding the one child that has tag="DIV", and it just becomes extremely slow and unusable. I've also tried var slidingDiv = document.getElementById('theme_frame').lastChild; but that only works in IE and not in Firefox.

Any help much appreciated.

Thanks in advance
Sean

This is a different issue to the scrollbar one I put in the xhtml section not long ago, I'm not spamming

Here's my website so far: http://designprohibited.com/dp3/

If you click the "view showreel" tab at the top a div will slide out and display a test video hosted at Vimeo.com.

If you do that in IE it slides out very smooth and nicely. If you do it in FireFox a white box where the video is loads instantly before the div slides out and it looks a bit crappy.

Any fixes?

Hello,

I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions?

CSS:
Code:

header {
  z-index:100;
  position:relative;
  display: block;
  background-color: #272727;
  height:100px;}

#contentBody {
  min-height:48em;}

footer {
  position:relative;
  display: block;
  background-color: #272727;
  height:168px;  }

#aboutPage { 
  display:none;}

#productPage { 
  display:none;}

#contactPage { 
  display:none;}

.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}

.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}

Script:
Code:

function $_(IDS) { return document.getElementById(IDS); }

function ani(){
	document.getElementById(classID).className ='aniOut';
}

function checkPage(classID, url){	
	var tmp = '';
	var sel = document.getElementsByTagName('section');
	for (var i=0; i<sel.length; i++){
		if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
		$_(classID).className ='aniIn';
		sel[i].style.display = tmp;}
	$_(classID).style.display = 'block';	 
	loadContent(classID, url);  }
  
function loadContent (classID, url){
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();}
	
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
		
	xmlhttp.open("GET","content/"+url,true);
	xmlhttp.send();}

HTML:
Code:

<!-- Header Areas: (Constent visual)--> 
<header>
	    <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
	    <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
	    <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
    <section id="aboutPage"></section>
    <section id="productPage"></section>
    <section id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer></footer>

Ok, with a little help I was able to write up this script, but whenever I put it onto my page it will not show up. Any idea on what I need to add?

Code:

<head>
<!-- stylesheets -->
     <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css" type="text/css" media="screen" />
     <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" type="text/css" media="screen" />
   
     <!-- PNG FIX for IE6 -->
     <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
   <!--[if lte IE 6]>
      <script type="text/javascript" src="http://alig.mezoka.com/slider/js/pngfix/supersleight-min.js"></script>
   <![endif]-->
   
    <!-- jQuery - the core -->
   <script src="http://alig.mezoka.com/slider/js/jquery-1.3.2.min.js" type="text/javascript"></script>
   <!-- Sliding effect -->
   <script src="http://alig.mezoka.com/slider/js/slide.js" type="text/javascript"></script>
</head> 
 
</body>   
<!-- BEGIN switch_user_login_form_header -->
<!-- Panel -->
<div id="toppanel">
   <div id="panel">
      <div class="content clearfix">
         <div class="left">
            <!-- Login Form -->
            <form class="clearfix" action="http://www.roleplayandwritinghaven.com/login.forum?connexion" method="post">
               <h1>Member Login</h1>
               <label class="grey" for="log">Username:</label>
               <input class="field" type="text" name="username" id="log" value="" size="23" />
               <label class="grey" for="pwd">Password:</label>
               <input class="field" type="password" name="password" id="pwd" size="23" />
                  <label>Log me on automatically at each visit: <input name="autologin" checked="checked" type="checkbox"></label>
                 <div class="clear"></div>
               <input type="submit" name="submit" value="Login" class="bt_login" />
               <a class="lost-pwd" href="#">Lost your password?</a>
            </form>
         </div>
         <div class="left right">         
            <!-- Register Form -->
            <form action="http://www.roleplayandwritinghaven.com/profile.forum?mode=register" method="post">
               <h1>Not a member yet? Sign Up!</h1>            
               <label class="grey" for="signup">Username:</label>
               <input class="field" type="text" name="signup" id="signup" value="" size="23" />
               <label class="grey" for="email">Email:</label>
               <input class="field" type="text" name="email" id="email" size="23" />
               <label>A password will be e-mailed to you.</label>
               <input type="submit" name="submit" value="Register" class="bt_register" />
            </form>
         </div>
      </div>
</div> <!-- /login -->   

   <!-- The tab on top -->   
   <div class="tab">
      <ul class="login">
         <li class="left"> </li>
         <li>Hello Guest!</li>
         <li class="sep">|</li>
         <li id="toggle">
            <a id="open" class="open" href="#">Log In | Register</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
         </li>
         <li class="right"> </li>
      </ul>
   </div> <!-- / top -->
   
</div> <!--panel -->
<!-- END switch_user_login_form_header -->
</body>

Hello,

I am trying to get this sliding panel to automatically be open when the page loads. Right now it is closed and I need to click it to open. I would like for it to be automatically opened when the page first loads and click to close it. Can anyone help me with the coding?

Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript"></script>

</head><body>
<center>
<div class="contenta"><img src="4.jpg" /></div>

<div id="header">
<img src="2.jpg" width="938" height="68" border="0" />
</div>

<div id="page_container">

<div id="toppanel">

<div style="height: 0px; display: block;" id="panel"><img src="1.jpg" width="938" height="583" /></div>

<div class="panel_button" style="display: block;"><a href="#">Expand</a></div>
<div class="panel_button" id="hide_button" style="display: none;"><a href="#">Close</a></div>
</div>

<div id="content"><img src="5.jpg" /></div>

</div>
</center>
</body></html>

and javascript.js
$(document).ready(function() {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "400px"
})
.animate({
height: "300px"
}, "fast");
$("div.panel_button").toggle();

});

$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");


});

});

and css:
body {
text-align: center;
margin: 0px;
background: #000;
}
#page_container {
position: relative;
margin-left: 0px;
margin-right: 0px;
width: 938px;
}
#header {
margin-left: 0px;
margin-right: 0px;
width: 938px;
background: #111;
}
.panel_button {
margin-left: 0px;
margin-right: 0px;
position: relative;
top: -25px;
padding-top: 5px;
width: 100px;
height: 22px;
background: url(images/panel_button.png);
z-index: 20;
filter:alpha(opacity=70);
-moz-opacity:0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
cursor: pointer;
}
.panel_button img {
position: relative;
top: 10px;
}
.panel_button a {
text-decoration: none;
color: #FFF;
font-size: 12px;
font-weight: bold;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}
#wrapper {
margin-left: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
}
#toppanel {
width: 100%;
left: 0px;
top: 0px;
z-index: 25;
text-align: center;
}
#panel {
width: 938px;
position: relative;
top: 1px;
height: 0px;
margin-left: 0px;
margin-right: 0px;
z-index: 10;
overflow: hidden;
text-align: left;
}
#panel_contents {
background: black;
filter:alpha(opacity=70);
-moz-opacity:0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
height: 100%;
width: 938px;
position: relative;
z-index: -1;
}
#content {
margin-left: 0px;
margin-right: 0px;
width: 100%;
position: relative;
text-align: left;
color: #545454;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.contenta {
width: 938px;
margin-left: 0px;
margin-right: 0px;
}

Thank you.