Develop Reference

Utilising drag & drop but unable to replace elements in DIV before placing new content

This one has me stumped, I've looked everywhere but haven't been able to find a suitable answer for my situation, so here goes.
I have many tables that are draggable and they can be copied not moved
I have many DIVs that can be dropped into.
Dragging and dropping the table into the DIV works fine, the issue I have is if the user decides to drag another table into the same DIV I want it to replace whatever is already in that DIV already, unfortunately at the moment the table just gets appended to the table that's already in there.
I had some code before which actually was working fine in Chrome but eventually I tried it in Firefox and Firefox just kept throwing an error message, then Chrome updated to the latest version and it also began throwing the same error message, seems Chrome decided to follow suit on some security protocol or fixed a bug. I believe I was getting the error 'TypeError variable is undefined' but I have messed with the code a bit now and no longer get that error, however the table is still being appended to previous table if 1 already exists.
I just want to clear the DIV of anything that might be in there already before dropping whatever in there.
Here is the Javascript code:
function drop(ev) {
ev.preventDefault();
var armin = ev.toElement;
if($( armin ).find('table').length > 0) {
var elem = armin.parentNode.parentNode.parentNode.parentNode;
$( armin ).parent().parent().parent().parent().empty();
var data = ev.dataTransfer.getData("text/html");
elem.appendChild(document.getElementById(data).cloneNode(true));
}
else {
$( ev.toElement ).empty();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
}
I know the code is a bit of a mess and probably because it's a mixture of new code I tried and old code that was working previously, the 'if' statement isn't triggering no matter what I do so I need help.
Here is some HTML:
Draggable table
<div class="week col-lg-1" >
<table id="1" class="table table-bordered" style="background-color:#000000; color:white;"
draggable="true" ondragstart="drag(event)">
<tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
<tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
<tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
<tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
<tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
<tr><td data-shift="5" style="background-color:#000000;">X</td></tr>
<tr><td data-shift="5" style="background-color:#000000;">X</td></tr>
<tr>
</table>
</div>
Droppable DIV
<div class="col-lg-1">
<div class="title">
User One
</div>
<div class="schedule" ondrop="drop(event)" ondragover="allowDrop(event)" ondblclick="innerHTML = '';">
</div>
</div>

Before you call appendChild, call empty to clear the existing element's children.
elem.empty().appendChild(document.getElementById(data).cloneNode(true));
This will remove all existing elements so that your new element will be the only child.

I worked around this issue by adding a double click event that clears the div (innerHTML("")), it works fine for my needs, just a bit of extra work for the person using it

Javascript divs not stacking

I have some div boxes and when you click a link it replaces an existing box rather than stacks a new one below it.
It's probably best to show you rather than explain.
Or at least I would but creating a jsfiddle doesn't replicate what I see on my webpage.
My webpage is intranet so I cannot share.
This is the fiddle: http://jsfiddle.net/GR6pu/
(When trying to post I get asked to accompany a jsfiddle.net link with some code.
Not quite sure what is needed so I'll post this:)
var showed = 'com1';
function com(id) {
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
What should hopefully happen is:
You start in community box.
When you click 'lam' you get a box below it = 'lam activities'.
If you subsequently click 'dispatch' this 'lam activites' box is replaced with 'dispatch activities'.
This bit works fine on my website with what I have posted in the fiddle.
Then, in 'lam activities' if you click 't45' you should get another box below it, but on my website the 't45' box replaces the 'lam activities' box rather than stacks another below it.
My goal is to have the 't45' box stacked underneath the 'lam activities' box.
From reading other threads on the forum I know you like your posters to detail what they have tried...
My knowledge on all things web based is small.
4 weeks ago I had never created a website and I've managed to teach myself enough HTML and CSS to create a working website but Javascript is still new to me, hence I don't have the knowledge to fiddle about with the js to make it work.
I tried changing none to block but this then creates more boxes than I would like.
Thanks, Kristian

When you click 'lam' you get a box below it = 'lam activities'.
Then, in 'lam activities' if you click 't45' you should get another
box below it, but on my website the 't45' box replaces the 'lam
activities' box rather than stacks another below it.
my goal is to have the 't45' box stacked underneath the 'lam
activities' box.
Overall you got 2 issues, the HTML is invalid as closing tags are missing and your code is not correct, hence it will not show the expected elements.
Fixing your HTML
Your demo fiddle is broken in the first place and does not demonstrate the issue you have.
You cannot show lam1 if the lam1 element is inside the com2 element which you are still hiding display: none, please inspect your HTML after clicking t45:
The reason you end up with incorrect nested HTML like that is due to missing closing tags which creates invalid HTML.
All <a> tags are missing their matching </a> closing tags.
All main divtags, such as <div id="com1"..>, <div id="lam1"..>, etc.. are missing their matching </div> closing tags.
Browsers try a best-guess, adding closing tags where it seems most appropriate, hence you might end up with unexpected HTML, such as sibling elements becoming nested instead.
Edit: The </a> are not required (my bad), only the 3rd </div> was missing in each section. I updated the fiddle and posted code to reflect that
DEMO - Adding missing closing tags fixes the demo and now shows the issue you are having.
Fixing your code
Now that the missing closing tags are added fixing the HTML in the fiddle which now works and shows the issue we can fix your code.
Your second function will always hide the t45 element and then show the task-element, hence it "replaces" it. I'm assuming you want similar functionality whereby the task element is replaced as you click on different "tasks".
In that case you cannot use the showed id but need to keep a separate record of the task-id (or what ever you want to call it)
function lam(id) {
// this removes the t45 element you want to keep
// I'm assuming you want to track clicked lams separately
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
Change that to the following and both elements are visible.:
var taskId;
function lam(id) {
if (taskId && taskId !== id) {
document.getElementById(taskId).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
taskId = id;
}
DEMO - Fixing the code.
Here is the fixed HTML and code for completeness from the fiddle above.
HTML:
<div class='whitebox'>
<div class='subheader'>community</div>
<div class='links'>
<a onclick="com('com1');"><div class='boxlink'>LAM</div>
<a onclick="com('com2');"><div class='boxlink'>DISPATCH</div>
<a onclick="com('com3');"><div class='boxlink'>PLANNING</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="com1" style="display:none">
<div class='whitebox'>
<div class='subheader'>lam activities</div>
<div class='links'>
<a onclick="lam('lam1');"><div class='boxlink'>T45</div>
<a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
<a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
<a onclick="lam('lam4');"><div class='boxlink'>IND</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="com2" style="display:none">
<div class='whitebox'>
<div class='subheader'>dispatch activities</div>
<div class='links'>
<a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
<a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="lam1" style="display:none">
<div class='whitebox'>
<div class='subheader'>t45 tasks</div>
<div class='links'>
<a onclick="t45('t451');"><div class='boxlink'>REMOVAL</div>
<a onclick="t45('t452');"><div class='boxlink'>ADJUST</div>
<a onclick="t45('t453');"><div class='boxlink'>RECEIPT</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
<div id="lam2" style="display:none">
<div class='whitebox'>
<div class='subheader'>sync tasks</div>
<div class='links'>
<a onclick="t45('t451');"><div class='boxlink'>emea</div>
<a onclick="t45('t452');"><div class='boxlink'>namer</div>
<a onclick="t45('t453');"><div class='boxlink'>s asia</div>
<a onclick="t45('t454');"><div class='boxlink'>n asia</div>
</div>
</div>
</div> <!-- closing </div> was missing -->
JavaScript:
var showed = 'com1';
var taskId;
function com(id) {
if (showed && showed !== id) {
document.getElementById(showed).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
showed = id;
}
function lam(id) {
if (taskId && taskId !== id) {
document.getElementById(taskId).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
taskId = id;
}

Lets break this down:
if (showed && showed !== id) {
document.getElementById(showed).style.display='none';
}
If showed is set and is not equal to the new id passed in the function, get the element with the ID of id and set it to display:none;
document.getElementById(id).style.display='block';
Get the element with the ID of id and set it to display:block;
showed=id;
Set the showed variable to be the value of the id passed into the function.
So basically, the function hides the previous element and then shows the element that has the ID you passed into the function. If you don't want to hide the previous element, you just need to remove the part of the function that does that (the if( showed && showed !== id ) { ... } statement block)

Hide/Show multiple times on a page

First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
http://jsfiddle.net/PVLMX/
Html:
<div id="wrap">
<p>This text is visible, but there is more.<br/><br/>See more >>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.

In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
every id="example.. to id="example2... in the second div.
load the script in "No wrap - in head" mode (jsfiddle left option)

In your fiddle you need to select the no wrap in <head> option. Your code works fine.
http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's

if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated

Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class.
you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/

jQuery - looping through tables and getting widths and setting parent class

long day so most likely me missing something silly but what i want to do is loop through the tables getting their widths and then setting the width on a parent element but not working any thoughts or see where ive gone wrong?
HTML
<div class="vScroll">
<table class="table-scroll">
....
</table>
<div class="box-bottom">stuff here</div>
</div>
<div class="vScroll">
<table class="table-scroll">
....
</table>
<div class="box-bottom">stuff here</div>
</div>
<div class="vScroll">
<table class="table-scroll">
....
</table>
<div class="box-bottom">stuff here</div>
</div>
JS
jQuery('.vScroll .table-scroll').each(function(i,el) {
var $tableSize = jQuery(this).width();
jQuery(this).parent('.box-bottom').css('width',$tableSize);
});
Thanks in advance!

Try this one
$('.vScroll .table-scroll').each(function(i,el) {
var $tableSize = $(this).width();
$('.box-bottom', $(this).parent()).css('width',$tableSize);
});
It seems like what you are getting from
var $tableSize = $(this).width();
is not exactly what you need. It will return the width of parent div containing the table. If you really want to select the table instead of the div, use
$('.table-scroll').each(function(i,el) {

With a few minor alterations, I think I corrected your JS code and created what I believe is a working fiddle
http://jsfiddle.net/Xeb4S/2/
Essentially, this is the resulting JS
$('.vScroll .table-class').each(function() {
var $tableSize = $(this).width();
$(this).siblings('.box-bottom').css('width',$tableSize);
});
There are a few alterations, mainly adding some body to the table HTML and giving the correct class name in the selector - but you also don't need to pass in the parameters to .each() if they're not being used and I shortened the jQuery references to just $
I also used siblings to set the width of the .box-bottom item directly underneath? It is a slight assumption. You mention "setting the width of a parent item" - but the .box-bottom items are siblings, not parents?
Hope this helps.

show element not working

Hi I have a problem with my function, when I call it to show my hidden div it does not work. It does not show the hidden div. I followed previous examples from what have been posted in stackoverflow but still my code does not work.
This is my html file
<div id="playTheGame" class="css/outer" style="display:none;" >
<div class="css/inner">
<h1>Choose!</h1>
<section id="hand">
<img src="images/rock.png">
<img src="images/paper.png">
<img src="images/scissors.png">
</section>
</div>
</div>
My Function
<script>
function logSuccess(){
document.getElementById("playTheGame").style.visibility="visible";
}
</script>
The Button I used for the function
<input type="button" onclick="logSuccess()" value="Show">

Change your code to this
document.getElementById("playTheGame").style.display = "block";
Since you hid it using the display property, show it using the display property.

There are two options for this:
One using JavaScript:
object.style.display="block"; // where object will be the playThemGame id element..
And the other one using jQuery; JavaScript library.
$("#playTheGame").show();
The option two won't work, because you will have to write the event function too, So just use the first one as:
document.getElementById("playTheGame").style.display="block";
Edit:
Since you are using
document.getElementById("playTheGame").style.display="block";
To disply the result, then you must use this to remove the display!
document.getElementById("playTheGame").style.display = "none"; to hide it back!
The basic idea is that, this will just shift the object-->style-->display's value to none Its not going to add any more attribute. Its just going to shift current attribute's value.