We Keep Coding

Is there a simpler way to do the if else statement?

It's been a month since I study the web mapping. I'm currently practicing jQuery` and GeoServer.
Is there a way I to simplify it? Can I use switch here?
bridge.on('change:visible', function(){
if(bridge.getVisible() == true) {
$('#bridge').show();
} else {
$('#bridge').hide();
}
});
road.on('change:visible', function(){
if(road.getVisible() == true) {
$('#road').show();
} else {
$('#road').hide();
}
});
rail.on('change:visible', function(){
if(rail.getVisible() == true) {
$('#rail').show();
} else {
$('#rail').hide();
}
});

The problem isn't really with the if-else-statement that needs simplification, it's the repetition. Wrap the repeated code in a function, factor the differences into parameters, and call it thrice:
function toggleWithVisibility(source, target) {
source.on('change:visible', function(){
if (source.getVisible() == true) {
target.show();
} else {
target.hide();
}
});
}
toggleWithVisibility(bridge, $('#bridge'));
toggleWithVisibility(road, $('#road'));
toggleWithVisibility(rail, $('#rail'));
You also can simplify the functions code by omitting the superfluous == true and by using toggle with an argument:
function toggleWithVisibility(source, target) {
source.on('change:visible', function(){
target.toggle(source.getVisible());
});
}
You didn't yet show us how your three variables are defined, chances are good you might be able to simplify those as well, e.g. selecting source and target together and by calling the function from a loop.

Embrace the functional!
function toggleVisible(thing, selector){
selector.toggle(thing.getVisible());
}
bridge.on('change:visible', toggleVisible.bind(this, bridge, $('#bridge'));
road.on('change:visible', toggleVisible.bind(this, road, $('#road'));
rail.on('change:visible', toggleVisible.bind(this, rail, $('#rail'));

var $list= ["bridge", "road","rail"];
$list.forEach(function(v) {
if($('#'+v').is(":visible")) {
$('#'+v').show();
} else {
$('#'+v').hide();
}
}
});
Hope this help you.

You can use single jQuery() call, .on(), and conditional operator, .filter()
$("#bridge, #road, #rail").on("change:visible", function() {
$(this).toggle(!$(this).getVisible());
});

I have not tested it!
bridge.on('change:visible', function(){
$('#bridge').toggle();
});
road.on('change:visible', function(){
$('#road').toggle();
});
rail.on('change:visible', function(){
$('#rail').toggle();
});

custom when statement not firing functions

I am trying to make a when statement but it is not working as planned. Basically its a function to call another function when try. First before I explain further here is the syntax
when(function() {
//code here
});
Now basically... Think this way.. We have a progressbar.. We also have a custom event such as...
var pBarEvent = document.createEvent('Event');
pBarEvent.initEvent('pbardone', true, true);
document.addEventListener('pbardone', function() {
//code here
});
//if progress bar reaches 100 dispatchEvent
if (document.querySelector(".progress-bar").style.width === 100 + "%")
{
document.dispatchEvent(pBarEvent);
}
Now that piece of code is an example. If the document loads and its for instance at 50% it wont trigger until you add another event such as keydown or click. I dont want to do that I want to do.... "when" progress bar width equals 100% trigger it. Thats basically what needs to happen. So here is the code for the when statement so far (keep in mind its not the best looking one. As I dont normally do this but I wanted to keep this dynamic and who knows someone who later wants to do this can look at this question)
when function
function when(func)
{
var nowActive = false;
if (!typeof func === 'undefined')
{
func = new Function();
}
if (func)
{
nowActive = true;
clearInterval(whenStatementTimer);
}
else
{
nowActive = false;
var whenStatementTimer = setInterval(function() {
switch(func)
{
case true:
{
nowActive = true;
when();
break;
}
case false:
{
nowActive = false;
when();
break;
}
}
}, 1000);
}
if (nowActive === true)
{
func();
}
}
Now this does not work when I go to try something like....
when(function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("100%");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style("body", "background", "black");
});
});
It does not trigger. I need help possibly getting this when statement to work. What am I doing wrong? What can I do to fix it? No errors get thrown but it never fires.
edit based on answer
Function tried
function when(currentValue)
{
try
{
var o = {};
o.currentValue = currentValue;
o.do = function(func)
{
if (!typeof func === 'undefined')
{
func = new Function();
}
if (this.currentValue)
{
func();
}
else
{
setTimeout(this.do(func), 100);
}
};
return o;
}
catch(e)
{
console.log(e);
}
}
used as
when(true).do(function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("This divs going through changes!!");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style(".div", "background", "black");
});
});
This does not work. It never fires. But if I use a onclick listener as such it fires
document.addEventListener("click", function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("This divs going through changes!!");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style(".div", "background", "black");
});
}, false);

function when(statement){
o={};
o.statement=statement;
o.do=function(func){
awhen(this.statement,func);
};
return o;
}
function awhen(statement,func){
if(eval(statement)){
func();
}else{
window.setTimeout(function(){awhen(statement,func);},100);
}
}
Use:
when("true").do(function(){});
It works now :) . Its important to put the condition in ""!

AngularJs audio

How do I acknowledge when an audio ends in angular js? I have attached my code. Anyone plz help me.
app.controller("myCtrl",function($scope,ngAudio,$document)
{
$scope.src="aud.mp3";
$scope.play=false;
$scope.play=function()
{
$scope.audio = ngAudio.load('aud.mp3');
$scope.audio.play();
}
$scope.stop=function()
{
$scope.audio = ngAudio.load('aud.mp3');
$scope.audio.pause();
}
$document[0].addEventListener("visibilitychange", function() {
var doucmentHidden = document.hidden;
if (doucmentHidden)
$scope.audio.pause();
else
$scope.audio.play();
}, false);
});

After doing some researches, I didn't find a listener that can tell you when the Aduio ends, but I found two attributes that can give you some useful states :
$scope.audio.paused
or
$scope.audio.canPlay
both of them return booleans, so what you need to do, is to define a function like this :
function listen(audio, callBack) {
if(audio.paused) {
callBack();
} else {
setTimeout(listen);
}
}
The problem with this function is that you need to call it everytime you call the .play() method
$scope.audio.play();
listen($scope.audio, function () {
console.log("ended !!");
});
Note that this is not a good solution, one of the good solutions is to use the native Audio constructor:
$scope.audio = new Audio("aud.mp3");
$scope.audio.onended = function () {
console.log("ended !! ");
}
$scope.audio.play();

Not easy to listen to the ended event unless you edit the module by yourself, I had to edit that module to allow event listener angular.audio.js Line 240
cleverAudioFindingService.find(id)
.then(function(nativeAudio) {
audio = nativeAudio;
audio.addEventListener('canplay', function() {
audioObject.canPlay = true;
});
/*-----*/
audio.addEventListener('ended',function(){
alert('ended');
});
/*-----*/
}, function(error) {
audioObject.error = true;
console.warn(error);
});
Since this is not a good practice, I alternatively used this angular-player

JQUERY code not working after array is called

I create an array called NAME. For some reason, the code works for the alert('test1') but the code stops working for alert('test2')
$(document).on('submit','form',function()
{
$('input',this).each(function()
{
NAME = $(this).attr('name').split('-');
for(COUNT=0;COUNT<NAME.length;COUNT++)
{
TYPE = NAME[COUNT];
if(TYPE == 'SOMETHING')
{
DO STUFF
}
}
alert("test1");
});
alert("test2");
});
I narrowed it down to the following. After deleting this, it alert('test2') is called.
NAME = $(this).attr('name').split('-');
Whats wrong here?

Thanks to Frederic,
if ($(this).attr('name')) {
// attribute exists
} else {
// attribute does not exist
}

Converting javascript functions to jQuery

I have some javascript which I want to convert to jQuery...
I thought it would be easy, but it would appear I was wrong!
The code should resize a textarea depending on the amount of text entered into it.
Here's my code:
function haut() {
if ($(this).scrollTop() > 0) aug();
}
function aug() {
var h = parseInt($(this).height());
$(this).height(h + 10);
haut();
}
function top() {
$(this).scrollTop(100000);
haut();
}
$(document).ready( function() {
$("#txt_test").keyup(function() {
haut();
});
$("#txt_test").focus(function() {
top();
});
});
And here's the original code:
function haut(idt) {
if (document.getElementById(idt).scrollTop > 0) aug(idt);
}
function aug(idt) {
var h = parseInt(document.getElementById(idt).style.height);
document.getElementById(idt).style.height = h + 10 +"px";
haut(idt);
}
function top(idt) {
document.getElementById(idt).scrollTop = 100000;
haut(idt);
}
$(document).ready( function() {
$("#txt_test").keyup(function() {
haut(this.id);
});
$("#txt_test").focus(function() {
top(this.id);
});
});
Here's a jsfiddle if it helps... http://jsfiddle.net/HhRUH/

Please describe your problems specifically when you're asking a question.
So far I see you have the wrong code for binding handlers. It should be:
$(document).ready( function() {
$("#txt_test").keyup(haut);
$("#txt_test").focus(top);
});

The reason you can use $(this) in keyup(function() { ... }); is because of how it was called by the jQuery implementation. See javascript's .call and .apply for more information about setting context (this) manually.
In your code, you're not using haut.call(), but haut(), which will not set the this context. Therefore this means something different in haut when it's invoked like $('*').keyup(haut) than when it is invoked like $('*').keyup(function() { haut(); });. The same goes for your calling aug() from haut.

just send parameter to aug
function haut(idt) {
if ($(this).scrollTop() > 0) aug(idt);
}
http://jsfiddle.net/HhRUH/1/

You're using this wrong. Pass the element instead:
function haut(element) {
if (element.scrollTop() > 0) aug(element);
}
function aug(element) {
var h = parseInt(element.height());
element.height(h + 10);
haut(element);
}
function top(element) {
element.scrollTop(100000);
haut(element);
}
$(document).ready(function() {
$("#txt_test").keyup(function() {
haut($(this));
});
$("#txt_test").focus(function() {
top($(this));
});
});

You are losing scope. You can use:
1) dmitry's answer(and I think the best one)
$("#txt_test").keyup(haut);
$("#txt_test").focus(top);
2) or if you want to do some more things in the callback, you can do it
with using call():
$("#txt_test").keyup(function()
{
haut.call(this);
alert('...');
});
$("#txt_test").focus(function()
{
top.call(this);
});