I want to make a js to replace desire text within an iframe. Here is my code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style>
.header{
width:100%;
height:30px;
background:#f1f1f1;
position: fixed;
z-index: 100;
margin-top: -20px;
font-family:Calibri, Arial;
}
.urlBox{
margin-top: 4px;
vertical-align: middle;
width: 600px;
}
.btn{
margin-top: 4px;
vertical-align: middle;
}
#iframe1{
margin-top:20px;
}
#newifrm{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
margin-top: 20px;
}
.txt{
margin-top: 4px;
vertical-align: middle;
}
button{
margin-top: 4px;
vertical-align: middle;
height:24px;
width:33px;
}
</style>
<script>
function goAction(){
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", document.getElementById("url1").value);
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
ifrm.frameBorder=0;
ifrm.id="newifrm";
document.getElementById("iframe1").appendChild(ifrm);
}
</script>
</head>
<body>
<div class="header">
<span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
<span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
<span><input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<div id="content">
<div id="iframe1"></div>
</div>
</body>
</html>
I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.
You can find this example about how to modify an iframe content in jQuery Documentation:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
You should use .contents() function.
Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.
First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="header">
<span>
<input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span>
<input id="go" class ="btn" type="button" value="GO"></span>
<span>
<label for="search">Search for:</label>
<input name="search" id="search" class="txt"></span>
<span>
<label for="replace">Replace with:</label>
<input name="replace1" id="replace1" class="txt"></span>
<span>
<input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>
<script>
$(document).ready(function(){
$("#go").click(function(){
$("#newifrm").attr('src', $("#url1").val());
})
});
</script>
</body>
</html>
Related
So I'm working on a small desktop app for myself, and for some reason I can't get the buttons to do anything. I am using skeleton CSS. I was able to get buttons working using this method previously, but for some reason it's no longer working.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="skeleton.css" type="text/css">
<head>
<h3>Which Term is Correct?</h3>
</head>
<body>
<div class="form">
<label>First Search Term</label>
<input type="text" name="name">
<label>Second Search Term</label>
<input type="text" name="email">
<input id="subButton" type=submit value="Submit">
<input id="histButton" type=submit value="History">
<input id="exitButton" type=submit value="Terminate">
</div>
<script>
const remote = require('electron').remote;
document.querySelector('#exitButton').addEventListener('click', () => {
let w = remote.getCurrentWindow()
w.close();
})
</script>
</body>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
text-align:center
}
.form label{
display: inline-block;
text-align: right;
margin-left: auto;
margin-right: auto
}
.form input{
display: inline-block;
text-align: left;
margin-left: auto;
margin-right: auto
}
</style>
</html>
You typed
<input id="subButton" type=submit value="Submit">
You should be typing
<input id="subButton" type="submit" value="Submit">
Notice the quotation marks around submit. See if this solves it.
I'm trying to make a login form, and I can't figure out how to put an image in with the placeholder. The current code I have is
<span class="material-icons" style="font-size:20px; color: gray; float: left;">person
<input placeholder="username" type="text">lock
</span>
<span class="material-icons" style="font-size:24px; color: gray; float: left;">lock
<input placeholder="Password" type="text">
</span>
...But none of that has worked to do what I need.
I would like the image to be inside of the input, not in front of it.
Try using this code
It will show an image as a placeholder in the text field, and it will hide when you click on the text field.
input#search {
background-image: url('https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png');
background-size:contain;
background-repeat: no-repeat;
text-indent: 20px;
/* Extra Styling */
padding: 5px 3px;
transition:0.3s;
}
input#search:focus {
background-image:none;
text-indent:0px
}
<input type="text" id="search" name="search" Placeholder="Search" />
Just use the background property with class in your CSS.
<html>
<head>
<title></title>
<style type="text/css" media="screen">
input.test{
padding: .5em;
}
input.icon[value="SEARCH WORDS"]{
padding-left:48px;
background:
url(https://material.io/icons/static/images/icons-180x180.png) no-repeat 8px center;
}
</style>
</head>
<body>
<input class="icon" value="NOT SEARCH WORDS">
<input class="icon" value="SEARCH WORDS">
</body>
hope that helps
I've been looking around and didn't manage to resolve my case.
What I want is JS to change color based on user input value. w3schools have a library w3color.js and you simply call it by using div data-w3-color="ncs(3010-B10R)"
This is what I got:
<!DOCTYPE html>
<style>
div {
border: 3px solid #FFF;
padding-top: 30%;
padding-right: 30%;
padding-bottom: 30%;
padding-left: 30%;
}
</style>
<body>
<input type="text" id="myText" value="ncs code here..">
<button type="button" onclick="myFunction()">Try it</button>
<div data-w3-color="ncs(3010-B10R)">
</div>
<script>
function myFunction() {
document.getElementById("myText").value;
// change div data-w3-color to ncs code input
}
</script>
<!--
https://www.w3schools.com/colors/colors_ncs.asp
-->
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<script>w3SetColorsByAttribute();</script>
</body>
</html>
I have given an id to the div and changing the data-w3-color attribute and calling the w3SetColorsByAttribute() function each time.
function myFunction() {
var color = document.getElementById("myText").value;
// change div data-w3-color to ncs code input
document.getElementById("ncsColor").setAttribute("data-w3-color", 'ncs('+ color +')')
w3SetColorsByAttribute();
}
div {
border: 3px solid #FFF;
padding-top: 30%;
padding-right: 30%;
padding-bottom: 30%;
padding-left: 30%;
}
<input type="text" id="myText" placeholder="ncs code here..3010-B10R">
<button type="button" onclick="myFunction()">Try it</button>
<div id="ncsColor" data-w3-color="ncs(3010-B10R)">
</div>
<script src="https://www.w3schools.com/lib/w3color.js"></script>
I am trying to create a simple live LAN messaging web application. I am using HTML, CSS, Javascript, Socket.io, and JQuery to do this. I have built a similar application to this before, so I have some experience with these types of projects. I have no idea why, but every time I try to execute any javascript command, it doesn't work. I have a button trying to start a function called joingame(). It says that the function is undefined. I also tried to define a variable as "test value", and it keeps coming up as ''. If anybody could help me out, it would be great! It's probably something really basic, but I can't figure it out. Thank you!
<!DOCTYPE HTML>
<html>
<head>
<style>
#start {
width: 400px;
height: 120px;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
#chat {
width: 80%;
height: 80%;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div id="start">
<center>
<h2>Enter your username below:</h2>
<input type="text" placeholder="Username here..." id="usernameid" />
<input type="button" value="Submit" onclick="joingame()" >
</center>
</div>
<div id="chat" style="display: none;">
<center>
<div id="chatbox">
<div id="inputarea">
<textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2' />
<input type="button" value="Send" onclick="sendchat()" id="sendbut" />
</div>
</div>
</center>
</div>
<script src="socket.io.js"></script>
<script src="jquery-3.2.0.js"></script>
<script type='text/javascript'>
var socket = io();
var usernameasdf = "test value";
function joingame() {
usernameasdf = document.getElementById("usernameid").value;
socket.emit('player', usernameasdf);
document.getElementById("start").style.display = "none";
document.getElementById("chat").style.display = "inline";
}
socket.on('player', function(name) {
alert(name);
});
function sendchat() {
alert("chat sent");
}
</script>
</body>
</html>
Textare isn't self closing. Check this SO answer
When I changed closing tag, it worked for me in firefox as <textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2'></textarea>
I positioned a div to the footer of the page and want it to be made visible when the button is clicked. It doesn't seem to be working. What am i doing wrong? Code is below.
<script language="text/javascript">
function timedMsg()
{
var t=setTimeout('ff()',3000)
}
function ff(){
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: none; visibility: hidden">Footer</div>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
Well, first of all to embed javascript into html page you should use the following syntax:
<scrpt type="text/javascript">/* code here */</script>
Note: type, not language!
Second, why do you use the t variable? What is it for?
So the working and more complete example would be:
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
setTimeout('ff()',3000)
}
function ff()
{
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
</head>
<body>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: block; visibility: hidden">Footer
</div>
</body>
</html>