JavaScript - Including The Easing Effect

Hi
I'm trying to use the following javascript to print a <div> on a web page:

Code:

function CallPrint(strid)
{

    var prtContent = document.getElementById(strid);
    var WinPrint = window.open('','','left=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();

}

and clicking this button calls the function
Code:

<BUTTON onClick="javascript:CallPrint('div_tlush029')">

Where 'div_tlush029' is the id of the div to print.

The <div> includes a payslip (with background image) in Hebrew.

If I select the area (mouse click and mark area) and print the selection
everyrhing prints OK.

Using the above javascript I have no background images although they're included in the <div> and the text is formatted LtR instead of RtL.
Any ideas how I can get the <div> to print correctly using javascript.
(code snippets appreciated)
Thanks

David - "paddling upstream searching for the source"

I have this idea that I want to do basically a "state capture" of a web page through javascript.

Basically, a user will click a button, and the script will run, capturing all objects and their styles in a way that can be recreated later without referencing external CSS files and images.

The script could export HTML or JS, but obviously all images would have to be data urls and all styles would have to be inline/hard coded.

Does anyone know of a tool that do this or have any advice on where I would start? I'm thinking it would be very useful for a bug report submission on an application I'm working on.

Sure, the user can upload a screenshot, but I'm trying to save them the step (and basically have a screenshot on every bug report). JS cannot do an actual image capture, so I think a full dom export would be just as good.

Any ideas would be fantastic.

Hi,

Does anyone knows how to use this effect using javascript?

http://www.modonline.com/

Really appreciate if someone can help me.

Thank You,
Nadun

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

I am using ASP.NET and AJAX here.

basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example:

<< prev [image1] [image2] [image3] [image4] Next >>

<< prev [image5] [image6] [image7] [image8] Next >>


so when the user presses next or previous, it will SLIDE to the left/right.

the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev.

how can I go about doing this type of effect?

I want to add the the faded effect to the slide pics that I make them change by timer and I don't know how to add the faded effect and make it work on IE and Firefox.

I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation?

I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas?

Thank you,

Dustin

Quick question,

I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image.

How would I get that effect?

Thanks!!!

Hey guys, I'm new to the forum and thought I should sign up to learn a little more.

I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images...

http://www.weareunit.com/index.php?p=3D

Thanks

Hi friends,

Im new with JS.
How to make the roll over effect in JS.
An image, on roll over, the big size of the same image needs to appear.

regards

anoop

Im looking at how or what this effect is called i am not even sure if it is javascript i assume it is from looking at the code.

But i cant seem to convert it to what i want. So if someone could point me to a more simple version of this code or what the technique is called that would be great.

Here is the page.
http://www.pizzacapers.com.au/the-me...nature-pizzas/

What i am talking about:
You click the pizza and it comes up inside of the border picture on the left side of the page.

Thanks

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');
	}



}


?>

Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect:

http://www.webdesignerwall.com/demo/...ed-hover2.html

i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work.

can anyone help???

thanks!

Help,

I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item.

Here is my code:

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" xml:lang="en" lang="en">
    <head>
        <title>hello</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <script src="hoverIntent.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {

            $("#nav a").append("<em></em>");
            $("#nav a").hoverIntent(function () {
                $(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
                var hoverText = $(this).attr("title");
                $(this).find("em").text(hoverText);
            }, function () {
                $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
            });

              
        });
        </script>

<style type="text/css">

body {
    margin: 0px;
}
#nav 
{
    border-top: 2px solid #000;
    border-bottom:2px solid #000;
	width: 100%;
	height: 36px;
    line-height: 36px;
	float: left;
	background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
	list-style: none;
	width: 900px;
	margin: 0 auto;
	padding: 0;
	position:relative;
}
#nav li {
	float: left;
}
#nav li em {
	background: url(images/home.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -43px;
	left: 0px;
	padding: 20px 12px 10px;
	z-index: 1;
	display: none;
}
#nav li a {
	font-family:"Georgia", "Sans-Serif";
    display: inline-block;
    text-decoration: none;
    font-size:medium;
    padding: 0px 5px;
	text-align:center;
	color: #000;
    width:110px;
    height: 36px;
    line-height: 36px;
	background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
	font-family:"Georgia", "Sans-Serif";
    display: inline-block;
    text-decoration: none;
    font-weight:bold;
    font-size:medium;
    padding: 0px 5px;
    width:110px;
    height: 36px;
    line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li><a href="#">Item3</a></li>
		<li><a href="#">Item4</a></li>
	</ul>
</div>
</body>
</html>

Thank you!

Take a look at this guys excellent site.

http://sursly.com/

Does anyone know of the coding he used to get his pages to load like they do (auto scrolling right)

I would like to do this with a site I'm building but vertical. I was hoping someone may know of a tutorial or could help me out here on the forums. Thanks.