Posts Tagged ‘jquery’
Hi All,
If you haven’t seen this awesome menu system check it out: http://www.andrewsellick.com/examples/sliding-side-bar-scriptaculous/
Or check out the how-to here: http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous
I really thought this menu system was cool and with a few tweaks can function as integral part of the user experience on a website. Recently I had decided to leave the fabulous world of Prototype/Scriptaculous and move to JQuery. Mostly because it seems the industry has standardized around JQuery. It had some what of a learning curve, but it took about a day to really make the switch. Having to convert this sideBar script really helped with that process.
As a final note before I post the code. The animations aren’t exactly the same, but with JQuery you can create your own custom animations so feel free to modify as you wish. Changes are below!
side-bar.js:
var isExtended = 0;
$(document).ready(function(){
$("#sideBarTab").click(function(){
$("#sideBarContents").animate({ "width":"toggle"},{duration:2000,queue:false}
);
if(isExtended==0){
$('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1'));
isExtended++;
}
else{
$('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1'));
isExtended=0;
}
}
);
});
So thats cool… In my script I also wanted somewhat accordion style items expanding within my sidebar so I use the following line of JS to dynamically add items into the sidebar (well sort of, without giving too much away).
$("#divIdToAppenedTo").append("<li><a class='header' href='#' onclick='$(\"#"+slug(name)+"\").animate({\"height\":\"toggle\"},{duration:1000,queue:false});'><div style='margin:10px 0 0 15px;'>"+name+"</div></a><div id='"+slug(name)+"' style='display: none; padding-left:15px;'>");
Woo enjoy!
Update: someone requested (via comment) the css for this. Please note you will need to modify width, colors, backgrounds, etc… I stripped down a ton of visuals in order to not release proprietary content: sb-package
So I have been struggling for the past month trying to get a Perl CGI script that acts as a proxy to work on certain servers. The client only supports/allowed perl (as far as i knew) and didn’t allow it to output data to a browser for some reason. So you can see my dilemma. I tried various means. Worked with their IT team, etc… I kept trying to find alternative methods. I knew JSONP was an option but it’s not like RSS feeds are in JSON or are coming from a JSONP server. Finally someone told me about YQL. In short, I am pretty impressed. I essentially used it as a proxy and XML -> JSON converter. The script in JQuery is really short and goes like this:
var maxEntries = 5; // if 0 then there will be no limit
function slug(str){
return str.replace(/\s/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
}
/**
* This function appends rss feed items to divs with the same slug
* Name is the title of the feed, when slugged i use it as a div id
* File is the rss feed
*/
function newFeed(name, file) {
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22"+encodeURIComponent(file)+"%22&format=json&callback=?", function(d) {
var count = 0;
//grab ever rss item from the json result request
$(d.query.results.rss.channel.item).each(function() {
//if set up to be infinite or the limit is not reached, keep grabbing items
if(maxEntries == 0 || maxEntries>count){
var title = this.title;
var link = this.link;
var description = this.description;
var pubDate = this.pubDate;
// Format however you want, I only went for link and title
var anItem = "<a href='"+link+"' target='_blank'>"+title+"</a><br>";
//append to the div
$("#"+slug(name)).append(anItem);
count++;
}
});
});
};
I hope you guys find this useful. It made my life a ton easier to deal with. Coming soon… I’ll show you how to convert Andrew Sellick’s Sexy Slide Menu for Prototype to JQuery! WOO!