Handling the pasting event

Today for the text editor that I’m developing I need to adjust the text area’s height according to the text that the user is writing, but sometimes they could paste something from somewhere else. So I need to call the function once the pasting event is called. I’m using JQuery library, so I used:
 

$(document).on( 'paste' , '#article_content' , function( e ){
/* This is the function that I'm using to calculate the textarea height based in the content.
*/
adjust_textarea();
} );

 

If you want to get the pasted text, you just have to call this method

$(document).on( 'paste' , '#article_content' , function( e ){
  console.log( e.originalEvent.clipboardData.getData('text') );
} );

 

Scroll down position fixed

It always show up in web development, that’s why I decided to isolate and share it in this post.

** Update
Here’s a fiddle with a live example: https://jsfiddle.net/luisbajana/t6rqphoz/

Video

Logic
Define a listener to the scroll event, and set the distance between the scrolled distance to the top of the document, and the actual distance from the element to the top of the document. Then we have to calculate the difference between the two of them, and when that difference is less than or equal to zero, we’ll set the position property to fixed. Else the position should be relative (default).

 

  1. Defining a listener to the scroll event

    $(window).scroll(function (){
     //Our code here
    });
  2. Determinate the distance from the top
    It’s quite straight forward, using JQuery you’ll get the distance to the top using:[code language=”javascript”]$(document).scrollTop()[/code]
  3. Determinate the distance from the element to the top
    Using JQuery:

    $(element).offset().top
  4. Compare if we reached the element
    If you notice I’m changing the top attribute as well, this is because sometimes we have to consider the menu’s height, if you don’t need to consider this you can omit that line.

    if( $(document).scrollTop() >= $(element).offset().top - menu_height ){
     $(element).css('position','fixed');
     $(element).css('top','100px');
    }else if( $(document).scrollTop() < $(element).offset().top ){
     $(element).css('position','relative');
     $(element).css('top','0px');
    }

     

Logo Design

Few years ago a friend of mine asked me for ideas to her new project, the project was called Glovalovezation and it was a book about long failed distance relationships. I found this idea really good, because I’ve been through those stories myself.

Well, I sent this idea, I don’t know if she used it or not, I’ll ask, probably is a good excuse to catch up a little bit.

 

Screen Shot 2016-04-03 at 3.14.46 PM

Lock landscape mode on iOS

Sometimes we’re developing something that doesn’t require landscape mode. To setup your application just in portrait mode we just need to go under General -> Deployment Info -> Device Orientation, then select the orientation type we want, and that’s it.

In my case I just enabled the portrait mode.

 

Screen Shot 2016-03-14 at 2.30.51 AM

Profile design

The other day I remembered my days as a designer, and I faced the challenge of designing a new user profile for my new company. I love the simple things, that’s why I carefully managed the spacing and distribution.

 

Screen Shot 2016-02-08 at 3.26.22 PM.png

Playing with currency in Swift

I’m developing a currency converter, so I needed to represent data in different currencies, I found a really nice blog post about it:

https://www.bignerdranch.com/blog/playing-with-numbers-in-global-playgrounds/

Adding a custom social media links

The problem is that every platform has their own color schema, icons, font, etc, and sometimes you want to add your own style to a share link. I did a research and found this: Adding Social Share Links with Custom Icons and Share Count to share an URL using a custom anchor tag.

Basically you just have these URL’s:

Facebook:
[code language=”html”]
&lt;a href="https://facebook.com/sharer.php?u={URL}" target="_blank"&gt;Facebook&lt;/a&gt;
[/code]

Twitter:
[code language=”html”]
&lt;a href="https://twitter.com/intent/tweet?url={URL}&amp;amp;text={Title}&amp;amp;via={UserName}&amp;amp;hashtags={HashTags}" target="_blank"&gt;Twitter&lt;/a&gt;
[/code]

Google +:
[code language=”html”]
&lt;a href="https://plus.google.com/share?url={URL}" target="_blank"&gt;Google+&lt;/a&gt;
[/code]

As you could see in the example they use the variable {URL}, I’ll replace it using the current user’s URL, to do that I created the class “js-add-current-url” so, If in the future I have to add the current URL, it will do it automatically, using a listener  with “on” method.

So your javascript is something like this:

[code language=”javascript”]
$(document).on("click",".js-add-current-url",function(){
var current_href = $(this).attr("href");
$(this).attr("href",current_href+window.location.href);
});
[/code]

And your HTML:

[code language=”html”]
<ul class="nav">
<li><a class="js-add-current-url" href="https://facebook.com/sharer.php?u=" target="_blank"><i class="icon-FacebookNeg"></i></a></li>
<li><a class="js-add-current-url" href="https://twitter.com/intent/tweet?url=" target="_blank"><i class="icon-TwitterNeg"></i></a></li>
<li><a class="js-add-current-url" href="https://plus.google.com/share?url=" target="_blank"><i class="icon-GooglePlusNeg"></i></a></li>
</ul>
[/code]

And it looks like this:

Screen Shot 2015-11-23 at 1.35.53 PM

Allowing only alphanumeric characters

Sometimes you have to include some extreme validations over your text fields, the other day I had this requirement: “Allowing only alphanumeric characters and validate it when the user is typing”, you may say “there are tons of libraries for that purpose out there”, yes, but, what if you just want to validate one field? Include an entire library for that is too much…

 

[code language=”javascript”]
$(‘body’).on(‘keypress’,’.js-only-alpha-numeric’, function (e){
var re = new RegExp("^[a-zA-Z0-9]+$", "g");
if(!re.test(String.fromCharCode(e.keyCode))) return false;
});
[/code]

Then in the text field, add the class “js-only-alpha-numeric”.
[code language=”html”]
&lt;input type=’text’ class=’js-only-alpha-numeric’ /&gt;
[/code]

 

Update: 

The code above doesn’t work in Firefox, the code below works pretty well:

[code language=”javascript”]

$(‘body’).on(‘keypress’,’.js-only-alpha-numeric’, function (e){

var charCode = (e.which) ? e.which : e.keyCode;
if (charCode == 8) return true;

var keynum;
var keychar;
var charcheck = /[a-zA-Z0-9]/;
if (window.event) // IE
{
keynum = e.keyCode;
}
else {
if (e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
else return true;
}

keychar = String.fromCharCode(keynum);
return charcheck.test(keychar);
});

[/code]

Border inside of a div

I’m using this amazing angular project called Angular Bootstrap Calendar and I have to customize it a little bit, one of the design requirements is a border color on mouse over an event in this calendar, well, you can think that’s very easy, and it is, but, when I applied this simple rule:

[code language=”css”]
.cal-month-day:hover{
border-color: 1px solid red;
}
[/code]

all the calendar moved a little bit (1px), it was just a little detail, but, that little detail is important, so I applied this other rule which is a shadow, this property doesn’t move calendar cells because it overlaps the shadow over the content, I was happy with the result.

[code language=”css”]
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
[/code]

Calendar Bootstrap Angular