CategoryMozilla

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:&quot;f05d&quot;;
  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.

A Creative Commons music video made out of other CC videos

Hello! Let’s go straight to the point. Here is the video:

…and here are the videos that were used having the Creative Commons Attribution licence: http://wonkydollandtheecho.com/thanks.html. They are downloadable via Vimeo, of course.

Videos available from NASA and the ALMA observatory were also used.

The video (not audio) is under the Creative Commons BY-NC-SA licence, which I think is quite reasonable since every scene used from the source videos (ok, almost every scene) has lyrics/graphics embedded on it.

I hope you like it! I didn’t have a lot of time to make this video but I like the result. The tools I used are not open source unfortunately, because the learning curve for these tools is quite steap. I will definitely try them in the future. Actually, I really haven’t come across any alternative to Adobe After Effects. You might say Blender…but is it really an alternative? Any thoughts?

PS. More news soon for the Sopler project (a web application for making to-do lists) and other things I’ve been working on lately (like MQTT-SN).

2013 in review powered by WordPress

The WordPress.com stats helper monkeys prepared a cute annual report for this blog for 2013 :) For 2014 I’ve bought tickets for FOSDEM 2014 to represent Sopler and share what cool things can happen with it.

Right now, I’m taking a look at Mozilla’s version of the l10n.js library in order to localise Sopler (at least on FirefoxOS).

Well, that’s it! Have a great 2014! By the way, for this year, the 3-years-in-a-row champion is again “My Fedora 15 tweaks for an SSD” (ok, it accumulates all previous years but nevertheless it still gets views). I guess they’ve become even more popular! (both Fedora and SSDs).

PS. A weird thing to say but, if anybody works for a new wave/post-punk/indie rock record label, comment or PM me! I got good news for you from Wonky Doll and the Echo.

Click here to see the complete report.

Making a Tabzilla clone using Bootstrap

Hi, as you might have noticed Sopler has a navigation menu very similar to that of Mozilla’s Tabzilla…but it’s not :)

I think Tabzilla is a great tool but while making Sopler’s front-end with Bootstrap I faced a problem integrating it. I had to use a string in order to place HTML inside my menu. That’ss very restrictive. But, I found a similarity between a component of Bootstrap and Tabzilla!

I have no idea if someone else has found that out too, but it’s  the same effect with Bootstrap’s accordion. It expands & retracts.

In this post I will use the template of the navbar-fixed-top example from Bootstrap 3. Go get it here (Download source). It’s in the examples folder. Tabzilla is not fixed so I think we have an improvement here. Anyway, someone might find it too much, so, to implement my example on the navbar-static-top, you won’t need the javascript code at the end of this post. Here is a demo for navbar-static-top (not the navbar-fixed-top I mentioned before): http://jsbin.com/EkAweqA/1/ (press the Menu button)

The whole trick is to place the “accordion-body” div above the “accordion-heading” and then write a few lines of Javascript to change the navbar’s position from fixed to relative….and that’s it!

Go to the navbar-fixed-top example, open index.html and replace everything between:

<!-- Fixed navbar -->

and


<div class="container">
 
<!-- Main component for a primary marketing message or call to action -->

(this is NOT the first div class=”container”  you’ll find, it’s the one in line 69)

<!--- This will not show up until you press the Menu button --->
<div id="login_box" class="login-box">
   <div class="accordion" id="accordion2">
      <div class="accordion-group">
         <div id="collapsemenu" class="accordion-body collapse">
            <div class="accordion-inner">
            <div class="row inner_box">
            <div class="col-md-12">
                <h2>Put any HTML goodies you want here!</h2>
            </div>
            </div>
        </div>
         </div>
      </div>
   </div>
</div>
 
     <!-- Fixed navbar (To make it static simply change to navbar-static-top)-->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
         <ul  class="nav navbar-nav list-inline" style="float:right; margin-right: 5em; white-space: nowrap;">
    <div class="accordion-heading">
        </div>
     <button type="button" id="menu_button" class="btn btn-primary navbar-btn" data-toggle="collapse" data-parent="#accordion2" href="#collapsemenu">Menu</button>
</ul>
    <a  class="navbar-brand" href="#">Brand name</a>
      </div>
    </div>

Now, we need to create two more classes at the navbar-fixed-top.css (it’s next to index.html inside the navbar-fixed-top folder) :

.login-box{
white-space:nowrap;
top:0;
width:100%;
background:#fff;
overflow: hidden;
}

.inner_box{
margin:0 auto; max-width:57em; text-align:center;
}

Of course you can style it the way you want! And finally let’s go to the footer of the page (under the jquery.js call) and put this script (not useful for the navbar-static-example):

<script type="text/javascript">
$(document).ready(function(){
var isopen="";
$('#menu_button').click(function(){
if (!open){
$('.navbar-fixed-top').css('position','relative');
$('html,body').animate({ scrollTop: 0 }, 'normal');
}else{
$('.navbar-fixed-top').css('position','fixed');
}
isopen=!isopen;
});
});
</script>

Let’s explain the script! We use the isopen variable (line 3) which is set to false by default. It’s working like a switch. If the menu is not open and we click the Menu button then the page scrolls to the top and the position of the bar is set to relative. If we click the button again then the navbar’s position is se to fixed. We don’t need to scroll because when the menu is open the bar won’t move from its place anyway (that’s why we used relative).

If all goes well, when you click the Menu button it should look like that:

Introducing Sopler, a new open web application!

Here are some exciting news: The last two of months I’ve been part of a promising project. We made a web application that uses open standards (and it’s open source). It’s called Sopler and we are the Sopler project. I worked on the UI/UX design part  (meaning, HTML5, CSS3, JQuery etc) and oh boy…I’ve learned a lot of new stuff (like Bootstrap 3, FirefoxOS etc) and there are lot’s of things to post on this blog in the near future.

What can you do with Sopler? Make a list, add some items and share the link with your friends.They can add or check some items, make comments etc…

Sopler is still in Beta but you can check our code on Github. Enjoy our new video (with english & greek subtitles available):

What can’t you see in the video? Sopler can “remember” all previous lists of an authorized user (who signed in using a social account), plus, his privileges over any item are greater than those of a non-authorized user.

That’s because a social account profile makes a user unique and in this way it’s easy to map a user to his list.

Yes, Sopler is on many social networks too: Facebook, Twitter & Google+

So, see you soon with more news :)

© 2015 Kostas Antonakoglou

Theme by Anders NorenUp ↑