I'm a newbie in html and javascript. And I'm trying to take a screenshot of my page of html and save it as jpg or png file.
Here is my html image
I want to take a screenshot of right side(colored with gray) with those drag and drop divs by pressing Image Save button at the right corner from image.
How can I take a screen shot with html and javascript?
I saw some of html2canvas but that is not what I want. I think..
Does anybody have an idea for this?
Thanks,
p.s. if you want the code of my html, I can EDIT
You can only capture images or video frames as a screenshot using Canvas. But if you want to capture particular element on a web page try some library like this: html2canvas
Here is the code:
Note: Adjust dimensions carefully in drawImage() function
$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
html2canvas(document.getElementById("container"), {
onrendered: function (canvas) {
var tempcanvas=document.createElement('canvas');
tempcanvas.width=350;
tempcanvas.height=350;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,112,0,288,200,0,0,350,350);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS
link.download = 'screenshot.jpg';
link.click();
}
});
}
#container{
width:400px;
height:200px;
}
#rightcontainer{
width:300px;
height:200px;
background:gray;
color:#fff;
margin-left:110px;
padding:10px;
}
#leftmenu{
color:#fff;
background-color:green;
width:100px;
height:200px;
position:fixed;
left:0;
padding:10px;
}
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.drag{
width:40px;
height:20px;
background-color:blue;
z-index:100000;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="takeScreenShot()">Snapshot</button>
<div id="container">
<div id="leftmenu">
Left Side
<div class="drag">
</div>
<div class="drag">
</div>
<div class="drag">
</div>
Drag----------->
&
Click Snapshot
</div>
<div id="rightcontainer">
Right Side
</div>
</div>
Related
Hey I'm kinda a beginner in JavaScript I need help making the up.onclick functions rotate the circle, I know my code is a bit messy, but I just want the easiest way to make dat up button rotate the circle any help will be appreciated
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jkk</title>
<style type="text/css">
body{
background:blue;
}
#every{
height:350px;
width:350px;
background:grey;
border-radius:50%;
margin-top:100px;
transform:rotate(0deg);
position:relative;
z-index:5;
}
#s1{
padding-left:120px;
color:blue;
transform:rotate(270deg);
}
#s2{
/*color:blue;*/
text-align:left;
display:block;
position:relative;
top:140px;
transform:rotate(45deg);
transform:rotatex(180deg);
}
#s3{
display:inline-block;
position:relative;
top:120px;
left:290px;
/*color:blue*/
}
#s4{
text-align:center;
position:relative;
top:270px;
/*color:blue;
transform:rotate(0deg);*/
}
.relative{
width:80px;
height:40px;
background:white;
position:relative;
bottom:220px;
left:270px;
z-index:3;
}
/*#s1, #s2, #s3{/* comment:
making every outside of s4
invisible*/
</style>
</head>
<body>
<div id="every">
<div id="s1">slide 1</div>
<span id="s2">slide 2
</span>
<span id="s3">slide 3
</span>
<div id="s4">slide
4</div>
</div>
<input type="button"
value="up" id="up"
width="60px">
<input type="button"
id="down" value="down">
<div class="relative">
</div>
<script>
var
up=document.getElementBy
Id("up");
var down=
document.getElementById
("down");
var s=
document.getElementById
("s3");
var
circle=document.
getElementById("every");
This is the place I just get confused, and lost, why is the down.onclick event working but the up.onclick isn't, as u can see below the down.onlick and up.onclick have the similar codes
down.onclick=function (){
circle.style.transform+=
/*circle.style.transform +
*/"rotate(90deg)";
}
up.onlick= function(){
circle.style.transform=
circle.style.transform +
"rotate(-90deg)";
}
/*newCircleValue;*/
//circleWithCssStyl
e=newCircleValue;
/*var
g=circle.style.transform
="rotate(90deg)";
g= g "rotate(90deg)";*/
/*every.innerHTML=
every.style.transform;*/
//var newCircleValue=/*
circleWithCssStyle*
/circle.style.transform
+ "rotate(90deg)";
</script>
</body>
</html>
Spelling Mistake in up function! It should be onclick
You spelled "onclick" as "onlick" in the third set of code you showed.
Currently I am working on a sample project which is a single page website where all the details are divided in sections.
I am calling all the section through internal linking and I want to modify the url structure of those links from like "example.com/#section-1" to "example.com/about-us". So, how can I achieve this?
The following is a sample code structure.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
If I understand you correctly, you can use history.pushState.
So here is the steps:
Get the relative URL from the clicked link.
Use pushState to push the state to the history (so you could use back and forward.
Scroll the page to the selected element.
Keep it in you mind that you need to configure your server that wil transfer (rewrite) any sub page to the main page. So when user will try to go to "sub page" (container2 for example) the server will return the main page, and with the javascript you will scroll to page to the right section.
Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
var link = a.hash.replace('#', '');
history.pushState(null, 'page', link);
scrollToElement();
});
});
function scrollToElement() {
var page = location.pathname.replace('/', ''),
container = document.querySelector('#' + page);
container.scrollIntoView();
}
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
http://output.jsbin.com/zaduqo
I would reccomend using Apache mod_rewrite module
RewriteRule ^/about-us /index.php#container-2 [NE,L,R=301]
RewriteRule ^/contact-us /index.php#container-1 [NE,L,R=301]
and then using
links
I have two SVG image files. When I click on an image another image must be displayed (similar to tab). I tried it with the following:
jQuery("#infoToggler").click(function() {
jQuery(this).find('img').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="infoToggler">
<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px" />
<img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png" width="60px" height="60px" style="display:none" />
</div>
JSFiddle here
This is not working. Could someone please help me?
Edit 01
<html>
<head>
.image{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image1{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image3{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image4{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
</head>
<body>
<img src="image1.svg" class="image"/>
<img src="image2.svg" class="image1"/>
<img src="image3.svg" class="image2"/>
<img src="image4.svg" class="image3"/>
</body>
</html>
These are 4 class I have in CSS. I need to display 2 image and toggle 2 image separately.Like tab menu when I click one tab image must toggle and if i click another tab that must toggle. When I click image1 then image2 must be displayed and if I click image3 then image4 must be displayed
I have created jsfiddle sample.
Visit SVG image toggle jsfiddle
$("#svgImg").on("click", function() {
if(flag) {
$(this).attr("xlink:href", "http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png");
flag = false;
}
else {
$(this).attr("xlink:href", "http://tympanus.net/PausePlay/images/play.png");
flag = true;
}
});
I want to be able to grab all the bubbles inside the "bubble game" div and put an onclick on them so that they dissapear(delete from the page) when being clicked. I have tried making a variable in javascript that contains all bubbles in the div and then put an onclick on them but it doesn't seem to work. Preferably not using jquery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<link href="bubbles.css" rel="stylesheet">
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/bubbles.js"></script>
<script src="scripts/java.js"></script>
</head>
<body>
<!--background bubbles-->
<div id="b-blue" class="b" data-speed="1"></div>
<div id="b-green" class="b" data-speed="2"></div>
<div id="b-red" class="b" data-speed="4"></div>
<!--bubble text-->
<div id="bText">
B<br />U<br />B<br />B<br />L<br />E<br />S<br />!
</div>
<!--bubble game-->
<div id="bubbleGame">
<!-- <div class="bubble"></div> -->
</div>
<!--bubble score and reset-->
<div id="bottomCorner">
<div id="reload">refresh...</div>
<div id="score">0</div>
</div>
</body>
</html>
body{
background:black;
}
#bText{
width:300px;
float:left;
height:auto;
color:white;
font-size:300px;
text-align:center;
font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
position:relative;
z-index:10;
opacity:0.8;
}
.b{
width:100%;
height:1000%;
position:fixed;
top:0;
left:0;
}
#b-blue{ background:url(images/b-blue.png); }
#b-red{ background:url(images/b-red.png); }
#b-green{ background:url(images/b-green.png); }
#bubbleGame{
width:75%;
height:100%;
position:fixed;
right:2%;
top:0;
}
.bubble{
background:url(images/b-white.png);
background-size:cover;
position:absolute;
}
window.onload = bubblegame;
function bubble(){
var bubbleburst = document.querySelectorAll("#bubbleGame");
for(var i=0; i<bubbleburst.length; i++){
bubbleburst[i].onclick = burst;
}
}
function burst(){
alert("hi");
}
$(document).ready(function() {
$("#bubbleGame").on("click", ".bubble", function() {
$(this).hide();
})
});
If you would like to remove the element from the DOM, use $(this).remove(), instead of $(this).hide().
You should use event-Delegation:
I prepared a simplified Fiddle
document.getElementById("bubblegame").addEventListener("click", function(element){
var target=element.target;
if(target.id==='bubblegame') return;
target.style.display='none';
});
In this case, you do not add eventListener to the bubbles itself, but to the parent div.
When an element is clicked, the event bubbles up to the "catching" div, where a central dispatcher is waiting for that event. So you have the advantage of having one handler to deal with all events. For more information about delegation of events, take a look here
Since you seem to be using jQuery:
$("#bubbleGame > .bubble").click(function() {
$(this).hide();
});
without Jquery:
var bubbles = document.querySelectorAll('.bubble');
for (var bubble of bubbles) {
bubble.onclick = deleteBubble
}
function deleteBubble() {
this.parentNode.removeChild(this);
}
FIDDLE
You could use jQuery and do it like this
$(document).ready(function() {
$(".bubble").click(function() {
$(".bubble").hide();
})
});
i have the following code using which i implement effects on an image using javascript.
the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.
now my problem is-- the code i got is for only single images.
when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.
i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.
i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.
my code is
<html>
<head>
<link href="css/overlaycss.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").mouseenter(function() {
$(".overlay").show();
});
$(".main").mouseleave(function() {
$(".overlay").hide();
});
$(".main").mouseenter(function() {
$(".overly").show();
});
$(".main").mouseleave(function() {
$(".overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<ul>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
</ul>
</body>
</html>
css is--
li{
position:relative;
float:left;
padding-left:5px;
}
.main {
width:200px;
height:200px;
}
.overlay
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;
}
.overly
{
position:absolute;
height:50px;
width:150px;
bottom:0;
right:0;
display:none;
}
For displaying hover images on individual images try this:-
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find(".overlay").show();
$(this).find(".overly").show();
});
$("ul li").mouseleave(function() {
$(this).find(".overlay").hide();
$(this).find(".overly").hide();
});
});