Develop Reference

How do I force any iframe content to appear on top if changed, without changing the attributes in the links?

How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>

After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>

If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.

Add/remove a class in html using a js function

I want to add a class to body in HTML using Javascript using a button that executes a function, then remove it using another button. But I want to save that class, until the other button is pressed, using LocalStorage.
I can do that without LocalStorage
$$('body').addClass('Class here');
But how with LocalStorage?

By using Storage.setItem to save, then Storage.getItem to retrieve, like this:
var className = "theclass";
// Put the class name into storage
localStorage.setItem('className', className);
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
$('body').addClass(retrievedClassName);

Here a working code with jquery:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body class="">
<div class="form-group">
<button class="button">your button</button>
</div>
<script>
var className = "theclass";
jQuery('.button').on( 'click', function(){
localStorage.setItem('className', className);
jQuery('body').addClass(className);
});
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
jQuery('body').addClass(retrievedClassName);
</script>
</body>
</html>
And here without:
<html>
<head></head>
<body id="mybigbody" class="">
<div class="form-group">
<button id="button">your button</button>
</div>
<script>
var className = "theclass";
var body = document.getElementById("mybigbody");
document.getElementById('button').onclick = function(e) {
localStorage.setItem('className', className);
body.setAttribute("class", className);
e.stopPropagation();
}
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
if(retrievedClassName)
body.setAttribute("class", retrievedClassName);
</script>
</body>
</html>

div into array using map function

I m adding child divs of main div into array by id
but couldn't get what is the problem.......?
after adding into array i waant to send to ajax to write in csv
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the array into a String.</p>
<div id='main'>
<div id='a'>
dab
</div>
<div id='b'>
nav
</div>
</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var array = $('#main id').map(function() {
return $(this).val();
}).get();
array.toString();
document.getElementById("demo").innerHTML = array;
}
</script>
</body>
</html>

Try to use attribute selector properly,
var array = $('#main [id]').map(function() {
return $(this).text();
}).get();
Also .val() is a jquery function is specially for the elements which yields value property when accessing it on a node object. So when you want to access the content inside a div, you have to use .text()

Changing style of text to bold

I need help with my code, because everything works except for one thing. After I input text in the three textboxes and click the button, I get a div with the text, but when I click on the text I want only the nummer part to get style="bold", not the whole div.
What's the easiest way to accomplish this, if possible, without putting the nummer text in its own element?
<html>
<head>
<title>Uppgift 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var $contact = {};
$contact.List= function() {
this.addContact= function(namn ,efternamn, telefon) {
var cont= new $contact.People(namn, efternamn, telefon)
document.body.appendChild(cont.element);
};
};
$contact.People= function(namn, efternamn, telefon) {
this.fNamn= namn;
this.eNamn= efternamn;
this.tele= telefon;
this.element= document.createElement("div");
this.element.innerHTML= namn+" "+efternamn+" "+telefon;
var ele= this.element;
this.element.addEventListener("click", function () {
ele.style.fontWeight="bold";
});
};
var myList;
function startUp() {
myList= new $contact.List();
}
</script>
</head>
<body onload="startUp();">
<form>
<input type="text" id="fNamn" placeholder="Föramn"/>
<input type="text" id="eNamn" placeholder="Efternamn"/>
<input type="text" id="tele" placeholder="Nummer"/>
<p></p>
<input type="button"
onClick="myList.addContact(document.getElementById('fNamn').value,
document.getElementById('eNamn').value,
document.getElementById('tele').value);"
value="Skriv ut"/>
</form>
</body>
</html>

There is no way to do this - you either work with the div element or you add a new element that has it's own properties you can work with. There is no way to change the properties of only a part of the text in an element.

Upload and use a custom font where only the numerals are bold.

Add textbox into iframe and append in a different html

Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?

I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.