Display image as none on drop event - javascript

So I have 2 columns filled with images. I want to drag an image from the left column and drop it on the right column's image. The original image on the left must then have it's display set to none so that it disappears.
Here is an example of the html:
<div id="container1">
<table class="table1">
<tr>
<td>
<div class="info1" id="info1" ondragover="allowDrop(event)" ondrop="drop(event)">
<div style="float:left">
<img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p class="myname">Name: Jane Doe</p>
<p class="myprof">Profession: Carpenter</p>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2">
<table class="table2">
<tr>
<td>
<div class="info2" onmousedown = "returnDrop(this.querySelector('img').src)" ondragover="allowDrop(event)" ondrop="drop()" >
<div style="float:left">
<img class="myimg2" style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Unspecified</p>
<p class="myprof2">Profession: Unspecified</p>
</div>
</div>
</td>
</tr>
</table>
</div
Here is some of the Javascript I've tried - it's probably best not to look as it as it simply doesn't work. I can use jquery if it's necessary.
document.getElementsByClassName('info2')[0].drop = function() {
document.getElementsByClassName('myimg2')[0].src = storeOnClick;
document.getElementsByClassName('myname2')[0].innerHTML=name;
document.getElementsByClassName('myprof2')[0].innerHTML=prof;
updateRecord();
return;
}
function updateRecord(div){
div.parentNode.parentNode.parentNode.style.display='none';
}
function returnDrop(el){
if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/QuestionMark.png"){
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png"){
updateRecord1(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley2.png"){
updateRecord2(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley3.png"){
updateRecord3(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley4.png"){
updateRecord4(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley5.png"){
updateRecord5(el);
}
}
function allowDrop(ev) {
ev.preventDefault();
}
Necessary but unrelated to the issue:
function start(){
first();
}
function first () {
var _divs = document.querySelectorAll('.info1');
for (var i = 0; i < _divs.length; i++) {
_divs[i].addEventListener("mousedown", function () { changeInfo1(this) }, false);
}
}
function changeInfo1(el) {
myimg = el.querySelector('.myimg'),
myname = el.querySelector('.myname'),
myprof = el.querySelector('.myprof')
// img
storeOnClick = myimg.src;
// name
name = myname.innerHTML;
// profession
prof = myprof.innerHTML;
}

You could very simply add the following for each of your images: (note the last line)
document.getElementsByClassName('info2')[0].drop = function() {
document.getElementsByClassName('myimg2')[0].src = storeOnClick;
document.getElementsByClassName('myname2')[0].innerHTML=name;
document.getElementsByClassName('myprof2')[0].innerHTML=prof;
if(storeOnClick=='file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png'){
document.getElementsByClassName('info1')[0].parentNode.style.display='none';
}

Related

How do I stop this JS 'show and hide' button from revealing the content at first?

Basically, I have 3 images and once the button is clicked it displays those images, however, when the page is loading up, the button is already toggled on and displays the images, once you click on it the images go. So the button works, but it starts off with displaying the contents which is not what I want.
var a;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>
You can assign a = 1 and make your div to display none.
HTML:
<div id="image" style="display: none">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
JS:
var a = 1;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
You can use a class to define the style which you can toggle on clicking the button using DOMTokenList.toggle().
Also, I will suggest you to avoid inline event handler.
Demo:
document.querySelector('button').addEventListener('click', show_hide);
function show_hide()
{
document.getElementById("image").classList.toggle('showHide');
}
.showHide{
display: none;
}
<div id="image" class="showHide">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button>Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>
That's it just assign the value of 0 to the var before doing anything and call the function. It was that easy. I hope I solved your query you can run this code snippet to check if it works!
Thanks!
var a = 0;
show_hide()
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

Show Empty data if div with specific text is not exist

I have element like this :
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
</div>
I want to search the div text by input value.
I can search the data but.. how to show "data Not found" inside div body, if all child div is not have any data like input value.
This my fiddle.
Working fiddle.
You could add an increment a variable (result in my example) to know if there's any data found or not then show/hide the message :
if( result === 0 ){
$('.empty_div').removeClass('hide');
}else{
$('.empty_div').addClass('hide');
}
function filter() {
var value = $('#filter_data').val();
var div_class = $('#body').find(".child");
var result = 0;
div_class.hide();
div_class.each(function() {
if ($(this).text().toUpperCase().indexOf(value.toUpperCase()) != -1) {
$(this).show();
result++;
}
});
if (result === 0) {
$('.empty_div').removeClass('hide');
} else {
$('.empty_div').addClass('hide');
}
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
<div class="empty_div hide">No Data Found</div>
</div>
Add one more div and fiddle: https://jsfiddle.net/thecreativedev/0k8ustrv/62/
JS
function filter() {
var value = $('#filter_data').val();
var div_class = $('#body').find(".child");
$('.nomatched').html('').hide();
div_class.hide();
var i =0;
div_class.each(function() {
if ($(this).text().toUpperCase().indexOf(value.toUpperCase()) != -1) {
$(this).show();
++i;
}
});
if(i == 0){
$('.nomatched').html('No matched data Found').show();
}
}
HTML
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
<div class="nomatched" style="display:none"></div>
</div>

Hide complex column with colspan and rowspan with jQuery

I am building more or less a complex table with a lot of colspan and rowspan td's. Now i would like to create an onclick event on those pink column. So as soon as you click on one of these + column with class collapse, i would like to hide columns. For example, when I click the first +, I would like to hide the whole First driver column including Driver Name, first-driver-01, Driver ID, etc.
nth-child(x) is not helping really, because it does not ignore the col- and rowspans. I tried to group the td's in a seperated tag, like this:
<tr>
<td rowspan="3">CIM</td>
<!-- First driver -->
<group class="first-driver-01">
<td colspan="4">First driver</td>
</group>
<td rowspan="3" class="collapse">+</td>
<group class="second-driver-213">
<td colspan="4">Second driver</td>
</group>
<td rowspan="3" class="collapse">+</td>
</tr>
Unfortunately my chrome browser does this to the tags:
I'd use div's and CSS for something like this and style them like a table. I'm not going to re-create your entire table but here is an example I made using a smaller table, I'll leave you to have some fun.
Javascript
document.getElementById("clickme").onclick = function(){
var divsToHide = document.getElementsByClassName("hide"); //divsToHide is an array
if(document.getElementById("clickme").innerHTML == "-"){
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.visibility = "hidden"; // or
divsToHide[i].style.display = "none"; // depending on what you're doing
}
document.getElementById("clickme").innerHTML = "+"
}
else {
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.visibility = "visible"; // or
divsToHide[i].style.display = "table-cell"; // depending on what you're doing
}
document.getElementById("clickme").innerHTML = "-"
}
};
HTML
<div class="table">
<div class="row">
<div class="cell header">Team</div>
<div class="cell header">Wins</div>
<div class="cell header">Losses</div>
<div class="cell header hide ">Pct</div>
</div>
<div class="row">
<div class="cell">Bulls</div>
<div class="cell">29</div>
<div class="cell">18</div>
<div class="cell hide">.617</div>
</div>
<div class="row">
<div class="cell">Pacers</div>
<div class="cell">28</div>
<div class="cell">19</div>
<div class="cell hide">.596</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell" id="clickme">-</div>
</div>
CSS
.table {
display:table;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding:2px;
}
.header {
font-weight:bold;
text-align:center;
}
Fiddle Here
I hope this helps,
Good luck

on keypress display one div and other should hide

when i press any key i need to display first div "d1" others hide and i press any key again it display secound div "d2" others hide and press any key again it display third div "d3" others hide ..till six div..not repeating the process again.
<div class="objects" id="d1">
<img src="images/d1.jpg" />
</div>
<div class="objects" id="d2">
<img src="images/d2.jpg" />
</div>
<div class="objects" id="d3">
<img src="images/d3.jpg" />
</div>
.......
.......
<div class="objects" id="d6">
<img src="images/d6.jpg" />
</div>
when i press any key i need to display 1st div then i press any key display 2nd div..till 6th div..
how to do it in javascript?
<html>
<head>
<style type="text/css">
.Div
{
display: none;
}
</style>
<script type="text/javascript">
var i = 0;
function KeyHandler() {
i++;
var divs = document.getElementsByClassName("Div");
for (var div = 0; div < divs.length - 1; div++) {
divs[div].style.display = 'none';
}
var ele = document.getElementById("d" + i);
ele.style.display = "block";
}
</script>
</head>
<body onkeyup="KeyHandler()">
Press any key..
<div id="d1" class="Div">
<h5>
Div1</h5>
</div>
<div id="d2" class="Div">
<h5>
Div2</h5>
</div>
<div id="d3" class="Div">
<h5>
Div3</h5>
</div>
<div id="d4" class="Div">
<h5>
Div4</h5>
</div>
<div id="d5" class="Div">
<h5>
Div5</h5>
</div>
<div id="d6" class="Div">
<h5>
Div6</h5>
</div>
</body>
</html>
Try this out
var currentVisible = 0;
document.onkeyup = function() {
// First hide all by class 'objects'
// Requires IE9+ FF3+, others are supported
var objs = document.getElementsByClassName('objects');
for (var i=0; i<objs.length; i++) {
objs[i].style.display = 'none';
}
// Show the one we are supposed to show
if (++currentVisible == 7)
currentVisible = 1;
var el = document.getElementById('d' + currentVisible);
el.style.display = 'block';
}
100% untested tho, since I have no access to any fiddle atm.

Categories