March 31, 2016

How to make symfony forms support datetime-local input type?

Starx’s Question:

Most of the browsers are dropping support for datetime and also datetime-local as a valid input type. As of the time of writing this question, there are more support for support for datetime-local than datetime(which is almost non-existent).

If you building forms using Symfony’s form builder, it supports datetime but not datetime-local. So how would you make symfony form builder accept datetime-local input type and keep the rest of the functionality of the input type same?

One way this problem can be solved is, if we can change the text of input type to say datetime-local which can be done by overwriting the DateTimeType and using that.

<?php

namespace AppBundleComponentFormExtensionCoreType;

use SymfonyComponentFormFormInterface;
use SymfonyComponentFormFormView;

class DateTimeType extends SymfonyComponentFormExtensionCoreTypeDateTimeType
{
    /**
     * {@inheritdoc}
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['widget'] = $options['widget'];

        // Change the input to a HTML5 datetime input if
        //  * the widget is set to "single_text"
        //  * the format matches the one expected by HTML5
        //  * the html5 is set to true
        if ($options['html5'] && 'single_text' === $options['widget'] && self::HTML5_FORMAT === $options['format']) {
            $view->vars['type'] = 'datetime-local';
        }
    }

}
December 4, 2015

Detect if JavaScript is Executing In a Sandboxed Iframe?

Omninternet’s Question:

I have a product that’s playing a video in Flash (if available), and falls back to HTML5 if Flash isn’t available.

I’m not able to find a way to determine if JavaScript is executing within an Iframe with the “sandbox” attribute, which is necessary for my solution because sandboxed iframes disable all plugins. The sandboxed iframe could be as simple as this:

<iframe src="http://www.cross-domain.com/" sandbox="allow-scripts">

To determine if Flash is enabled, I’m using swfobject’s method of checking navigator.plugins[“Shockwave Flash”].description, which is set even when in a sandboxed iframe. I can load the swf object, but it doesn’t play.

To reproduce this issue, visit http://jsfiddle.net/max_winderbaum/9cqkjo45/, open your chrome inspector and click “Run”. The script on the cross-domain site will pause in the context of the sandboxed iframe.

According to the W3 spec at http://dev.w3.org/html5/spec-preview/browsers.html#sandboxing-flag-set, there is supposed to be an “active sandboxing flag set” on the document that JavaScript can access (at least that’s how I’m reading the spec). There doesn’t seem to be any flag set on the iframe’s document.

Does anyone have any ideas / solutions on how to detect if JavaScript is executing from within a sandboxed iframe?

A project sandblaster can help you detect if you running being sandboxed.

Sandbox check if itself is framed first and then scans through the attributes of the frame element to detect several information about itself. These includes framed, crossOrigin, sandboxed, sandboxAllowances, unsandboxable, resandboxable, sandboxable.

To detect if itself is sandboxed in our case, it checks if the frame element has an attribute sandbox.

// On below `frameEl` is the detected frame element
try {
  result.sandboxed = frameEl.hasAttribute("sandbox");
}
catch (sandboxErr) {
  result.sandboxed = null;
  if (typeof errback === "function") {
    errback(sandboxErr);
  }
}

I tried to replicate your issue and to test if this solution works, I had to paste the script into the window itself due to the security issue.

<html>
    <head>
    </head>
    <body>

    <script>
        //Paste the contents of the script(https://raw.githubusercontent.com/JamesMGreene/sandblaster/master/dist/sandblaster.js) here

        var result = sandblaster.detect();
        if(result.sandboxed === true) {
            //sandboxed
        }
        debugger;
    </script>
    </body>
</html>

Here is a demo: http://jsfiddle.net/Starx/tzmn4088/ that shows this working.

August 29, 2013

Verifying Email address

Liondancer’s Question:

I’m trying to create a form that verifies that an email address has been entered. Not necessarily check its validity but basically sakjfsfksldjf@email.com. I was wondering how to go about doing it in PURE JavaScript and no RegEx.

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Test File</title>
    </head>
        <script>
            function submitForms() {
                email_format = document.getElementById('email_input')       // want to return T or F
                if (email_format) {
                    //print email successful
                }
                else {
                   //print error message
                }         
        </script>

    <body>

        <form>
            Email:            
            <input type ="email" id ="email_input" />
        </form>

        <button type = "button" onclick = "submitForms;"> Submit All!
        </button>
    </body>
    </html>

Here is a previously answered regular expression answer. Its pretty good.

function validateEmail(email) { 
    var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(
".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA
-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 

Credits: http://stackoverflow.com/a/46181/295264

However, the only good to verify an email address is by sending a confirmation email and hearing back.

July 13, 2013

What are the differences between group and layer in KineticJs

Hussein Amb’s Question:

I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences?

Groups are simply group of elements or objects can be stacked in any way normally within a layer.

Layers are different Canvas area that can be added on the stage.

Also you can display multiple groups at once but you cannot display multiple layers . Only the topmost layer is visible.

May 21, 2013

Why cant we use &lt;wrapper&gt;&lt;/wrapper&gt;?

Shannon Hochkins’s Question:

I can use something like <section id="wrapper"></section>, however because I’m so pedantic, is there anything wrong with using <wrapper></wrapper> as my html element?

I’m using html5 shiv and modernizer, it does work fine however I just wanted to know if there’s anything particularly wrong with doing it this way.

<section> elements represent a section in the page, not YOUR LAYOUT. This is very important and is confused by most of starters in HTML5 including me.

Let me show where you are wrong, using another example:

<section id="banner">
</section>

Banners are a part of layout not web content. Thus they do not have any section. They have to represented by <div> as they used to be in HTML 4.

<section id="wrapper">...</section>

Is wrong in the same way, because wrappers are purely layout specific tasks, thus it does not represent any specific content on your page. <sections> should always represent differentiated content and not others.

Here is an example of HTML5, that can be considered valid.

<div id="wrapper">

    <section id="mainArticle">

    </section>
    <section id="aboutAuthor">

    </section>
    <aside id="relatedArticles">

    </aside>

</div>
February 27, 2013

How can I use @font-face with Gotham-Light font?

Question by Mishkat Islam

I want to show Gotham-Light on the web with css codding but I can’t code. I have two fonts named Gotham-Light.eot, Gotham-Light.ttf. Now How can I use on the browser? Please help me.

Answer by Starx

Define your font like this:

@font-face{
   font-family: gotham-light;
   src: url('gotham-light.ttf') url('gotham-light.eot');
}

And use it as you would normally

#someelement {
    font-family: gotham-light;
}

input file with cross-browsing simple button look

Question by Rafael El Bundas Fernandez

I have to create a button. If the user click the said button, he is prompted to choose a file to upload. After choosing the file, using Javascript or JQuery, i have to fill a form and submit it so the file can be uploaded.

The problem is that i cannot use the usual html

<input type="file" name="xml" class="custom-upload" id="custom-upload"/>

Is there anyway on how to do this? I have searched thoroughly and all the possible answears seem overly complicated so i thought i was missing a more essential solution.

Answer by Starx

You can create an image showing a image of a button instead. Then on click of that button, you can trigger the click event of the real file input.

<img id="imageButton" src="soure/to/imagebutton.jpg" />
<input type="file" id="fileImageButton" style="display: none; " />

And a little jQuery to do the trick

$("#imageButton").on('click', function() {
    $("#fileImageButton").trigger('click');
});

Or, vanilla javascript

document.getElementById('imageButton').addEventListener('click', function() {
  fileinput = document.getElementById('fileImageButton');

  if (document.createEvent) {
    var evt = document.createEvent("MouseEvents")
    evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
    fileinput.dispatchEvent(evt);
  } else {
    element.fireEvent("onclick"); //For IE
  }
});

Lighten an area using css

Question by Asmastas Maz

http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help

Answer by Starx

You can add a background with rgba property to give a fake light background.

Try this

#logo {
   background-color: rgba(255,255,255, 0.5);
   /* Then other css */
}

In your case, modify your .head to this

.head {
  padding-left: 5%;
  background-color: rgba(255,255,255,0.5);
}
February 25, 2013

how to show calendar on text box click in html

Question by Vinoth

In html i want to show calendar to select date while clicking a text box.
then we select a date from that calendar then the selected date will be display in that text box.

Answer by Starx

jQuery Mobile has a datepicker too. Source

Just include the following files,

  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
February 4, 2013

Inline-block, Inline, Block

Question by Zettam

I’ve been searching about CSS lately, trying to teach myself the tricks.
One another issue I’ve encountered is directly related to the display: attribute.

I’ve been trying to get the width of the background element for my “menu buttons” as wide as the text they contain. The buttons are simply <div> elements.

When I use display:block; all of their width appear as wide as the longest item, and when I set it to display:inline; or display:inline-block they simply appear on the same line, just like how an inline element works.

Now, what I’m wondering is, how can I make them appear like a list, but still make the background color only as long as the text it contains?

Answer by Starx

Use a markup structure like this

<ul id="menu">
<!-- By the use of UL you can have the menu displayed as list -->
    <li><a href="#">Home</a></li>
    ...
</ul>

And apply the background CSS on the #menu li a

#menu li a {
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */

    background: url("../src/to/img.jpg");
}
...

Please fill the form - I will response as fast as I can!