“Comming soon, a fun new and easy way to create, share, and send greeting and invitation cards.” DrawIO will transform the greeting & invitation cards industry, by providing new ways of interactivity and spicing it up with a mix of social and creativity freedom.
Don't wanna be here? Send us removal request.
Statistics
We looked inside some of the posts by drawio-blog and here's what we found interesting.
Average Info
Notes Per Post
0
Likes Per Post
0
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
2 days ago
Number of Posts By Type
Text
7
Photo
3
Last Seen Tumblr Blogs
Fun Fact
Tumblr.com rank in the US is 25.
Text
Implementing Facebook "Set as Homepage" popup - Part 2
On last post I talked about mimicking Facebook set as homepage feature when using Firefox.
Let me finalize this tutorial by explaining the code I used:
$(document).ready(function() {
if ($.browser.mozilla) {
if (Modernizr.localstorage){
var show = localStorage.getItem('bookmark-show');
if(show != "0") {
$('#bookmark').delay(1000).fadeIn(1000);
}
} else {
// resort to cookies :(
if($.cookie("bookmark-show") !== "0") {
$('#bookmark').delay(1000).fadeIn(1000);
}
}
}
$('a#close').click(function() {
if (Modernizr.localstorage){
localStorage.setItem('bookmark-show', "0");
} else {
// resort to cookies :(
$.cookie("bookmark-show", "0");
}
$('#drawio-as-homepage').fadeOut(500);
return false;
});
});
First I wait until the page has loaded with the document ready event. Afterwards, I will be using JQuery's handy $.browser function to detect if we are using firefox or not, by invoking the $.browser.mozilla boolean getter.
If everything looks ok, we go to the next line and use the Modernizr library, to detect if the browser is capable of using HTML5 localstorage, if not I will explain later on how do we handle this situation.
If we can use localstorage, let's examine if the visitor has already closed the bookmark floating div, if not, we will show the floating div to the visitor.
What happens if the user's browser is non-HTML5 compliant and we can't use localstorage? Well, we will have to use the good old cookies to store this information.
There's a Jquery plugin that will handle the burden of the cookie creation, by just calling the following function:
$.cookie(name[,value]);
This will either retrieve or set a cookie.
Hope you enjoyed this tutorial. I will be posting more later on as the quest for DrawIO app continues....
Don't forget to go to DrawIO website and register for a chance to get an early beta preview invitation... Stay tuned...
0 notes
Text
Implementing Facebook "Set as Homepage" popup - Part 1
Not so long ago, I was doing some research on how to ask visitors to bookmark DrawIO website, without actually "forcing" the user or using website real estate in doing so.
So my first approach was a floating DIV element... You know what? That sucks! It's like getting into a time machine, and travelling 10 or 11 years ago, were we still had those annoying popups (tactics still used these days), punching the visitor in its face...
So I decided to make it as something non-obtrusive, at some corner of the website... Meanwhile I was checking my Facebook and logout, that threw me to the main page, and suddenly I saw basically the same concept I was trying to accomplish, a floating DIV at the corner of the website, near the address bar.
Let me show you what I'm talking about:
It's pretty neat, but now how do I manage to accomplish something similar?
And this is what you will be accomplishing at the end of the tutorial:
Plus, Facebook implementation of the bookmark uses a absolute positioning, meanwhile, my implementation uses a fixed positioning, which means that the floating div will follow you on a document scroll event.
For this I will be using the following:
Jquery 1.4+
Modernizr (For HTML5 feature detection)
Jquery.cookie.js (If localstorage is not present, gracefully degrade into using cookies)
Note: This will only work for Firefox, so before doing anything, use JQuery funtion $.browser to detect the browser:
if ($.browser.mozilla) { ... }
Before getting into details, I will provide the HTML structure DrawIO is using:
<div id="bookmark"> <div id="drawio-as-homepage"> <a href="javascript:void();" id="close">close</a> <h1>Set DrawIO in your Firefox Homepage</h1> <p>Quick access, anytime!</p> <div> <a href="http://www.draw.io" onclick="return false;"><img src="bookmark-logo.png" title="Drag me to your bookmarks section" /></a>Drag DrawIO image logo to your bookmarks section or homepage button in your Firefox browser </div> </div> </div>
And the CSS:
div#bookmark {
position: fixed;
top: 5px;
left: 125px;
display: none;
width: 300px;
height: 160px;
opacity: 0.7;
padding-top: 19px;
background: url(../images/beta/arrow.png) 15px 0 no-repeat !important;
}
div#drawio-as-homepage {
background-color: #FFF;
border: 5px solid #CCC;
}
div#drawio-as-homepage h1 {
font-family: verdana, arial, serif;
font-size: 12px;
font-weight: bold;
color: #555;
margin-bottom: 5px;
margin-left: 10px;
margin-top: 5px;
}
div#drawio-as-homepage p {
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: normal;
color: #555;
margin-bottom: 10px;
margin-left: 10px;
}
div#drawio-as-homepage div {
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: normal;
margin: 10px;
padding: 10px;
border: 1px dashed #F3CF06;
background-color: #F1F39C;
color: #555;
height: 80px;
}
div#drawio-as-homepage div img{
float: left;
margin-right: 15px;
}
div#drawio-as-homepage a#close {
float: right;
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 5px;
color: #555;
}
Wait for Part 2, which I will be providing the JS code for the bookmark implementation... Stay tuned!
0 notes
Text
More fixes
Fixes
-----------------------------------------------------------------------------------
1. Bucket now paints background or any element clicked, not just the background itself.
2. Select tool now available for images. When the select tool is chosen, you can drag images around canvas. Whenever you select another tool, dragging is set to off.
3. When saving Canvas, the attribute "stroke-linecap" was not being saved, making the image incomplete when loaded back.
0 notes
Text
DrawIO UI Redesigned
More great news! DrawIO UI has been redesigned to provide better intuitive controls... More changes yet to come...
0 notes
Text
Facebook integration
Great news! Facebook integration to each drawing is now finished. Now you can like an individual drawing, from a friend or somebody else, or to your own drawIO. There's also a share button so you can upload your drawIO drawing to Facebook and attach a message to your drawing.
Give it a try!
0 notes
Text
Drag n Drop for pictures using HTML5 standards
Now you can upload pictures to the drawIO canvas by just dragging PNG, GIF, or JPG files and dropping them into the canvas. Give it a try
0 notes
Text
Fixing bugs!
Our first post is about fixing bugs in drawIO web app. Lots of work...
0 notes
