|
JavaScript - Jquery Text Effect And Speed
I have made myself an HTML Menu which is located on top of my current Flash object.
I have a question whether it really is not possible to get the same effect as 'text' has on the original "Flash Menu" EX: www.moebelarkitekten.dk and get the same effect over at my new HTML menu (Coded with Jquery) EX: http://www.richyjassal.co.uk/moebelar/ Right now it is almost the same effect, but only: OnMouseOver align text to Right OnMouseOut text to align left A guide, or other? Similar TutorialsHello, I'm working on a rotator and I'm needing to slow it down. I think I would use var speed right? How would I use it in this script? <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' }); }); </script> Gljpartners.com this site has a interesting scrolling feature. for the images.. does anyone know how it's done? 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');
}
}
?>
right now I almost have this script working the way I want it to, here it is: Code: var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});
$('.workimg a').click(function(){
var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp('slow',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').slideDown('slow',hideLoader);
}
function hideLoader() {
$('#load').slideUp('slow');
}
return false;
});
How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are 1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect? 2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next? Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file. Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. Hi, I found the following code on a web site. It displays text as if it were being typed but it only does it once. I have been trying to use various functions to make the effect continuous, i.e. make the header appear as typing text, clear the text, again make the header appear as typing text, clear the text, and so on. I wish this to continue for as long as the web page is open. But I just can't get it to work. I wonder if anyone has any suggestions? I would be very grateful for all help. [code] <h2 id="fly">Header</h2> <script type="text/javascript"> //Use "$" for linebreak //By default, set to just grab the text from element with ID="fly" message = document.getElementById("fly").innerHTML; // $ = taking a new line distance = 50; // pixel(s) speed = 200; // milliseconds var txt="", num=0, num4=0, flyofle="", flyofwi="", flyofto="", fly=document.getElementById("fly"); function stfly() { for(i=0;i != message.length;i++) { if(message.charAt(i) != "$") txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"; else txt += "<br>"; } fly.innerHTML = txt; txt = ""; flyofle = fly.offsetLeft; flyofwi = fly.offsetWidth; flyofto = fly.offsetTop; fly2b(); } function fly2b() { if(num4 != message.length) { if(message.charAt(num4) != "$") { var then = document.getElementById("n" + num4); then.style.left = flyofle - then.offsetLeft + flyofwi / 2; then.style.top = flyofto - then.offsetTop + distance; fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5); } num4++; setTimeout("fly2b()", speed); } } function fly3(target,lef2,num2,top2,num3) { if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)) { if(lef2 >= 0) lef2 -= num2; else lef2 += num2 * -1; if(Math.floor(lef2) != -1) { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2); } else { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2 + 1); } if(lef2 >= 0) top2 -= num3 else top2 += num3 * -1; if(Math.floor(top2) != -1) document.getElementById(target).style.top = Math.floor(top2); else document.getElementById(target).style.top = Math.floor(top2 + 1); setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50) } } stfly() </script> [code] Hello everyone. I hope I'm posting this in the right place. I'm using the Disco Background Effect script found here that causes the background color of the page to continuously change. For my design I need other aspects of the page to change along with it. Such as some title Text and HR lines. Is it possible to call this script to work on other things such as images, text and HR lines? In other words I want some text to change color in time with the background changing. I appreciate any help you might have. Ron All, I have the following code: Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>
$( "#drg" ).draggable({
revert: true
});
var drpOptions = {
drop: function(event, ui) {
$(this).append( ui.draggable.text() + "<br>" );
}
};
$( "#drplist" ).children().droppable( drpOptions );
$( "button" ).button().click(function() {
$( "<li>Dynamic droppable<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
});
</script>
<style type="text/css">
#drg { background: silver; width: 100px; padding: 0.5em; text-align: center; }
ul, ul li { list-style: none; margin:0 ; padding: 0; }
#drplist li { width: 200px; height: 100px; margin: 1em; padding: 0.5em; background: lightgreen; }
</style>
</head>
<body>
<div id="drg">
Drag me
</div>
<hr>
<button>Click to add a droppable</button>
<ul id="drplist">
<li>Drop here<hr></li>
</ul>
</body>
</html>
Basically what I would like to happen is that when I click on the button it generates the table like it did and then I want like two checkboxes next to it with some text and a break line in between the two. How can I update my jQuery to give me this result? Thanks in advance! if you visit my site: http://site-tonight.com/works you will notice if you click the image, the Colorbox comes up with a new image, BUT if you click the word Details below the image, the colorbox effect does not take place, even though it using the same link as the image. is there a way to make that text link be clicked and have an image pop up in the colorbox style? thanks much, kyle Hi, This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
Hi, I'd like to use the jQuery validation plugin as seen on the following example: http://docs.jquery.com/Plugins/validation#Example But it doesn't work properly if I use inline/in-filed labels. Any help is appreciated! Rain Lover Hi all, I'm justing wondering about the behavior of JS in regards to adding elements, suppose I have something like this Code: <div id="myDiv"></div>
...
function test() {
for (i=0 i<100; i++) {
var obj = document.create("div");
// do stuff to style div and set content
document.getElementById("myDiv").appendChild(obj);
}
// DO SOMETHING WITH ONE OF THESE DIVS
}
I'm just wondering at the point I hit that "// DO SOMETHING WITH ONE OF THESE DIVS", are all the divs I have added in the DOM available to access? I ask because I have some code at work in which a tester is reporting an error that happens which I can't reproduce, and they and others have had it a few times. The only way I can explain it in my mind is if the div is not available to me at the time of execution. So I'm just looking to rule it out or confirm my hunch. Is document.getElementById("myDiv").appendChild(obj); synchronous and the next line of code wont execute until the DOM is ready or is it in fact a asynchronous call and therefore adding alot of elements to the DOM could result in a lag so some divs or not available straight away. Any information much appreciated, I hope I have been clear enough. I'm using IE7 and so are the testers. Thanks, Dale Hello. I have a problem. I use google map to show some points. I have to show all points for some region, and number of points gets to 4.000. So it takes some minutes to show all points. I use gif image-> size: 400 bytes I found http://fundrace.huffingtonpost.com/ and it takes only couple of seconds to load more 1000 markes. Does someone know how to resolve this? Thanks I have this horizontal news ticker which works just perfect in ie7 regarding to speed, but when looking at the same page in ie8 the speed is very slow... Has anybody else encountered this, and if yes... How do I solve this? Code: initialize: function(element, options) {
this.setOptions({
marHeight: 18,
marWidth: 565,
steps: 20,
speed: 20,
direction: 'left',
pauseOnOver: true,
pauseOnContainerOver: true
}, options);
this.timer = null;
this.textElement = null;
this.mooqueeElement = element;
this.constructMooquee();
}
Thanks in advance :-) I have a piece of raw code. I want to make some images greater/smaller onmouseover/onmouseout, in a graduate mode, on using some independent setTimeout objects which are to be started/clear . It works ok if the mouse goes up and down at a reasonable speed. But if the movement is fast, the onmouseout looks to fail in firing (and some images remain on their bigger stage), which is somehow weird. Where could be the mistake? What did I make wrong (except that I might have had done that with Flash)? Any thoughts? You have in the attachment (see test.zip) the full example, with the used images, as well. Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
img{
width:144px;
height:36px;
cursor:pointer;
}
</style>
<script type="text/javascript">
var big1,big2,big3,small1,small2,small3, step=1;
function bigPic1(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big1=setTimeout(function(){bigPic1(obj,w,h)},step)}
}
function smallPic1(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small1=setTimeout(function(){smallPic1(obj,w,h)},step)}
}
function bigPic2(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big2=setTimeout(function(){bigPic2(obj,w,h)},step)}
}
function smallPic2(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small2=setTimeout(function(){smallPic2(obj,w,h)},step)}
}
function bigPic3(obj,w,h){
w+=4;h++;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h<55){big3=setTimeout(function(){bigPic3(obj,w,h)},step)}
}
function smallPic3(obj,w,h){
w-=4;h--;
obj.style.width=w+'px';
obj.style.height=h+'px';
if(h>36){small3=setTimeout(function(){smallPic3(obj,w,h)},step)}
}
function setAtt(){
var allImg=document.getElementById('menu').getElementsByTagName('img'), img, i=0;
while(img=allImg[i++]){
img.style.width='144px';
img.style.height='36px';
img.ind=i;
img.onmouseover=function(){
if('small'+this.ind){clearTimeout('small'+this.ind)};
window['bigPic'+this.ind](this,parseInt(this.style.width),parseInt(this.style.height))
};
img.onmouseout=function(){
if('big'+this.ind){clearTimeout('big'+this.ind)};
window['smallPic'+this.ind](this,parseInt(this.style.width),parseInt(this.style.height))
};
}
}
onload=setAtt
</script>
</head>
<body>
<div id="menu">
<div>
<img src="01.png" width="144" height="36" border="0" alt="">
</div>
<br>
<br>
<div>
<img src="02.png" width="144" height="36" border="0" alt="">
</div>
<br>
<br>
<div>
<img src="03.png" width="144" height="36" border="0" alt="">
</div>
</div>
</body>
</html>
i have pasted below java script code. please check write or wrong <script language = "JavaScript" type="text/javascript"> // Remove down to "ConnectionSpeed Detection section" if you don't want to use cookies // If you drop a cookie it can be picked up on return by php or something else function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null ? "" : (";expires=" + expire.toGMTString()))); // alert('A cookie called '+name+' is now set with value: '+value); //enable to alert user of cookie } function getExpireDate() { var expires = new Date(); expires.setTime((new Date().getTime() + 1000 * 60 * 60 * 24 * 365)); return expires; } // ConnectionSpeed Detection section var datasize = 31468; // Size of data being transferred, in Bytes var startTime = 0; var endTime = 0; var date = 0; var ctype = ""; var textMessage = ""; function calcThroughput() { var diffTimeMilliseconds = endTime - startTime; var diffTimeSeconds = diffTimeMilliseconds / 1000; var bits = (datasize * 8); // convert Bytes to bits, var kbits = bits / 1024; // convert bits to kbits var throughput1 = kbits / (diffTimeSeconds * 100 / 100); throughput = throughput1 * .93; // account for IP packet header overhead - averages about 7% setCookie("MediaThroughput", throughput, getExpireDate()); // Remove to not use cookie if (throughput < 185) { ctype = "Home.aspx"; } if (throughput > 185) { ctype = "intro.aspx"; } textMessage = "Bandwidth: <B>" + ctype + "</B><br>time to load: (sec): <B>" + diffTimeSeconds + "</B><BR>kbits loaded:<B> " + kbits + "</B><BR>Throughput (kbps): <B>" + throughput + "</B>" document.location = ctype; } </script> <script language = "Javascript" type="text/javascript"> <!-- A bunch of binary data here in the actual file --> </script> </head><body> <script language = "Javascript" type="text/javascript"> date = new Date(); endTime = date.getTime(); calcThroughput(); </script> automatic detect default page and check to low band version go to html page or high band version go to flash page. please help!!!!!!!!!!!!!!!!!!!!!!!!! i need script will detect connection speed and redirect to a page:
In the home page (index.html) i have a flash intro. The first time a user sees the website, the intro should play. Once he goes to another page (about_us or contact_us) and comes back to the home page, it should show a different swf (the version without the intro) - i have created two swf files. I need to know how to change them when the user has already seen the intro or was in the home page before. When i googled, i found something on cookies. I have no clue on how to set them and change the swf file. Would be great if someone has already done this or point me to a tutorial. i need java script. please help!!!!!!! Hello Experts, I did a website & I am having trouble wit it. In IE8, FF& Chrome, the site works perfectly. But in IE7, the site slows down very much that even the link hover effect doesn't show properly. I believe its some kind of javascript or Ajax request which is causing such delay. Can you guys please help me sort this out.... Here is the site with functionality... http://tinyurl.com/3qkunvy Here is the site without functionality but just the gallery is integrated... http://tinyurl.com/439ejhk The speed was even better before the Ajax is applied for contents. Any solutions/fixes please... was wondering if it made sense to optimize the comparison order inside an if() statement if one of the comparison targets is a function call eg: Code: var a = true,
b = function() {return false;};
if (b() || a) {...}
if (a || b()) {...}
would the second statement run faster because it would theoretically never need to call b() in this situation? can the eval order be relied on? does this depend on the js engine/internal optimizations? thanks, Leon |
|||||||