JavaScript - Auto Scrolling Effect Used?

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

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

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

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

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

Hi there all,

Trying to adapt a bit of Code, but failing wonderfully!

I'm writing in Cold Fusion, but using a little java script to create the sliding effect. It's from a sliding open list function in another site, and I tried to just hack my current needs in there.

Code:

<script>
	function DC_ShowHideMoreWebsites(id) {
		if( document.getElementById( "contentsections2").style.display=="none" ) {
			Effect.BlindDown( "contentsections2"); 
			 return false;
		} else {
			Effect.SlideUp( "contentsections2" );  return false;
		}
	}
	</script>

is followed by

Code:

<p id="moreScreenshots"><a href="#" onclick="DC_ShowHideMoreWebsites"; return false;">More Website Examples</a></p>

I've tested the script, div and the DB call by just calling it with
Code:

<p id="moreScreenshots"><a href="#" onclick="Effect.BlindDown('contentsections2'); return false;">More Website Examples</a></p>

And that works fine.

I've never coded in Java, hence the problem! any help appreciated

Hi, I'm kind of new to javascript and am an undergraduate studying a FdSc in web tech which encompasses all of these kind of languages (PHP, Python, HTML, CSS, Javascript and so on). Javascript is the one that I'm focusing on first and whilst I have a solid understanding of the mark up languages I'm struggling to combine the two. For the simple stuff like like the theory behind variables, functions and so on it's not a problem, but what is a problem is duplicating this kind of effect as seen on www.yidio.com

The feature with the vertical menu that changes when you hover over a TV show name which then changes the content (i.e. the image and text - essentialy the HTML content) is bloody neat in my opinion and I'd like to be able to re-create it.

I've also noticed the same effect is in place on the boxes at www.ebuyer.com and on the story navigation menu at www.sciencedaily.com.

How can I do this? I have all the HTML and CSS source code in place but just no javascript. I've approached my lecturers about it and they've told me about jquery and javascript libraries but this still doesn't help me in being able to achieve this effect. would someone be able to explain and help me?

Thanks

Nick C

Quote:
http://codecanyon.net/item/html-befo...preview/153778
http://codecanyon.net/item/beforeaft...preview/529151
http://www.catchmyfame.com/2009/06/2...eafter-plugin/
I need this effect, I will explain below
The first, we have


if we slide on the left.



when we slide on the right



if we slide to END the result will be:

OR

It's use jquery plugin, I want to find the same things with only javascript, not use jquery.
Because, I'm use it on ipod, iphone, android. It's not allow jquery.
I'm really need it. please, help me.
Thanks for your time

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



}


?>

I've been doing some research on javascript's impact on the time it takes for a page to load, as defined by firebug's "Net" tab's "onload" demarcation (the red line). It seems that aside from dynamic data that's not part of the HTML, enabling javascript always slows down the page. I've checked wikipedia, yahoo, digg, even google; a javascript-enabled loading of each site shows a later onload() event compared to loading the same site without javascript enabled.

My question:
Can anyone think of a site that loads faster with javascript than it does without javascript?

Hi,

Please see URL http://backstageweb.net/Salon/indexslides2.htm.

(code is below, original source: http://javascript.internet.com/misce...lide-show.html

The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here?

Thanks,

John

Code:

<head>
<script type="text/JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>
</head>

Code:

<body onLoad="runSlideShow()">

Code:

<div id="slides">
    <img src="images/01.jpg" name='SlideShow' width="380" height="541"> 
  </div>

Hi Guys, I hope this is a good place for me to post a question. I saw some responses referring to this and I hope as a newcomer my question is not booed! :)

I am attempting to compound a rollover effect I have currently working at this page. The 4 numbered buttons make the larger image next to it change upon on roll over. I would like the buttons themselves also to have a rollover state.

In my code below, I simply added a space in my JS script after the portion of the script that I know is working ends and added the newer code referring to 71, or rollimg71 (an arbitrary number). The area that says //button rollover effect is the code I added that does not break the site but does not work correctly.

My JS
<code>
// JavaScript Document
//gallery rollover effect
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image;
image0.src = 'ectonymimages/newsletter1.jpg';
image1.src = 'ectonymimages/newsletter2.jpg';
image2.src = 'ectonymimages/newsletter3.jpg';
image3.src = 'ectonymimages/newsletter4.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
document.rollimg = '';
}

//button rollover effect
if (document.images) {
image71a = new Image;
image71b = new Image;
image71a.src = 'ectonymimages/newsletter1_link.gif';
image71b.src = 'ectonymimages/newsletter1_linkselected.gif';
} else {
image71a = '';
image71b = '';
document.rollimg71 = '';
}
</code>

My HTML
<code>
<div style="float:left; padding:10px 0 0 25px;">
<span onmouseover="document.rollimg.src=image0.src;" onmouseover="document.rollimg71.src=image71b.src;" onmouseout="document.rollimg71.src=image71a.src;"><img src="ectonymimages/newsletter1_link.gif" alt="Newsletter 1 Button" name="rollimg71"/></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image1.src;"><img src="ectonymimages/newsletter2_link.gif" alt="Newsletter 2 Button" /></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image2.src;"><img src="ectonymimages/newsletter3_link.gif" alt="Newsletter 3 Button" /></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image3.src;"><img src="ectonymimages/newsletter4_link.gif" alt="Newsletter 4 Button" /></span>
</div>
<div style="float:right; padding-right:50px;">
<img src="ectonymimages/newsletter1.jpg" align="Newsletter Example" name="rollimg"/>
</div>
</code>


Right now, my HTML only attempts to affect the first button, but I hope to have it affecting all 4 buttons. (Presumably if I keep this same format, they would be rollimg72, rollimg73, and rollimg74 added somewhere in the JS) Further, I'll also compound an onclick function, for both the buttons and the larger images, that will open a pop up HTML window. So, my priorities are that I'd love for the buttons themselves to have a rollover effect and then also an onclick function that opens a link in a new window in addition to the rollover effect currently being used.

*If I mouse over a numbered button, that numbered button changes.
*If I mouse over a numbered button, depending on the numbered button doing the affecting, a larger image is displayed next to it that changes on rollover. (This step already works correctly.)
*If I click on a numbered button, 1 of 4 links would open.
If I click on the larger image that changes, 1 of 4 links would open.

If you've read this far, thank you in advance! Heh heh, this is the 2nd time I've typed this, as the forum logged me out and deleted my entire post when I clicked "preview". Any help is much appreciated! Gentlepeople, I ask your assistance.

-Marcus

Hey

I'm trying to make a slot machine effect in JS - i had an ajax example but was far too complicated to manipulate to communicate with my server so im working from ground up.

The way ive done it is simple html and a submit button.

But i want the submit button to first create a "rolling through the images" affect like a slot machine does - then stop left to right in that order (basically like a slot machine does).

Now this is beyond what i know in JS but i then also want it to know the result of the images store them into an array and push it to my PHP so i can process it on my server.

Is this even possible ? And has any one ever tried such a thing because im stuck but really wish to make this for my gaming website.

Hope you can help!

Can some one help me step me through this last part of my script i have made.

I have completed my entire chat program but currently i use:

<meta http-equiv="refresh" content="5; URL=shout.php">

This is what keeps my chat room up to date, but this is pretty ugly due to the fact the browser makes a refresh.

So i was hopeing some one could step my through to add ajax that makes a live affect with it appear to refresh.

The script that has this chat is in the structure of:

Code:

<meta http-equiv="refresh" content="5; URL=shout.php">
<?php
function get_chats(){
//query 
//while loop the logs out
}
getlogs();
?>

And thats it. I took a look on W3 about ajax and most of it was involve an event occuring such as submit/on key press which isn't what i want as some times a user may not do anything but i still want the chat to keep "up to date".

I found one tutorial but it was over complicated to just take snippets out to put on my chat without knowing what it did or what to change for my chat to make it to work.

Hope you can help - im a quick learner when i see the right example of what i need.