When I use below code block for testing,
I write my original HTML which starts with <xsl:key name="Name" match="/NewSet/ps1/Name/text()" use="." /> into first box, I get the result from third box which is names "HTML Mode of the IFRAME" like <xsl:key name="Name" match="/NewSet/ps1/Name/text()" use="." ></xsl:key>
Result is with out / tag, how can I prevent this problem.
I think this is about text engine of browsers? Isn't it?
<html>
<head>
<title>Editable IFRAME test</title>
</head>
<body onload="SetEditable()">
<b>Set your original HTML content here:</b><br />
<textarea id="htmlArea" style="width: 783px; height: 189px"></textarea>
<br />
<input type="button" onclick="CreateHtml();return false;" value="Set Content in the IFRAME">
<br />
<b>Editable IFRAME element:</b>
<br />
<div style="width: 800px; height: 600px; border: 1px solid red;">
<iframe style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 100%;
padding-right: 0px; height: 100%; padding-top: 0px" frameborder="0" src="javascript:void(0)"
id="editor"></iframe>
</div>
<input type="button" onclick="ShowIFRAMEHTML();return false;" value="Show IFRAME HTML">
<br />
<b>HTML Mode of the IFRAME:</b>
<br />
<textarea id="htmlMode" style="width: 783px; height: 313px"></textarea>
<script type="text/javascript">
var editor1 = document.getElementById("editor"); //reference to the IFRAME element
var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content
var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content
var oDocument = editor1.contentWindow.document;
var sMarkup = "<html><head><title>New Document</title></head>" +
"<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
" </body></html>";
function SetEditable() {
oDocument.open();
oDocument.write(sMarkup);
oDocument.close();
oDocument["designMode"] = "on";
oDocument.execCommand("2D-Position", false, true);
}
function CreateHtml() {
oDocument.body.innerHTML = htmlArea1.value;
htmlMode.value = oDocument.body.innerHTML;
}
function ShowIFRAMEHTML() {
alert(oDocument.body.innerHTML);
}
</script>
</body>
</html>
No, it's about how the value for innerHTML is created.
You put the HTML code in the iframe, which causes it to parse it into elements. Then you get those elements as HTML, which will create new HTML code from the elemtns, not return the original string that was used to create the elements.
If you test this in different browsers, you will see that you get different results. Some browsers may for example capitalise the tag names, rearrange the attributes, or even transform the elements to some valid HTML element or surround it with HTML elements to make it a valid document.
If you want the result as a self closing tag, you need to put an XHTML document (or perhaps an HTML5 document) in the iframe, otherwise it will be returned as HTML, which doesn't have any self closing tags.
Related
How would I be able to change the site in an iFrame to the value in an input field.
I want to do something like this:
iframe {
height: 320px;
width: calc(100vw - 24px);
resize: both;
overflow: auto;
}
<input type="text"/>
<button type="submit">🔎</button><br>
<iframe src="https://xijxaj.glitch.me/new/index.html">
If I got you right, you want to change the iframe source using text url in the text input. You can use JavaScript to do this.
<script>
document.querySelector("button").addEventListener("click", ()=>{
let src = document.querySelector("input").value;
document.querySelector("iframe").setAttribute("src", src);
});
</script>
In the code above, we add an event listener when you click the submit button, it will get the value inside the your input and set the iframe src attribute to it.
If you are using this as part of a form, you can change the event listener from "click" to "submit" and it will do the same.
You can do this with jquery:
$('input#url').on('propertychange paste keyup',function(){
var url = this.value;
$('#frame').attr('src', url);
});
iframe {
position:fixed;
top:7;
left:0;
bottom:0;
right:0;
width:100%;
height:90%;
border:none;
margin:0;
padding:0;
z-index:99999;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>display-webpage-in-iframe-dynamically</title>
</head>
<body>
<input type="text" id="url" name="url" value="https://">
<iframe src="" id="frame"></iframe>
</body>
</html>
I Develop a marquee which continuously moves to upward direction.
But what the exact problem is after finishing scrolling last image there is a huge gap between first image and last image. I just want to remove the trailing space which additionally add to the bottom of the last image. Is anybody help me to figure out the solution. Thanks in advance.
HTML :
<div style="margin-left:760px;border:0px;height:300px; width:265px;">
<marquee bgcolor="transparent" scrollamount="8" direction="up" width="265px;" style="float:left; position:absolute;" loop="true" height="300px" onmouseover="this.stop()" onmouseout="this.start()">
<img src="http://s30.postimg.org/bab6pd5wd/i05.jpg" width="220" style="z-index:11;" />
<br>
<img src="http://s30.postimg.org/84qkz5na5/i06.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/nxvjfma71/i07.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/lf9uexogt/i08.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/g6eth261p/i09.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/wvg9cz2n1/i10.jpg" width="220" />
<br>
</marquee>
</div>
What i did is just here : http://jsfiddle.net/vivekbhintade/xuwN2/13/
Remove the last <br> from your marquee should do it, plus check your css and make sure that there is no margin added to images there.
As others have pointed out, using the <marquee> tag is really bad practice nowadays. There are lots of very nice jquery marquee plugins if you have a look around.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var zxcMarquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
o=this['zxc'+id]={
obj:obj,
mde:mde[0],
sz:sz
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this['zxc'+id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
zxcMarquee.init({
ID:'marquee1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
zxcMarquee.init({
ID:'marquee2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
}
if (window.addEventListener)
window.addEventListener("load", init, false)
else if (window.attachEvent)
window.attachEvent("onload", init)
else if (document.getElementById)
window.onload=init
</script></head>
<body>
<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
</body>
</html>
I have a content editable HTML File, an Editor.
Whenever I insert an image into the editor or remove one from the editor, I want to show an alert.
How can I do this? Any event I have to handle. I can keep track of inserting the image, but how do I keep track of removed images?
I want to calculate the total size of images in my editor - the size of preloaded images (if any) + inserted image size, as well as the total number of images.
<html>
<head>
<script type="text/javascript">
function InsertImage() {
var imagePath = "D:/\images/\Desert.jpg";
var imageInfo = "<img src='" + imagePath + " ' width='200' height='200'>";
document.execCommand('InsertHTML',false,imageInfo);
}
</script>
</head>
<body>
<input type="submit" value="Image" onClick="InsertImage()" />
<div id="EditBox" contentEditable="true"
style="border: solid 1px red; width: 600px; height: 300px;
overflow-y: scroll; overflow-x: scroll;">
</div>
</body>
</html>
Make addition or removal through a function of your own and show an alert in that function.
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.
Follow these steps then you can create custom styles for your file upload form:
1.) This is the simple HTML form(please read the HTML comments I have written here bellow)
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.) Then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of a styling without worrying how to change default styles.
I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
Same solution via Jquery. Works if you have more than one file input in the page.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
After looking around on Google for a long time, trying out several solutions, both CSS, JavaScript and JQuery, i found that most of them were using an Image as the button. Some of them were hard to use, but i did manage to piece together something that ended out working out for me.
The important parts for me was:
The Browse button had to be a Button (not an image).
The button had to have a hover effect (to make it look nice).
The Width of both the Text and the button had to be easy to adjust.
The solution had to work in IE8, FF, Chrome and Safari.
This is the solution i came up with. And hope it can be of use to others as well.
Change the width of .file_input_textbox to change the width of the textbox.
Change the width of both .file_input_div, .file_input_button and .file_input_button_hover to change the width of the button. You might need to tweak a bit on the positions also. I never figured out why...
To test this solution, make a new html file and paste the content into it.
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
Here's a simple css only solution, that creates a consistent target area, and lets you style your faux elements however you like.
The basic idea is this:
Have two "fake" elements (a text input/link) as siblings to your real file input. Absolutely position them so they're exactly on top of your target area.
Wrap your file input with a div. Set overflow to hidden (so the file input doesn't spill out), and make it exactly the size that you want your target area to be.
Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.
Here's the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
Browse
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
Use the clip property along with opacity, z-index, absolute positioning, and some browser filters to place the file input over the desired button:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
use uniform js plugin to style input of any type, select, textarea.
The URL is
http://uniformjs.com/
How can i put and an html form (text box and buttons) within an image (jpg). Please provide the css, html code.
Note: Image should be in the background and should be in full dimensions.
You can also use this trick:
<form style="position: relative;">
<img src="mypicture.jpg" border="0" />
<div style="position: absolute; left: 0px; top: 0px;">
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
<button type="submit">Send</button>
</div>
</div>
Live test case is available here: http://jsfiddle.net/9UcZg/
Edit: in order to have the form contents centered, either hard code the width like this:
<div style="position: absolute; left: 0px; top: 0px; text-align: center; width: 450px;">
(updated test case: http://jsfiddle.net/9UcZg/2/)
Or use JavaScript to calculate the width "on the fly":
window.onload = function WindowLoad() {
var oImage = document.getElementById("MyFormBackground");
var oDiv = document.getElementById("MyFormContents");
var totalWidth = oImage.offsetWidth;
var contentsWidth = oDiv.offsetWidth;
oDiv.style.left = parseInt((totalWidth - contentsWidth) / 2) + "px";
}
For this to work you'll have to alter the HTML a bit, adding id to the image and the container div, here is the updated test case: http://jsfiddle.net/9UcZg/3/
what do you mean with 'within an image'?
do you want to use the image as form-background?
then something like this:
<html>
<head>
<style>
.formWithBackground {
background-image:url("url to image");
background-repeate:no-repeat;
background-position:...
}
</style>
...
<body>...
<form class="formWithBackground">
<input type="text".../><button>send</button>
</form>
....
should help
regards
gerhard
Put the code in a div, and give the div a background image.
<style type="text/css">
#picture {
background-image:url(myimage.jpg)
}
</style>
<div id="picture">
<form>
<input type="text">
<input type="submit">
</form>
</div>
The obvious answer is to have the jpeg image as the background of the element that contains the form fields.
CSS:
.myformbox {
background-image:url(myimage.jpg);
height:100px; /*or whatever the height of the image is*/
width:100px; /*ditto*/
}
HTML:
<div class='myformbox'>
<form ....>
....input fields here....
</form>
</div>
...or something like that.
I note your edit which says "image should be in full dimensions". That is still ambiguous language: do you mean "the box needs to be the full size of the image", or "the image needs to scale to the size of the box"?
For the first of those, see above, where I've added height and width parameters to the CSS.
For the second one however, you have a problem, which is that background image scaling isn't currently supported by CSS (yet!). Solutions to this are a bit more complex, but if this is the question you're asking, here is a page that might help.