We Keep Coding

Create a function that follows a moving text on a table

I found a function to move data between table cells but the functions never seem to stick to whatever tag is "attached" to the cell itself. I'm not sure if I was using ids wrong. I need help finding a way to "attach" a function to a tag that moves between cells.
Can you help me create a button to move a tag (unit 1) upwards and downwards through a table such that it stops at the end of the table?
Original code attached here
//Send to the "bottom"
function sendOS() {
var node = document.getElementById("r1c1").lastChild;
document.getElementById("r1c3").appendChild(node);
/*
var node = document.getElementById("r1c3").lastChild;
document.getElementById("r1c2").appendChild(node);
*/
}
//Send to the "top"
function sendTop() {
var node = document.getElementById("r1c2").lastChild;
document.getElementById("r1c1").appendChild(node);
}
table,
th,
td {
border: 1px solid black;
width: 32px;
height: 32px;
}
<table>
<tr id="row1">
<td id="r1c1">Unit1</th>
<td id="r1c2">Unit2</th>
<td id="r1c3">Unit3</th>
</tr>
<tr id="row2">
<td id="r2c1">r1c2</td>
<td id="r2c2">r2c2</td>
<td id="r2c2">r2c3</td>
</tr>
<tr id="row3">
<td id="r2c2">r3c1</td>
<td id="r2c2">r3c2</td>
<td id="r2c2">r3c3</td>
</tr>
</table>
<!--Table ends -->
<!-------------------------------------------------------------->
<button onclick="sendOS()">move to the other side</button>
<button onclick="sendTop()">move to the right</button>

I can't help you with creating all that. You should try it out for yourself, you'll learn a lot more.
But I can help you with the code you provided.
A lot of your id attributes are the same. Every id on the page should be unique.
Change your HTML structure slightly by adding a <span> around the texts inside your cells (<td><span id="target-1">Text</span></td>). That way you can select elements inside your cells and move those around. Using lastChild to get the TextNode is not the right approach.
The functions should check if there is a cell next to it in the direction you want to move the text. If there is, move the text. If not, then do nothing.
Below I've made a small demonstration on how this might work. Here target is the element that we move. It's the <span id="target">Foo</span> element in the HTML.
When clicking either button, the code will go one element up from the target element with parentElement, that will be the <td> our target is in.
It then tries to access the previous or next <td> in the row (depending on the direction). If a neighbouring <td> is found, it will append the element.
The advantage of this approach is that you always have a reference to the element that you are moving.
const target = document.querySelector('#target');
const buttonLeft = document.querySelector('.js-target-move-left');
const buttonRight = document.querySelector('.js-target-move-right');
function targetMoveLeft() {
const previousCell = target.parentElement.previousElementSibling;
if (previousCell) {
previousCell.append(target);
}
}
function targetMoveRight() {
const nextCell = target.parentElement.nextElementSibling;
if (nextCell) {
nextCell.append(target);
}
}
buttonLeft.addEventListener('click', targetMoveLeft);
buttonRight.addEventListener('click', targetMoveRight);
<table>
<tbody>
<tr>
<td><span id="target">Foo</span></td>
<td><span>Bar</span></td>
<td><span>Baz</span></td>
</tbody>
</table>
<button class="js-target-move-left">Left</button>
<button class="js-target-move-right">Right</button>
I hope this will at least push you in the right direction. Good luck with implementing the other features.

How do I have swipe left delete swipe right edit buttons off canvas?

I might redefine what the buttons do when they are clicked but that is irrelevant. I do not need help setting up ng-click events come on people. That part is easy. I am struggling big time getting the animation effects that I want. The application is in ionic so naturally I am working toward an AngularJS solution all of the examples out there are just a bit off.
I manged to piece together information and construct this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swipe left to delete implementation using AngularJs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>
<script type="text/javascript">
var app = angular.module('ngSwipeLeftExample', ['ngTouch']);
app.controller('SampleSwipe', ['$scope', '$window', function($scope, $window) {
// $scope.swipeLeft=false;
// $scope.swipeRight=false;
$scope.delete = function() {
alert('bbb');
// $scope.swipeLeft=true;
// $scope.swipeRight=true;
}
$scope.edit = function() {
alert('aaa');
// $scope.swipeLeft=true;
// $scope.swipeRight=true;
}
$scope.clickedTable = function() {
// alert('clicked table');
// $scope.swipeLeft=false;
// $scope.swipeRight=false;
}
}]);
</script>
</head>
<body ng-app="ngSwipeLeftExample" ng-controller="SampleSwipe">
<table ng-init="swipeLeft = false; swipeRight = false;" data-ng-swipe-right="swipeRight = true" data-ng-swipe-left="swipeLeft = true" data-ng-click="" border=1 width="100%">
<tr>
<td width="100px">
<div ng-show="swipeRight" >
<button ng-click="edit()" style="height: 44px;width: 109px;border: 0;background-color: green; color: white;font-size: 18px;font-weight: bold;cursor:pointer;">Edit</button>
</div>
</td>
<td>
<div ng-click="clickedTable()">
<table>
<tr>
<td>aaaa</td><td>bbbb</td><td>cccc</td>
</tr>
<tr>
<td>aaaa</td><td>bbbb</td><td>cccc</td>
</tr>
</table>
</div>
</td>
<td width="100px">
<div ng-show="swipeLeft" >
<button ng-click="delete()" style="height: 44px;width: 109px;border: 0;background-color: red; color: white;font-size: 18px;font-weight: bold;cursor:pointer;" align="right">Delete</button>
</div>
</td>
</tr>
</table>
</body>
</html>
But I don't really want to ng-hide the buttons I just want to size the record so that the html block in the middle column (I will put whatever in there it doesn't really matter what I put in there) should be sized to fit the page (width=100% I guess) Then the edit and delete buttons being off canvas can be swiped left or right so the user can see them and click them. I think this can be done with transitions somehow. But nothing seems to work. I am really not a CSS guy at all mostly I just piece my css together to get something almost what I want and then hand it over to my UI guy to fix it. But he doensn't know how to do this either.
It seems like most ios and android apps work this way when there is a list and you swipe left to delete but it seems nobody wants to share the wisdom of how to do this correctly.
Let me guess soeone will reply that you are confused about my question and do not know what I am asking even though it is totally clear? Correct?

Toggle Title Based on Slide Using jQuery in Cycle2

Hopefully a simple fix here at the end of a long week.
I'm using Cycle2 for an image slider. C2 allows for transitioning captions based on the given slide, but it doesn't seem to allow for transitioning additional elements. In this case, I need a title in addition to the caption, but I don't want to use the built-in overlay feature (see fiddle for example of what I mean -- essentially, the title in the red bar needs to change based on the image).
Here's the fiddle: http://jsfiddle.net/jeremytripp/j58Ky/
Any thoughts or suggestions?
Here's some HTML so SO will let me post:
<div id="figuretitle" class="fluid"> <b> Combination Circuit</b>
</div>
<div>
<!-- prev/next links -->
<div>
<table style="width:100%;">
<tr>
<td style="width:50%;"> Prev
</td>
<td align="right" style="width:50%;"> Next
</td>
</tr>
</table>
</div>
<!-- slideshow -->
<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=0 data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-swipe=true data-cycle-caption="#adv-custom-caption" data-cycle-caption-template="{{cycleTitle}}">
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="<b>Figure 6-2</b> A combination circuit with a parallel component and series component.">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="<b>Figure 6-3</b> The <i>R</i><sub>1</sub> resistor is in series with an equivalent resistor for <i>R</i><sub>2</sub> and <i>R</i><sub>3</sub>.">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="<b>Figure 6-4</b> A circuit can be reduced to a single equivalent resistor.">
</div>
</div>
<!-- empty element for caption -->
<div id="adv-custom-caption" class="fluid"></div>

JS added to change text in red bar per image selection
el.html(opts.API.tmpl(template, slideOpts, opts, currSlide));
$("#figuretitle").html(opts.API.tmpl(template, slideOpts, opts, currSlide));
el.show();
Demo: http://jsfiddle.net/4Wxcg/

Thanks to JHuangweb for getting me on the right track. For future answer-seekers, here's the full solution.
http://jsfiddle.net/jeremytripp/j58Ky/1/
Basically you have to write in an additional caption selector into the Cycle2 JS and leave the template option blank. It's in the section commented as "caption plugin" -- a little more than halfway through the plugin JS. Your new selectors will look like this:
figureswitch: '> .cycle-switch',
figureswitchTemplate: '{{}}',
Then add the JS as JHuangweb suggested:
var el = opts.API.getComponent(name);
if (el.length && template) {
el.html(opts.API.tmpl(template, slideOpts, opts, currSlide));
$("#figureswitch").html(opts.API.tmpl(template, slideOpts, opts, currSlide));
el.show();
} else {
el.hide();
Then add these two options in the plugin HTML:
data-cycle-figureswitch="#figureswitch"
data-cycle-figureswitch-template="{{cycleSwitch}}"
Call your newly-recognizable ID where you want it:
<div id="figureswitch"></div>
and whip up a bit of CSS for it to follow and voila:
#figureswitch {
height:3%;
padding-top:1%;
background-color:#C00;
color:#FFFFFF;
font-size: 0.9em;
font-family: Verdana;
}

How to hide certain children(). of a parent(). div?

I want to display only div.card1 when a user clicks on a selection menu I have made
<table id="flowerTheme">
<tr>
<td>
<div class="card1">
<div class="guess"><img src="Test Pictures/QuestionMark.gif" /></div>
<div class="remember"><img src="Test Pictures/flower.gif" /></div>
</div>
</td>
<td>
<div class="card2">
<div class="guess"><img src="Test Pictures/QuestionMark.gif" /></div>
<div class="remember"><img src="Test Pictures/flower.gif" /></div>
</div>
</td>
</tr>
</table>
I have a function that toggles the class 'selected' when the user clicks on an image. The following works perfectly:
if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
$('#flowerTheme').css('display', 'inline');
However, as I stated before, I would like to have card2 to not be displayed. I have tried:
if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
$('#flowerTheme').not('.card2').css('display', 'inline')
But this does not do anything. I have also tried:
if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
$('#flowerTheme').find('div').not('.card2').css('display', 'inline')
But this hides both cards. What would be the right method of displaying card1 and not card2?

$('#flowerTheme').css('display', 'inline');
$('.card2').hide();

First of all, it looks to me that card1 and card2 should be id, not class. The difference is that IDs are supposed to be unique, while classes are supposed to be re-used. Since you're using card1 and card2 to uniquely identify those cards, they should be IDs. Furthermore, they probably need a class as well: probably class="card", so they can be referred to as a group.
Secondly, I think you should be using CSS, not jQuery for the actual hiding/showing. Consider this:
table#flowerTheme.selection-made :not(.selected) .card
{
display: none;
}
This would hide any element that has class="card" that doesn't have any parent with class="selected". Note the .selection-made on #flowerTheme -- this allows the default case to show every card, but then when someone clicks, you do $('#flowerTheme').addClass('selection-made'); and then $(this).addClass('selected'); (assuming you're using $(wherever selected goes).click() for this). It's a bit unclear from your question exactly where the selected class is being added, but I'd recommend doing it this way. It is far more easily maintained, jQuery has to do less work, and it leaves you with a very simple and easy way to expand the list of cards.

What about :
$('#flowerTheme .card2').hide();
?

You can write a javascript function to hide children...
function hideSpecificChildren(childClass){
var child = document.getElementByClass(childClass);
if(tab.style.display == "block") {
tab.style.display = "none";
}else {
tab.style.display = "block";
}
}

Try this:
$('#flowerTheme .card2').css('display','none').parent().show();
Demo
OR
$('#flowerTheme .card2').hide().parent().show();
Demo

javascript swap text block onclick anchor link

This should be easy but it's not working properly... I am quite rusty on javascript and can't figure out what it is I am missing.
I have a navbar that I'd like to disappear when person clicks on small arrow, leaving just a 2nd arrow. When user clicks on 2nd arrow, nav bar reappears. All of the navbar is in one tag. The nav menu itself is quite long, one reason, I want to give user ability to toggle it on and off.
Javascript function in head is as follows:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><img src="arrow.gif"></td>';
}</script>
Text on page is:
<div id='navbar'>
<td>
<img src="arrow.gif">
</td>
</div>
Placing id in the div tag, it shows the arrow when you click on the link but doesn't remove the old html between the div tags. Same thing using span instead of div and no difference between single and double quotes. When I move the id="navbar" to the tag, the nav bar does disappear but it leaves the background color unchanged for the size of the old td tag. I would like it to go blank except for tiny arrow. So question 1 is why are div and span not working, or alternatively, td leaving background color in old space.
2nd question is how to specify innerHTM in text through a variable. It would be nice not to have to put this all in function in header.
Thanks for any ideas!

Don't know what a jsfiddle is but following code reproduces problem if put in .htm file. Thx.
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>

Following leaves one line of background expand gif. Moving the gif outside the div throws off cell alignment. Realize that tables are no longer considered best practice but redoing table structure of whole site would be large undertaking.
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>