I'm trying to do screen shot paste in my website using firefox. It can be done easily by giving the div as contenteditable='true'.
html
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
I can paste images from clipboard to particular div. Now the issue starts, how do I get the value from the div. For an example my user paste screenshot in the div and i want it to be save in db. If it normal textbox I can get the textbox value. Is there any way I can convert the DIV to image. Any advice and any referral links is highly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var text = document.getElementById('apDiv1').innerText;
}, false);
To replace the div:
document.addEventListener('DOMContentLoaded', function(){
var el = document.getElementById("apDiv1");
var img = document.createElement("img");
img.setAttribute('src', '...');
el.parentNode.replaceChild(el, img);
}, false);
Related
I have successfully created an Ace editor before, but recently I am making a website called CodeProjects, and I want to put an Ace editor in. Whenever I try, it only shows the text function foo(items) {
var x = "All this is syntax highlighted";
return x;
}. On the page http://ace.c9.io/#nav=embedding&api=ace, it says you only need the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
but when I try to embed it (or even just make the editor, not the site), again, it only shows function foo(items) { var x = "All this is syntax highlighted"; return x; }
Any suggestions?
it also says to copy files into your project. If you don't want to do that, include script from cdn
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"
type="text/javascript" charset="utf-8"></script>
see http://jsbin.com/ojijeb/165/edit
You need to put the content outside of the editor div [or fetch the content on page load using AJAX]. Either way, you then load the content into the editor with JavaScript: editor.setValue("hello world");.
To set the height of the editor, you resize the div it lives in, then call the editor's resize method.
var div = document.getElementById('editor');
div.style.height = some_multiple_of_the_line_height_for_tidiness;
editor.resize();
In my experience, you need to change div to pre. Just using pre instead of div in following way should solve your problem.
<pre id="editor" >
</pre>
I have anchors on a page that displays a different background image on mouse hover and mouse out. I have preloaded the images to avoid flickering and re-requesting the images from the server on mouse hover/out. The scripts works fine on IE8/FF but Chrome behaves differently. In the latest version of Chrome, the first time I hover on the anchor, the image is re-requested from the server causing a flicker, why is this? Succeeding mouse hover/out works fine and there is no flicker.
Code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
body:after
{
content: url('/images/1.png') url('/images/1a.png')
position: absolute;
top: -9999px;
left: -9999px;
}
.imageHover
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1.png') no-repeat;
}
.imageOut
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1a.png') no-repeat;
}
</style>
<script language="javascript" type="text/javascript">
var oneSelected = new Image();
var oneUnselected = new Image();
oneSelected.src="/images/1.png";
oneUnselected.src="/images/1a.png";
function OnImageMouseOver(target) {
$(target).toggleClass('imageHover', true);
$(target).toggleClass('imageOut', false);
}
function OnImageMouseOut(target) {
$(target).toggleClass('imageHover', false);
$(target).toggleClass('imageOut', true);
}
</script>
</head>
<body>
</body>
</html>
Converted anchor to image, but it still won't work in Chrome:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
if (document.images) {
var oneSelected = new Image();
var oneUnselected = new Image();
oneUnselected.src = '/images/1a.png';
oneSelected.src = '/images/1.png';
}
function OnRatingMouseOver(target, newSrc) {
$(target).attr('src', newSrc);
}
function OnRatingMouseOut(target, newSrc) {
$(target).attr('src', newSrc);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:400px;">
<div id="inputDiv">
<table id="inputTable">
<tr>
<td>Rating</td>
<td>
<img id='rating1Anchor'
src='/images/1a.png'
onmouseover="OnRatingMouseOver(this, '/images/1.png');"
onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
onclick="OnRatingClick(this, '/images/1.png', 1);">
</td>
</tr>
</table>
</div>
</div>
</body>
<html>
It may not be preloading them at all, as it's not displaying them it's just adding to the DOM? Try the following code to preload your images.
var preload = new Array();
function preload_image(){
for (var x = 0; x < preload_image.arguments.length; x++)
{
preload[x] = new Image();
preload[x].src = preload_image.arguments[x];
}
}
I have to say I very much doubt that the pngs are actually being rerequested from the server in Chrome. Can you post a screenshot of the Timeline in dev Tools showing the request going off twice? :) I think it's far more likely that you're just experiencing a slight hesitation during the repaint.
Is there a reason you aren't using image sprites? They are the canonical solution to this problem. The idea is simply that a single image is loaded that contains both the normal and "hover" or "active" states. The portion of the graphic shown gets swapped out using css "background-position". Here's a tutorial, and here's a table of support for "background-position" which goes all the way back to IE4.
Code should look something like this:
<html>
<head>
<style>
#myCoolLink {
background-image:url('img/image.gif');
background-position:0px 0px;
}
#myCoolLink:hover,
#myCoolLink.active {
background-position:0px -72px; //depending of course on the image
}
</style>
</head>
<body>
</body>
</html>
No script required, and it's much terser. The other great advantage of this is that you can still programmatically change the image over to the "hover" anytime you want by toggling the "active" class on the link, if you ever need to.
In my web application, I have tabs and if any of the tab is clicked, the corresponding page will be displayed. But even after the tab is selected, the hyperlink button is enabled. My need is that if i do mouse over on the selected tab, the normal pointer should display instead of hyperlink. please help me suggesting the solution.
regards,
Jeya
Either
<a>you can't click me</a>
or
<a href='...' style='cursor:default'>you can click me but the cusror doesn't indicate this</a>
Here is a complete sample :
<html>
<head>
<style type="text/css">
a:target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1">Anchor1</a>
<a id="anchor2" href="#anchor2">Anchor2</a>
<a id="anchor3" href="#anchor3">Anchor3</a>
</body>
</html>
When you click any of the link it'll become the current target of the page, then the a:target rule will be applied to it, setting the default cursor.
EDIT for IE :
Changing my original sample, here is another implementation using jQuery, tested with IE8 but not IE7.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var hash = null;
var updateAnchors = function()
{
hash = window.location.hash;
$(".tab").removeClass("target");
$(".tab[href=" + hash + "]").addClass("target");
};
window.setInterval(function ()
{
if (window.location.hash != hash)
{
updateAnchors();
}
}, 100);
updateAnchors();
});
</script>
<style type="text/css">
.target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1" class="tab">Anchor1</a>
<a id="anchor2" href="#anchor2" class="tab">Anchor2</a>
<a id="anchor3" href="#anchor3" class="tab">Anchor3</a>
</body>
</html>
You can select an element using javascript:
document.getElementById('element-id');
Once you've done that, you can modify the style within that element:
document.getElementById('your-element').style.cursor = 'default';
Now your cursor should look normal.
Use JavaScript:
document.getElementById("myATagId").style.cursor = "default";
I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.