WebDesign&Such » Javascript http://webdesignandsuch.com a Beantown Design Production Thu, 17 May 2012 23:40:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Add auto-updating Copyright to website – Javascript http://webdesignandsuch.com/add-an-auto-updating-copyright-on-your-website-with-javascript/ http://webdesignandsuch.com/add-an-auto-updating-copyright-on-your-website-with-javascript/#comments Sat, 20 Feb 2010 14:23:46 +0000 mike ilz http://webdesignandsuch.com/?p=725 Websites need to have the copyrights on them. Usually this is found in the footer of the site. As I was updating a client’s site the other day I noticed his copyright info was still 2009; so I updated it in the template, applied it to the pages, and re-uploaded everything to the live site.

One of the worst things you can do with your website is to not make updates once it’s live. Fresh content is the only thing that will keep your users AND search engines returning. One of the best ways to let users know that you never update your website (saaarcasm), is to have a copyright in the footer of your website from 2003. It really is a pain to have to go in at the first of every year to update all of your client’s websites though. Luckily, Javascript can save us. Using Javascript we can add a copyright to the webpage that will automatically update with the current year. Check out the demo, and then keep reading to grab the code.

View Demo

All you need to do is paste the following code right into the XHTML where you want the copyright to show up, Javascript does the rest!

<p >&copy;
<script type=”text/javascript”>
var currentTime = new Date()
var year = currentTime.getFullYear()
document.write(year)
</script>
</p>
]]> http://webdesignandsuch.com/add-an-auto-updating-copyright-on-your-website-with-javascript/feed/ 3 How to create a Popup with CSS and Javascript http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/ http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/#comments Sat, 26 Dec 2009 17:27:23 +0000 mike ilz http://webdesignandsuch.com/?p=709 Popups suck.

The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.

Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.

DemoDownload

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">

<a href="#" onclick="popup('popUpDiv')" >Click to Close CSS Pop Up</a>
</div>
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>

If you want the popup to load on page load, put the following in your body tag.

<body   onload="popup('popUpDiv')">

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}

#popUpDiv {
position:absolute;
background:url(pop-back.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

The popup automatically centers itself in the screen. To adjust this for your popup, open the javascript file. You’ll see numbers for the height and width: window_width=window_width/2-200;//200 is half popup’s width

Change “200″ so it’s half the width of yours; do the same for the line that declares the height.

Credits:
Script Source

]]> http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/feed/ 14 Embed a Twitter Feed on your website with jQuery http://webdesignandsuch.com/embed-a-twitter-feed-on-your-website-with-jquery/ http://webdesignandsuch.com/embed-a-twitter-feed-on-your-website-with-jquery/#comments Tue, 08 Dec 2009 22:17:34 +0000 mike ilz http://webdesignandsuch.com/?p=612 In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

http://twitter.com/status/user_timeline/ilz_.json?count=5&callback=?

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

]]> http://webdesignandsuch.com/embed-a-twitter-feed-on-your-website-with-jquery/feed/ 6 Using Smooth Scroll with Page Anchors and Javascript http://webdesignandsuch.com/using-smooth-scroll-with-page-anchors-and-javascript/ http://webdesignandsuch.com/using-smooth-scroll-with-page-anchors-and-javascript/#comments Wed, 11 Nov 2009 08:39:42 +0000 mike ilz http://webdesignandsuch.com/?p=515 Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. Useful, but not all that exciting.

There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.

View Demo

So lets start with the basics. To add an anchor on your page add the following in the place that you want you page to scroll to.

<a name=”bottom” id=”bottom”></a>

Then to point your link at this anchor, use the following. (This is to point to an anchor on the same page as the link.)

<p><a href=”#bottom”>Bottom of the page</a></p>

In case you were wondering, the following is how to point at an anchor on a different page.

<p><a href=”pageName.html#bottom”>Bottom of the page</a></p>

All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.

Dowload Smooth Scroll Javascript

You’ll see the zip has all original files for the Smooth Scroll. Now I give credit where it’s due, this entire zip is from DezinerFolio. Make sure you check those guys out for some great freebies and code.

To link to the Javascript file, put the following in your head.

<script type=”text/javascript” src=”smooth.pack.js”></script>

The javascript file is the only file in the zip that you need to use for the Smooth Scroll to work. Have fun, and if you want to an actual webpage that uses this effect, check out the website portfolio of my website.

]]> http://webdesignandsuch.com/using-smooth-scroll-with-page-anchors-and-javascript/feed/ 7 How to embed a Twitter Feed on your website http://webdesignandsuch.com/how-to-embed-a-twitter-feed-on-your-website/ http://webdesignandsuch.com/how-to-embed-a-twitter-feed-on-your-website/#comments Sun, 08 Nov 2009 13:49:15 +0000 mike ilz http://webdesignandsuch.com/?p=499 Lots of people use Twitter. Love it or hate it, it’s true. I follow other people in the design industry to see what they’re up to. I use my Twitter page to post updates on things in my life, mostly design related.

One of the great things about Twitter is that you rarely ever go to the actual site. You can use a program like Tweetie or TweetDeck to send all your Tweets. Another great thing is the ability to embed your recent Tweets onto other websites. It’s a rather simple process, so check out my demo and then keep reading to learn how you can embed your Tweets on your page.

Embed twitter feed Demo
 <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/beantowndesign.json?callback=twitterCallback2&count=3"></script>

Copy the above code and paste it right into your XHTML code on your webpage, (right in the body).

All you need to do is replace where I have “beantowndesign”. That is my Twitter user name, replace it with yours. The other thing you get to decide is how many of the most recent posts you want to show. Change the part where it says “count=1″ to however many Tweets you want to show up. For example, in the demo I decided to show my last 3 Tweets.

So that’s all there is to it.. how you style the text, links, and surrounding environment for the feed is up to you and your creativity.

]]> http://webdesignandsuch.com/how-to-embed-a-twitter-feed-on-your-website/feed/ 51 How to load a random image on pageload ~ Javascript http://webdesignandsuch.com/how-to-load-a-random-image-on-pageload-javascript/ http://webdesignandsuch.com/how-to-load-a-random-image-on-pageload-javascript/#comments Mon, 21 Sep 2009 10:27:10 +0000 mike ilz http://webdesignandsuch.com/?p=386

On my portfolio website I have an About page, where I explain… who I am of course! So I have a picture of myself in the sidebar, but got the idea that it’d be nice to have the picture change randomly on page load. I looked around at a few different options. Some were Javascript, some were PHP. It wasn’t worth turning the page into a PHP page just for this effect, so I went with Javascript. There are a lot of different options, but here’s the one I went with.

I made a div to surround the image, with the class of “me-box”. I gave this div a border, so the images will all appear to have a border when they are loaded. Next comes the Javascript code. This is where you give the src to your images. This code is put right in the body of your page where you want the images to appear, not in he head tag. A quick little piece of code that got the job done exactly like I wanted!

See the random image loading in action.


<script language="JavaScript">
 function banner() { } ; b = new banner() ; n = 0
 b[n++]= "<img name=randimg src='images/me.jpg' >"
 b[n++]= "<img name=randimg src='images/me2.jpg' >"
 b[n++]= "<img name=randimg src='images/me4.jpg' >"
 b[n++]= "<img name=randimg src='images/me5.jpg' >"
 b[n++]= "<img name=randimg src='images/me6.jpg' >"
 b[n++]= "<img name=randimg src='images/me3.jpg' >"
 i=Math.floor(Math.random() * n) ;
 document.write( b[i] )
 </script>
]]> http://webdesignandsuch.com/how-to-load-a-random-image-on-pageload-javascript/feed/ 7 CSS stylesheet switcher ~ Javascript, Dreamweaver, Kaos http://webdesignandsuch.com/css-stylesheet-switcher-javascript-dreamweaver-kaos/ http://webdesignandsuch.com/css-stylesheet-switcher-javascript-dreamweaver-kaos/#comments Sat, 19 Sep 2009 15:00:56 +0000 mike ilz http://webdesignandsuch.com/?p=376 Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

The first thing to get is the Dreamweaver plugin from the guys over at Kaosweaver. Here’s the link to the plugin. Once you download and install that, open up Dreamweaver and the page you want to apply the style switcher to. Under Commands, you’ll see Style Switcher Lite.

Click on that and this little box pops up.

This is where you set your day and night stylesheets, and set what time of day you want the sweets to switch. What you do in the stylesheets is up to you. You can change colors, background-images, the options are endless. For the effect I wanted, I changed the background images of two things.. the clouds and the buildings (Boston skyline), which floats in front of the clouds.

So there you have it, here are the two versions that you’ll see at BeantownDesign.com, depending on what time you’re looking at the website.

]]> http://webdesignandsuch.com/css-stylesheet-switcher-javascript-dreamweaver-kaos/feed/ 1 Add Current Date to webpage with Javascipt http://webdesignandsuch.com/how-to-add-the-current-date-to-your-webpage-with-javascipt/ http://webdesignandsuch.com/how-to-add-the-current-date-to-your-webpage-with-javascipt/#comments Sat, 18 Jul 2009 14:11:13 +0000 mike ilz http://webdesignandsuch.com/?p=249 The other day I was cutting and coding a website for a bank. One feature that was in the header was the current date, which would update daily (duh). I know in a previous project I had done this with Javascipt, so I back-tracked and got the code I used before. Here is the code, which will print the date on your web page in the following format:
July 18, 2009

The first step is to link your XHTML page to the external Javascript page, which has the code which will make it all happen. Paste the code below in the Head of your page.

Link to external Javascript File

<script type="text/javascript" src="js/date.js"></script>

Next up is the make this Javascript page that you just linked to. Paste the following code inside a new javascipt page, and save it as “date.js” inside your “js” folder. You can of course use different names, just make sure you link them up correctly.

Here is the code for your Javascript File

// JavaScript Document

//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May",
"June","July","August","September","October","November",
"December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", "
+ d.getFullYear();
//---------------   END LOCALIZEABLE   ---------------

The last step is the put the following code in your XHTML file where you want the date to be written. The id="date" that you see is for the CSS styling of this text. You can rename or remove it if you are styling it differently.

Paste this inside your XHTML file

 <p id="date">
<script language="JavaScript" type="text/javascript" >
document.write(TODAY);</script></p>

So there it is.
You can view a live example here.

I also packed this up into a zip so you can download and have all the files; including the XHTML, CSS, and JS.
Download the zip here.

]]> http://webdesignandsuch.com/how-to-add-the-current-date-to-your-webpage-with-javascipt/feed/ 1