i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
window.onload=function() {
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/
Related
I'm trying to implement a function like Google Image Search, which is that when you click a picture, a subpage appears in the screen below the picture. And it takes a whole line. The screenshot is showing below.
http://www.wy19900814fun.com/thumbnails/test.png
Here's my code. Is there anyone helping me to implement or at least give me some advise? I'm trying to do a function like when you click a picture, the second div class shows below the picture you click. It needs to take a whole line.
<html>
<head>
<style>
.container {
text-align: center;
}
.container img {
display:inline-block;
}
.subpage {
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class="subpage">
<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
</div>
</body>
</html>
$('img').click(function() {
var $img = $(this),
offset = $img.offset(),
subPage = $('#subPage').hide().insertAfter('.container'),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});
.container {
text-align: center;
}
.container img {
display:inline-block;
width:32%;
vertical-align:top;
}
#subPage {
background:#222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div id="subPage"></div>
You could do like that :
JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
var subpage = $('.subpage');
subpage.hide().empty().fadeIn(250);
$('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250);
});
});
Jsfiddle
I'm attempting to create a page that will allow me to select from a series of images, with the option of choosing your own via URL, but I have stumbled on an issue. I am attempting to use buttons placed under the sample images to change the source image that is piped into a function, but I can't seem to get it to work. Here is my code:
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image1)">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image2)">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
Does anyone know why it might not be passing the images through? They display correctly on the page, so I know the source is correct, but they don't seem to want to be passed to the function.
Try updating your javascript function to:
function updateImage(imageUsed) {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
image = document.getElementById(imageUsed);
ctx.drawImage(image,0,0,500,500);
}
Then output your buttons like:
<button onclick="updateImage('Image1')">Use this image</button>
You need to pass the ID of the element as a string
<button onclick="updateImage('Image1')">Use this image</button>
and in updateImage method you need get the image object from the passed ID
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
**imageUsed = document.getElementById(imageUsed);**
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
Here is the full working code
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
imageUsed = document.getElementById(imageUsed);
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image1')">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image2')">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image3')">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image4')">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
I think you need to load the image, so it can find the URL
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById(imageUsed);
ctx.drawImage(img,0,0,500,500);
}
I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.
<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
Here's a simple JavaScript which solves this kind of problem:
<script>
var next = document.getElementById('next'),
back = document.getElementById('back'),
questions = document.getElementsByTagName('div'),
current = 0;
next.onclick = function showNext() {
if (questions[current+1]) {
questions[current].style.display = 'none';
questions[current+1].style.display = 'block';
current++;
} else {
return false;
}
}
back.onclick = function showPrev() {
if (questions[current-1]) {
questions[current].style.display = 'none';
questions[current-1].style.display = 'block';
current--;
} else {
return false;
}
}
</script>
And at first you should hide the questions with CSS (except the first one):
<style>
div:not(:first-of-type) {
display: none;
}
</style>
EDIT: here is your HTML...
<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :
<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
With JQuery:
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current question
$('.question:eq(' + newQuestion +')').show(); // show new question
actual = newQuestion; // memorize actual selection
}
You can achieve this by combining HTML, CSS and jQuery.
In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.
HTML Code
<input type="button" value="Next" id="next_qs">
<input type="button" value="Back" id="prev_qs">
<div class="question_one">
QS1
</div>
<div class="question_two">
QS2
</div>
<div class="question_three">
QS3
</div>
<div class="question_four">
QS4
</div>
CSS Code
div {
width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}
div.active {
display: block;
}
jQuery Code
$("div:first").addClass('active')
$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});
$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});
http://jsfiddle.net/27gwy14f/
HTML
<div id="container">
<input type="image" src="back.gif" alt="Back">
<input type="image" src="forward.gif" alt="Next">
<div class="question_one question active">
1
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two question">
2
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three question ">
3
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four question">
4
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
</div>
Jquery
<script>
var $container = $("#container") // caches the jquery object
$container.find('input[alt="Next"]').on("click",function(){
var active = $container.find(".active")
if(active.next(".question").length === 0){
return false
}else{
active.removeClass("active")
active.next(".question").addClass("active")
}
})
$container.find('input[alt="Back"]').on("click",function(){
var active = $container.find(".active")
if(active.prev(".question").length === 0){
return false
}else{
active.removeClass("active")
active.prev(".question").addClass("active")
}
})
</script>
CSS
<style>
#container .question{
display:none
}
#container .active{
display:inline-block;
}
</style>
JS FIDDLE
http://jsfiddle.net/vrnxL9n8/
edit: added js fiddle link
HTML :
<html>
<head>
<script>pushImages();</script>
<title>Float Image Gallery</title>
</head>
<body>
<button onclick="showAllGalleries();">Show gallery</button>
<div class="gallery">
<div class="gallery-close">
<a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
</div>
<div class="gallery-content">
<!-- Whenever need to add a image, add this code :
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
-->
<!--
Information :
When adding photo that is not 1:1, it will force shrink to 1:1.
-->
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
</div>
</div>
</body>
</html>
CSS :
<style>
.gallery {
display:none;
width:100%;
height:100%;
left:0;
bottom:0;
top:auto;
right:auto;
position:fixed;
background-color:#cccccc;
opacity:50%;
overflow-y: scroll;
}
.gallery-close {
width:auto;
height:auto;
margin-top:10px;
margin-left:10px;
}
.gallery-close-button {
width:30px;
height:30px;
}
.gallery-content {
width:100%;
height:auto;
text-align:center;
}
.gallery-content-image {
width:20%;
height:100%;
opacity:0.6;
filter:alpha(opacity=60);
}
.gallery-content-image:hover {
background-color:#ffffff;
opacity:1.0;
filter:alpha(opacity=100);
}
.gallery-image-cell {
width: 100%;
height: 0;
padding-bottom: 20%;
margin-left: auto;
margin-right: auto;
}
</style>
Javascript :
<script tyep="text/javascript">
function showAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='inline';
}
}
function hideAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='none';
}
}
function pushImages(){
var imageArray = document.getElementsByClassName("gallery-content-image")
var imageLinkArray[];
imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
/*Use imageLinkArray.push("") to add a image; Add enough image.*/
for (var i=0; i<imageArray.length; i++){
imageArray[i].src = imageLinkArray[i];
}
}
</script>
I'm not sure where the problem is, but after clicking the button nothing happened.
Please help. Any help will be appreciated. Thank you.
<script>pushImages();</script>
This is calling a function before the DOM is even loaded, which should throw an error in your console. Place it at the bottom of your code or wrap it in window.onload = function() { .... }.
You're also missing an equal sign in this line: var imageLinkArray[]; (should be var imageLinkArray = [];.
I also suggest not practicing inline scripting. It's bad practice to do so. Try adding an event handler to the body (onclick only supports one event handler).
document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);
I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});