Change a Font Awesome icon on hover (using content) + Sopler news!

Hi everyone! The past few days, we made some major updates on Sopler that we started designing a long time ago.

It is now possible to set a due date or edit your items using a brand new options menu. Also, when you enter a YouTube link, a (auto-scalable) player will appear on the list! 🙂

Nonetheless, this post concerns changing a Font Awesome icon to another Font Awesome icon when the first one is on hover.

Firstly, I came across this post and a few (unrelated but helpful) answers on Stack Overflow that used the content property. Then, I thought that this might work pretty well and it did.

For example,

  <div class="divclass">
    <i class="fa fa-circle-o"></i>
  </div>

using this CSS:

.divclass{
  font-size:5em;
  color:grey;
  cursor:pointer;
}

.divclass:hover .fa-circle-o:before{
  content:"\f05d";
  color:green;
  opacity:0.4;
}

OK, the div element will be a full-width rectangle (use your Developer Toolbar to check what’s going on), but you can modify it later. Anyway, the result is: http://jsbin.com/noqiwi/

It might be trivial but it’s also a lot easier than other implementations I’ve seen so far.

YouTube HTML5 Switch v0.1.7 & News

Hello!

Long time no see! I’ve been busy outside the blog-sphere and I’ve got some news to share. First of all, I upgraded my Firefox Add-on to version 0.1.7. So here is the link:

https://addons.mozilla.org/en-US/firefox/addon/youtube-html5-switch/

All in all, the important addition is that you can now use the hotkey Control+Y instead of pushing the button on the toolbar. Plus, I think it now has no other issues for most new versions of Firefox. I need to point out that I get most of the help from the SDK’s documentation which is great, but, to anyone interested, don’t hesitate to contribute to its content! Restartless add-ons rule!

You may use it and see if it works on YouTube (yeah it works, at least for Firefox 21.0 w/ Fedora Linux) using this video:

Yes! It’s the first video of the band I play with, directed by Kostas Gounaris. Cool huh? 🙂

I hope you’ll like it as we put a lot of effort to complete it and guess what? There’s also going to be a short film based on the song. I’ll let you know!

Happy new year & YouTube HTML5 Switch v0.1.3

Happy new year everybody!!!

Here I am, once more, to announce the new version of my recent small project YouTube HTML5 Switch. I made quite a few additions to the previous version (for which I already made a post) and changes to it and it’s on its way to become a fully reviewed add-on for Firefox 🙂

So what the 0.1.3 version does and has right now is:

  • A navigation bar button using the toolbarbutton-jplib (and its depdencies) by erikvold
  • a new 16×16 icon for better cross-platform compatibility (I know, it used to be prettier but I will make it again soon)
  • It works only when “youtube.com/watch” has been opened
  • It doesn’t work if &html5=1 is already in the URL
  • A clickable widget icon at the add-on bar.

What really changed is that now the navigation bar button is movable and its position is maintained if you open a new window etc. More fixes soon 🙂

Once again, the code is on my github repo. Of course, for any major change I will keep you posted 🙂

For those and only those who already use YouTube HTML5 Switch and will upgrade to v0.1.3: Don’t worry if the old icon remains on the browser window. Just restart Firefox and everything will work fine!

————————- Ahem…ahem… Your attention please 🙂  ————————————–

Update: The campaign ended successfully 🙂

Another project I want to talk about is one that’s on Indiegogo, a crowdfunging website! It’s for my band, Wonky Doll and the Echo. If you dig cinema and like our music please, have a look on our Double project: a music video & a short movie. We will collaborate with a director, Costas Gounaris, for our first music video! Our page is here: http://igg.me/p/297701/ Every cent counts and everyone wins gifts too!

By the way…this is the song of the music video:

Sound fix for Adobe Flash for Firefox 4 beta on Fedora

I am currently using Firefox Minefield 4.0b12pre but I have tried this fix also on Firefox 4 beta 11 on my 64 bit system (Fedora 14)! This problem has occured to me with the 64 bit Adobe Flash plugin 10.2.

Some of the code I will paste here (the code for creating the linusmemcpy.c file)  was found in this post at Ahmed Abdo’s blog!

I will give you the script code to paste it in the terminal as after doing some trivial staf f the bug will be exterminated! But I will pretty much explain what this script does.

In general, what we need to do is to create a C file (with a certain memcopy function that will solve our problem) , and the binary and then load the binary when we open Firefox.  The first line of the script creates our C file at the hidden folder .mozilla  (to unhide use Control+H) named linusmemcpy.c , then “cat” is waiting for us to write our text (this time the C code) until we write EOF (end of file). Then what we do is to enter the .mozilla folder and compile the c file. Our last step is to use the GNU Linker with ld on the binary files.

Just copy the whole text and paste it on your terminal as it is 🙂

cat > $HOME/.mozilla/linusmemcpy.c <<EOF
#include <sys/types.h>

void *memcpy(void *dst, const void *src, size_t size)
{
void *orig = dst;
asm volatile("rep ; movsq"
:"=D" (dst), "=S" (src)
:"0" (dst), "1" (src), "c" (size >> 3)
:"memory");
asm volatile("rep ; movsb"
:"=D" (dst), "=S" (src)
:"0" (dst), "1" (src), "c" (size & 7)
:"memory");
return orig;
}
EOF
cd $HOME/.mozilla/
gcc -O2 -c linusmemcpy.c
ld -G linusmemcpy.o -o linusmemcpy.so
linusmemcpy.clin

Now the next very small step is to automate the procedure of starting Firefox correctly with the shortcut on the desktop panel. We will create a small shell script the same way we did with our C file. If you are using beta that means somewhere in your system exists the “firefox” shell script that executes the firefox-bin. We need to know the path to it! If already have a shortcut, right click -> Properties and look at “Command” . This is it. Mine (for firefox 4 from spot’s repos) says firefox4. Don’t forget the & at the end 😉

cat > $HOME/.mozilla/custom_firefox_startup.sh <<EOF
LD_PRELOAD=$HOME/.mozilla/linusmemcpy.so firefox4 &
EOF
chmod u+x $HOME/.mozilla/custom_firefox_startup.sh

So, now is our last step! Go to the icon of Firefox on the desktop panel , right click -> Properties , and at the command click “Browse” press control+H to unhide the folders, enter the .mozilla folder and select “custom_firefox_startup.sh”.

Now, close every instance of Firefox that is running right now (yes I ask too much, but you can leave my blog 🙂 ) and press the Firefox button 🙂

==== Ελληνικά/Greek ====

Σε αυτό το post δίνω οδηγίες για το πως να φτιάξετε το πρόβλημα που έχει παρουσιαστεί με τον ήχο στο Flash της Adobe (10.2) για τον Firefox 4 beta 11 (αυτό και το Minefield στην έκδοση 4.0b12pre δοκίμασα, λογικά τρέχει και σε άλλες beta). Χρησιμοποιό την 64bit εκδοση του Fedora 14.

Θα εξηγήσω λίγο τι γινεται με το script, όμως μπορείτε να το αντιγράψετε και να το επικολλήσετε στο terminal ολόκληρο χωρίς να γράψετε τίποτα εσείς! Απλά τα γράφω για να μη τα κάνετε απλά copy paste χωρίς να ξέρετε τί γίνεται περίπου.

Στη πρώτη εντολή δημιουργούμε ένα κενό αρχείο που θα είναι o C κώδικας με το fix μας (μια συνάρτηση που λέγεται memcpy) στο οποίο θα γράψουμε ότι χρειάζεται και θα περιμένει την λέξη EOF (που σημαίνει τέλος του αρχείου , end of file). Μετά δίνουμε την εντολή cd και μας κατευθήνει στον φάκελο .mozilla (η τελεία δίνει είναι κρυφός φάκελος που βρίσκεται στο home folder και για να τον δούμε πατάμε control+H). Εκεί βρίσκονται οι ρυθμίσεις του Firefox. Κάνουμε compile το C αρχείο και εκτελούμε και την εντολή ld για τον GNU Linker.

Στο επόμενο βήμα δημιουργούμε ένα μικρό shell script το οποίο απλά θα προφορτώσει τo binary αρχείο που φτιάξαμε προηγουμένως την ώρα που ανοίγει ο Firefox! Πάμε λοιπόν μετά στο εικονίδιο του Firefox στη μπάρα στην επιφάνεια εργασίας και κάνουμε δεξί click. Στην 3η σειρά με τη λέξη “Command” επιλέγουμε το Browse και από το Home folder πηγαίνουμε στο φάκελο “.mozilla” και επιλέγουμε το custom_firefox_startup.sh. Κλείνουμε κάθε παράθυρο του Firefox που είναι ανοιχτό και ξανανοίγουμε. Έτοιμοι! 🙂