I am using an iFrame as a text editor and want to ensure that the first part of the body is always a p tag. As such, I have it set so when users first click on the body it will insert
<p><br></p>
This works, unless the user holds down the backspace button. Once the user runs out of plaintext to backspace, it removes the tags above.
I have captured the event for backspace, but how can I prevent the users from removing the paragraph tags?
I got 11 options (I'm assuming you are using jQuery).
First, capture the keydown event, and if the value is equal to the default value, prevent the action. This will probably be inside to source html of the iframe.
$('#editor').unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
event.preventDefault();
}
});
Option two: just make the element that's editable a div instead.
I prefer to avoid the use of an iframe. They make things needlessly complicated (imo).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript">
function DoEdit(){
var idContent = document.getElementById('idContent');
idContent.contentEditable = "true";
//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
//editor.designMode = "on";
//editor.body.contentEditable = "true";
//editor.contentEditable = "true";
}
function ShowContent(){
var contentValue = "<p><br></p>"+$('#idContent').html();
alert(contentValue)
}
$(document).ready(function(){
DoEdit();
$('#showContentBtn').click(function(){
ShowContent();
});
});
</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
<div id="idContent" style="text-align: left; width:100%; height: 100%">
</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>
Added a button in case there was some requirement to get the value for the content and keep those elements in it.
Option 3: If it needs to be inside the iframe, just set url for the above as the src for the iframe.
<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>
I hope that this will give you a few ideas you can work with inside your project.
Related
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
I have written code that creates a checkbox list where when i click the checkbox below my list of options i would like a link to show underneath that the user can click (show/hide) I cannot figure out why my code will not work. If the user unchecked the box the link disappears but nothing happens when i click my check boxes. I would like to do this fix in JQuery
<!DOCTYPE html>
<html>
<div class ="container">
<head></head>
<body>
<input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />
<label for="grp1"> group 1 </label>
<div>
<input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" >
group_2</label>
</div>
</body>
</html>
You'll have to use javascript to hide/show the wanted elements in html. There are many approaches to this. The most basic one would be something like
<!DOCTYPE html>
<html>
<body>
<div id="container">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("container").onclick = function (e) {
//check every box if it's checked
if (document.getElementById('grp1').checked) {
document.getElementById('url1').style.display = 'block';
} else {
document.getElementById('url1').style.display = 'none';
}
if (document.getElementById('grp2').checked) {
document.getElementById('url2').style.display = 'block';
} else {
document.getElementById('url2').style.display = 'none';
}
}
</script>
</body>
</html>
Of course you can use different approaches like creating the element in javascript then adding it to the html if you don't like the idea if existing hidden elements. You might also use loops to loop through checkbox element and simply show/hide the url accordingly. And more to make the code flexible on any number of boxes. Something like this
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="checkBoxContainer">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
</div>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("checkBoxContainer").onclick = function (e) {
var linkNumber = 1; //This is number of the first url element with ud url1
var containerChildren = document.getElementById("checkBoxContainer").children;
//loop through the children elements
for (var i = 0; i < containerChildren.length; i++) {
var oneChild = containerChildren[i]; //catch only one child in a variable
//simply filter the input elements which are of type checkbox
if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){
//Show or hide the url accordingly.
if (oneChild.checked) {
document.getElementById('url' + linkNumber++).style.display = 'block';
} else {
document.getElementById('url' + linkNumber++).style.display = 'none';
}
}
}
}
</script>
</body>
</html>
The onclick HTML attribute doesn't work that way. The attribute value is executed as javascript. You can make a js function to show/hide the link.
Hi you want to try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.group-link{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="jsParent">
<label for="grp1">
<input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/> group 1
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
</div>
<div class="jsParent">
<label for="grp2">
<input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/> group_2
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
</div>
<script type="text/javascript">
function showLink(el){
var parent = el.parentElement.parentElement;
var linkEl = getAnchorEl(parent);
if(linkEl){
if(el.checked){
linkEl.classList = linkEl.classList.value.replace('hidden', '');
}else{
linkEl.classList = linkEl.classList.value + ' hidden';
}
}
}
function getAnchorEl(parent){
var childrens = parent.children;
var linkEl = null;
for (var i = 0; i < childrens.length; i++) {
var childEl = childrens[i];
if(childEl.classList.value.indexOf('jsLink') > -1){
linkEl = childEl;
break;
}
}
return linkEl;
}
</script>
</body>
</html>
Your question is undoubtedly a duplicate but I am answering because I would like to help you identify issues with the code you posted.
I notice you have a <div>tag between your tag and tag. Why? This is a bit of an over simplification but as a general rule never put anything between your <html> and <head> tag and only place <div> tags inside your <body> tag. Also be mindful of how you nest your elements. That tag starts after and before .
Even if that were correct placement you close the before you close your div arbitrarily in the middle of your body tag. you should never have
<div>
<p>
</div>
</p>
Instead it should look like this
<div>
<p>
</p>
</div>
In your onClick attribute you have a random URL. That will not open a new window. You new too put some javascript in there.
<input onClick="window.open('http://google.com')">
Also your second label tag does not have an opening, just a </label> close tag
To answer your question - I suggest you look at the jQuery toggle function.
<input type="checkbox" id="displayLink" />
Google
<script type="text/javascript">
$("#displayLink").click(function(){
$("#googleLink").toggle();
});
</script>
As a general rule you should favor event handlers (such as the $("").click() posted above) to handle events (like clicking) as opposed to html attributes such as onClick.
I've iframe that i created dynamically in my html page and print button with event on click
to print iframe's content
but unfortunately it prints the whole page instead
but after long search
I've found some solutions like focus on iframe before fire print event
but it seems doesn't work on IE and MS Edge
it works in Chrome
the only solution that works with me is to open new window and copy iframe outerhtml in it and fire print event after the content loaded in new window
then close the new window immediately after the user take an action to print or cancel
but this solution doesn't look user friendly
so does it there any solution to print iframe content in IE and Edge
<html>
<head>
<title>IFrame Printing Issue</title>
<script type="text/javascript">
var g_iFrame;
function onLoad()
{
g_iFrame = document.createElement("iframe");
g_iFrame.id = "testFrame";
var style = g_iFrame.style;
style.border = "1px solid black";
style.width = "300px";
style.height = "200px";
document.body.appendChild(g_iFrame);
}
function setIFrameSrc()
{
g_iFrame.src = "Test.htm";
}
function printIFrameContent()
{
window.frames["testFrame"].contentWindow.focus();
window.frames.testFrame.contentWindow.print();
}
</script>
</head>
<body onload="onLoad();">
<button type="button" onclick="setIFrameSrc();">Set IFrame Src</button>
<br />
<button type="button" onclick="printIFrameContent();">Print IFrameContent</button>
<br />
<div style="border: 1px solid black; width: 300px; height: 200px;">
This is to test printing the content of an IFrame whose src is set dynamically.
</div>
</body>
</html>
You may first check if the user agent is IE:
function printIFrameContent()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf ("MSIE ");
var iframe = document.getElementById("testFrame");
if (msie > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.print();
}
}
Referred a similar answer on SO: https://stackoverflow.com/a/19639241/1500851
Hi I want to rewrite an image Src and Style element.
The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element.
I came up with this but I'm not good at javascript:
function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style.
Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose).
Any help is greatly apreciated!!
Thanks
update:
what I came up with so far is this:
function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;
for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}
window.onload = function()
{
ChangeImageSrc();
};
I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part):
onload="javascript:ChangeImageSrc()
Both don't work this far :(
Ok AffluentOwl, here's the HTML:
<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000" data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>
As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me).
The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code).
Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads.
<html>
<script>
function ChangeImageSrc() {
var div = document.getElementsByClassName("gallery-group images-1")[0];
var images = div.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
images[i].setAttribute("style", div.getAttribute("style"));
}
}
window.onload = ChangeImageSrc;
</script>
<div class="gallery-group images-1" style="width: 500px; height: 500px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
</div>
</div>
</html>
It would probably be helpful for you to look into the element selection functions in Javascript.
getElementById
getElementsByClassName
getElementsByTagName
querySelector
You may even like to use jQuery which makes selecting elements much easier. In jQuery you could replace the <script> code with the following for the same result as above:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var div = $(".gallery-group.images-1");
var images = div.find("img");
images.each(function() {
$(this).attr("src", $(this).attr("data-orig-file"));
$(this).attr("style", div.attr("style"));
});
});
</script>
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.