Well it’s fair to say I’ve found a clear winner this week and it goes to instant.js. This is a fantastic bit of code that as the author states "allows you to add an instant picture effect (including tilt) to images on your webpages. It uses unobtrusive javascript to keep your code clean."
All I can say is wow. Have a look for yourself.
Please view the instant.js demo.
Have recently faced the mammoth task of debugging JavaScript on Safari I thought I would share a few of my experiences and offer a few tips that I discovered along the way.
Well I guess I’ll start by saying that using the default Apple settings, debugging is a long and drawn out process involving alerting out potential problem areas to track down any bugs. This is not ideal and as Firebug has proved, there is a great deal of room for improvement.
So lets have a look at the options:
Having read Pete Freitags blog one simple answer is to enable Safari’s Debugging Menu which is hidden by default. This will provide developers with access to the DOM Tree, JavaScript Console and even allow user agent spoofing.
To find out more see Pete Freitags article on JavaScript Debugging with Safari.
The debug menu can be manually enabled by simply typing the following in to the terminal window:
defaults write com.apple.Safari IncludeDebugMenu 1
For more information see the Apple Help site.
Another method that I often use to debug JavaScript is to view the generated source created dynamically by JavaScript. This can offer invaluable insights into potential bugs.
Ditchnet have a very good article providing information on the process required to develop an AppleScript which when run will display the generated source of a page in BBEdit.
To find out more see Ditchnet article on how to View Generated Source in BBEdit for Safari.
Note: If you do not have BBEdit installed don’t despair you can always use TextEdit. Simply replace BBEdit in the code for TextEdit.
There is no getting away from the bug. Quite simply it rules. Firebug Lite although very cut down from the Firefox plugin does have some great features allowing developers to more accurately test and debug their code. Firebug Lite gives users the ability to write to an in page console which can be displayed on demand using predefined short cut keys.
To find out more see Firebug Lite.
This is not something that is required in day to day development, but nether the less is definitely handy to know.
Due to the nature of embedded flash it does not seem possible to “mask” it using an overflow hidden on a containing DIV. This however is not the case.
By simply adding the following parameters a flash movie can be masked:
<embed src="andrewsellick.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="150"></embed>
The wmode parameters bring the flash movie back into the flow of the document and therefore allow it to be treated as if it were for example an image.
The complete code I have used in the example is as follows:
The CSS as shown above is very simple and sets a width on a containing DIV to 30% of the page width as well as having an overflow set to hidden. This will simply demonstrate the effect clearly.
As can be seen above there isnothing special here. Simply a containing DIV with a flash movie embeded and of course the parameters set.
Please have a look at the Masking a Flash Movie in HTML using a DIV example.
Feel free to try it out yourself with the Masking a Flash Movie in HTML using a DIV download.
Well this week it’s just a bit of fun, however, it’s still quite cool. I found a piece of code HEMMY.NET that produces a really nice affect when pasting the following JavaScript into the URL bar whilst you are viewing the site of your choice.
As they state at HEMMY.NET "This is a really cool javascript trick that you can try out. Paste the following code into the address bar when any website with images is loaded. It is best used in uniform size pictures such as the one in Google Images."
Like I said it’s just a bit of fun!
It’s been a while since the original post Sexy sliding JavaScript side bar menu using mootools so I decided it was about time I pulled my finger out and developed a sliding menu using script.aculo.us. Well here goes…
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
<div id="sideBar">
<a href="#" id="sideBarTab">
<img src="images/slide-button.gif" alt="sideBar" title="sideBar" />
</a>
<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
As shown the code is not overly complex. The HTML comprises a containing DIV (with an ID of sideBar), then within this we have a linked tab image (with an ID of sideBarTab) followed by the contents of the side bar contained in a DIV (with an ID of sideBarContents) and sub contained within another DIV (with an ID of sideBarContentsInner).
The sideBarContents DIV has an inline style applied setting the width to zero. This is to allow the JavaScript to resize the region using script.aculo.us (Some browsers are a bit buggy when trying to change styles that are set in an external stylesheet). This DIV is also set to have an overflow hidden producing the effect that the content is sliding in.
Points to note within the CSS include the width set on the sideBarContentsInner DIV. This width should be adjusted as required to meet your deign requirements (It is set to 200px for the purpose of the demonstration).
Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).
Finally you will need to include effects.js and side-bar.js to the head of the document in the order shown for this to work. Have a play with the demo below and download the code.
demo
