We Keep Coding

change name of tab title place holder with current tab

I've tried a few things , but not versed enough in coding to get it done myself obviously
I setup a jsfiddle here - https://jsfiddle.net/7ojfmxn2/17/
I have a show tabs function to display tab content below , i have a header text for the tabs and i'd like to change that text to the name of the current tab each time one is clicked "League Tabs" i'd like renamed to Tab 0 , Tab 1 , Tab 2 ect , whenever one is selected, any help ?
function show_tab(tab_id) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}

I'm not sure it is what you're asking for, but if you want substitute "League Tabs" with the Tab name, you could do as follows
1- give an ID to the span where the tab header is stored , for example id=tabheader
2- in the part of code where you set the visible tab, also set the content of that span (the element with id=tabheader)
Here's the code
HTML
...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....
JS
....
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
var tabheader = document.getElementById("tabheader");
tabheader.innerHTML="tab " + counter;
}
...
See updated fiddle
https://jsfiddle.net/7ojfmxn2/30/
EDIT
If you want the title LEAGUE TABS be displaied at the beginning, you've to comment your init code in a way no tab is selected.
/*
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
*/
EDIT 2
To avoid showing all tabs you can use
show_tab(-1);
instead of
show_tab(0);
see fiddle https://jsfiddle.net/7ojfmxn2/50/
EDIT 3
In the case you want to see the 'main' tab name on page load, having anyway the tab 0 loaded, you may
1- change the show_tab, adding an input param. This boolean param determines what to show (main tab name or displaied tab name ), as follows
function show_tab(tab_id, show_main_tab_name) {
.....
//here is where the tab title is displaied
var tabheader = document.getElementById("tabheader");
if(show_main_tab_name){
tabheader.innerHTML="LEAGUE TABS";
}
else {
tabheader.innerHTML="tab " + counter;
}
....
2- call on init the show tab with the param set to true
(I put your original function)
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0,true);
}
See my new fiddle https://jsfiddle.net/7ojfmxn2/55/

You need to set an id on the title of the element that contains the tabs, so you can later select it and change it's content.
Then you can pass a 2nd parameter to your show_tab function which would be the tab title you want to display.
Here's the updated code (I had to delete the CSS to be able to post it here due to post size limits)
Here's the working Fiddle with all the CSS https://jsfiddle.net/7ojfmxn2/39/
function show_tab(tab_id, tab_title) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
document.getElementById('tab_title').innerHTML = tab_title || 'LEAGUE TABS';
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
<div id="contentframe">
<div id="withmenus">
<div class="myfantasyleague_tabmenu"><span id="tab_title">LEAGUE TABS</span>
<input id="sub100" type="checkbox">
<label for="sub100"><span></span></label>
<ul id="homepagetabs">
<li id="tab0" onclick="javascript:show_tab('0', 'Tab 0');"><a class="no-sub">Tab 0<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab1" onclick="javascript:show_tab('1', 'Tab 1');"><a class="no-sub">Tab 1<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab2" onclick="javascript:show_tab('2', 'Tab 2');"><a class="no-sub">Tab 2<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab3" onclick="javascript:show_tab('3', 'Tab 3');"><a class="no-sub">Tab 3<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
</ul>
</div>
<div id="tabcontent0" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 0 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent1" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 1 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent2" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 2 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent3" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 3 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
</div>
</div>

Add an id to your HTML's <title> tag, like so:
<title id="myTitle"></title>
Using jQuery you could just do this:
$('#myTitle').html(this_tab.className);
With JavaScript it would be
document.getElementById("myTitle").innerText = this_tab.className;

ng-repeat and ng-scrollbar doesn't work together

I'm just starting Angular JS and trying to have a scrollbar appearing as I add an element in the list which would be populated in the box of the contents.
I installed ng-scrollbar from here. https://github.com/asafdav/ng-scrollbar
HTML:
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
JavaScript:
(function () {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
It's part of my code so it might not fully make sense. But the way it works is that if I pressed the addImageButton, it would add a row which will add a row on the web. And conversely, removeImageButton will delete a row which will show on the web immediately. I need a scroll bar appearing once it reaches the height 100px. I checked the last answer of the ng-scrollbar is not working with ng-repeat
as well but it didn't work. Would be great if I could get some help with the detailed explanation. :) Thanks!

Figured out! I need to put the broadcast method in addRow and removeRow methods. Also, I had to put the out from the

Making an editable dropdown and populating it from an external JS

I want to make an editable dropdown, and on double click of the data the dropdown should appear and make populate the options from and external JS, this should be made to run more than once.
The following is the HTML for this
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id='table-draggable1'>
<tbody class="connectedSortable">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>156</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> //editable dropdown
</tr>
<tr>
<td class="desc">256</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> // ondblclick should be editable
</tr>
</tbody>
</table>
</div>
</div>
</div>
The jquery which i tried for making the dropdown editable
$document.ready(function ()
{
dropdown();
$(function ()
{
$(".master").dblclick(function (e)
{
e.stopPropagation();
var currentEle = $(e.target);
var value = $(e.target).html();
console.log($(e.target));
if ($.trim(value) === "")
{
$(currentEle).data('mode', 'add');
}
else
{
$(currentEle).data('mode', 'edit');
}
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value)
{
$(currentEle).html("<select class='master'></select>");
var mode = $(currentEle).data('mode');
alert(mode);
$(".master").focus();
$(".master").keyup(function (event)
{
if (event.keyCode == 13)
{
$(this).parent().html($(this).val().trim());
$(".master").remove();
}
});
}
$(document).click(function (e)
{
if ($(".master") !== undefined)
{
if ($(".master").val() !== undefined)
{
$(".master").parent().html($(".master").val().trim());
$(".master").remove();
}
}
});
}
function dropdown()
{
var resp = "<option>" + 1 + "</option>"; //this should be populated in dropdown
$(".master").html(resp);
}
}
});
http://jsfiddle.net/tXakG/

You can accomplish this by using the datalist tag in HTML5.
<input type="text" name="product" list="productName"/>
<datalist id="productName">
<option value="a">Apple</option>
<option value="o">Orange</option>
<option value="b">Banana</option>
</datalist>
If you double click on the input text in the browser a list with the defined option will appear.
Added using javascript : data is conceded that taken from server through ajax
http://jsfiddle.net/rajaveld/7yM6V/
Else you can use jquery :
You can refer is jQuery UI for the same.

add class to all the anchor tag which have same file extention

<table>
<tr>
<td>
<span class="file"><a class="" href="#">test1.docx</a></span>
<span class="file"><a class="" href="#">test1.pdf</a></span>
</td>
<td>
<span class="file"><a class="" href="#">test1.docx</a></span>
<span class="file"><a class="" href="#">test1.pdf</a></span>
</td>
</tr>
<tr>
<td>
<span class="file"><a class="" href="#">test2.docx</a></span>
<span class="file"><a class="" href="#">test2.pdf</a></span>
</td>
<td>
<span class="file"><a class="" href="#">test2.docx</a></span>
<span class="file"><a class="" href="#">test2.pdf</a></span>
</td>
</tr>
</table>
<script>
$(document).ready(function(){
var fileName = $('table td span.file a').text();
var ext = fileName.text().split('.').pop();
if(ext == pdf) {
$(this).addClass('pdf');
}
});
</script>
The purpose of the above code is to add class (class='pdf') to anchor tag, which have file extension as 'pdf'. As this code is dynamically generated, I've no access to modify it. So, I decided to write a jQuery code.
I've messed up something with the above code and it is not giving me desired output.
Please help.

You have to iterate, right now this is the document, not each anchor
$(document).ready(function(){
$('table td span.file a').each(function() {
var ext = $(this).text().split('.').pop();
if(ext == 'pdf') {
$(this).addClass('pdf');
}
});
});
FIDDLE
A more sneaky way to do this would be to just return the extension as the class
$('table td span.file a').addClass(function() {
return $(this).text().split('.').pop();
});
That way you're setting pdf, docx etc. classes on the anchors automagically
FIDDLE

An other way:
$(document).ready(function () {
$('table td span.file a').addClass(function () {
return $(this).text().split('.').pop() == "pdf" ? "pdf" : null;
});
});
--DEMO-- Thx #adeneo for jsFiddle base sample
BTW, you could add class regarding any extension: {oops, already posted by adeneo...}
$(document).ready(function () {
$('table td span.file a').addClass(function () {
return $(this).text().split('.').pop();
});
});
--DEMO--

this will help you.
$(document).ready(function(){
$('table td span.file a').each(function() {
var ext = $(this).text().split('.').pop();
if(ext == pdf) {
$(this).addClass('pdf');
}
else if(ext == docx)
{
$(this).addClass('docx');
}
});
});

Making row editable when hit row edit button

I'm new to jQuery and JavaScript. I'm trying to click on my Edit button in my table and make the entire row editable. For some reason it's not working. I think it's only looking at the cell the edit button is in, but I'm not sure how to make it change the entire row to be editable (except the edit button field). I tried moving contenteditable to the tr tag level from the td tag level but it didn't fix it. I was looking at this link as an example, but I think there's something I'm missing. Here is what my code looks like:
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnHide').click(function() {
//$('td:nth-child(2)').hide();
// if your table has header(th), use this
$('td:nth-child(3),th:nth-child(3)').hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.editbtn').click(function(){
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit');
if('td[contenteditable=true]')) {
'td[contenteditable=false]');
}
else if('td[contenteditable=false]')){
'td[contenteditable=true]');
}
//else not editable row
}); //moved this
});
</script>
</head>
<body>
<table id="tableone" border="1">
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
</thead>
<tr class="del">
<td contenteditable="false">Row 0 Column 0</td> //changed to false after experiment
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 0 Column 1</td>
<td contenteditable="false">Row 0 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 1 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 1 Column 1</td>
<td contenteditable="false">Row 1 Column 2</td>
</tr>
</table>
<input id="btnHide" type="button" value="Hide Column 2"/>
</body>

Your code with the button click is too complicated. I have reduced it by making it easier to understand.
$(document).ready(function () {
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
Code Explained:
1) Get all the tds within tr using below code
var currentTD = $(this).parents('tr').find('td');
2) Then as usual iterate through each tds and change its contenteditable property like below
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
Updated JSFiddle

Try this:
$('.editbtn').click(function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
jsFiddle

Try this. I created right now.
I hope this can help.
jQuery(document).ready(function() {
$('#edit').click(function () {
var currentTD = $(this).closest('tr');
if ($(this).html() == 'Edit') {
$(currentTD).find('.inputDisabled').prop("disabled",false);
} else {
$(currentTD).find('.inputDisabled').prop("disabled",true);
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
https://jsfiddle.net/mkqLdo34/1/