Ajax Updates |
- Html Falling Text Script
- DHTML Rounded Corners
- AJAX Chained Select Script
- Ajax MGraph Script
- Time Sensitive CSS Switcher
- Dynamic DD Tab Menu
- Make Sexy Buttons with CSS
| Posted: 09 Nov 2009 10:11 AM PST Put this into your < HEAD > section <style type="text/css"> /* START CSS ONLY NEDED FOR DEMO */ body{ margin:0px; width:100%; text-align:center; background-color:#E2EBED; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } #mainContainer{ width:760px; text-align:left; margin:0 auto; margin-top:10px; background-color:#FFF; border:1px solid #000; } #leftMenu{ width:155px; float:left; height:400px; padding-left:5px; } #mainColumn{ width:590px; padding-left:5px; padding-right:5px; float:left; } .clear{ clear:both; } #footer{ background-color:#FFF; } /* END CSS ONLY NEEDED FOR THE DEMO */ /* START LAYOUT FOR FALLING TEXT */ #dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{ /* Syntax for falling links - The id is used for your HTML, the class is used for the dynamically created elements */ color:blue; padding:2px; visibility:hidden; font-weight:bold; text-decoration:none; } #dhtmlgoodies_fallingLinks a:hover{ color:red; } /* END LAYOUT FOR FALLING TEXT */ </style> <script type="text/javascript"> var fallFromYPosition = -30; // 0 = top, other numbers represents pixels from top var slidePixelPerMove = 15; // Higher = faster var slideTimeoutBetweenMoves = 5; // Milliseconds var slideInReverseOrder = false; // Start with last item? /* Don't change anything below here */ var dhtmlgoodies_fallingLinks; var fallingItems = new Array(); var absolutePositionedItems = new Array(); var currentFallingObject = false; function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ returnValue += inputObj.offsetTop; } return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null){ returnValue += inputObj.offsetLeft; } return returnValue; } function slideDownLinks(linkIndex) { var topPos = currentFallingObject.style.top.replace('px','')/1; topPos = topPos + slidePixelPerMove; var slideEnded = false; if(topPos>=fallingItems[linkIndex]['top']){ topPos = fallingItems[linkIndex]['top']; slideEnded = true; } currentFallingObject.style.top = topPos + 'px'; if(!slideEnded){ setTimeout('slideDownLinks(' + linkIndex + ')',slideTimeoutBetweenMoves); return; }else{ currentFallingObject.style.display='none'; fallingItems[linkIndex]['obj'].style.visibility = 'visible'; if(linkIndex<fallingitems .length-1 && !slideInReverseOrder){ linkIndex = linkIndex + 1; currentFallingObject = absolutePositionedItems[linkIndex]; currentFallingObject.style.display='block'; slideDownLinks(linkIndex); return; } if(linkIndex>0 && slideInReverseOrder){ linkIndex = linkIndex - 1; currentFallingObject = absolutePositionedItems[linkIndex]; currentFallingObject.style.display='block'; slideDownLinks(linkIndex); } } } function initFallingLinks() { dhtmlgoodies_fallingLinks = document.getElementById('dhtmlgoodies_fallingLinks'); var subs = dhtmlgoodies_fallingLinks.getElementsByTagName('*'); for(var no=0;no<subs .length;no++){ var thisIndex = fallingItems.length; fallingItems[thisIndex] = new Array(); fallingItems[thisIndex]['obj'] = subs[no]; fallingItems[thisIndex]['left'] = getLeftPos(subs[no]); fallingItems[thisIndex]['top'] = getTopPos(subs[no]); absolutePositionedItems[thisIndex] = document.createElement('DIV'); absolutePositionedItems[thisIndex].style.display='none'; absolutePositionedItems[thisIndex].style.position='absolute'; absolutePositionedItems[thisIndex].style.left=fallingItems[thisIndex]['left'] + 'px'; absolutePositionedItems[thisIndex].style.top= fallFromYPosition + 'px'; absolutePositionedItems[thisIndex].className = 'dhtmlgoodies_fallingLinks'; document.body.appendChild(absolutePositionedItems[thisIndex]); var innerItem = document.createElement(subs[no].tagName); innerItem.innerHTML = subs[no].innerHTML; absolutePositionedItems[thisIndex].appendChild(innerItem); innerItem.style.visibility = 'visible'; } if(absolutePositionedItems.length>0){ if(slideInReverseOrder)startIndex = absolutePositionedItems.length-1; else startIndex = 0; currentFallingObject = absolutePositionedItems[startIndex]; currentFallingObject.style.display='block'; slideDownLinks(startIndex); } } window.onload = initFallingLinks; </subs></fallingitems></script> Put this into your < BODY > section <div id="mainContainer"> <div id="header"> <img src="/images/heading3.gif"/> </div> <div id="leftMenu"> This is the left column </div> <div id="mainColumn"> This is a script where links falls from the top of the page and to the place where you have placed them in your HTML code. </div> <div class="clear"></div> <div id="footer"> <!-- START OF FALLING LINKS --> <div id="dhtmlgoodies_fallingLinks"> <a href="#">This</a> | <a href="#">Is</a> | <a href="#">An</a> | <a href="#">Example</a> | <a href="#">Of</a> | <a href="#">Falling</a> | <a href="#">Links</a> | </div> <!-- END OF FALLING LINKS --> </div> </div> Configuration The falling text items are typically links. These items are created by use of plain HTML. This is how they are created in the demo: <!-- START OF FALLING LINKS --> <div id="dhtmlgoodies_fallingLinks"> <a href="#">This</a> | <a href="#">Is</a> | <a href="#">An</a> | <a href="#">Example</a> | <a href="#">Of</a> | <a href="#">Falling</a> | <a href="#">Links</a> | </div> <!-- END OF FALLING LINKS --> is the parent element. It’s important that you have an element like this with the ID dhtmlgoodies_fallingLinks. It doesn’t nescessary have to be a DIV. Layout CSS is used to add layout to the falling items. Example: #dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{ color:blue; padding:2px; visibility:hidden; font-weight:bold; text-decoration:none; } #dhtmlgoodies_fallingLinks a:hover{ color:red; } Note! You don’t have to use links( tags) in this script. You can for example use tags. If you do, remember to change it in both your HTML and CSS. There are 3 variables you can use to customize the script: var fallFromYPosition = -30; var slidePixelPerMove = 15; var slideTimeoutBetweenMoves = 5; var slideInReverseOrder = false; * fallFromYPosition = Horizontal position where the items should slide from. -30 which is default means that the links will slide from browsers top edge.  Related Listings:
| |||||
| Posted: 09 Nov 2009 10:03 AM PST Configuration First, you need to include the js file rounded-corners.html with a script tag This is done by the addTarget method. Example: Put this at the bottom of your HTML file: <script type="text/javascript"> rC = new DHTMLgoodies_roundedCorners(); rC.addTarget('leftColumn',25,25,'#317082','#FFFFFF',5,300, 'top_left,bottom_left,bottom_right'); rC.addTarget('contentColumn',25,25,'#7190E0','#FFFFFF',5,300, 'top_left,bottom_left,bottom_right'); rC.addTarget('footer',25,25,'#CCCCFF','#FFFFFF',5,false, 'bottom_left,bottom_right'); rc.init(); </script> This will add rounded corners to element with ids leftColumn, contentColumn and footer. The arguments to the addTarget method are: * ID of element Related Listings:
| |||||
| Posted: 09 Nov 2009 09:56 AM PST PHP Put this into your < HEAD > section <style type="text/css"> body{ background-repeat:no-repeat; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; height:100%; background-color: #FFF; margin:0px; padding:0px; } select{ width:150px; } </style> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> var ajax = new Array(); function getCityList(sel) { var countryCode = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box if(countryCode.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createCities(index) { var obj = document.getElementById('dhtmlgoodies_city'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } function getSubCategoryList(sel) { var category = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box if(category.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createSubCategories(index) { var obj = document.getElementById('dhtmlgoodies_subcategory'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } </script> Put this into your < BODY > section <form action="" method="post"> <table> <tr> <td>Country: </td> <td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)"> <option value="">Select a country</option> <option value="dk">Denmark</option> <option value="no">Norway</option> <option value="us">US</option> </select> </td> </tr> <tr> <td>City: </td> <td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city"> </select> </td> </tr> <tr> <td colspan="2"><b>Second example</b></td> </tr> <tr> <td>Category: </td> <td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)"> <option value="">Select a category</option> <option value="1">Cars</option> <option value="2">Boats</option> <option value="3">Airplanes</option> </select> </td> </tr> <tr> <td>Sub category: </td> <td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory"> </select> </td> </tr> </table> </form> Download Javascript file Put ajax.js in a subfolder called “js” or change the path to the file in the code above(i.e. ) Configuration * Someone select a country from the select box. This triggers the function getCityList() getCities.php Here’s the content of getCities.php: < ?php if(isset($_GET['countryCode'])){ switch($_GET['countryCode']){ case "no": echo "obj.options[obj.options.length] = new Option('Bergen','1');\n"; echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n"; echo "obj.options[obj.options.length] = new Option('Oslo','3');\n"; echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n"; break; case "dk": echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n"; echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n"; echo "obj.options[obj.options.length] = new Option('Odense','13');\n"; break; case "us": echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n"; echo "obj.options[obj.options.length] = new Option('Chicago','22');\n"; echo "obj.options[obj.options.length] = new Option('Denver','23');\n"; echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n"; echo "obj.options[obj.options.length] = new Option('New York','25');\n"; echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n"; echo "obj.options[obj.options.length] = new Option('Seattle','27');\n"; break; } } ?> Copy the code and create the file getCities.php. Put it in the same folder as the main script Related Listings:
| |||||
| Posted: 09 Nov 2009 07:11 AM PST As you can see this is simple bar-graph that shows data by month. Soon I’ll release other graph to complete this package (daily, and hourly graph). * Download Archive <link rel="stylesheet" type="text/css" media="screen" href="agGraph.css" /> * Download and include prototype.js file in your page <script type='text/javascript' src='prototype.js'></script> <script type='text/javascript' src='graphM.prototype.js'></script> Define destination DIV, and write note title and text <script type='text/javascript'> var graph1={ divID:'resultDiv1', ShowNote:'yes', NoteTitle:'Note', NoteText:'Little note about this graph goes here...' } var graph2={ divID:'resultDiv2', ShowNote:'yes', NoteTitle:'Note', NoteText:'Now with multiple graphs * Add onclick=”draw();” to some element <input type="button" value="Generate Graph" id="startButton" onclick="draw();" /> Related Listings:
| |||||
| Posted: 09 Nov 2009 06:47 AM PST When I set out to redesign this site, I had an idea: Could I make the stylesheet change based on the hour of the day? Sounds easy enough, right? So, I started searching the Internet for some code I could use. I’m a novice when it comes to javascript and php, so I was hoping to find some “plug and play” code, so to speak. I found code to switch styles based on day of the week, and month of the year, but not time of the day. The month/day code all used php, which used the SERVER time. So, it would switch styles based on the time stamp of the server where my website was hosted. But, since my styles were of the morning/noon/night variety, that wouldn’t work. I was told I would have to use javascript, a client-side code, so it would work based on visitors’ local time. So, I began posting in various forums, hoping to find someone to help me. Still, no luck. I was beginning to think I would have to abandon the idea. But I just couldn’t let it go. I was like a dog with a bone. I kept searching…hoping that somehow I would find a buried treasure somewhere online. I was about to give up when I decided to ask one of my coworkers, a web programmer. I felt guilty asking for his help on a personal project, but I got over it! Sure enough, in just a few minutes, he whipped out some code and told me to give it a try. And it worked! I was giddy. I awaited the turn of the hour, so I could see the magic in action. At 3 pm, I hit refresh, and voila. The stylesheet changed from my blue “noon” theme, to the blue/orange “afternoon” theme. I have six different stylesheets. See the thumbnails at right. * From 5 am to 8 am, it displays the “sunrise” theme. Here’s the code I used to make it happen: <script LANGUAGE="JavaScript"> <!-- Begin function getCSS() { datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour > 20) display = "tree_twilight.css"; else if (thehour > 17) display = "tree_sunset.css"; else if (thehour > 14) display = "tree_afternoon.css"; else if (thehour > 11) display = "tree_noon.css"; else if (thehour > 7) display = "tree_morning.css"; else if (thehour > 4) display = "tree_sunrise.css"; else if (thehour > 1) display = "tree_twilight.css"; else display = "tree_sunset.css"; var css = '< '; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>'; document.write(css); // End --> } </script> <script language="javascript">getCSS();</script> You can select a default stylesheet, to account for folks with javascript disabled, by adding the following: <noscript> <link rel="stylesheet" href="tree_sunset.css" type="text/css"> </link></noscript> Related Listings:
| |||||
| Posted: 09 Nov 2009 06:33 AM PST DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents. Highlights of this script are: * Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze. Five styles to choose from by default, or customize the tabs yourself. Note that the “auto select tab” feature mentioned above is rudimentary and isn’t meant to replace directly selecting or using server side scripting to identify which tab corresponds to the current page. It won’t account for all possibilities where two URLs are the same. Use it as a convenience and fallback plan! Customization Setting up and customizing DD Tab Menu is very simple, as the entire menu consist of regular HTML and styled using CSS. Logically it makes sense to think of the menu in the following three parts: 1) Script to call in the HEAD section of your page to initialize a Tab Menu instance: <script type="text/javascript"> //SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto") ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default </script> The first parameter (highlighted in red) should be the ID of the Menu Tab to initialize once the page has fully loaded. The second parameter lets you set which tab should be selected by default- enter either an integer (0=1st tab, 1=2nd tab etc), or “auto” to have the script try to automatically select the tab that matches the current page’s URL. 2) HTML for the menu tabs: <div id="ddtabs1" class="basictab"> <ul> <li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> </div> As you can see, the menu tabs is simply an ordinary HTML list wrapped inside a DIV. Give this DIV a unique ID to be used to identify it on the page. The arbitrary class attribute provides the desired style for the tabs. Now, to specify that a particular tab contain a 2nd level content (shown when mouse rolls over tab), just insert the code rel=”unique_id” inside its < a > element, where “unique_id” is the ID of the sub content DIV on the page to show (see below). Tabs that don’t carry a “rel” attribute will simple be single level in nature. 3) HTML for the 2nd Level Contents The 2nd level contents associated with particular tabs above are defined as individual DIV tags on the page: <div class="tabcontainer"> <div id="sc1" class="tabcontent"> Sub contents here </div> <div id="sc2" class="tabcontent"> Sub contents here </div> <div id="sc3" class="tabcontent"> Sub contents here </div> </div> disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)? The first variable sets whether to disable the main tabs themselves from navigating to another page when clicked on (despite them being hyperlinked). The second variable sets which tab should remain selected when the mouse moves out of the menu. False causes the last tab the user was on before moving out to be selected, while true causes the default selected tab (when the menu first loaded) to be selected once again. When set to true, also specify the time delay before the reverting takes place- practically it should be a number larger than 100. Related Listings:
| |||||
| Posted: 09 Nov 2009 06:19 AM PST This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here’s what you’ll get: Sliding doors Since we want our buttons to be über-flexible, we’ll have to make the background image expand with the size of the button’s text. For that, we’ll use the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image. Our button will be a basic < a > tag with a nested < span >, each containing a different slice of the background image. Here’s what the HTML looks like: <a class="button" href="#"><span>Bring world peace</span></a> Nothing out of the ordinary, right? Next, we need to come up with a crisp design for our button in both normal and pressed state. Here’s what I’m thinking: We will include both states in a single image. To switch between normal and pressed state, we’ll simply shift the background image vertically, revealing the alternate button state. This CSS based approach allows us to perform the switch without the need for any JavaScript trickery. Let’s merge these two and apply the sliding doors cut. The part of the image that will accomodate the button text will be set to a reasonable 300px. The height we’ll set to 24px. Finally, we need a fair bit of CSS to bring all this together. Since we might want to line up several buttons horizontally, I decided to float them by default. (Floating them also makes the buttons wrap nicely.) .clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%; } a.button { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url('bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } Note: Make sure the span’s vertical padding (5 + 5) and line-height (14) amount to the total height of the button (24). Using a different padding, means setting a different height. a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ } All done! Go ahead. Click ‘em! One extra measure for IE Although hardly catastrophic, IE does not return the button to its normal state whenever it’s released. To force such behaviour, we need to add a tiny bit of JavaScript to the < a > tag: <a class="button" href="#" onclick="this.blur();"> … </a> To submit forms with this type of button, simply add more calls to the button’s onclick event. Related Listings:
|
' } </script> | You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.