...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
February 8, 2016

Appending div to iframe

Jesus Christ’s Question:

What is wrong with this piece of code:

jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

So i have to dynamically create an iframe element which will open up .pdf file in a popup and that part works. What I can’t manage to do is create a div with an id of “groundplan_popup_exit” within that iframe. I don’t know exactly why this doesnt’ work and what exactly I’m doing wrong. When i inspect the iframe window console brings out this warning:

/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more
details.

Dont know if it has anything to do with the reason why this isn’t working.

EDIT:

This is what my code looks like now.
enter image description here

Console prtscr:
enter image description here

Iframe console elements prtscr:

enter image description here

So i’m basically confused about the whole situation as I’m not that experienced in using jquery in general and this is my first time using it with iframes. I’m not even sure if the #groundplan_popup_exit div is even created and how do I find it if it is.

I see some problems:

var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');

Here you are already appending the element to the body.

var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

After you have appended above, you are trying to append again with jQuery("#groundplan_popup_exit") which does not even exists.

Fix (untested) would be something like this:

var iframe_body = iframe.contents().find('body');
var exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');
Read more
December 4, 2015

How to know if a page loaded via iframe is within sandbox?

Layke’s Question:

I’m trying to detect if a page is loaded via a sandboxed iframe. Is this possible?

For example,we provide custom embeddable widgets and some people think they are being smart by sandboxing them in their iframe, but this breaks certain things.. such as window.top.location

Obviously, they could enable the features we need, but ideally, I should be able to just do something like:

"sandbox" in window.top

I have also tried doing

try {
    // do something that would not work if within sandbox
} catch(e) {

}

But this doesn’t work because it’s a browser security error, and not related to javascript.

JSFiddle actually sandbox their iframes to prevent window.top.location navigation, so this would be a good example to show you.
If you look at this example here:

http://jsfiddle.net/mwsb8geL/show/

You can see the error when you press the Instant Book Online button.

enter image description here

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

Inside the iframe where you are testing if it is sandbox, open up your script tag and paste the contents of https://raw.githubusercontent.com/JamesMGreene/sandblaster/master/dist/sandblaster.js. This is due to the security issue.

After this, its as simple as the following.

var result = sandblaster.detect();
if(result.sandboxed === true) {
    //sandboxed
}

Here is a demo I made for another answer but shows that the solution works.

Read more

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.

Read more
December 2, 2015

Count Rows in Doctrine QueryBuilder

Acyra’s Question:

I’m using Doctrine’s QueryBuilder to build a query, and I want to get the total count of results from the query.

$repository = $em->getRepository('FooBundle:Foo');

$qb = $repository->createQueryBuilder('n')
        ->where('n.bar = :bar')
        ->setParameter('bar', $bar);

$query = $qb->getQuery();

//this doesn't work
$totalrows = $query->getResult()->count();

I just want to run a count on this query to get the total rows, but not return the actual results. (After this count query, I’m going to further modify the query with maxResults for pagination.)

Something like:

$qb = $entityManager->createQueryBuilder();
$qb->select('count(account.id)');
$qb->from('ZaysoCoreBundle:Account','account');

$count = $qb->getQuery()->getSingleScalarResult();

For people who are using only Doctrine DBAL and not the Doctrine ORM, they will not be able to access the getQuery() method because it doesn’t exists. They need to do something like the following.

$qb = new QueryBuilder($conn);
$count = $qb->select("count(id)")->from($tableName)->execute()->fetchColumn(0);
Read more
October 29, 2015

Add Icon between each Div

Michaelmcgurk’s Question:

I have a very simple page on my site: http://jsfiddle.net/95sptas0/

Using only CSS, how do I add an icon between each .post div? I’d like one after each .post div except the last. I’m hoping to use this icon: http://fortawesome.github.io/Font-Awesome/icon/arrow-down/

.post {
    margin-bottom:50px;
    background:#eaeaea
}
<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>  

After including the “FontAwesome” font, the following CSS might do it:

.post::after { 
    content: "f063";
    font-family:'FontAwesome';
}

f063 is the code for the “down arrow” using the FontAwesome font.

In order for you to apply this to every element except your last, you can use the last-of-type selector:

.post:last-of-type::after { 
    display: none;
}

The font awesome icons requires to have an element with defined class. In you case this is <i class="fa fa-arrow-down"></i>. Since this is a new element you cannot use CSS to handle DOM manipulation.

If you can opt for text based unicode icons and font-based icons however, it will be possible through adjacent selector.

.post+.post::before {
    content: "↓";
}

Demo: http://jsfiddle.net/95sptas0/4/

Read more
October 14, 2015

Select2 drop-down for countries, with flags

Delavnog’s Question:

Does somebody have an easy to use example of a country drop-down, with country flags, for Select2? I am about to implement one based on this suggestion, but I would prefer to avoid reinventing the wheel.

I was working on a similar problem and here is how I solve it.

(function($) {
    $(function() {
        var isoCountries = [
            { id: 'AF', text: 'Afghanistan'},
            ...
        ];
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>

        $("[name='country']").select2({
            placeholder: "Select a country",
            data: isoCountries
        });
    });
})(jQuery);

I also have made a gist about it and following are the demos.

Read more
September 1, 2015

How to make a multiline cursor without using a mouse in Sublime text 3?

Ivan’s Question:

The only way to make a multiline cursor in Sublime text 3 is Ctrl+Shift+RC+Drag. Is there any way to do this without using a mouse?

Yes, there is. Using Shift or Shift, select the lines you want multiple cursors on. Next, hit CtrlShiftL to split the selection into lines. Finally, hitting will put the cursors at the beginning of the lines, while will put them at the end.

Edit

There is also another, quicker way (thanks to minitech) – CtrlAlt/ will create multiple cursors without having to do selections first, and you can place the cursors anywhere in the line you wish. However, on Windows these key combos may be mapped to changing the screen orientation. To change this, hit CtrlAltF12 to open the Intel control panel, click Options, and either remap the screen orientation hotkeys, or click Off on the left side to disable all of them.

You can use Middle mouse button for this as well.

Click & Hold Middle mouse button and drag up and down

Read more
August 31, 2015

Checking if an instance's class implements an interface?

Wilco’s Question:

Given a class instance, is it possible to determine if it implements a particular interface? As far as I know, there isn’t a built-in function to do this directly. What options do I have (if any)?

interface IInterface
{
}

class TheClass implements IInterface
{
}

$cls = new TheClass();
if ($cls instanceof IInterface)
    echo "yes"

You can use the “instanceof” operator. To use it, the left operand is a class instance and the right operand is an interface. It returns true if the object implements a particular interface.

You can also do the following

public function yourMethod(YourInterface $objectSupposedToBeImplementing) {
   //.....
}

It will throw an recoverable error if the $objectSupposedToBeImplementing does not implement YourInterface Interface.

Read more
August 27, 2015

css selector for a node which doesn't contain a given selector with class attribute

Abc123’s Question:

How do I select the entire h4 node that doesn’t contain h3 with class=”avoid”? In this case I want to select the first and fourth h4 node.

<div>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
    <h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
</div>

First of all. Having heading tags inside another is not valid. Saying that..

CSS is not capable of selecting a parent based on nested elements.

You need JS to do such selections. A good read is this.

Read more
August 6, 2015

Dispose submit button with ajax-jquery and php

Dan Costinel’s Question:

I have the following code, for learning porpose. In short, I want to grab some data from a database, with the help of a drop-down menu. My problem is that now I’m using a submit button to make the submit action. And the improvement that I want, is to get rid of the submit button, and grab the infos when the drop-down changes.

I’ve tried to make a function for the code between line 1 and 12, and call it with: <body onload="process()">, but it’s not working. Then I tried to put the onchange="this.form.submit()" attribute to the <select> element, but this doesn’t work also, because it sends the data to process.php like any normal submission when not using ajax.
Anyone know any fix? Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body onload="viewdata()">
    <form action="process.php" method="post" id="form">
        <select name="select" id="select">
            <option value="">Choose</option>
            <option value="1">supervizor</option>
            <option value="2">sef locatie</option>
            <option value="3">muncitor</option>
            <option value="0">toti</option>
        </select><br/>
        <input type="submit" value="Go"/>
    </form>
    <script type="text/javascript">
    var frm = $('#form'); // **LINE 1**
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                $('#show').html(data);
            }
        });
        ev.preventDefault();
    });                    // **LINE 12**

    function viewdata(){
        $.ajax({
            type: "GET",
            url: "process.php"
        }).done(function( data ) {
            $('#show').html(data);
        });
    }
    </script>
    <br/><br/>
    <div id="show"></div>
</body>
</html>

You need to bind your processing on the change event of your drop down box.

$("#select").on("change", function(ev) {
    // Your ajax processing
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            $('#show').html(data);
        }
    });
    ev.preventDefault();
});
Read more
...

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