JavaScript - Slot Machine Effect
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! Similar TutorialsHi to all, I'm having a problem deciphering this script. This is a 3 image slot machine script(I guess) Can someone explain to me how this code works? And how can I make it show the same result? here it goes: Quote: var chaosMachineSpinCtr = 0; function chaos_machine_attempt(params) { params.on_start(params); $.post(params.post_url, {}, function(data) { var ret = JSON.parse(data); spinResults = ret.spin_results; chaosMachineSpinCtr = 0; chaos_machine_spin_slot(params, ret); }); } function chaos_machine_spin_slot(params, ret) { spinResults = ret.spin_results; if(chaosMachineSpinCtr < 25) { $('#'+params.ul_id+' li[rel=1] > img').attr('src', params.images[array_rand(params.images)]); } else if(chaosMachineSpinCtr == 25) { $('#'+params.ul_id+' li[rel=1] > img').attr('src', spinResults.images[0]); } if(chaosMachineSpinCtr >= 25 && chaosMachineSpinCtr < 50) { $('#'+params.ul_id+' li[rel=2] > img').attr('src', params.images[array_rand(params.images)]); } else if(chaosMachineSpinCtr == 50) { $('#'+params.ul_id+' li[rel=2] > img').attr('src', spinResults.images[1]); } if(chaosMachineSpinCtr >= 50 && chaosMachineSpinCtr < 75) { $('#'+params.ul_id+' li[rel=3] > img').attr('src', params.images[array_rand(params.images)]); } else if(chaosMachineSpinCtr == 75) { $('#'+params.ul_id+' li[rel=3] > img').attr('src', spinResults.images[2]); } chaosMachineSpinCtr++; if(chaosMachineSpinCtr <= 75) { setTimeout(function() {chaos_machine_spin_slot(params, ret);}, 50); } else { params.on_end(params, ret); } } I'm doing this project for class and I got to a point where i am stuck and need some help on how to move forward, I don't want straight up answers but some advice or some code to get me started would be much appreciated. Thanks. This is what i need to do with what I have While a smart casino owner knows better than to allow negative bankrolls, most casinos are not above extending personal loans to gamblers who are down on their luck. Augment your slots.html page so that it has capabilities for extending loans to the player when they run out of money. Your page should have an additional text box keeping track of the player's debt (initially $0). Instead of just alerting the player when they try to play with no money, the page should give the user the option to obtain a loan. Use a select box for this with options for a $1, $5, $10, or $20 loan. The loan should only be available when the user is out of money, so you will need to initially set the disable attribute of the select box to "true" in order to disable it (see the snippet below for a starting point). When the user runs out of money, you can enable the select box by setting this attribute to "false". And this is what I have... Code: <html> <!-- This page simulates a slot machine. --> <!-- ================================================= --> <head> <title> Online Slots </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> bankroll=20; bankroll=parseFloat(bankroll); loanctr=0; loanctr=parseFloat(loanctr); function DoSpin() // Assumes: the page contains an image (slot1) // Results: displays a random spin as the slot1 image { if (bankroll == 0) { alert ("You have no money left. Consider taking out a loan."); } else { var pick; pick = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]); document.getElementById('slot1').src = "http://dave-reed.com/book/Images/" + pick; var picktwo; picktwo = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]); document.getElementById('slot2').src = "http://dave-reed.com/book/Images/" + picktwo; var pickthree; pickthree = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]); document.getElementById('slot3').src = "http://dave-reed.com/book/Images/" + pickthree; if (pick == picktwo && pick == pickthree) { alert ("Winner!"); bankroll = bankroll + 1; } else { bankroll = bankroll - 1; } } } </script> </head> <body> <div style="text-align:center"> <img id="slot1" alt="slot image" border=2 src="http://dave-reed.com/book/Images/cherry.jpg" /> <img id="slot2" alt="slot image" border=2 src="http://dave-reed.com/book/Images/cherry.jpg" /> <img id="slot3" alt="slot image" border=2 src="http://dave-reed.com/book/Images/cherry.jpg" /> <br /><br /> <input type="button" value="Click to Spin" onclick="DoSpin(); document.getElementById('earnings').value = bankroll;" /> <br /><br /> <input type = "text" id= "earnings" size = "10" value= "" onfocus="blur();"/> <br /><br /> Take out a loan of <select id="loan" disabled="true" onchange="document.getElementById('loan').value = loanctr;"> <option selected="selected" value=""></option> <option value="1">1</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> </select> dollars. <br /><br /> <input type = "text" id= "loan" size = "10" value= "" onfocus="blur();"/> </div> </body> </html> Hi - I have an ASP.Net 4.0 solution that runs fine on a Windows 2008 server. However, I've just been given a new Windows 7 64-bit machine to use as my development machine and I'm having a problem with one of my aspx pages. This page has some javascript on it, which runs fine, but then it gets to the following code: Code: <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> This not code that I've written; it's code that's generated client-side that I see as I'm debugging my app in Visual Studio 2010 (trying to figure out what the $^#$ is going on). At any rate, once this code completes, the app does nothing. The debugger should take me to some server-side code, but it doesn't. It just sits there. The result is that the page doesn't do what it's supposed to do (no inserts to databases, no success messages, no nothing). As I said, this problem is restricted to my W7 64-bit machine; it runs fine on W2008. Other pages with javascript in the same solution work fine on my W7 machine. I found a post (http://dopostback.net/index.php/net-...anel-problems/) that discusses a similar issue within an UpdatePanel, but I'm not using UpdatePanel. My page does have hidden controls on it, but so do other pages that work just fine. Does anyone know what could be causing this? Thanks! Hi Everyone, I'm trying to allow a user to select an XML file so that my javascript can parse it and create some pins for a google map. It works fine in Firefox, and by using FireBug I can see that the file is being accessed as expected. IE on the other hand tells me that "'files.0' is null or not an object" on line 68 of address-locator.php... PHP 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>Address Locator</title> <style type="text/css"> #map_canvas { width:690px; height:400px; float: left; clear: right; margin: 0px auto 10px 20px; } </style> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> var map = null; var geocoder = null; var establishmentList; // holds the XML list of all the establishments var mapPins = []; // holds a listing of all the map pins google.load('maps', '3', { other_params: 'sensor=false' }); google.setOnLoadCallback(gmapInit); // initialize the google map function gmapInit() { var latlng = new google.maps.LatLng(42.204799,-111.619917); // 45.332245,-99.507536 center of north america var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } // includes all the information needed to create a pin with a pop up window function mapPin(pinName, pinAddress, pinPhone, pinWebsite, pinLat, pinLng, geocodeSuccess){ this.pName = pinName; this.pAddress = pinAddress; this.pPhone = pinPhone; this.pWebsite = pinWebsite; this.pLat = pinLat; this.pLng = pinLng; this.success = geocodeSuccess; } // gets the lat and lng of an address and adds a pin to the mapPins array. function getLocation(theName, theAddress, thePhoneNumber, theWebsite){ /* geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': theAddress}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, results[0].geometry.location, true)); } else { mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, 0, 0, false)); alert("Geocode was not successful for the following reason: " + status); } }); */ // remove after working mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, 42.204799, -111.619917, true)); // end removing code } /* loadAddressFile() * opens an XML file which contains descriptions (names), addresses, phone numbers, * and websites for a business and loads the pertetinent information into the global * variable establishmentList. Starts the call chain to have the data processed */ function loadAddressFile() { // open the file selected by the user var finput = document.getElementById("userAddressFile"); var theFile = finput.files[0]; if (theFile) { var fileReader = new FileReader(); fileReader.onload = function(e){ var xmlDoc; // parse (or load) the xml into xmlDoc. if (window.DOMParser){ parser = new DOMParser(); xmlDoc = parser.parseFromString(e.target.result,"text/xml"); } else { // Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(e.target.result); } // listing of the establishments establishmentList = xmlDoc.getElementsByTagName("establishment"); processEstablishment(0, 1000); } fileReader.readAsText(theFile); } else { alert("Failed to load file"); } } // checks to see if the index parameter is less than the length of the list of establishments and processes the establishment at that index in the list if it is. function processEstablishment(index, delay){ if(index < establishmentList.length){ // data from the XML file var theName = establishmentList[index].getElementsByTagName("name")[0].textContent; var theAddress = establishmentList[index].getElementsByTagName("address")[0].textContent; var thePhoneNumber = establishmentList[index].getElementsByTagName("phone")[0].textContent; var theWebsite = establishmentList[index].getElementsByTagName("website")[0].textContent; // get the current addresses geocoding and add the pin to the list getLocation(theName, theAddress, thePhoneNumber, theWebsite); // check to see if the attempt was successfull - if it was not and we are denied our data - increase the hold time and retry the previous attempt if(!mapPins[index].success){ index--; delay += 5000; } // attempt (or re-attempt) the next establishment window.setTimeout(function() { processEstablishment(index+1, delay); document.getElementById("data").innerHTML += mapPins[mapPins.length-1].pName + "<br />"; }, delay); } } </script> <!-- open the file of addresses if it exists and create a javascript array of the addresses --> </head> <body> <!-- This page is set up to allow the user to load an XML file which contains information about businesses and creates the data required to locate that business on a map --> <div id="map_canvas"></div> <div style="clear:left"> <div style="float:left"> <!-- User the file type to allow the user to select the file, then pass this information to javascript via accessing userAddressFile via document.getElementById("userAddressFile") in loadAddressFile() above --> <form id="addresses" action="address-locator.php" method="post" enctype="multipart/form-data"> Select file: <input name="userAddressFile" id="userAddressFile" type="file" /> <input value="Upload" type="button" onclick="loadAddressFile()" /> </form> </div> <div id="data" style="clear:left"></div> </div> </body> </html> and a sampling of the XML file I'm loading: Code: <?xml version="1.0" encoding="UTF-8"?> <barList> <establishment> <name>21-Seven Bar and Grill</name> <address>217 E Street,Davis, CA</address> <phone>530.757.1733</phone> <website>http://www.myspace.com/21seven_davis</website> </establishment> <establishment> <name>Beach Hut Deli</name> <address>109 E Street, Davis, CA</address> <phone>530.758.7873</phone> <website>http://www.beachhutdeli.com/</website> </establishment> <establishment> <name>Bistro 33 Davis</name> <address>226 F Street, Davis, CA</address> <phone>530.756.4556</phone> <website>www.bistro33.com</website> </establishment> </barList> I've spent the entire afternoon in Goo-gle-land - so any help is most appreciated! If I've missed anything or you have any questions please let me know. Thanks in advance! Dave. Hi - firstly, apologies for the generic nature of this question, I'm sure I will have some more specific questions later into this project! I'm a complete newbie to javascript and would like to know if it is possible to create a vertical spinning bar like on a fruit machine, that contains a number of images. I would like the bar to have the following behaviour. 1. on the mouse being above the centre point of the bar, the images scroll upwards 2. on the mouse being below the centre point of the bar, the images scroll downwards 3. the further you are from the centre point - the faster the bar scrolls 4. when you hover an image - the bar stops, the image lightens a shade and a link is displayed below the image. My initial thought is to contain the bar in a div and have javascript actions applied to it depending on the mouse position within the div - the actions will change the positions of the image contained in the div. Would be great if anyone knew some code that does a similar thing - or could give me some pointers to start me off. Thanks : ) 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!!! 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? 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 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 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'); } } ?> good day! i just want to ask how to make a glowing effect using javascript, i'm kinda new to this stuffs 'coz i'm not really a javascript coder, i now only know the basics. i already did it on a text and it's working but when i tried to apply it to the one i'm doing right now it's not working. it's with HTML5 Canvas. here's the part of my codes where i'm trying to do the glowing effect, hope i could get some help here. thanks! var c=Math.max(0,parseInt( -50+284*(z/PYRAMID_TOP))); var gradient = ctx.createRadialGradient(90, 63, 100, 90, 63, 50); gradient.addColorStop(0, "rgba(255,255,0, "+1+")"); gradient.addColorStop(1, "rgba(255,255,255,"+0+")"); ctx.fillStyle= gradient; 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. 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> i just read the other thread and i want the reverse affect. the slideshow opens in a new window and thats not what we want because the link is to a persons profile page. we dont want two versions of the site open at once. this is the slideshow that client did on his own then i got the project. http://www.dynamicdrive.com/dynamici...nslideshow.htm Code: imagearray: [ ["pool.jpg"], ["http://mysite.com/cave.jpg", "http://cnn.com"], ["fruits.jpg", "http://cnn.com", "_new"], ["dog.jpg", "", "", "This image has a description but no hyperlink"] //<--no trailing comma after very last image element! ], i see "_new"], in there but i dont know if there is a command for self is it _self .. im not sure.. i assume it is different than the html target code. so how do i make it open in the same window just like target = self sorry had to change the target to non coded format to show up right in this thread 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 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 |