please help me to solve this error
<input id="webadd" type="text"></input>
<div id="mydiv">
<iframe id="frame" src="" width="320px" height="480px"></iframe>
</div>
<button id="button">Load</button>
<script>
$(document).ready(function(){
$("#button").click(function () {
var web-add=document.getElementById('#webadd').value
$("#frame").attr("src",+web-add);
});
});
</script>
this code contain error
Remove - from variable name, the + before variable, and the # before the id in getElementById
<script>
$(document).ready(function(){
$("#button").click(function () {
var webadd=document.getElementById('webadd').value
$("#frame").attr("src",webadd);
});
});
</script>
try removing '+' in
$("#frame").attr("src",+web-add); //remove '+' in this line
You need to remove the "+" before web-add in your script, and the "-" while declaring variable.
That gives :
var webadd=document.getElementById('#webadd').value
$("#frame").attr("src",web-add);
Full code :
<input id="webadd" type="text"></input>
<div id="mydiv">
<iframe id="frame" src="" width="320px" height="480px"></iframe>
</div>
<button id="button">Load</button>
<script>
$(document).ready(function(){
$("#button").click(function () {
var webadd=document.getElementById('#webadd').value
$("#frame").attr("src",web-add);
});
});
</script>
Related
hi I'm trying to target a button to a div using iframe .. I tried so much but no result...
<html>
<body>
<div id="one">
<button type="submit" onclick="ShowResult()" formtarget="result"> Calculate </button>
</div>
<div id="two">
<iframe name="result"></iframe>
</div>
</body>
javascript:
function ShowResult()
{
document.write("someword");
}
it seems true but when I click the button it open a blank page showing what in the function.. help ??
You are missing alot,
First do not practice "onclick()" anymore.
Second do not practice "document.write" anymore.
I have rewrite your code, enjoy..
HTML
<div id="one">
<button type="submit" id="functionThis" formtarget="result"> Calculate </button>
</div>
<div id="two">
<iframe id="iframe1" name="result"></iframe>
</div>
JS
document.getElementById("functionThis").addEventListener("click", showResult, false);
function showResult() {
var htmlString = "<body>Some Words</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src = "javascript:'" + htmlString + "'";
}
Fiddle
working fiddle
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>
I have a variable like this:
var a=$('#div2').html();
after some code div be changed, so 'a' be changed too, but i want first value of 'a'.
Thanks.
Try this:
HTML:
<div id="div2"> Sample </div>
<input type="button" onclick="change();" value="change" />
SCRIPT:
<script>
var a = $('#div2').html();
function change() {
$('#div2').html('Change');
var previous = a;
a = $('#div2').html();
alert(previous);
}
</script>
DEMO
I have a small image in an HTML page. If I click on the image it should be converted into a textbox and two links have to appear besides that text box. Can anyone help me with a Javascript function which I can call on onClick?
Please find the attached image for better understanding.
HTML
<div class="resim">
<img class="image" src="image.png"/>
</div>
<div class="txt">
<input type="text"/>
</div>
CSS
.txt{
display:none;
}
.resim{
width:100px;
height:100px;
cursor:pointer;
}
JS
$(document).ready(function(){
$(".resim").click(function(){
$(".txt").show(function(){
$(".resim").hide();
});
});
});
Demo
http://jsfiddle.net/6W8nd/1/
try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text">submit
cancel</span>
<script>
function z()
{
document.getElementById("my").style.display="none";
document.getElementById("dis").style.display="";
}
</script>
Here is a jquery implementation:
HTML:
<div id="content">
<img id="image" src="image.png" onclick="transition()"/>
<div id="input">
<input type="text"/>
Submit
Clear
</div>
JS:
$(document).ready(function(){
$("#input").hide();
$("#image").click(function(){transition()});
});
function transition(){
$("#image").fadeOut();
$("#input").fadeIn();
}
Working fiddle : http://jsfiddle.net/6W8nd/
Try following code.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click on Image change it into text input.</p>
<script type="text/javascript">
function showStuff() {
// show text input
document.getElementById('mytextbox').style.display = 'block';
// hide image
document.getElementById('myimage').style.display = 'none';
}
</script>
<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>
</td>
</body>
</html>
Please go through following jsfiddle for desired output link:
Demo
For your information you need to add jQuery code like:
$( ".img-class" ).click(function() {
$(this).hide();
$(".text-class").show();
});
Html code like:
<p class="img-class">
<img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>
<p class="text-class" style="display:none;">
<input type="text" name="textbox"> Submit Cancel
<p>
ty this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.container{position: relative;}
.Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
.myform{display: none;position: absolute; top:5px; left: 0}
</style>
<script>
$(document).ready(function() {
$( ".Myimg" ).click(function() {
$( ".myform" ).fadeIn( "slow", function() {
$( ".Myimg" ).fadeOut( "slow");
});
});
$( ".cancel" ).click(function() {
$( ".Myimg" ).fadeIn( "slow", function() {
$( ".myform" ).fadeOut( "slow");
});
});
})
</script>
</head>
<body>
<div class="container">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
<div class="myform">
<form action="index.html" >
<input type="text" id="myInput" />
submit
cancel
</form>
</div>
</div>
</body>
</html>
Here is a bit more of a generic solution to work on.
Here is a demo, click on the image: http://jsfiddle.net/upGPg/
function InlineEditor(){
var fieldName;
var toggleElement;
var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
var editorElement;
this.renderEditor = function (){
var node = document.createElement("div");
node.style.display = 'none';
node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
return node;
}
this.setFieldName = function (fieldName){
this.fieldName = fieldName;
}
this.isEditorVisible = function(){
return (this.editorElement.style['display'] != 'none');
}
this.onToggleEditor = function(){
if(this.isEditorVisible())
this.editorElement.style.display = 'none';
else
this.editorElement.style.display = 'block';
}
this.setToggleElement = function(element){
this.toggleElement = element;
var self = this;
element.addEventListener("click", function(){
self.onToggleEditor();
});
this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());
}
}
testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));
I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>
This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});