I have a div with an iframe in it like so:
<div>
<iframe ng-src="{{somesourceurl}}"></iframe>
</div>
The the source that gets loaded by the iframe has html with uniquely identified div tags like this:
<div id="n_1">
<div id="n_2" />
<div id="n_3" />
<div id="n_4">
<div id="n_5" />
</div>
</div>
I also have a bunch of buttons that corresponds to each of these uniquely tagged divs like so:
<button onclick="goToN1()">Go To n1</button>
<button onclick="goToN2()">Go To n2</button>
<button onclick="goToN3()">Go To n3</button>
<button onclick="goToN4()">Go To n4</button>
<button onclick="goToN5()">Go To n5</button>
What do I put in my onclick functions for each of these buttons such that they will scroll to the appropriate place in the iframe?
I think you can change the src of the iframe to make the browser scroll to the element with id:
HTML 1
<div>
<iframe id="my-iframe" ng-src="{{somesourceurl}}"></iframe>
</div>
HTML 2
<button onclick="goToId('n_1')">Go To n1</button>
<button onclick="goToId('n_2')">Go To n2</button>
<button onclick="goToId('n_3')">Go To n3</button>
<button onclick="goToId('n_4')">Go To n4</button>
<button onclick="goToId('n_5')">Go To n5</button>
JavaScript
function goToId(id) {
var iframe = document.getElementById("my-iframe");
var src = iframe.src;
if(src.indexOf('#') >= 0) src = src.substr(0, src.indexOf("#"));
iframe.src = src + "#" + id;
}
Related
I'm writing the code to edit a database table.
I have the following HTML:
<div id="1">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
<div id="2">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
<div id="3">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
And so on.
Using the following function, I can get the clicked button:
function a(value) {
console.log(value);
}
When a button (SAVE or DELETE) is clicked, I need to retrieve:
the id of the "parent" div;
the content of each of the three contenteditable divs inside the same "parent" div.
Is it possible using pure Javascript?
Any suggestion will be very appreciated.
Thanks in advance.
What I would do is implement click listeners in JS, that way I can query elements easily.
Here is the example:
// Query all div.div-editable elements
document.querySelectorAll('div.div-editable')
.forEach((div) => {
// The id of the parent
const divId = div.id;
// Each of content editable divs inside the parent div
const editables = div.querySelectorAll('div[contenteditable]');
// The buttons Save and Delete
const saveBtn = div.querySelector('button.button-save');
const deleteBtn = div.querySelector('button.button-delete');
// Add click listeners to buttons
saveBtn.addEventListener('click', function() {
console.log('Saved: ' + divId);
const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);
console.log('Values of divs:', contentOfEditableDivs);
});
deleteBtn.addEventListener('click', function() {
console.log('Deleted: ' + divId);
const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);
console.log('Values of divs:', contentOfEditableDivs);
});
});
<div id="1" class="div-editable">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
<div id="2" class="div-editable">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
<div id="3" class="div-editable">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
EDIT 1: Added code snippet
EDIT 2: Simplified explanation
You can send this keyword in the argument of click's event handler and then access the parent div's id.
So your HTML would look something like:
// rest of the code here
<button onClick="a(this, 'save')">SAVE</button>
<button onClick="a(this, 'delete')">DELETE</button>
// rest of the code here
And your JS code would change to:
function a(elem, value) {
console.log(elem.parentNode.id);
}
More details on the following link:
how i get parent id by onclick Child in js
I'm trying to make a POS system with HTML, CSS and Javascript.
I currently have a site that loads in the inventory to an iframe and from there I want the buttons from the iframe to add their information such as "Name, price, amount etc." to another div.
Is this possible?
I already tired linking the target and such, but nothing worked.
Index page:
<wrapper>
<div id="category">
<a href="øl_soda.html" target="iframe1">
<input type="button" class="categories_button" value="Øl/Soda" />
</a>
<a href="drinks.html" target="iframe1">
<input type="button" class="categories_button" value="Drinks" />
</a>
<a href="shot.html" target="iframe1">
<input type="button" class="categories_button" value="Shots" />
</a>
<a href="diverse.html" target="iframe1">
<input type="button" class="categories_button" value="Diverse" />
</a>
</div>
<iframe name="iframe1" id="inventory" src="velkommen.html">
</iframe>
<div id="checkout">
<ul id="myList">
<li>
Ja
</li>
</ul>
<button onclick="remove()">Remove</button>
<button onclick="reset()">Reset</button>
</div>
</wrapper>
Site open in iframe:
<script>
function add_rynkeby() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Rynkeby");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function add_cocio() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Cocio");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function remove() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
<script>
function reset() {
var list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
}
</script>
<wrapper>
<button onclick="add_rynkeby()" class="inventory_button" target="index.html">Rynkeby</button>
</wrapper>
So I want the buttons from the iframe site to display it's name into the "checkout" div on the index page.
To have the page in the iframe communicate information to the parent page, use the postMessage API. MDN page is https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage but searching for "postmessage api" will turn up many guides.
The general idea is:
the iframed page's JS sends a message when the button is clicked
the parent page's JS listens for messages, and responds in some way when it recognizes a received message as coming from the iframe
That "recognizes a received message as coming from the iframe" is an important security point: you'll need to set things up so that the parent page only trusts the messages you intend it to trust. Most guides to the API will cover that.
i want to update div content (content form textarea of main page) of iframe on button click.
up till now i'm able to update div content (content from textarea of main page) of iframe but its done only on page load, i want to change content on button.
my script working on page load
$(function(){
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
})
my script not-working on button click but alert called with latest text from textarea
function myFunction() {
var x = document.getElementById("myTextarea").value;
alert("called" + x);
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
}
iframe in modelpopup
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:90%;height:100%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Html Preview</h4>
<button type="button" class="btn btn-default" onclick="myFunction()">Refresh</button>
</div>
<div class="modal-body">
<iframe id="prev" src="http://localhost:8084/page/htmlpreview" style="border:none;width:100% !important;height:1025px!important;"><p>Your browser does not support iframes.</p></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
any suggestions...
In the OP code there's no <textarea> just a BS modal. According to the OP code the <textarea> should be on the parent page (in demo: index.html) and the div#demo is on the child page (in demo: htmlpreview.html.) So in the demo we have:
the parent page (index.html) with textarea#text0 and a <button>
and the child page (htmlpreview.html) that resides within iframe#prev
on the child is div#demo
When the <button> is clicked the onevent attribute invokes the event handler xFunction().
When xFunction() is invoked it will:
get the value of textarea#text0 [var x = $('#text0').val();]
access iframe#prev contents [$('#prev')..contents()...]
then find div#demo [....find('#demo')...]
and set div#demo text content to the value of textarea#text0 [....text(x)]
The demo doesn't function due to SO security measures. Review this Plunk instead.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id='text0' rows='5' cols='70'></textarea>
<button type="button" onclick="xFunction()">Refresh</button>
<iframe id="prev" src="htmlpreview.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function xFunction() {
var x = $("#text0").val();
$('#prev').contents().find('#demo').text(x);
}
</script>
</body>
</html>
htmlpreview.html
<!DOCTYPE html>
<html>
<head>
<style>
#demo {border:3px solid red}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>
The above two scripts change to this one script and its working perfect
i have to reload iframe the make desire div empty then edit content.
below is the working script.
function myFunction() {
var ifr = document.getElementsByName('Right')[0];
ifr.src = ifr.src;
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').empty();
f.contents().find('#demo').append(x);
})
}
I am not sure this can be done by handling the DOM of the iframe as you might expect. According to this answer
However according to some other answers in the above link or this you could change the entire content of the iframe with what the content you want. (Including the change that you want.) I know this doesn't seem as the best solution but keep it in mind in case you don't find anything else.
One link with such a logic is this. Here you can get the innerHTML of the iframe and possibly find from the string the literal you want to change and set the new content as the iframe content.
The helping code from the link that shows the logic is this:
function get_iframe(ifr_id) {
// gets the object that refers to the iframe, uasing its id
var myIFrame = document.getElementById(ifr_id);
// Apply the property "contentWindow" to myIFrame object
// In this way we get the iframe content
var content = myIFrame.contentWindow.document.body.innerHTML;
alert("Content: \n" + content); // Displays an Alert with the data from iframe
// Define a new text that will replace the content of the iframe
content = '<font color="blue">Text added with Javascript, from the main page</font>';
// Modify the iframe content
myIFrame.contentWindow.document.body.innerHTML = content;
}
<center>
<button type= "button" onclick="myFunction()">Things To Do in Miami</button>
<div id="loadiframehere">
<iframe id="myframe"src="https://thingstodo.expedia.com/miami-florida-activities/" width="450" height="275" > </iframe>
</div>
</button>
<script>
function myfunction(){
var x = document.createElement("IFRAME")
set.attribute("src","http://www.miamigov.com/home/");
set.attribute("width","600")
set.attribute("height","400")
document.getElementByID("myframe").src="http://www.miamigov.com/home/"
document.getElementByID("myframe").width="300";
document.getElementByID("LOADHERE").appendchild(x);
}
</script>
</center>
</section>
This was the code my teacher gave us to copy but I did and the button isn't working. iframe only appears beside it before I click the button.
Here's the fix. Your code was completely wrong. You have to be aware of that Javascript is Case sensitive. getElementByID is different than getElementById.
also, you created a "x" element to be an iframe, but you also created an iframe in the html and your "set" attributes were not attached to any element. You created a function called "myFunction", but on the buttong you were calling "myfunction". Again, javascript is Case Sensitive.
You should study Javascript syntax.
function myfunction(){
var x = document.createElement("IFRAME");
x.setAttribute("src","http://www.miamigov.com/home/");
x.setAttribute("width","600");
x.setAttribute("height","400");
document.getElementById("loadiframehere").appendChild(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button type= "button" onclick="myfunction()">Things To Do in Miami</button>
<div id="loadiframehere">
</div>
</center>
Hi there I am trying to use Javascript to toggle the background image of a div when clicked
This is what I have done to try and achieve this:
My code is as follows
HTML:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
Instructions
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>Enter in your search parameters by clicking on the title of... </p>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
Colour
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
[wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
</div>
</div>
</div>
Javascript:
function changeArrow(index)
{
var arrowID = "Accordian" + index + "Title";
document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
However nothing happens when I click on a div that contains onclick="runAccordion(index);"
What am I missing here?
runAccordion is maybe overriding or blocking changeArrow, depending on the structure of your HTML. Try combining them in the same onclick listener (runAccordion(1);changeArrow(1);) and see what happens there.
Also, if you've fixed this, check your image path.
EDIT
You have a typo:
var arrowID = "Accordian" + index + "Title";
should be:
var arrowID = "Accordion" + index + "Title";