How to toggle between SVG images - javascript

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;
}
});

Related

How to take a screenshot in html with javascript?

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>

How to call javascript function, when the user click on the frame in which the video play

<script>
function myFunction() {
alert("hello");
}
</script>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="myFunction()"></iframe>
.Please any one. help
A solution is to overlay a transparent div and add a click event to that div. But you won't be able to click the iframe.
If you want to make the video clickable, add this
document.getElementById("overlay").style.display = "none";
Working snippet :
function myFunction() {
alert("Now you can play the video");
document.getElementById("overlay").style.display = "none"; //makes the iframe clickable
}
.container {
position:relative;
}
.overlay {
top:0;
left:0;
width:100%;
height:100%;
position:absolute;
}
<div class="container">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc"></iframe>
<div class="overlay" id="overlay" onclick="myFunction()"></div>
</div>

an effect onto gallery of images using same javascript

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();
});
});

video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it started with the following code. the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the page load but i want to have the autoplay to start right after click on the preview-image...
here's my code:
<!doctype html>
<script type="text/javascript">
$(window).load(function(){
$(".video").hide();
$(".loader").click(function(){
$(this).hide();
$(this).parent().find(".video").show();
});
});
#container .post .postimg img{
width:100%;
height:auto;
}
#container .post .postvideo{
position:relative;
display:block;
width:100%;
height:430px;
background-color:#0F3;
}
#container .post .postvideo .con{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
}
#container .post .postvideo .video{
background-color:#C00;
}
#container .post .postvideo .video iframe{
width:100%;
height:100%;
}
#container .post .postvideo .loader{
background-color:#06C;
}
#container .post .postvideo .loader img{
width:100%;
height:100%;
}
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe src="http://player.vimeo.com/video/29017795?title=0&byline=0&portrait=0&color=a80101&autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->
You will need to use,
YouTube JavaScript Player API
Alternatively,
Put this as url (autoplay off)
http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0"
And on click of button change src to
http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1"
This wont be as smooth as js api, but will do the trick.
If you don't want to use youtube API or vimeo API, I'd suggest you have iframe src empty and set it when the loader div is clicked. so
I will use
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
and
<div class="con loader" data-iframe-src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1">
then in click event of js code, just set the data-iframe-src value to iframe src:
$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources