How to flip a dynamically added image using jquery? - javascript

.html
<tbody id="item-determination" class="item-table">
</tbody>
.js
$('<td><img src="image/' + item['Group 1'].toLowerCase() + '.png"/></td>').appendTo(tr);
The image gets updated and appended to the table according to the data that comes from the service program.
On hovering over the image I want it to flip and show some text, like it happens here : https://www.ostraining.com/images/coding/jquery-flip/demo/
But as I am not using the similar structure of html, how can I get the same affect from the JQuery line that I am using?
Any kind of help would be greatly appreciated. Thanks.
$(function () {
//var $btnAdd = $('#btn-add-item');
//var $rbFlipType = $('input[name=flipType]');
var $tblItems = $('#tbl-items');
var $tbodyItems = $tblItems.children('tbody');
$(function () {
//var flipType = $rbFlipType.filter(':checked').val();
//var random = Math.random() * 9999999999999999;
var item = `<tr>
<td>
<div class="flippable-container">
<div class="flippable">
<img src="image/' + item['Group 1'].toLowerCase() + '.png" title=""/>
<h1>$('<td></td>').text(item['Group 1']).appendTo(tr)</h1>
</div>
</div>
</td>
</tr>`;
$tbodyItems.append(item);
});
});
</script>

You can do the flipping animation through CSS but you really have to restructure the HTML I guess.
$(function () {
var $btnAdd = $('#btn-add-item');
var $rbFlipType = $('input[name=flipType]');
var $tblItems = $('#tbl-items');
var $tbodyItems = $tblItems.children('tbody');
$btnAdd.click(function () {
var flipType = $rbFlipType.filter(':checked').val();
var random = Math.random() * 9999999999999999;
/* Template literal
var item = `<tr>
<td>
<div class="flippable-container">
<div class="flippable ${flipType}">
<img src="http://lorempixel.com/400/200/cats?randomQueryString=${random}" title="">
<h1>${flipType}</h1>
</div>
</div>
</td>
</tr>`;
*/
var item = '<tr>' +
'<td>' +
'<div class="flippable-container">' +
'<div class="flippable ' + flipType + '">' +
'<img src="http://lorempixel.com/400/200/cats?randomQueryString=' + random + '" title="">' +
'<h1>' + flipType + '</h1>' +
'</div>' +
'</div>' +
'</td>' +
'</tr>';
$tbodyItems.append(item);
});
});
* {
margin: 0;
padding: 0;
}
html, body {
font: normal 14px/1.8 Helvetica, Arial, sans-serif;
}
.flippable-container {
perspective: 1000px;
}
.flippable {
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
width: 400px;
}
.flippable img,
.flippable h1 {
backface-visibility: hidden; /* Don't show the backside of the element when rotated. */
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 400px;
}
.flippable img {
z-index: 1; /* Keep the img in front. */
}
.flippable h1 {
background: #eee;
line-height: 200px;
text-align: center;
}
.flippable.vertical img {
transform: rotateX(0);
}
.flippable.vertical h1,
.flippable.vertical:hover {
transform: rotateX(180deg);
}
.flippable.horizontal img {
transform: rotateY(0);
}
.flippable.horizontal h1,
.flippable.horizontal:hover {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label for="rb-flip-type-horizontal">
<input id="rb-flip-type-horizontal" type="radio" value="horizontal" name="flipType">
Horizontal
</label>
<label for="rb-flip-type-vertical">
<input id="rb-flip-type-vertical" type="radio" value="vertical" name="flipType">
Vertical
</label>
<button id="btn-add-item">
Add
</button>
<table id="tbl-items">
<tbody></tbody>
</table>
</div>
Based off of David Walsh's flip.

Related

What am I doing wrong in scoping my function?

In this test case, I am using append.child with plain JavaScript to add 3 kinds of divs (blue, red, green) to a parent multiple times according to their corresponding button onclicks, then I am adding another child inside the added div with another button (innerButton).
My issue is that, the onclick function which is assigned to the innerbutton and is nested within the initial function, listens only to the very first appended div, and it adds the input (which is supposed to be added to the div I'm clicking on) to the last append element of its 'kind'.
I am doing something wrong with my scoping but I can't see it.
I just started studying JavaScript, so I am not familiar yet with libraries, jQuery etc.
var countBlue = 0;
var countRed = 0;
var countGreen = 0;
function addBlue() {
var addTo = document.getElementById('div1')
var blue = document.createElement("div");
blue.id = "blueDiv";
blue.innerHTML = "<input id=blueInput><button id=innerButtonBlue onclick=addInputs()>ADD INPUTS</button>";
addTo.appendChild(blue);
document.getElementById("innerButtonBlue").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input id="newInput" placeholder="NEW">';
blue.appendChild(newInput);
}
countBlue++;
}
function addRed() {
var addTo = document.getElementById('div1')
var red = document.createElement("div");
red.id = "redDiv";
red.innerHTML = "<input id=redInput><button id=innerButtonRed>ADD INPUTS</button>";
addTo.appendChild(red);
document.getElementById("innerButtonRed").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input id="newInput" placeholder="NEW">';
red.appendChild(newInput);
}
countRed++;
}
function addGreen() {
var addTo = document.getElementById('div1')
var green = document.createElement("div");
green.id = "greenDiv";
green.innerHTML = "<input id=greenInput><button id=innerButtonGreen>ADD INPUTS</button>";
addTo.appendChild(green)
document.getElementById("innerButtonGreen").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input id="newInput" placeholder="NEW">';
green.appendChild(newInput);
}
countGreen++;
}
function displayCounters() {
alert("Blue divs amount : " + parseInt(countBlue) + "\n" + " Red divs amount : " + parseInt(countRed) + "\n" + " Green divs amount : " + parseInt(countGreen) + "\n" + "\n" + " All together is : " + (parseInt(countBlue) + parseInt(countRed) + parseInt(countGreen)))
}
button {
margin-bottom: 10px;
}
#blueDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
#redDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
#greenDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
input {
text-align: center;
}
#innerButtonRed {
position: relative;
float: right;
}
#innerButtonBlue {
position: relative;
float: right;
}
#innerButtonGreen {
position: relative;
float: right;
}
#newInput {
margin-top: 2px;
width: 162px;
height: 23px;
}
#redInput {
background: red;
}
#blueInput {
background: blue;
}
#greenInput {
background: green;
}
<html>
<body>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
<button onclick="addBlue()">BLUE</button>
<button onclick="addRed()">RED</button>
<button onclick="addGreen()">GREEN</button>
<button onclick="displayCounters()">COUNTERS</button>
<div id="div1"></div>
</body>
</html>
The first thing you need to know is that, although you can technically add the same id to multiple elements, it is bad practice to do so. The id of an element should be unique. If you need to apply the same style or target multiple elements with your code you should use class instead of id.
I think that's what is causing issues in your code.
Second, since you say you are learning, i think it would be good if you tried to make a single function to add the elements since the code is repeated in all of the three functions, except for the color.
Try making the function accept the color as a variable so you can reuse it for the three colors. Imagine if it was a hundred colors.
var countBlue = 0;
var countRed = 0;
var countGreen = 0;
function addBlue() {
var addTo = document.getElementById('div1')
var div = document.createElement("div");
countBlue++; //set the counter to one so ids don't start at zero
div.id = `blueDiv-${countBlue}`; //creates a unique id depending on the counter
div.classList = "blueDiv";
div.innerHTML = `<input id="blueInput-${countBlue}" class="blueInput"><button id="innerButtonBlue-${countBlue}" onclick="addInputs">ADD INPUTS</button>`;
addTo.appendChild(div);
document.getElementById(`innerButtonBlue-${countBlue}`).onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = `<input id="newInput-blue-${countBlue}" class="newInput" placeholder="NEW">`;
div.appendChild(newInput);
}
}
function addRed() {
var addTo = document.getElementById('div1')
var div = document.createElement("div");
countRed++
div.id = `redDiv-${countRed}`;
div.classList = "redDiv";
div.innerHTML = `<input id="redInput-${countRed}" class="redInput"><button id="innerButtonRed-${countRed}" onclick="addInputs">ADD INPUTS</button>`;
addTo.appendChild(div);
document.getElementById(`innerButtonRed-${countRed}`).onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = `<input id="newInput-red-${countRed}" class="newInput" placeholder="NEW">`;
div.appendChild(newInput);
}
}
function addGreen() {
var addTo = document.getElementById('div1')
var div = document.createElement("div");
countGreen++
div.id = `greenDiv-${countGreen}`;
div.classList = "greenDiv";
div.innerHTML = `<input id="greenInput-${countGreen}" class="greenInput"><button id="innerButtonGreen-${countGreen}" onclick="addInputs">ADD INPUTS</button>`;
addTo.appendChild(div);
document.getElementById(`innerButtonGreen-${countGreen}`).onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = `<input id="newInput-green-${countGreen}" class="newInput" placeholder="NEW">`;
div.appendChild(newInput);
}
}
function displayCounters() {
alert("Blue divs amount : " + parseInt(countBlue) + "\n" + " Red divs amount : " + parseInt(countRed) + "\n" + " Green divs amount : " + parseInt(countGreen) + "\n" + "\n" + " All together is : " + (parseInt(countBlue) + parseInt(countRed) + parseInt(countGreen)))
}
button {
margin-bottom: 10px;
}
.blueDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
.redDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
.greenDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
input {
text-align: center;
}
.innerButtonRed {
position: relative;
float: right;
}
.innerButtonBlue {
position: relative;
float: right;
}
.innerButtonGreen {
position: relative;
float: right;
}
.newInput {
margin-top: 2px;
width: 162px;
height: 23px;
}
.redInput {
background: red;
}
.blueInput {
background: blue;
}
.greenInput {
background: green;
}
<button onclick="addBlue()">BLUE</button>
<button onclick="addRed()">RED</button>
<button onclick="addGreen()">GREEN</button>
<button onclick="displayCounters()">COUNTERS</button>
<div id="div1"></div>
IDs need to be unique in the whole document. Don't use IDs for this, you can just use a class. But even with a class how is the code supposed to know which element it should look for since there will be more than one existing with the class? The solution is to search only inside the element that you just created (e.g. blue.querySelector('.someClass') to search for the first element with class someClass inside the blue element).
I changed your code to use classes everywhere:
var countBlue = 0;
var countRed = 0;
var countGreen = 0;
function addBlue() {
var addTo = document.getElementById('div1')
var blue = document.createElement("div");
blue.className = "blueDiv";
blue.innerHTML = "<input class='firstInput'><button class='innerButton'>ADD INPUTS</button>";
addTo.appendChild(blue);
blue.querySelector(".innerButton").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input class="newInput" placeholder="NEW">';
blue.appendChild(newInput);
}
countBlue++;
}
function addRed() {
var addTo = document.getElementById('div1')
var red = document.createElement("div");
red.className = "redDiv";
red.innerHTML = "<input class='firstInput'><button class='innerButton'>ADD INPUTS</button>";
addTo.appendChild(red);
red.querySelector(".innerButton").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input class="newInput" placeholder="NEW">';
red.appendChild(newInput);
}
countRed++;
}
function addGreen() {
var addTo = document.getElementById('div1')
var green = document.createElement("div");
green.className = "greenDiv";
green.innerHTML = "<input class='firstInput'><button class='innerButton'>ADD INPUTS</button>";
addTo.appendChild(green)
green.querySelector(".innerButton").onclick = function() {
var newInput = document.createElement("div");
newInput.innerHTML = '<input class="newInput" placeholder="NEW">';
green.appendChild(newInput);
}
countGreen++;
}
function displayCounters() {
alert("Blue divs amount : " + parseInt(countBlue) + "\n" + " Red divs amount : " + parseInt(countRed) + "\n" + " Green divs amount : " + parseInt(countGreen) + "\n" + "\n" + " All together is : " + (parseInt(countBlue) + parseInt(countRed) + parseInt(countGreen)))
}
button {
margin-bottom: 10px;
}
.blueDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
.redDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
.greenDiv {
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
}
input {
text-align: center;
}
.redDiv .innerButton {
position: relative;
float: right;
}
.blueDiv .innerButton {
position: relative;
float: right;
}
.greenDiv .innerButton {
position: relative;
float: right;
}
.newInput {
margin-top: 2px;
width: 162px;
height: 23px;
}
.redDiv .firstInput {
background: red;
}
.blueDiv .firstInput {
background: blue;
}
.greenDiv .firstInput {
background: green;
}
body {
height: 800px; /* Just for visibility here in Stack Overflow */
}
<html>
<body>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
<button onclick="addBlue()">BLUE</button>
<button onclick="addRed()">RED</button>
<button onclick="addGreen()">GREEN</button>
<button onclick="displayCounters()">COUNTERS</button>
<div id="div1"></div>
</body>
</html>
There is a lot more that could be improved of course - the code duplication could be removed, a generalized function for all three types (red/green/blue) can be created that is differentiated just by an attribute on the button for example - but that's beyond the scope of this answer.

Assistance with a table to add values in rows and delete them with a button. Using JQuery

I would like to create a table that will prompt you to add your name and occupation and add them in a row in the table. The values are supposed to go into an array. The delete button will delete them from the array and remove the row. There is supposed to be a counter as well.
At the moment I tried to do it only for the array peopleArray[]. I encounter the issue that the remove button will not work outside the function for "add" and executes many times, deleting everything in the array with just one click. I am misplacing something.
* {
font-family: verdana;
}
.table-container {
border-radius: 10px;
overflow: hidden;
display: inline-block;
}
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table tr {
text-align: center;
}
.table tr:nth-child(2n) {
background-color: #eeeeee;
}
.table tr:nth-child(2n-1) {
background-color: #fcfafa;
}
.table th {
padding: 0 10px;
font-size: 12px;
width: 150px;
background-color: #A9BABA;
color: #000;
}
.table th:first-child,
.table th:nth-child(4) {
width: 15px;
}
.counter {
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.btn_img {
width: 20px;
}
.button_style {
border: none;
background: none;
transition: all 0.5s;
padding: 5px;
}
.button_style:hover {
transform: scale(1.2);
}
.button_style:focus {
transform: rotateY(180deg);
outline: none;
}
table td {
padding: 0 10px;
border: 1px solid white;
font-size: 15px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="table-container">
<table class="table">
<tr>
<th class="">No.</th>
<th class="">Name</th>
<th class="">Occupation</th>
<th class="">
<button id="btn_add_people" class="button_style"><img class="btn_img" src="https://i.imgur.com/6FXVi7B.png" alt="options">
</button></th>
</tr>
<tr>
<td id="counter" class="counter" colspan="4"></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person"><img src="https://i.imgur.com/eiyNHjs.png" alt="close" class="btn_img" /></button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
$("tr").on('click', '.btn_remove_person', (function() {
$(this).parents("tr").remove()
var exitN = $(this).attr("id");
peopleArray.splice(exitN - 1, 1);
// get ID from button and connect with ID to splice name and occupation !!!
$("#counter").text("People added: " + countP);
}));
});
});
</script>
</body>
</html>
You could remove the $(document).ready(function() { }); as you are not really making great use of it. If you wanted to keep it to prevent users from entering information, then hide the add button first, then in the .ready display the button to indicate it is ready to use.
Keep the JQuery for adding entries but when creating the delete button add a onclick function to delete the entry.
I leave your counter calculations up to you as I do not know how you want to make the counters..people added being a total number to include deleted entries? People added being a count of entries in the table? Number next to entry being row number or could be 23 and 22 before it were deleted, etc...
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person" onclick="_removeEntry(this)">Delete</button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
});
function _removeEntry(e) {
$(e).parents("tr").remove()
var exitN = $(e).attr("id");
peopleArray.splice(exitN - 1, 1);
$("#counter").text("People added: " + countP);
};

Function to count number of line breaks acts differently on $(window).on('resize') and $(document).ready

I have a function which counts the number of line breaks in a div, depending on the width of the window. While the functions works fine when placed in the $(window).on('resize') function, it does not work when put in $(document).ready() function. I want it to work right on page load, and also window resize, how do I support both?
JSFiddle
Javascript/jQuery:
// functions called in both document.ready() and window.resize
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
You'll see at the start of the page, it incorrectly shows 17 lines, and then once you resize it will show the correct amount.
The issue lies in the first line of getLineCount(). Originally you had
var lineWidth = $('.line').width();
but no elements with the class "line" exist yet on your page (since they get added in your postItems() method. I changed it to
var lineWidth = $(".container").width();
instead, and now your code should be working. Snippet posted below:
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.container').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
body {
text-align:center;
}
.answer {
position: fixed;
left: 0;
bottom: 0;
}
.container {
position: relative;
width: 50%;
margin: 0 auto;
border: 1px solid #e8e8e8;
display: inline-block;
}
.item {
height: 50px;
padding:0 10px;
background-color: #aef2bd;
float: left;
opacity:0.2;
white-space: nowrap;
}
.line-wrap {
position: absolute;
border: 1px solid red;
width: 100%;
height: 100%;
top:0; left: 0;
}
.line {
height: 50px;
width: 100%;
background-color: blue;
opacity:0.5;
color: white;
transition: all 0.5s ease;
}
.line:hover {
background-color: yellow;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<div class="line-wrap">
</div>
</div>
<h1 class="answer"></h1>

Change amount from px to percent based

I am trying to create a carousel with a sliding effect. The basic setup is I have 2 div's wrapping around the sliding content. The first div's width (the outerWrapper) is the size of all slides width together. The next div's width (the innerWrapper) is the size of 1 div.
When it's supposed to change slides, the innerWrapper get's a translation of x amount and it animates from the css transition.
I have everything working, but there's one thing I want to change. I want to change from pixel to percent.
Line 29:
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
I tried a lot of things, but nothing worked. The only thing that worked was targetIndex * 20 + %, but that only works for 5 divs. It's not a concrete solution. How can I make the translateX percentage based?
JSFiddle
var trigger = document.getElementsByClassName('trigger'),
outerWrapper = document.createElement('div'),
innerWrapper = document.createElement('div'),
slide = document.getElementsByClassName('slide'),
parentElm = slide[0].parentNode,
imgWidth = slide[0].offsetWidth,
lastElm = trigger.length - 1,
previousSelectedIndex = 0;
innerWrapper.id = 'innerWrapper';
outerWrapper.id = 'outerWrapper';
trigger[0].className += ' selected';
innerWrapper.style.width = imgWidth * (lastElm + 1) + 'px';
while (slide.length) {
innerWrapper.appendChild(slide[0]);
}
for (var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener('click', function(e) {
clickEvent(e);
})
}
function clickEvent(e) {
if (!hasClass(e.target, 'selected')) {
var targetIndex = [].slice.call(trigger).indexOf(e.target);
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
e.target.className += ' selected';
removeClass(trigger[previousSelectedIndex], 'selected');
previousSelectedIndex = targetIndex;
}
}
outerWrapper.appendChild(innerWrapper);
parentElm.appendChild(outerWrapper);
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
#outerWrapper {
float: left;
width: 270px;
height: 266px;
overflow: hidden;
}
#innerWrapper {
position: relative;
display: flex;
transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
ul.triggers li {
float: left;
margin: 0 5px;
font: bold 16px arial;
cursor: pointer;
background-color: #ccc;
padding: 10px;
}
ul.triggers li.selected {
background-color: orange;
}
<img class="slide" width="270" src="http://i.imgur.com/XyWadkY.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/oWbhwWT.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/IXcqVB1.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<ul class="triggers">
<li class="trigger">1</li>
<li class="trigger">2</li>
<li class="trigger">3</li>
<li class="trigger">4</li>
<li class="trigger">5</li>
</ul>
Try this,
innerWrapper.style.transform = 'translateX(-' + (targetIndex*(100/document.getElementsByClassName("slide").length)) + '%)';

Toggle like button to create and remove input box

Am creating an HTML page with some buttons to create the input boxes. The buttons should behave like toggle one. ie, on first click input box should appear and if the same button in clicked again that particular input box need to disappear. Button toggle i have managed. But div is not creating
This is my toggle button
<button class="btn" id="button_rd" onclick="setColor('button_rd', '#101010')";>one</button>
Following is the javascript
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#f4543c"//red
property.style.borderColor = "#f4543c"
count = 1;
}
else {
property.style.backgroundColor = "#00a65a"//green
property.style.borderColor = "#008d4c"
count = 0;
var newdiv = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
document.getElementById("create").append(newdiv);
}
}
And below is the place where I need the input box to display(inside this div)
<div class="box-body" id="create">
</div>
If you're happy to use Jquery, Something like this may be what you're looking for.
it's not so much as 'creating' an element, more actually 'toggling' its visibility
$(document).ready(function() {
$('[id^=bool]').click(function() {
var id = $(this).attr("id").substr($(this).attr("id").length - 1);
$('[id^=bool' + id + '] .switcher').toggleClass("switched");
var x = $('[id=input' + id + ']').length;
if (x > 0) //there is one there
{
$('[id=input' + id + ']').remove();
} else {
$('body').append('<input type="text" id="input' + id + '" placeholder="input ' + id + '" />');
}
});
});
.bool {
height: 40px;
width: 100px;
background: darkgray;
position: relative;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 5px 0 6px gray;
border: 1px solid black;
}
.bool:before {
content: "On";
left: 10%;
position: absolute;
top: 25%;
}
.bool:after {
content: "Off";
right: 10%;
position: absolute;
top: 25%;
}
.switcher {
height: 100%;
width: 50%;
position: absolute;
background: lightgray;
top: 0;
left: 0;
z-index: 5;
transform: translateX(0px);
transition: all 0.5s;
border-radius: 5px;
box-shadow: inset 0 0 6px black;
}
.switched {
transform: translateX(50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bool" id="bool1">
<div class="switcher"></div>
</div>
<div class="bool" id="bool2">
<div class="switcher"></div>
</div>
Edit History
Altered snippet to include 2 toggles, as per comments
refactored jquery method with help from Tambo
altered markup to 'append' and 'remove' instead
OnClick write following code to hide:
document.getElementById('create').style.display = 'none';
And following code to show:
document.getElementById('create').style.display = 'block';
Like:
JavaScript:
<script type="text/javascript">
var count = 1;
function hidShow()
{
if(count == 1)
{
document.getElementById('create').style.display = 'none';
count = 0;
}
else
{
document.getElementById('create').style.display = 'block';
count = 1;
}
}
</script>
HTML:
<button id="button_rd" onClick="hidShow()">one</button>
<div class="box-body" id="create">
<input type="text" id="txt"/>
</div>
instead of
document.getElementById("create").append(newdiv);
'innerHTML' works for me, like below:
document.getElementById("create").innerHTML = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
to remove the div on toggle i used
$('div_id').remove();

Categories