We Keep Coding

How to sandbox a div element?

I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.

What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.

You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?

JavaScript does not work well inside a loaded content in a DIV

I am creating an application with Symfony2, where I have a main menu of options depending on the option selected dynamically opens a tab at a lower div with the content for that option. Content is loaded with load() of Jquery in the container div.You can see in the picture below:
The first problem was that in the HTML loaded in each tab could not use the js file initially loaded in the index.html, as you can see in this example you should check out a notice when we click the content of each tab, but does nothing .
The solution to this problem was included in each HTML code to load the appropriate script, and it worked properly. But to do it this way, if two HTML carry the same js, when one of the contents some event runs is repetite many times as tabs we have created, that is, if I open two different options (each in its own tab both charge the same js) by clicking on the first event associated performed twice, whereas if I do it in the second only done once. In short, whenever a function of a js used, is repeated as many times as there are dynamically loaded on the tabs.
And I tried event.preventDefault();orevent.stopPropagation(); and it does not solve the problem.
Would it be okay that it js is included twice in the overall structure of HTML? (Included in the initial head and then the container div)

Dynamically loading HTML + JavaScript is not the best approach for this case. I suggest that you use some JavaScript SPA framework, like AngularJS or ReactJS. Both are very big and well supported projects, so you can find tons of documentation and tutorials. You'll most likely end up using Symfony only as a RESTful service and Angular/React taking care of the rest (template loading, sending request to server, etc). Also, js frameworks will take care of deep linking and in the end you'll have a better working, easier to maintain application.
It is a bit more work initially, especially until you bootstrap the application, but then it gets easier to maintain and implement new functionality, so it pays off in the end. With your current approach you soon will find yourself in a big mess full of 100s of templates, js callbacks, inclusions, etc. I'm saying this from a personal experience!

Well...
Jquery works like this: when you attach an event to html, if the html does not exist, the event is attached to nothing. If the element exists then the event is correctly attached. It attaches only to existing elements when the on function is execute. That is a correct behaviour. In the past it used to exist a .live method that did exactly what you want: you attached an event and if you create the element after the attachment, the new element also contained the event.
Adding the js twice is not the solution. As you said after a click the button will be executed twice.
Why do not attach the events after loading the content? If you load it in the page start you can do in the main file:
$(function(){ // will force to execute the on method after all the page is loaded.
$('.submenu .button').on ('click', function (){
...
});
});
If you load the menu by ajax, in the callback and after adding the html menu to the main you must use the code I wrote above.

Should I use window.load or document.ready jquery

Recently I saw that you could use either
$('document').ready(function() {
//Do Code
});
or
$('window').load(function() {
//Do Code
});
for jQuery.
However, they seem the same to me! But clearly aren't.
So my question is: Which one should I use for a website sort of based on animation and async? And also which one of the two is generally better to use?
Thanks.

$('document').ready runs the code when the DOM is ready, but not when the page itself has loaded, that is, the site has not been painted and content like images have not been loaded.
$(window).load runs the code when the page has been painted and all content has been loaded. This can be helpful when you need to get the size of an image. If the image has no style or width/height, you can't get its size unless you use $(window).load.

Well first of all you may want to consider using the "ready" event, which you can handler like this:
$().ready(function() {
...
});
Or, more succinctly and idiomatically:
$(function() {
...
});
The "load" handler really relates to an actual event, and can be handled on several different sorts of elements: <img> and <iframe> for example. The "load" event at the document or window level happens when all of the page's resources are loaded. The (synthesized, in some browsers) "ready" event however happens when the page DOM is ready but possibly before things like <img> contents.
Another option is to simply put your <script> tags at the very end of the <body> or even after the <body>. That way the scripts have the entire DOM to work with, but you don't have to worry about any sort of event handling to know that.

Twitter social box delay page loading - how to async it?

Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)

There is a solution in here;
http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
$(window).load(function(){
$.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
$.getScript('/media/js/twitter.js', function(){
$('#twtr-widget-1').appendTo('#twitter_p')
})
})
})

To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.
Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.
In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.
In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.
You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).
I hope it didn't come out backwards :D.

The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.
The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.
You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.

Hiding a div using JQuery

I want to hide a div using Javascript, as soon as the page gets loaded in the browser. I am able to do that, if i use the following code :
document.getElementById("div_id").style.display='none';
But, when i try to do the same thing using JQuery,i notice that the div is visible for a couple of seconds after page loads,and then it becomes hidden. The JQuery code i use is
$(document).ready(function() {
$("#div_id").css('display','none');
});
The same thing happens, if i use $("#div_id").hide(); Is this because im using a library,which would slow down the process a bit,instead of directly using document.getElementById ? . Any way to fix this ?
Thank You.

There's an easy solution to this. Set up a CSS class as follows
.js #div_id { display: none; }
Then have the following jQuery
$('html').addClass('js');
$(document).ready(function() {
/* normal code to run when DOM has loaded here */
});
the <div> will be hidden immediately (no flashes) if users have JavaScript enabled and won't be if they don't (which circumvents possible graceful degradation problems as meder points out in his option c).
This works because when can immediately access the <html> element when the page starts to load.
The reason why document.getElementById("div_id").style.display='none'; is probably working is because you have it in the <body> after the element and therefore the script does not wait for the whole DOM to be loaded before executing.

You could either
a) insert a script element directly after the element to hide it with jQuery:
b) have inconsistent Javascript by directly using DOM methods like your first code snippet
c) hide it with CSS with the disadvantage that for CSS enabled non-JS users they wouldn't be able to see anything
I would choose between A and C, though I'm not sure exactly what you're hiding.
A:
<div id="foo"></div>
<script>$('#foo').hide()</script>
C:
div#foo { display:none; }

First, use $("#div_id").hide();. It's more idiomatic for jQuery.
Second, it's because you're using $(document).ready. Usually, that event doesn't fire until the DOM is available for use. However, because of the way bindReady() is implemented, it's possible on some browsers for this event to be equivalent to the onload event, which won't fire until everything is loaded. Unfortunately, the only way that I know of to get around this (that doesn't cause problems for disabled users who can't use JavaScript because of a screen reader) is to set a short timeout (say 50ms) and repeatedly check for the existence of $("#div_id") while the page is loading. This is a horrible hack, and I hesitate to recommend it, but it should work. That said, you're almost better off just accepting the flash of content, knowing that most users won't see it.

I think a better option would be to style the div so that it is hidden when the page is written, without any javascript.
Then, whenever you are ready to show it again, use javascript to unhide it:
$('#someId').show();

It might be cause by the way you include the scripts. The browser has to download them before they are run. So if you have a lot of js files this can cause this problem.

I think the reason is that the DOM loads progressively and the $(document).ready event is waiting for the DOM to be fully loaded before executing.
If you really want the element to be invisible when the page loads, can you define that style in your CSS instead?
I haven't tried this, but if you still want the div to be visible for non-Javascript users then I think you could do something like this:
<noscript>
<style type="text/css">
#elementid {display: block !important;}
</style>
</noscript>

More likely it's because you are waiting until the document is ready to hide it. This seems more like a job for server side script if you want it hidden by default.