We Keep Coding

How to enable the design mode of iframe?

I have tried to edit div text which I open in an iFrame like this:
$(function() {
var iframeBody = $("#texteditor").contents().find("body");
var styleTag = iframeBody.append($('#content'));
iframeBody.designMode = "on";
})
and the page look llike this:
I am trying to edit the text, but it's not working

Try instead
var iframe = $("#texteditor <iframe-selector>");
var jqIframeBody = $(iframe[0].contentDocument.body);
Basically you cannot write a absolute selector starts from your parent window contents, you need to first get into the context (window/document) of iframe and then perform dom operations, or messaging through 1postMessage` however you want.

Open links in another window with javascript

Let's say I have a single HTML page and it contains hundreds of links. These links will load in the same window when anybody clicks them.
I want it to open in another window. I know that I can use target for each link:
My Text1
My Text2
My Text3
Howeder, I'd prefer to use JavaScript if that's possible. Is it possible to do that with JavaScript, and if so, how?

Yes, it is. Use something like this:
var newtab = window.open('http://www.example1.com/', '_blank');
newtab.focus();
This may open in new tabs or new windows depending on the particular browser, but I don't know of a way to control that any more specifically.
EDIT
Or were you asking for a way to set the behavior for all links on the page? Then you can add the proper target to all of them when the page loads.
With jQuery: http://jsfiddle.net/b8hdv/
$(document).ready(function() {
$('a').attr('target', '_blank');
});
...or without jQuery: http://jsfiddle.net/uFvUS/
window.onload = function(e) {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].target = '_blank';
}
}

function open_in_new_tab(url )
{
var win=window.open(url, '_blank');
win.focus();
}
Use like this:
$("#a_id").on("click", function(){
open_in_new_tab($(this).attr("href"));
});
Demo HTML:
Click me!
Found here

Try this:
window.open('http://www.example1.com');
and capture the event click.

js iframe close button

I Have the following which opens an iframe with html page loaded, works great, but how to add a close button to the page/iframe so it simply closes the iframe/page and does not affect the page its opened over:
(function (d) {
var modal = document.createElement('iframe');
modal.setAttribute('src', 'mypage.html'));
modal.setAttribute('scrolling', 'no');
modal.className = 'modal';document.body.appendChild(modal);
var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//myurl.com/testes.css';
document.body.appendChild(c);
}(document));
I tried the following which tried to close it, but, then gives a 404 message inside the iframe:
Close
I am loading jquery on the page if that helps at all, meaning, if there is a jquery solution.

Links are supposed to link somewhere and the href attribute takes a URI.
Use a <button type="button"> and bind a click handler to it. (You could use an onclick attribute, but that wouldn't be unobtrusive)
The unobtrusive approach would be:
foo
And then bind an event handler along the lines of
myLink.addEventListener('click', function (e) {
var d = window.parent.document;
var frame = d.getElementById('myFrame');
frame.parentNode.removeChild(frame);
e.preventDefault();
});

You could put the link into some kind of container div for your iframe, creating the latter with this structure:
<div id="iframe-container">
<a href='#' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>Close</a>
<iframe src="http://some.web/page.html" />
</div>
Works without any framework.

multiple modal windows with js css and html

I am making multiple modal windows , although I am repeating myself. If I could see a different approach to the javascript in order to make this more terse I would definitely appreciate it. And I will pay it forward when I am a ninja....
thanks in advance. here is my jsfiddle.
I created two modal's, two mask's and two modal content areas. I also created an img link and a button link. One for each modal respectively. I would like use the function to open any modal windiow.....

Use document.createElement to dynamically create new modals.
function createModal(txt){
var ele = document.createElement("div");
ele.id = "modal";
document.body.appendChild(ele);
var mask = document.createElement("div");
mask.id = "modalMask";
mask.onclick = function(){
ele.outerHTML = "";
}
ele.appendChild(mask);
var inside = document.createElement("div");
inside.id = "modalContent";
inside.innerHTML = txt;
ele.appendChild(inside);
}
createModal("Content here");
//do more stuff here
And you will have to remove the div when the user clicks "close".

Cannot set title and alt attributes in my img using javascript

I'm using the Google Image Search API, and largely copied this code, which builds the search results in my page.
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var linkContainer = document.createElement('div');
var title = document.createElement('div');
// We use titleNoFormatting so that no HTML tags are left in the title
title.innerHTML = result.titleNoFormatting;
var newImg = document.createElement('img');
newImg.src = result.tbUrl;
newImg.className = 'googleSearchResult';
newImg.title = 'newTitle';
newImg.alt = 'newAlt';
var newLink = document.createElement('a');
newLink.href = "temp_url";
newLink.appendChild(newImg);
contentDiv.appendChild(newLink);
}
In the following lines,
newImg.src = result.tbUrl;
newImg.className = 'googleSearchResult';
newImg.title = 'newTitle';
newImg.alt = 'newAlt';
the first two, which set the image src and class, work fine, but the second two, which should set the title and alt of the image, don't work at all. Can anyone see why this would be happening? Thanks for reading.
EDIT:
Here is the HTML when inspected in Firefox through Firebug:
<img alt="" src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">
Here is the HTML when inspected in Google Chrome
<img alt src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">
EDIT:
What I am trying to do here is store an extra bit of data in the HTML for the image, to be used in a jQuery plugin later. If anyone can suggest an alternative way to do this, that would be great as well.

I suspect the problem lies elsewhere. Consider this example, which works fine in the browsers I've tested (Firefox, Chrome, IE):
var link = document.createElement("a");
link.href = "http://stackoverflow.com";
var img = document.createElement("img");
img.title="Hello";
img.alt="alt Hello";
img.src="http://jsfiddle.net/img/sprites.png";
link.appendChild(img);
document.body.appendChild(link);
alert(img.getAttribute("alt"));
alert(img.getAttribute("title"));
I would recommend checking to see if anything might be in front of the link/img element, as this would stop a tooltip from appearing on hover.

In response to your last edit: if you're just trying to store data associated with an image for later use you could use jQuery's data method.

Try:
img.setAttribute('title', 'someTitle');
Appearantly, there's a difference between 'properties' and 'attributes' in DOM scripting.