Posts tagged jQuery
Adding new Social icons to the Mystique theme
Jan 8th
I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.
Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.
7 easy steps to use Webmatrix and WordPress local development
Jan 6th
Almost all good developers that I know have some kind of repository of their code. Mine is my blog, this blog. Stay with me and you’ll find out how to easily be able to create your local version of WordPress, customize and test your plugins.
For´this you’ll need to follow the next steps:
- Go to Webmatrix official website and download the Web Platform Installer which will install for you not only Webmatrix itself, but also a lot of useful tools like an integrated webserver, Internet Information Services Express, PHP interpretor and its connectors just to name a few. But you can also use it to add new features like ASP .Net MVC3! More >
How to add Syntax Highlight to WordPress
Jul 2nd
I wrote quite a while ago about How to implement Syntax Highlight in your WordPress blog. It used an forward, yet permanent approach: modify you’re theme’s header.php. But is it enough?
Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.
The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.
In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:
- styles.css – required – who’ll mark your folder as a child theme
- functions.php – optional – for our example is required, as we’ll write code inside of it
How to add ui-icons to JQuery tabs
May 25th
While working in UniBonn, I have a lot of contact with Ruby on Rails and JQuery; I actually started loving its interactivity and stability. But lately I encountered a small situation with the tabs object that they offer.
This is their default view, with Redmond theme applied. Nice and clean, you might say. But what’s missing? These tabs don’t support images. So you’ll not be able to show an image to specify, let’s say, that this tab has some updated information or a warning that something important is inside that tab.
I wanted to have some kind of control on specifying how the tab should look when I wanted my users to understand that something important is inside and requires their immediate attention.
As I searched through the website, I found the mentions of how to change the tab looks into an “error” style, so that it will attract attention no matter how tired the users are. In the Theming area of JQuery UI website, I found the help for Layout Helpers. Basically, you can specify additional classes who can override the theming of an element. Under Interaction cues, you’ll find all you need to set your elements style to highlighting, error, disable etc.
UniBonn
Mar 2nd
Position: Assistant Researcher ( WHK or Wissenschaftliche Hilfskraft )
Starting 1. March 2010 I work in Informatik 3 Department of Rheinische Friedrich-Wilhelms-Universität in Bonn.
My master is a joint effort between Uni Bonn and RWTH Aachen. During my master, I had the pleasure to be part in the Agile Lab, where I encountered two Research Associates, Pascal Bihler and Mark von Zeschau. They are true developers, result driven people and fair judges of our activity. During this lab, which was intensive, we had 3 weeks as developers in an almost real company environment. From 9 to 18, if you know what I mean.
The experience that I had we very nice and as soon as I could, I discussed with them about joining their development team. Now I have the pleasure of developing a project that will affect all students that will study in this department.
The project is an upgrade to the existing system and will be developed in Ruby on Rails and have a Postgres database, allowing students to have a better application experience. The basis of it are an interactive and dynamic application who has several workflows, involving both possible future students and professors into finding the best candidates for this fine university.
My responsibilities are:
- development in Ruby code on Rails platform
- database migrations / upgrades
- installing / configuring gems
- CSS / interface design
- JQuery JavaScript client side interaction
- testing of the application
This is one more important task who caries with it big responsibilities, but I’m feeling very good about it!
How to generate image_src for Facebook links in WordPress theme
Feb 18th
Sharing your article for free advertisement on Facebook is a fact. While using different Social Networks sharing tools I had a problem when sharing my articles on Facebook: sometimes the image that I intended to use to represent the article wouldn’t show in the list of the images who can be chosen. Why is that?
It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:
<meta name="title" content="title" /> <meta name="description" content="description " /> <link rel="image_src" href="thumbnail_image" / >
Alensa Online
Feb 11th
Position: Team Leader and Lead Developer in Alensa Online – Software Development department
I was part of Alensa team between January 2007 and August 2008. Only the opportunity to study Media Informatics Master, held by RWTH Aachen University, could gave me enough reasons to leave Alensa Online that I enjoyed so much for almost two years.
I was in charge with our brand new solution for an online Healthcare project – Alensa Online. The Alensa Online Shopping site (www.alensa.ro) consists of an internet healthcare platform in Europe that would simplify research and self education related to health issues, and provides the customers with an interface allowing them to easily get their health questions answered by professionals. It was first developed by a third party company, then I took over the responsibility of developing and maintaining the solution.
My responsibilities were quite complex because I was the first hired person, very similar with Softwise company. This reminded me about the joy and responsibility that comes with this. Another nice surprise was to find in person of Mr. Alex Savic, the CEO of the company, a friend with whom I shared both technical discussions and personal development ones, he was one the most supportive about my decision to study in RWTH Aachen.
Shortly, at Alensa Online I were in charge with:
- Architecting and developing the web based solution using Microsoft ASP.NET / C# and SQL 2005 Server technologies;
- Performing server administration, configuration and maintenance for the Windows 2003 server, for IIS 6 and for SQL 2005 database server;
- Executing architectural modifications in order to make the website user friendly;
- Identifying, designing and developing solutions;
- Periodically testing the site functionalities and thus creating a real test environment, test cases and bug fixes;
- Performing code review, corrections and code optimization;
- Analyzing hardware/software requirements and proposing hardware/software improvements and suggestions (for example, choosing an appropriate hosting partner);
- Implementing real time traffic analysis tool to help the management department;
- Conducting internal training for his colleagues. More >
Add SyntaxHighlight to Windows Live Writer in Preview mode
Feb 7th
Windows Live Writer (shorter: WLW) is one of the most popular blog authoring tool that I also happen to like and use. And I say this because of its features – I especially enjoy the Preview tab. But what it really lacks is previewing the ENTIRE page – it will get only the html and some css. So no Syntax Highlighting of my code? Let me tell you how I solved this issue.
As a blog writer I searched for something that could allow me to write the articles offline and then upload them in WordPress. I also tried WordPress built-in editor, but the editing box is so small that I couldn’t use it too much.
The most important feature for me is that it retrieves the blog theme and has a preview function that provide you the same look on editor window. So you will be able to write a post with a preview. But when having a more complex theme, using JQuery or Prototype, you will discover that you don’t get any more the same look and feel as in the blog. This is partially ok for editing, but sometimes it is really bad – especially if you’re a programmer and add a lot of code in your page. On blogs there is a solution to show the code with syntax color, but in the Windows Live Writer I couldn’t find one suitable plug-in that does this.
How to add a nice jQuery slider
Nov 15th
This weekend fun was adding to my website the cool sliding control from Jérémie Tisseau website. That pretty it was, I immediately started thinking it as a container to my BNR exchange rate page. The coded worked perfectly, with few modifications.
Firstly, WordPress uses the $ operator for Prototype library, so if you want to add your jQuery library the invocation to WordPress Firebug will report the error “$ is not a function”. So here’s the fix: you’ll have to change any occurrence of the $ sign to jQuery. Just like in the following example:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
TO:
jQuery(document).ready(function() {
// Expand Panel
jQuery("#open").click(function(){
jQuery("div#panel").slideDown("slow");
});
// Collapse Panel
jQuery("#close").click(function(){
jQuery("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
jQuery("#toggle a").click(function () {
jQuery("#toggle a").toggle();
});
});
SyntaxHighlighter – how to use it and brushes available
Sep 4th
The brushes used by SyntaxHighlighter are in separate syntax files named brushes. The following can be used to format the <pre class=”brush: brushname”> that you want to use.
Brushes () in alphabetical order:
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
