I have moved my blog to http://www.cecilieo.com/techblog/
Read the rest of this entry »
Bookmarklet: 960 Gridder
960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites.
Read the rest of this entry »
Cron job
Recently I had to set up a cron job for Jomsocial. The site is for a school and I am working for this site on volunteer base. The site is built on Joomla, XAMPP and 2003 Windows server.
I tried a windows scheduled task but it does not work by some reasons. I tried Joomla extension jCron, but it does not work either in this situation. I downloaded a program called "Cron for windows". But it is not free.
I set up the scheduled task on my laptop and it works, but it must work 24 hrs everyday. So I abandoned this idea.
Then I thought it can be done online. I found two free online services and I am using http://www.setcronjob.com/ . This works great and easy to set up. It works for every 5 minutes to any schedule.
The other one is http://www.onlinecronjobs.com/, but this allows only once a day and up to 5 cronjobs.
For my particular case, I just need to paste the Jomsocial cron job URL to "URL to call" in www.setcronjob.com
e.g. http://www.mywebsite/index.php?option=com_community&task=cron
You need to replace www.mywebsite to yours.
The following links are my other collections during this research.
Cron for windows
Configuring cron jobs on Windows from Drupal, using Firefox.
Joomla plugin Jcron.
Read the rest of this entry »
Setting up Cronjob for Jomsocial with Jcron in XAMPP
I was working on my Jomsocial and it needs a cronjob.
Unless you set up a cronjob it does not send any email notices in Jomsocial. For example notice for Friend request, Group bulletins, private messages.
My set up is Joomla on XAMPP. If you are using the same, this article may help.
First you need to open C:\xampp\htdocs\JOOMLA\components\com_community\cronjob.php and change the hosting and subfolder.
Install Jcron.
I found this forum and this screen shot which explains the set up for Jcron.
The screenshot will tell you how to set up a cronjob in Jcron.
My template needed a writable permission and the site was running on XAMPP.
Windows does not have chmod, so I right click the file "mytemplate.php" in explorer in the server and removed the "read only" attribute.
Then going back to Joomla back end > component > JCron > Configuration to run "Enable CRON RUN".
Jcron does the job when someone visit your website or click a menu.
However I thought I need to set up a server side cron job as well.
Going back to Windows server to set up a scheduled task. All programs > Accessories > System tools > scheduled tasks.
I set up every 30min from 7AM for 12 hours everyday.
Read the rest of this entry »
Unless you set up a cronjob it does not send any email notices in Jomsocial. For example notice for Friend request, Group bulletins, private messages.
My set up is Joomla on XAMPP. If you are using the same, this article may help.
First you need to open C:\xampp\htdocs\JOOMLA\components\com_community\cronjob.php and change the hosting and subfolder.
Install Jcron.
I found this forum and this screen shot which explains the set up for Jcron.
The screenshot will tell you how to set up a cronjob in Jcron.
My template needed a writable permission and the site was running on XAMPP.
Windows does not have chmod, so I right click the file "mytemplate.php" in explorer in the server and removed the "read only" attribute.
Then going back to Joomla back end > component > JCron > Configuration to run "Enable CRON RUN".
Jcron does the job when someone visit your website or click a menu.
However I thought I need to set up a server side cron job as well.
Going back to Windows server to set up a scheduled task. All programs > Accessories > System tools > scheduled tasks.
I set up every 30min from 7AM for 12 hours everyday.
Read the rest of this entry »
Adding a Flickr Slideshow
I added a Flickr slideshow to my blog today.
This is how I did it.
1. Create your Flickr account and upload your photos.
2. Add your tags. This tag will be used in a slideshow.
3. Go to Flickrslideshow.com and fill up the details and create your code.
4. Embed the code to your website.
Read the rest of this entry »
Adding Picasa Slideshow to your Blogger or webiste
You can embed a Flash slideshow of any web album. It'll be automatically updated when you make changes to your album. Follow these steps to embed a slideshow:
1. On the My Photos page, click your album.
2. Click Link to this album on the right-hand side.
3. Click Embed Slideshow.
4. Choose your slideshow settings, such as image size, captions, and autoplay.
5. Once you've chosen your settings, copy the resulting HTML code (Ctrl-C).
6. Paste the HTML in the source code for your site (Ctrl-V).
Google Help
Read the rest of this entry »
Adding Picasa photos to Blogger and website
Spring has come to Norway!
This photo is added through Picasa 3.
 |
| Spring in Norway |
When you embed an album in your site, the album cover will display. Viewers who click the cover image will then be taken to view the album in Picasa Web Albums. Follow these steps to embed an album:
1. On the My Photos page, click your album.
2. Click Link to this album on the right-hand side.
3. Copy the HTML (Ctrl-C) in the 'Paste HTML to embed in website' field.
4. Paste the HTML (Ctrl-V) in the source code for your site.
Google Help
Read the rest of this entry »
Using ScribeFire Blog Editor
I am posting this article by using ScribeFire Blog Editor
This Firefox addon let you post from your browser.
I added the above image by using image insert feature in this addon.
You can preview your article in this addon preview without changing the actual blog.
You can add labels and save it as a draft to your blogging platform.
ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, upload images, and post to multiple blogs.
Read the rest of this entry »
My Must Have Firefox 3 Plugins for Web Development
My Vista crushed this morning. Data is safe but all the set up files are gone.
So I lost all my Firefox plugins as well.
I decided to write down my list of plugins which I must have.
1. Web Developer
2. Firebug
3. Colorzilla
4. Font Finder
5. Screengrab
6. Delicious bookmarks
7. Measureit
8. Wappalyzer
If you want more, you can find a nice list at Designreviver.com
22 Firefox 3 Plugins Web Designers Can’t Live Without
Read the rest of this entry »
How to Add flash Animated label cloud Blogumus for Blogger
I just got a RSS article called "Tag Clouds - Styling and Adding Sort Options an article" from CSS globe.
But I wanted to add a flash Blogumus tag cloud to my Blogger. Then I found this article "How to Add flash Animated label cloud Blogumus for Blogger"
I just adjusted color, width and height.
Read the rest of this entry »
But I wanted to add a flash Blogumus tag cloud to my Blogger. Then I found this article "How to Add flash Animated label cloud Blogumus for Blogger"
I just adjusted color, width and height.
Read the rest of this entry »
Adding a drop cap to Blogger
Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.
I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.
You can see a big N at the beginning of this paragraph.
And you need to add span with class="dropcap" to the first letter of your paragraph like this.
It becomes like this.
BBC News.
You can add more class like .blue after .dropcap
And add this class to a span tag.
CNN News.
Read the rest of this entry »
I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.
You can see a big N at the beginning of this paragraph.
.dropcap
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-transform: uppercase;
}
And you need to add span with class="dropcap" to the first letter of your paragraph like this.
<span class="dropcap">B</span>BC News.
It becomes like this.
BBC News.
You can add more class like .blue after .dropcap
.blue
{
background: #3B7CEF;
}
And add this class to a span tag.
<span class="dropcap blue">C</span>NN News.
CNN News.
Read the rest of this entry »
How to add Read More to your Blogger
This is an official article from Blogger.
And I'd like to show how I implemented to this blog.
1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.
2. Paste the following code in your header. I add it just before </head> tag.
3. Adding "Read More" Links
Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:
You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.
4. Post Modifications
Go to Posting and create a new article. And wrap your article which you want to hide with the following code.
That's it folks. Thank you for reading.
Read the rest of this entry »
And I'd like to show how I implemented to this blog.
1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.
2. Paste the following code in your header. I add it just before </head> tag.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Adding "Read More" Links
Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.
4. Post Modifications
Go to Posting and create a new article. And wrap your article which you want to hide with the following code.
<span class="fullpost">
Your main article here
</span>
That's it folks. Thank you for reading.
Read the rest of this entry »
Add your Twitter updates to your Blogger
On the right side, you can see my Twitter updates.
Here is how you can add your Twitter to your Blogger.
1. Login to your Blogger and go to Layout.
2. Click "Add a Gadget" and select HTML/JavaScript. Add the following code.
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/YOUR-Twitter-NAME">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/YOUR-Twitter-NAME.json?callback=twitterCallback2&count=10" type="text/javascript"></script>
3. In the above code, change YOUR-Twitter-NAME to your twitter name. If you want to change the number of updates, change count=10 to any number you wish.
4. Add the following CSS to your Blogger CSS and tweak it according to your taste.
/* Twitter */
#twitter_update_list li {
background-color: #EFF4FF;
text-indent: 0;
margin-bottom: 5px;
border: 1px solid #B5BDCF;
}
#twitter_update_list li span{
}
Read the rest of this entry »
How to add jQuery Plugin: Scroll to Top to Blogger
After reading an article "jQuery Plugin: Scroll to Top" by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.
There is a similar code by David Walsh here. But I am using a code by Craig.
You can see the action in this page. You just need to scroll down a bit and you will see a ^Scrol to Top box on the right bottom. By clicking it you go to the top of the page.
1. Add the following HTML before your </body> tag.
<a href="#" id="toTop">^ Scroll to Top</a>
2. Add the following CSS code in your Blogger CSS code.
/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
3. Add the following jQuery codes just before </body> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Read the rest of this entry »
Blogger tips
You can find many great tips for Blogger users in blogspottutorial.com
On the right column there is Blogging tutorial For Beginner.
I used the following tips for this blog.
How to add related post widget
Add search engine to your blog
Another helpful tips for Blogger users is Amanda Fazani's website Bloggerbuster.
You can download a free PDF book to improve your Blogger design.
Read the rest of this entry »
Social Bookmarking Button "AddThis"
In my last post "Add sharethis widget to your Blogger, WP or website", I wrote how to add ShareThis button to your website or Blooger.
Then I found another social bookmarking button called "AddThis" . This site also offers copy and paste code for your website.
You can read an article from Packt Publishing about AddThis.
Another article from Packt.
Read the rest of this entry »
Adding Tweet Button to your Blogger and Website
After reading an article by Woork, I added Tweet this to my bloggers. The article was simple but I thought I could add a little bit more details here.
Open your blogger and go to Layout.
Click Edit HTML then tick a box next to Expand Widget Templates.
Then find a line
<div class="post-footer-line post-footer-line-1">
Then after this line add the following line.
<div class="tweetmeme">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>
</div>
Then add CSS just before the line.
]]></b:skin>
I add the following css to mine.
tweetmeme {
width: 70px;
height: 75px;
float: left;
}
For your normal website, you can use the following code where you want to add Tweetmeme.
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
You can find an Official documentation.
Read the rest of this entry »
Add sharethis widget to your Blogger, WP or website
I just added sharethis to this blog and other my websites.
You go to sharethis.com and create your account by clicking For Publishers.
After logged in, go to Get the Button to create a new button. You can choose your platform and modify the button appearance. You can create codes by selecting 'Share This Button for other websites' under 'Pick your platform drop-down'.
Read the rest of this entry »
IE 6 hacks, tips and blocker tutorials
I collected a number of IE hacks tutorials over the years. Here is the list which you can find great tips for your websites.
IE6 hacks and tips
1. 10 Fixes That Solve IE6 Problems
2. Obituary For IE6
3. Feed IE 6 with a basic stylesheet
4. IE CSS Bugs That’ll Get You Every Time
5. Defensive coding and CSS: Preventing the most common bugs
6. Closing the gap between list items in IE
7. 5 Easy Ways to Tackle IE6’s Transparency Issues
8. Don't kick your visitors's IE 6 and below out of your css layout
9. Let Internet Explorer 6 Behave Like Internet Explorer 7
IE6 Blocker scripts.
One way is to educate your audience by suggesting to a better browsers.
1. IE 6 Blocker Script
2. A simple IE6 upgrade script
Demo for above script are here. You have to use IE6 to see the effects though.
IE 6 Blocker Script Demo
A simple IE6 upgrade script Demo
Tools
1. Internet Explorer Application Compatibility VPC Image
2. IE6 standalone
3. IE tester
4. netrenderer
If you know more, please add them to the comment.
Read the rest of this entry »
Officezilla: Projectmanagement and client management
I just played around with Officezilla and found it very useful.I found some great things with this online app.
It's free and no limit on the number of users you can add.
You can create groups, users and projects. Then you assign users for certain projects. This means you can show a project or your work progress to your selected audience. Informing them about hours spent and other information.
Only this function is good enough for me to use. But there are plenty other functions you can use in this app.
Other functions are :
Every user has access to post and retrieve information.
Control access to all data through user levels.
Easy self-administration with help on every feature.
Reduce mailing costs by distributing documents and other information online.
Access important information from anywhere in the world with an Internet connection.
We use our own securely hosted equipment with more then 99% uptime reliability.
Any user can upload information and specify it as personal, without having to share the information.
Import and export information from Act, Outlook, or any other program that can generate or accept comma-delimited .CSV database files.
Try it out.
Read the rest of this entry »
Adding search to Blogger or website
I was working on my other Blogger website today.
If you are using Blogger you can add it by using "Add a Gadget".
But I didn't want to use a Gadget, because I wanted to add a search function in a horizontal navigation.
If you want to add it to your website with using HTML, you can find the details in Google custom search.
So I added search function with the following code to my Blogger site.
<form expr:action='data:blog.homePageUrl + "/search"' id='search_form' method='get'>
<input id='searchinput' name='q' size='22' tabindex='2' type='text' value=''/>
<input id='searchbutton' name='submit' tabindex='5' type='submit' value='Search'/>
</form>
Read the rest of this entry »
SelectorGadget: point and click CSS selectors Updated
SelectorGadget: point and click CSS selectors is updated on 10th March 09. If you have a previous version like me, it's a good idea to update it.
This is a great bookmarklet to have on FF.
Created by Andrew Cantino and Kyle Maxwell.
Read the rest of this entry »
This is a great bookmarklet to have on FF.
Created by Andrew Cantino and Kyle Maxwell.
Read the rest of this entry »
Easy Display Switch with CSS and jQuery by By Soh Tanaka
Easy Display Switch with CSS and jQuery is another image display for your portfolio. Simple and effective.
You can see the demo here.
Read the rest of this entry »
Creating a “Filterable” Portfolio with jQuery by Trevor Davis
Trevor Davis wrote a tutorial called "Creating a “Filterable” Portfolio with jQuery" in nettuts.comYou can find a demo here.
You can use it for a customer's portfolio and add a jquery lightbox.
Read the rest of this entry »
Add Disqus comment system to your blogger
I just added Disqus to Blogger . Disqus is a comment management. You can manage all your comments in different websites. Great thing is it's free. It is very easy to implement to any platform and very powerful. If you are tired of Blogger comment system I strongly recommend to use Disqus.
Read the rest of this entry »
Douglas Crockford: "The JavaScript Programming Language"/1 of 4
jQuery Animation - Sliding In and Out, Up and Down
Video tutorial from Vimeo.
jQuery Animation - Sliding In and Out, Up and Down from Jack Franklin on Vimeo.
Read the rest of this entry »
jQuery Animation - Sliding In and Out, Up and Down from Jack Franklin on Vimeo.
Read the rest of this entry »
Selector Gadget
This is a great bookmarklet. The selector gadget is very easy to use. This bookmarklet will tell you a selector by clicking your target.
http://www.selectorgadget.com/
Read the rest of this entry »
http://www.selectorgadget.com/
Read the rest of this entry »
sIFR alternative
After my successful attempt with sIFR3, I also tried Flir. But this was miserable failure. I just could not work it out to use it.
Then today I got sIFR alternative javascript cufon. This was so easy to implement. I downloaded a free true type font and used a generator and download it. All I need to do is to add cufon.js and the downloaded js. It was so smooth and easy to implement.
You can read more details article.
Read the rest of this entry »
Then today I got sIFR alternative javascript cufon. This was so easy to implement. I downloaded a free true type font and used a generator and download it. All I need to do is to add cufon.js and the downloaded js. It was so smooth and easy to implement.
You can read more details article.
Read the rest of this entry »
Wordpress Podcast by Drew Douglass from Themeforest.net
This is a nice series of Wordpress podcast.
I have not used wp yet, but it seems very easy to use it.
Great tutorials. I highly recommend to subscribe Themforest RSS.
This is Day 7. If you want to watch from Day 1, visit Themeforest.net.
You can find other great podcasts as well, such as jQuery, php etc.
It's a great place to visit.
Read the rest of this entry »
I have not used wp yet, but it seems very easy to use it.
Great tutorials. I highly recommend to subscribe Themforest RSS.
This is Day 7. If you want to watch from Day 1, visit Themeforest.net.
You can find other great podcasts as well, such as jQuery, php etc.
It's a great place to visit.
Read the rest of this entry »
Organizing a long list with jQuery: ihwy version
I found a jquery listnav plugin.
When I see the demo, it is a bit confusing with other functions, like tabs etc., and there are no zip files. So I put it one by one in order to simplify it.
You can find
listnav1
listnav2
listnav3
listnav4
I can't find out how to make listnav3 red yet. And also I haven't find out why the right side of listnav3 is not showing.
Read the rest of this entry »
When I see the demo, it is a bit confusing with other functions, like tabs etc., and there are no zip files. So I put it one by one in order to simplify it.
You can find
listnav1
listnav2
listnav3
listnav4
I can't find out how to make listnav3 red yet. And also I haven't find out why the right side of listnav3 is not showing.
Read the rest of this entry »
jQuery menu- snook version
I found a jquery menu at snook.ca.
I needed to change a little bit to make it a bit subtle. So I created this one.
I know someone must have done it, but I couldn't find it.
This works with IE6/7, Chrome and FF3. It should work with Safari and Opera.
Read the rest of this entry »
I needed to change a little bit to make it a bit subtle. So I created this one.
I know someone must have done it, but I couldn't find it.
This works with IE6/7, Chrome and FF3. It should work with Safari and Opera.
Read the rest of this entry »
Intro to jQuery with John Resig
Some codes from the video.
jQuery("div").load("url") // is the same as
jQuery.ajax({
url: "test.html",
complete: function(h) {
jQuery("div").html(h);
}
});
// only extract h2
jQuery("div.load").("file.html h2") // and it is the same as
jQuery.ajax({
url: "test.html",
complete: function(h) {
jQuery("div").html(
jQuery(h).find("h2"));
}
});
// To get external script
jQuery.getScript("somescript.js", function(){
});
jQuery(document).ready(function(){
});
// for async
jQuery.ajax({
url:"somescript.js,
async: false
});
//example
jQuery(document).ready(function(){
jQuery("form").ajaxForm(function(html){
jQuery("#item").val('').focus();
jQuery("ul").html(
jQuery(html).find("li");
});
});
Read the rest of this entry »
Jquery videos from Ajaxian
Link:
http://ajaxian.com/archives/jquery-ajax-experience-framework-videos
Video 1: Intro to jQuery with John Resig
Video 2: Advanced jQuery with John Resig
Video 3: An In-Depth Look at jQuery UI with Paul Baukus
Video 4: Rich Interactivity, Simplified, with jQuery UI with Richard Worth
Video 5: jQuery on Rails (The Real Ones) with Jonathan Sharp
Read the rest of this entry »
http://ajaxian.com/archives/jquery-ajax-experience-framework-videos
Video 1: Intro to jQuery with John Resig
Video 2: Advanced jQuery with John Resig
Video 3: An In-Depth Look at jQuery UI with Paul Baukus
Video 4: Rich Interactivity, Simplified, with jQuery UI with Richard Worth
Video 5: jQuery on Rails (The Real Ones) with Jonathan Sharp
Read the rest of this entry »
sIFR
When I was playing around with jquery plugin sIFR, I noticed that downloaded sIFR3 files from http://www.sifrvault.com/ do not work with this plugin.
http://jquery.thewikies.com/sifr/
Then I found this.
http://wiki.novemberborn.net/sifr3/How+to+use
You can download the latest version from here.
http://wiki.novemberborn.net/sifr3/nightlies
Unzip it and you can find demo folder in the zip. And put it in a server, i.e xampp.
Access it by typing this to webaddress.
http://localhost/sifr3-r436/demo/index.html
I downloaded some fonts from sifrvault.com and tested it and it works perfectly.
Please note that I have to put flash files in design so src is design/myflash.swf.
Read the rest of this entry »
http://jquery.thewikies.com/sifr/
Then I found this.
http://wiki.novemberborn.net/sifr3/How+to+use
You can download the latest version from here.
http://wiki.novemberborn.net/sifr3/nightlies
Unzip it and you can find demo folder in the zip. And put it in a server, i.e xampp.
Access it by typing this to webaddress.
http://localhost/sifr3-r436/demo/index.html
I downloaded some fonts from sifrvault.com and tested it and it works perfectly.
Please note that I have to put flash files in design so src is design/myflash.swf.
var cochin = {
src: 'design/cochin.swf '
,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16]
};
var rockwell = {
src: 'design/rockwell.swf '
,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
};
var futura = { src: 'design/Futura.swf' };
var acme_explosive = { src: 'design/acme_explosive.swf' };
var snell_roundhand = { src: 'design/snell_roundhand.swf ' };
var avantgarde_md_bt = { src: 'design/AvantGarde_Md_BT.swf ' };
//continue
Read the rest of this entry »
z-index problem with IE
This article helped me how to solve IE z-index problem. There is a good comment at the end as well.
Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/
I had jquery dropdown menu from www.kriesi.at and jquery.innerfade.js on a home page. The dropdown menu goes behind the slideshow in IE 6/7.
I have forgotten about it and here comes a rescue. I added z-index: 3000 to not closest parent but 2 levels up in my case. Thanks.
Read the rest of this entry »
Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/
I had jquery dropdown menu from www.kriesi.at and jquery.innerfade.js on a home page. The dropdown menu goes behind the slideshow in IE 6/7.
I have forgotten about it and here comes a rescue. I added z-index: 3000 to not closest parent but 2 levels up in my case. Thanks.
Read the rest of this entry »
Accordion menu by Roshan
Here you can find a easy accordion menu.
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
You can download the files as well.
The first one is,
1. Get a p-tag with class of menu_head in the id firstpane, then attach a click function.
2. With this element, change css, background-image to down.png
3. then find next div with class menu_body and toggle slide with 300ms.
4. Then find all the siblings with div class of menu_body and slide up with slow speed.
5. Then find all the siblings of this element and change css backgroud-image to left.png
The second one is almost the same except mouseover function and sliding down div.menu_body with 500ms and sliding up all the siblings of div.menu_body with slow (600ms) speed.
Thanks Roshanbh
Read the rest of this entry »
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
You can download the files as well.
The first one is,
1. Get a p-tag with class of menu_head in the id firstpane, then attach a click function.
2. With this element, change css, background-image to down.png
3. then find next div with class menu_body and toggle slide with 300ms.
4. Then find all the siblings with div class of menu_body and slide up with slow speed.
5. Then find all the siblings of this element and change css backgroud-image to left.png
The second one is almost the same except mouseover function and sliding down div.menu_body with 500ms and sliding up all the siblings of div.menu_body with slow (600ms) speed.
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
Thanks Roshanbh
Read the rest of this entry »
jquery plug-in, easing
Excellent jquery plug-in for animation.
http://gsgd.co.uk/sandbox/jquery/easing/
You can find one of sample here.
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Read the rest of this entry »
http://gsgd.co.uk/sandbox/jquery/easing/
You can find one of sample here.
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Read the rest of this entry »
Jquery API browser
This is the newest and must-have item for jquery. You can download AIR application as well.
http://api.jquery.com/
Read the rest of this entry »
http://api.jquery.com/
Read the rest of this entry »
Jquery for Absolute Beginners
Jeffrey is a very resourceful person. He is one of person behind the famous NETTUTS.
He gives a series of Jquery tutorials in his websites In the Woods http://blog.themeforest.net/category/screencasts/
and
detached designs.com http://www.detacheddesigns.com/.
If you haven't watched them yet, you must!!
Read the rest of this entry »
He gives a series of Jquery tutorials in his websites In the Woods http://blog.themeforest.net/category/screencasts/
and
detached designs.com http://www.detacheddesigns.com/.
If you haven't watched them yet, you must!!
Read the rest of this entry »
"How to Make a Smooth Animated Menu with jQuery" by Zach Dunn
Zach Dunn from buildinternet.com shared his jquery menu.
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
It does not gracefully degrade with Javascript unabled, but it is a good tutorial. He guide us line by line with detailed comment.
.stop() is used for avoiding a broken accordion effect. Mouseover, mouseout
and normal chain is used.
Thanks Zach.
Read the rest of this entry »
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
It does not gracefully degrade with Javascript unabled, but it is a good tutorial. He guide us line by line with detailed comment.
.stop() is used for avoiding a broken accordion effect. Mouseover, mouseout
and normal chain is used.
Thanks Zach.
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
Read the rest of this entry »
"Changing Form Input Styles on Focus with jQuery" by Sam Dunn
Sam Dunn from Buildinternet.com wrote a jquery snippet "Changing Form Input Styles on Focus with jQuery"
http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
The code is explained in details line by line and easy to follow and understand.
Thanks Sam.
Read the rest of this entry »
http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
The code is explained in details line by line and easy to follow and understand.
Thanks Sam.
Read the rest of this entry »
Set Font Size Based On Word Count
Chris Coyier from CSS-trics gave us a snippet how to set font size based on word count.
http://css-tricks.com/set-font-size-based-on-word-count/
There are mootools and jquery script.
Jquery script uses if, else if, else statement. Easy to understand.
Thanks Chris.
Read the rest of this entry »
http://css-tricks.com/set-font-size-based-on-word-count/
There are mootools and jquery script.
Jquery script uses if, else if, else statement. Easy to understand.
Thanks Chris.
Read the rest of this entry »
Gracefully Degradable jquery Drop-Down-Menu
There are many jquery menus. However I found that some are not gracefully degradable and some don't work in IE6 etc.
I found good one with mootools. Then I wanted to change it to jquery for other reasons.
I found two jquery menus for my purpose. Both of them works without javascript enabled and in IE6.
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
and
http://users.tpg.com.au/j_birch/plugins/superfish/
I decided to use the first one since it does not need other js as the second one and it serves my purpose.
This menu does not look fancy, because of color, but I used this for some websites. www.okadadesign.no www.designvalg.no and other websites.
Read the rest of this entry »
I found good one with mootools. Then I wanted to change it to jquery for other reasons.
I found two jquery menus for my purpose. Both of them works without javascript enabled and in IE6.
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
and
http://users.tpg.com.au/j_birch/plugins/superfish/
I decided to use the first one since it does not need other js as the second one and it serves my purpose.
This menu does not look fancy, because of color, but I used this for some websites. www.okadadesign.no www.designvalg.no and other websites.
Read the rest of this entry »
Javascript which allow you to edit any web pages
I found this snippet a while ago. This will allow you to edit webpage.
Paste this to webaddress and enter.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Read the rest of this entry »
Paste this to webaddress and enter.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Read the rest of this entry »
The book reviews and books I am going to buy
I have bought two books about jquery from Amazon last year.
1. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
and
2. jQuery Reference Guide: A Comprehensive Exploration of the Popular JavaScript Library
The first one is excellent. If you are a beginner like me and want to learn jquery, I highly recommend it. I have read three times the first 6 chapters and I am still reading and digesting the rest of the book slowly.
What I realized is that I need to know javascript. From chapter 7, you need to know javascript well. Not only the beginners level. That's why I am going to buy a couple of javascript books for learning it, and I will tell you in the second part what I am going to order.
I am disappointed about the second book a bit. If you need a reference on your desk, it may serve what it's supposed to do. But you can find more information from http://visualjquery.com/ with examples. This website is an excellent resource for jquery.
The books does not give enough examples. You can find more in the above website or jquery.com document.
Now after some research I decided to buy the following books for my learning jquery and javascript.
The first one is
JavaScript: The Good Parts
Douglas Crockford is a highly regarded javascript expert. You can find his talks in Yahoo! UI Library
http://developer.yahoo.com/yui/theater/
In his talk, he recommended only one book which is least bad. That's the second one I am going to buy.
JavaScript: The Definitive Guide
Some cretics comment about lack of examples in this book, but overall reviews are good.
The third one is
jQuery in Action
I am hoping to learn more about jquery from this book.
There will be another jquery book is coming out soon.
Beginning JavaScript and CSS Development with jQuery
jQuery UI 1.6: The User Interface Library for jQuery
And the author of Learning jQuery, Karl Swedberg is publishing another jquery book in May 2009.
Well I have to how much left in my wallet...
I used Amazon Associates for the above link. I can earn some Amazon gift card so that I can buy more books!
Read the rest of this entry »
1. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
and
2. jQuery Reference Guide: A Comprehensive Exploration of the Popular JavaScript Library
The first one is excellent. If you are a beginner like me and want to learn jquery, I highly recommend it. I have read three times the first 6 chapters and I am still reading and digesting the rest of the book slowly.
What I realized is that I need to know javascript. From chapter 7, you need to know javascript well. Not only the beginners level. That's why I am going to buy a couple of javascript books for learning it, and I will tell you in the second part what I am going to order.
I am disappointed about the second book a bit. If you need a reference on your desk, it may serve what it's supposed to do. But you can find more information from http://visualjquery.com/ with examples. This website is an excellent resource for jquery.
The books does not give enough examples. You can find more in the above website or jquery.com document.
Now after some research I decided to buy the following books for my learning jquery and javascript.
The first one is
JavaScript: The Good Parts
Douglas Crockford is a highly regarded javascript expert. You can find his talks in Yahoo! UI Library
http://developer.yahoo.com/yui/theater/
In his talk, he recommended only one book which is least bad. That's the second one I am going to buy.
JavaScript: The Definitive Guide
Some cretics comment about lack of examples in this book, but overall reviews are good.
The third one is
jQuery in Action
I am hoping to learn more about jquery from this book.
There will be another jquery book is coming out soon.
Beginning JavaScript and CSS Development with jQuery
jQuery UI 1.6: The User Interface Library for jQuery
And the author of Learning jQuery, Karl Swedberg is publishing another jquery book in May 2009.
Well I have to how much left in my wallet...
I used Amazon Associates for the above link. I can earn some Amazon gift card so that I can buy more books!
Read the rest of this entry »
Animated menu using jquery and sprite
This post explains how to make an animated menu using jquery and sprite.
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.
Read the rest of this entry »
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, "slow");
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
Read the rest of this entry »
jquery.cookie.js plug-in
This is a nice way to keep a viewer's cookie so that when they come back they have the same settings. This can be used for text size or layout setting.
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
The code is simple and easy to understand what's going on.
I recommend to go through all the tutorials in this website or subscribe their RSS.
Read the rest of this entry »
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
The code is simple and easy to understand what's going on.
I recommend to go through all the tutorials in this website or subscribe their RSS.
Read the rest of this entry »
jquery.toggleElements.js
I found quite few jquery plug-ins today. This is one of them.
http://jquery.andreaseberhard.de/toggleElements/index.html
At the beginning I thought why I need this, I can use normal toggle function!
Well then I found it is quite neat. You can use it in different ways and easy to use.
You can nest toggle sections in a toggled section as well.
You can download it here.
http://jquery.andreaseberhard.de/toggleElements/index.html
Read the rest of this entry »
http://jquery.andreaseberhard.de/toggleElements/index.html
At the beginning I thought why I need this, I can use normal toggle function!
Well then I found it is quite neat. You can use it in different ways and easy to use.
You can nest toggle sections in a toggled section as well.
You can download it here.
http://jquery.andreaseberhard.de/toggleElements/index.html
Read the rest of this entry »
Subscribe to:
Posts (Atom)
Posts
