Posts tagged JavaScript
jQuery – Syncronize two dropdown lists
0One of the biggest problems in web UI is to synchronize page elements one upon each other, but by far the hardest is when dealing with multiple dropdowns. A good, clean User Interface is the key to your customer’s heart! This can be achieved in several ways, such as:
- on the change of the first dropdown, a new page request is issued to the server, with the selected item as current item and the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns – old style, not so used anymore because it takes time and bandwidth to send and receive the complete page;
- with AJAX - on the change of the first dropdown, a partial page request is issued to the server, with the selected item as current item; the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns; it returns just the relevant part of the page ( not a complete one like before); just this new part of the page will be overridden in the current page, creating the user the impression of “real time” action.
- with jQuery, moving the logic of synchronization to the client side – the advantage is no bandwidth/time consumption, but a huge disadvantage is that the client (the browser) might have Javascript disabled. This concern, although low, might make your page not to work as expected.
Today’s choice – jQuery
We’ll explore today the last option, using jQuery. For this we will consider two dropdowns, each one with 3 items. Our target will be simple today, we’ll change the second dropdown to reflect the first one’s selection. Let’s consider that our page contains the following fragment of code with these two dropdown boxes, first one containing the countries and the second their capital. (more…)
How to add Syntax Highlight to WordPress
2
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
Create a simple HTML .MOV player
0
As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.
Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.
So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).
So let’s see some code!
First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.
Don’t forget to add a link to JQuery library!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
The html code is shown below and it is pretty straight forward:
<body>
<div class="media">
<div class="navigationTabs">
<input type="text" id="txtURL" style="width:75%"/>
<input type="button" id="btnPlayMov" value="Play"/>
<input type="button" id="btnClearMov" value="Clear"/>
</div>
<div id="divPlayer">
http://media.railscasts.com/videos/188_declarative_authorization.mov
</div>
</div>
</body>
The JavaScript is a little bit trickier as it involves JQuery. For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:
$(function() {
// bind an onClick event for this second Flash container
$("#btnPlayMov").click(function() {
var _height = "306px";
var _width = "400px";
var _movie = $('#txtURL').val();
var _html = '';
$("#divPlayer").html(_html);
});
$("#btnClearMov").click(function() {
$("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
})
})
Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !
How to add ui-icons to JQuery tabs
0
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.
Add SyntaxHighlight to Windows Live Writer in Preview mode
1 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
1
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
0
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 |
WordPress- how to implement Syntax Highlighting
1
Some while ago, I started publishing code on this website. On that days I used the free WordPress webhosting. But I wasn’t content with the representation of it. After some time, I moved my site to a payed hosting, where I could implement any plugin that I liked.
BNR exchange rate
0 
In this global crisis, nothing is more useful than a good chart to watch your money as investment. That’s why I created a special page which collects freely available exchange rates from BNR (National Romanian Bank) and presents them in a graphical form. This way, the viewers of my website will always be on the edge with exchange rates, as soon as BNR posts them (usually around 13:00 GMT+2).
The main challenges were:
- Building a php script to parse XML, inserting the exchange rates into database. The lack of experience and debugging tools made a huge difference in development time. But all is working now.
- Creating a php script that will daily update the exchange rates, so the users will have the fresh rates at their disposal as soon as possible.
- Design the page that hosts the chart and provide create the appropriate data structure which will feed the chart with data.
- learn to use a very interesting framework of representing data as charts – Google Visualisations
Next steps:
- Offer the posibility to choose among all 30 currencies for which the BNR provides exchange rates.
- implement AJAX for smooth behavior of refreshing the page while user chooses a different currency.
Enjoy!
Forecast on websphere: Flex or Silverlight or AJAX or JavaFX ?
1Lately I had some interesting conversations with few of my developer friends regarding their opinions on which technology will rule the Rich Application Interfaces websites in the future. My strong believe is that there’s room for all four of these as per my experience and actual trends. More over, all these will have a separate slice of the market but overlap at only few areas. Let’s take AJAX as example – it is widely popular for creating rich user experience community building apps, portals, mash-ups and so on. On the other hand, Flex is used more for multimedia rich requirements, interactive maps for example, photo albums, portfolios, games etc. Another technology, Silverlight, is a direct competition to Flex, but its presence is more dominant in the Enterprise applications market.
Adobe’s Flex has a big advantage of running on the Flash platform, inheriting a very wide reach on the internet and having also an integrated support from other Adobe products, like Photoshop, After Effects, Fireworks, Flash, Illustrator. Also some near future upcoming products – Catalyst, Thermo, Cocomo, and more will be closely integrated with the legacy platform. All these are reliable, proven technology in web industry, being leading tools for creating visually rich media, no matter that is composed from images, animations or videos. Besides all, the new AIR version brings even more value by having a desktop version of an app that is integrated with the online one. (more…)
How to generate image_src for Facebook links in Wordpress theme » Radu Poenaru
[...] bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some […]
2 months ago