Scott Rockers' Blog » javascript http://scottrockers.com/blog Website Designer and Developer, Flash, Wordpress, jQuery, and Other Scripts Mon, 22 Aug 2011 21:48:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Detect Android and Redirect to Android Version Website http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-android-and-redirect-to-android-version-website http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-android-and-redirect-to-android-version-website#comments Tue, 22 Feb 2011 17:06:12 +0000 admin http://scottrockers.com/blog/?p=1185 android-phone

I have been posting redirect scripts for several devices such as the iphone and ipad, and I thought why not add android to the list. I own a android phone and I love it, and I have tested this script so I know it works. This code detects whether the person viewing your website is on a Android device. If they are on a Android phone, you can redirect them to a android version website or just to another page, its up to you. If they are on a normal computer it doesn’t redirect them and they go on as normal. Its just some simple javascript, and if you want to use it just change the “document.location” value to the url you want them redirected. Here is the code, and its just the same as when you detect for iPhone.

1
2
3
4
5

<script type="text/javascript"> // <![CDATA[
	if ( (navigator.userAgent.indexOf('Android') != -1) ) {
		document.location = "http://www.yoururladdress.com/yourpage.html";
	} // ]]>
</script>

Cya

]]> http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-android-and-redirect-to-android-version-website/feed 8 jQuery Cycle Plugin – A Slideshow Creator Javascript File http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file#comments Tue, 16 Feb 2010 18:19:09 +0000 admin http://scottrockers.com/blog/?p=905

Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.

There are two things you need to add to your <head> section in your html, the css and javascript import lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
.banner {  
    height:  82px;  
    width:   82px;  
    padding: 0;  
    margin:  0;  
} 
 
.banner img {   
    border:  1px solid #fff;   
    width:  80px; 
    height: 80px; 
    top:  0; 
    left: 0 
} 
.banner img { display: none } //these lines hide all the rest of the pictures on startup 
.banner img.first { display: block } //except the first image
 
</style>
1
2
3
4
5
6
7
8
9
10
11

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.banner').cycle({
			fx: 'scrollLeft' //  transition type, scrollleft
		});
	});
</script>

And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:

1
2
3
4
5
6
7

<div class="banner"> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" /> 
</div>
]]> http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file/feed 1 jQuery: The Write Less, Do More Javascript Library http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library#comments Fri, 12 Feb 2010 16:57:32 +0000 admin http://scottrockers.com/blog/?p=892

Keeping up with the latest trends in web development is tough sometimes, only because there are new things always being created. jQuery is  one of the newer creations that have come up in the last several years and its not going away. It is the most popular JavaScript library in use today. If you don’t know what jQuery is then here is a brief description: jQuery is a JavaScript Library that is fast and concise that makes HTML document traversing, event handling, animating, and Ajax interactions for rapid web development much easier. “jQuery is designed to change the way that you write JavaScript.” It’s lightweight, around 23kb, and cross browser compliant and compliant with CSS3 as well. You can create sliding banners, dropdown navigations, and much more with it. I am trying to learn more and more of it everyday, and its pretty exciting. jQuery is provided under the MIT and GPL licenses which means you can use it in your commercial projects like selling of themes and stuff. There are several good tutorials and other helpful resources on their website and I would highly recommend it and learning some yourself.

Cya

]]> http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library/feed 0 Web Developer Toolbar Add-on for Firefox http://scottrockers.com/blog/resources/useful-websites/web-developer-toolbar-add-on-for-firefox http://scottrockers.com/blog/resources/useful-websites/web-developer-toolbar-add-on-for-firefox#comments Fri, 05 Feb 2010 21:34:11 +0000 admin http://scottrockers.com/blog/?p=887

I wanted to take a second to talk about an awesome add-on for firefox: the Web Developer Toolbar. The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It’s a must have for all developers and designers because it saves countless hours of developing and troubleshooting time, and it has tons of really great features. One of those great features is the ability to edit the CSS of a website in real time and see your changes updated on the web page as you type them. Then you can save out the changes you made and update accordingly. This alone can save you tons of time when  sifting through the files on your server searching for the correct CSS file to update, uploading  changes you made to it and then refreshing the browser to see the changes.  Another really nice feature is the one-click validating of your page’s HTML, CSS, and javascript. Instead of going to the W3C Markup Validation Website, and manually copying and pasting the urls into the field. It automatically does it for you, SO TIGHT!!!!! There are several other features of it that are really nice and if you are a designer or developer of websites I highly recommend it.

Cya

]]> http://scottrockers.com/blog/resources/useful-websites/web-developer-toolbar-add-on-for-firefox/feed 0 ArkansasHSA.com Website http://scottrockers.com/blog/portfolio/work-projects/arkansashsa-com-website http://scottrockers.com/blog/portfolio/work-projects/arkansashsa-com-website#comments Wed, 03 Feb 2010 16:11:20 +0000 admin http://scottrockers.com/blog/?p=878 Here is another website I work on at my job, its called ArkansasHSA.com. It’s a informational website for HSAs (Health Savings Accounts) for Arkansas State Employees and Arkansas Public School Employees. The before and after images are below and there are a few things I updated on the site I want to point out. I updated the banner of the page with CU3ER once again because its just so easy to use and really professional looking, and it doesn’t take much time to setup.  Also, I updated the navigation of the website, which is really important because iI a user can’t find what they are looking for on the site then you have a huge problem. I used  Pro Dropdown 2, which is a really nice free dropdown navigation, if you use it just make sure to keep all the copyright information in the CSS and Javascript files provided.  The nice thing about it is that its cross browser compatible and really easy to use and easy to create your own style.    Also, the layout was fluid before which made the page stretch out way to far and just made the site look old to me, so I made it have a static width of 1024px and created a simple background for it and moved some other stuff around on the pages. The image on the left is the after picture and the image on the right is the before, sorry they aren’t the other way around but on my portfolio page I have a Flash script to grab the first image in the post to display and I wanted the ‘After image’ to show up.

Cya

]]> http://scottrockers.com/blog/portfolio/work-projects/arkansashsa-com-website/feed 0 How to Detect iPad and Redirect to iPad Version Website http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-ipad-and-redirect-to-ipad-version-website http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-ipad-and-redirect-to-ipad-version-website#comments Tue, 02 Feb 2010 21:05:36 +0000 admin http://scottrockers.com/blog/?p=868 With all the buzz about the iPad, I wanted to post another useful snippet of code. It detects whether the person viewing your website is on a iPad. If they are on a iPad, you can redirect them to a iPad version website or just to another page, its up to you. If they are on a normal computer it doesn’t redirect them and they go on as normal. Its just some simple javascript, and if you want to use it just change the “document.location” value to the url you want them redirected. Here is the code, and its just the same as when you detect for the iPhone with an extra argument.

1
2
3
4
5

<script type="text/javascript"> // <![CDATA[
	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.scottrockers.com/iphone.html";
	} // ]]>
</script>

Cya

]]> http://scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-ipad-and-redirect-to-ipad-version-website/feed 55