We Keep Coding

trigger event doesnt activate the tab

I am using tabs from the following example but i am not sure how to activate different tab using jQuery.
http://minth.amazyne.com/v-1.6/shortcode-tabs.html
I am not able to find function for the above to work with table so i am working on my own. But i am not able to get it right
<ul class="nav tab-theme tab-icons donate-tab">
<li class="active">
<a href="#tabD1" data-toggle="tab">
<span class="icon-tab icon-wallet donation-icons"></span>
<h2 class="icon-text">Heading 1</h2>
</a>
</li>
<li>
<a href="#tabD2" data-toggle="tab">
<span class="icon-tab icon-envelope donation-icons"></span>
<h2 class="icon-text">Heading 2</h2>
</a>
</li>
<li>
<a href="#tabD3" data-toggle="tab">
<span class="icon-tab icon-laptop donation-icons"></span>
<h2 class="icon-text">Heading 3</h2>
</a>
</li>
<li>
<a href="#tabD4" data-toggle="tab">
<span class="icon-tab icon-phone donation-icons"></span>
<h2 class="icon-text">Heading 4</h2>
</a>
</li>
<li>
<a href="#tabD5" data-toggle="tab">
<span class="icon-tab icon-mobile donation-icons"></span>
<h2 class="icon-text">Heading 5</h2>
</a>
</li>
</ul>
JS
var getQueryString = function (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
var tabid = null;
tabid = getQueryString('tab'); // returns 'chicken'
//var thatOne = getQueryString('that'); // returns 'sandwich'
//var anotherOne = getQueryString('another'); // returns null
//donate-tab
//tabid = "tabD4";
if (tabid !=null)
{
// $('.donate-tab li').removeClass('active');
// $('.donate-tab li').bind('click');
//$('#tbd4').trigger("click");
if (tabid == "tabD1") {
// $('.donate-tab li:nth-child(1)').toggleClass('active');
//$('.donate-tab li:nth-child(1)').trigger("click");
$('#tabD1').trigger("click");
}
if (tabid == "tabD2") {
//$('.donate-tab li:nth-child(2)').toggleClass('active');
//$('.donate-tab li:nth-child(2)').trigger("click");
$('#tabD2').trigger("click");
}
if (tabid == "tabD3") {
$('.donate-tab li:nth-child(3)').toggleClass('active');
$('.donate-tab li:nth-child(3) a').trigger("click");
// $('a.#tabD3').trigger("click");
}
if (tabid == "tabD4") {
// $('.donate-tab li:nth-child(4)').toggleClass('active');
// $('.donate-tab li:nth-child(4)').trigger("click");
$('#tabD4').trigger("click");
}
if (tabid == "tabD5") {
// $('.donate-tab li:nth-child(5)').toggleClass('active');
// $('.donate-tab li:nth-child(5)').trigger("click");
$('#tabD5').trigger("click");
}
//$('#tbd4').trigger("click");
}
I am assigning tab to be tabid = "tabD4"; for testing
Fiddle http://codepen.io/anon/pen/bgNRoj

I'm not 100% positive that I understood your problem, but I think you want to identify a certain DOM element by extracting a query parameter from the URL. The function getQueryString already does it, and I reused it for a very basic example. Here is my solution:
var getQueryString = function (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
$('#extract').click(function() {
var tabId = getQueryString($('#paramName').val(), $('#url').val());
$('#' + tabId).toggleClass('active');
$('#' + tabId + ' .description').toggle();
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="paramName" placeholder="Enter name of parameter to extract..." value="third" />
<input type="text" id="url" placeholder="Enter a test URL here..." value="http://localhost/page?first=tab1&second=tab2&third=tab3&fourth=tab4" />
<button id="extract">Go</button>
<ul>
<li id="tab1">Tab #1
<div class="description" style="display: none;">Here goes text #1</div>
</li>
<li id="tab2">Tab #2
<div class="description" style="display: none;">Here goes text #2</div>
</li>
<li id="tab3">Tab #3
<div class="description" style="display: none;">Here goes text #3</div>
</li>
<li id="tab4">Tab #4
<div class="description" style="display: none;">Here goes text #4</div>
</li>
</ul>

Working script
var getQueryString = function (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
var tabid = null;
tabid = getQueryString('tab'); // returns 'chicken'
if (tabid !=null)
{
$('.donate-tab li').removeClass('active');
$('.tab-content > .tab-pane').removeClass('active');
if (tabid == "tabD1") {
$('.donate-tab li:nth-child(1)').toggleClass('active');
$('.tab-content #tabD1').toggleClass('active');
}
if (tabid == "tabD2") {
$('.donate-tab li:nth-child(2)').toggleClass('active');
$('.tab-content #tabD2').toggleClass('active');
}
if (tabid == "tabD3") {
$('.donate-tab li:nth-child(3)').toggleClass('active');
$('.tab-content #tabD3').toggleClass('active');
}
if (tabid == "tabD4") {
$('.donate-tab li:nth-child(4)').toggleClass('active');
$('.tab-content #tabD4').toggleClass('active');
}
if (tabid == "tabD5") {
$('.donate-tab li:nth-child(5)').toggleClass('active');
$('.tab-content #tabD5').toggleClass('active');
}
}

How to use onclcik and href in anchor tag and make only onclick work.href is only for google crawling

In my website when i click on images it opens new page using onclcik openpopup(user defined function)
my problem is google will not index onclcik urls,it only index href urls.
So i want to use use onclcik and href in anchor tag and make only onclick work.href is only for Google crawling purpose only my code is as below
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\
<div class='mdl-card-wrapper charm-inner'>\n\
<div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\
<div class='mdl-card__media'>\n\
"+locicon+" \n\
<a href="popupurl" id='myAnchor' > \n\
<div style='position:relative;'>\n\
<div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\
<div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\
</div></div></a>\n\
</div>\n\
<div class='mdl-card__title'>\n\
<div class='right-charm'>\n\
<div class='social-share'>\n\
"+copycontent+"\n\
"+watsapp+"\n\
<a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\
class='fb_share'></a>\n\
<a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\
</div>\n\
</div>\n\
<div class='icharm'>\n\
<h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\
<div class='mdl-card__subtitle-text'>"+title+"</div>\n\
<div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1){
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
// document.getElementById("main-home-page-inner").innerHTML += html;
}
/* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/
}
//addEventListener('click', function (ev) {
//ev.preventDefault();
// alert(ev.target.getAttribute("data-charmid"));
// openpopup(ev.target.getAttribute("data-url"));
// sendpym(ev.target.getAttribute("data-title"));
// });
$('myAnchor').on('click',function(ev){
ev.preventDefault();
openpopup(ev.target.getAttribute("popupurl"));
sendpym(ev.target.getAttribute("data-charmid"));
});
})
.error(function(status, statusText, responseText) {
//console.log(statusText);
//console.log(responseText);
});

Fix your code. Place the elements in quotes. Work correctly with quotes.
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id='charm_"+touch_id+"' data-charmid='"+touch_id+"' data-vis='"+bgid+"' data-vid='"+seid+"' data-vtitle='"+vtitle_url+"' data-title='"+title_url+"' style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'><div class='mdl-card-wrapper charm-inner'><div class='demo-card-wide mdl-card mdl-shadow--8dp'><div class='mdl-card__media'>"+locicon+"<a href='"+popupurl+"' id='myAnchor' ><div style='position:relative;'><div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width='32px' src='"+cf_assets+"img/hanger.png'></div><div id='imagearea_"+touch_id+"' title='"+title+"' class='imagearea loading'></div></div></a></div><div class='mdl-card__title'><div class='right-charm'><div class='social-share'>"+copycontent+""+watsapp+"<a onclick='sharetofb(\'"+ct_domain+socialshare_url+"\');' title='Facebook' id='fb"+touch_id+"' class='fb_share'></a><a onclick='sharetotwitter(\'"+ct_domain+socialshare_url+"\');' title='Twitter' id='tw"+touch_id+"' class='tw_share'></a></div></div><div class='icharm'><h2 class='mdl-card__title-text'>"+subtitle+"</h2><div class='mdl-card__subtitle-text'>"+title+"</div><div id='vid_"+touch_id+"' class='mdl-card__subtitle-videoname'>"+videoname+"</div></div></div></div></div></div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1)
{
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
}
} // WHY????
$('myAnchor').on('click',function(ev){
ev.preventDefault();
openpopup(ev.target.getAttribute("popupurl"));
sendpym(ev.target.getAttribute("data-charmid"));
See how to properly use the quotes ' and "in a variable in
w3schools.com - JavaScript
Strings

You can easily do this by returning false from the handler function at the end.
Refer to this post for more details
Also, you can use something like this if you are using JQuery:
$('a').on('click',function(e){
e.preventDefault();
// Do your other stuff.
});
In this example I am targeting your anchor tag by tagname. Add a class or ID instead.

Javascript append only one of kind type

What I should add to code bellow to:
If there is more same hrefs inside .item a show only one input with it (in my case show only one input with value img/united-airlines.jpg and one with img/american-airlines.jpg)
Place after the input how much that hrefs they are (in case bellow 2 img/united-airlines.jpg and 1 img/american-airlines.jpg)
Here is html:
<div class="wrap">
<div class="item">
<a href="img/american-airlines.jpg">
American Airlines
</a>
</div>
<div class="item">
<a href="img/united-airlines.jpg">
United Airlines
</a>
</div>
<div class="item">
<a href="img/united-airlines.jpg">
United Airlines
</a>
</div>
</div>
Here is my script:
$(".wrap").find(".item a").each(function () {
var xx = ( $(this).attr('href'));
$("body").append('<label><input type="checkbox" value="' + xx +'">' + xx + '</label>');;
});
Codepen is here: http://codepen.io/anon/pen/RRwEvd?editors=1010

Here is a fixed pen: http://codepen.io/omerts/pen/YWzgjQ?editors=1010
$(".wrap").find(".item a").each(function () {
var xx = ( $(this).attr('href'));
if (!$('input[value="'+ xx +'"]').length) {
$("body").append('<label><input type="checkbox" value="' + xx +'">' + xx + ' (<span>1</span>) </ label>');
} else {
var currentCount = $('input[value="'+ xx +'"]').next('span')
var newCount = parseInt(currentCount.text()) + 1
currentCount.text(newCount)
}
});

Javascript and XML innerHTML naming

I'm trying to get my a tags to display the name from a xml file, I currently have the link changing color and text when it is triggered, but I would like it to get its original state name from a xml file.
I am only interested in the Input links here.
Here is the html side of things:
<div id="status">
<div id="loading" style="display:none">Error:<br />Connection to EMACSYS board was lost.</div>
<div id="display">
<p></span></p>
<p>Inputs:<br /><span style="font-size:20pt"></p>
<a id="btn0">• Input 1</a><br>
<a id="btn1">• Input 2</a><br>
<a id="btn2">• Input 3</a><br>
<a id="btn3">• Input 4</a><br>
<a id="btn4">• Input 5</a><br>
<a id="btn5">• Input 6</a><br>
<a id="btn6">• Input 7</a><br>
<a id="btn7">• Input 8</a><br>
<a id="btn8">• Input 9</a><br>
<a id="btn9">• Input 10</a><br>
<a id="btn10">• Input 11</a><br>
<a id="btn11">• Input 12</a><br>
<a id="btn12">• Input 13</a><br>
<a id="btn13">• Input 14</a><br>
<a id="btn14">• Input 15</a><br>
<a id="btn15">• Input 16</a><br>
</span> </p>
<p>Canopy Temperature: <a id="analogue0">?</a>
<br /><span style="font-size:20pt">
<a id="pot0">›</a>
<a id="pot1">›</a>
<a id="pot2">›</a>
<a id="pot3">›</a>
<a id="pot4">›</a>
<a id="pot5">›</a>
<a id="pot6">›</a>
<a id="pot7">›</a>
<a id="pot8">›</a>
<a id="pot9">›</a>
</span></p>
<p>Engine Heater Temperature: <a id="analogue1">?</a> (30-90 normal)
<br /><span style="font-size:20pt">
<a id="1pot0">›</a>
<a id="1pot1">›</a>
<a id="1pot2">›</a>
<a id="1pot3">›</a>
<a id="1pot4">›</a>
<a id="1pot5">›</a>
<a id="1pot6">›</a>
<a id="1pot7">›</a>
<a id="1pot8">›</a>
<a id="1pot9">›</a>
</span></p>
</div>
Which all seems ok and works fine when an input is triggered, but where it says Input 1, Input 2, etc. i would like it to load from this xml file the inputname tags
<response>
<input0>~Inputs(1)~</input0>
<inputname0>Mains OK</inputname0>
<input1>~Inputs(2)~</input1>
<inputname1>Water Heater</inputname1>
<input2>~Inputs(3)~</input2>
<inputname2>Genset Standby</inputname2>
<input3>~Inputs(4)~</input3>
<inputname3>Genset Running</inputname3>
<input4>~Inputs(5)~</input4>
<inputname4>Common Alarm</inputname4>
<input5>~Inputs(6)~</input5>
<inputname5>Genset Shutdown Alarm</inputname5>
<input6>~Inputs(7)~</input6>
<inputname6>Genset Fuel Tank 1/2</inputname6>
<input7>~Inputs(8)~</input7>
<inputname7>Genset Fuel Tank 1/4</inputname7>
<input8>~Inputs(9)~</input8>
<inputname8>Genset Fuel Tank Low</inputname8>
<input9>~Inputs(10)~</input9>
<inputname9>option</inputname9>
<input10>~Inputs(11)~</input10>
<inputname10>option</inputname10>
<input11>~Inputs(12)~</input11>
<inputname11>Bulk Fuel Full</inputname11>
<input12>~Inputs(13)~</input12>
<inputname12>Bulk Fuel 3/4</inputname12>
<input13>~Inputs(14)~</input13>
<inputname13>Bulk Fuel 1/2</inputname13>
<input14>~Inputs(15)~</input14>
<inputname14>Bulk Fuel 1/4</inputname14>
<input15>~Inputs(16)~</input15>
<inputname15>Bulk Fuel Low</inputname15>
<output0>~Outputs(1)~</output0>
<output1>~Outputs(2)~</output1>
<output2>~Outputs(3)~</output2>
<output3>~Outputs(4)~</output3>
<output4>~Outputs(5)~</output4>
<output5>~Outputs(6)~</output5>
<output6>~Outputs(7)~</output6>
<output7>~Outputs(8)~</output7>
<output8>~Outputs(9)~</output8>
<output9>~Outputs(10)~</output9>
<output10>~Outputs(11)~</output10>
<output11>~Outputs(12)~</output11>
<output12>~Outputs(13)~</output12>
<output13>~Outputs(14)~</output13>
<output14>~Outputs(15)~</output14>
<output15>~Outputs(16)~</output15>
<analogue0>~Analogs(1,T,2,3977)~</analogue0>
<analogue1>~Analogs(2)~</analogue1>
<analogue2>~Analogs(3)~</analogue2>
<analogue3>~Analogs(4)~</analogue3>
<analogue4>~Analogs(5)~</analogue4>
<analogue5>~Analogs(6)~</analogue5>
<analogue6>~Analogs(7)~</analogue6>
<analogue7>~Analogs(8)~</analogue7>
</response>
So for Input 1 it would show Mains OK, then when it was triggered it would show Alert, then back to Mains OK when it was back to normal.
I've tried a few things in the javascript:
<script type="text/javascript">
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
// Check if a timeout occurred
if(!xmlData)
{
document.getElementById('display').style.display = 'none';
document.getElementById('loading').style.display = 'inline';
return;
}
// Make sure we're displaying the status display
document.getElementById('loading').style.display = 'none';
document.getElementById('display').style.display = 'inline';
// Loop over all the LEDs
for(i = 0; i < 16; i++) {
if(getXMLValue(xmlData, 'input'+i) == '1') {
document.getElementById('btn' + i).style.color = '#d00';
document.getElementById('btn' + i).innerHTML = '• ALERT';
}
else {
document.getElementById('btn' + i).style.color = '#090';
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
}
}
// Loop over all the buttons
// Update the POT value
document.getElementById('analogue0').innerHTML =getXMLValue(xmlData,'analogue0');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue0') >val)
document.getElementById('pot' + i).style.color = '#090';
else
document.getElementById('pot' + i).style.color = '#fff';
}
// Update the POT value 2
document.getElementById('analogue1').innerHTML =getXMLValue(xmlData,'analogue1');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue1') >val)
document.getElementById('1pot' + i).style.color = '#090';
else
document.getElementById('1pot' + i).style.color = '#fff';
}
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
</script>
but not to any luck. I am pretty sure its to do with the javascript part of it because this is my weakest area.

I believe that you have a syntax error on the following line of code:
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
On the right-hand side of the equals sign, you have an unterminated string: '•...
I'm not certain of exactly what you're trying to do, but I'm guessing that you want to have a bullet point, followed by the result of getXMLValue(xmlData, 'inputname'+1)
I would suggest that you try replacing this line with the following:
document.getElementById('btn' + i).innerHTML = '•' + getXMLValue(xmlData, 'inputname'+i);
Please let me know how this works for you.

getting image from link in javascript

I have a link to an image an I would like to save it as an image.
For example the link is http://graph.facebook.com/sarfraz.anees/picture. How do I save this into an image variable in javascript so I can use it to do:
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
also would be very useful if someone can guide me on how to resize this image to a 50x50.
Here's my latest code
UPDATE:
<body id="suggestions" class="default verified ">
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({appId: '1355709392349404', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
pic = "http://graph.facebook.com/" + response.session.uid + "/picture";
} else {
window.location = "index.php"
}
});
</script>
<div class="clearfix" id="wrap">
<div id="nav">
<div class="center clearfix">
<h5>
Favor
</h5>
<ul class="icons menu clearfix">
<li>
<a title="You" href="/me">
<script type="text/javascript">
document.write("<img src=\"" + pic + "\" class=\"avatar\">");
</script>
</a>
</li>
Issue is that I can't get the pic that is on the other script

What's wrong with just:
document.write('<img src="http://graph.facebook.com/sarfraz.anees/picture" class="avatar">');
or...
var pic = 'http://graph.facebook.com/sarfraz.anees/picture';
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
?? And it's already a 50x50 image...

var pic = document.createElement('img');
pic.className = 'avatar';
pic.src = 'sourcetopicture.png';
pic.height = '50';
pic.width = '50';
document.body.appendChild(pic);
Just substitute where you'd like to append the picture. For instance, if it were a div with the id of myDiv, you could say
document.getElementById('myDiv').appendChild(pic);
Hope this helps a bit!