Search jQuery

jQuery Forum

Using jQuery

garavani

cleaner shorter code for if else

in Using jQuery • 10 years ago

Hi all,

I have this piece of code:

var $arrowBackward = $("#arrowBackward");

var $arrowForward = $("#arrowForward");

if ( nextWorkChart==1 ) {

$arrowBackward.fadeOut(300, 'linear');

} else {

$arrowBackward.fadeIn(300, 'linear')

};

if ( nextWorkChart==13 ) {

$arrowForward.fadeOut(300, 'linear');

} else {

$arrowForward.fadeIn(300, 'linear');

};

it is needed to fadeOut/In arrows if the user reaches (by several ways) the beginning or the end of a slider, so that reaching the first picture the backward arrow appears and other way around if he reaches the last one the forward arrow disappears. Naturally they have to reappear if the user moves from there on again.

I am sure there is a shorter more elegant way to do those kind of things.

Some ideas out there?

Thanks for any help

Garavani

Replies(7)

Godsbest

Re: cleaner shorter code for if else

10 years ago

If you do use $("#arrowForward") and $("#arrowBackward") often in your code, you could retain your first two lines for performance reasons. Otherwise, you code reduces to:

var bck = (nextWorkChart == 1) ? 'fadeOut' : 'fadeIn';
var fwd = (nextWorkChart == 13) ? 'fadeOut' : 'fadeIn';
$("#arrowBackward")[ bck ](300,'linear');
$("#arrowForward")[ fwd ](300,'linear');

garavani

Re: cleaner shorter code for if else

10 years ago

Hi Godsbest,

thanks again!

This is very nice!

By the way what concerns the performance.

Is there a way to store often used ids all around the page in some kind of global variable

so that the DOM has not be traversed everytime they appear in different functions?

As for I know up to now is that something like:

var $arrowBackward = $("#arrowBackward");

is only usable inside one function and has to done newly in any separate function.

I tried to make it globally working but not using the word var, but it seems that it doesn’t work.

Thanks again for your always quick help!

Garavani

Godsbest

Re: cleaner shorter code for if else

10 years ago

When you use a variable such as var $arrowBackward = $("#arrowBackward"); and use $arrowBackward in your code as many times as you need, the DOM is search only once. When you use $("#arrowBackward") directly, each time the DOM has to be searched.

garavani

Re: cleaner shorter code for if else

10 years ago

Thanks for staying with me ;-)

Yes, I thought so, too, but in reality it does not work.

When I do this:

function suggestFollowChart() {

var $chart = $("#chart");

$chart.attr…

}

it works but so:

var $chart = $("#chart"); (or even: $chart = $("#chart"); without var)

function suggestFollowChart() {

$chart.attr…

}

…

it doesn’t.

I cannot explain this to myself.

Godsbest

Re: cleaner shorter code for if else

10 years ago

Can you create a jsfiddle demo showing both of these? That way I can look actual code and possible determine what the issue is.

My guess is that it may have something to do with the order of the variable and the function. If the function is defined before the variable, since you are not passing it to the function as a variable, the function would not see the variable. The variable needs to be defined before the function.

Or if you have used the correct order, maybe you are re-defining the variable therefore destroying the original value, somewhere else in your code. Alternatively, you can post the code that does not work. It is better that way. What do you think?

Godsbest

Re: cleaner shorter code for if else

10 years ago

This short jsfiddle demo shows that it works fine whichever way you do it:

http://jsfiddle.net/fiddleyetu/5v9pN/

Output:

<div id="content" title="This was added via variable defined outside function" alt="This was added via variable in function"></div>

garavani

Re: cleaner shorter code for if else

10 years ago

Hi Godsbest,

thanks again for trying to make me learn something ;-)

Sadly the fiddle „result“ field is empty when I open it. Do I have to sign in there?

But nevertheless I believe you that it is working and there should be problem with my code. I am quite sure about this ;-)

The script is too complex to post here so I try to give a short overview over its structure cause I guess it has to do with the order of things I have.

Code structure (I tried to surpress all that seems not important):

<!DOCTYPE html>

<html>

<head>

<style>

html, body {

background-color: #787878;

}

…

</style>

…

$(document).ready(function(){

$("#arrowForward") .hover(function(){ suggestFollowChart({data: { suggestion: workChart + 1, side: 1 }}); folderIn();},function(){ letSuggest();}).click(function() { nextWorkChart = workChart + 1; EdgeStageJumper(); });

$("#arrowBackward").hover(function(){ suggestFollowChart({data: { suggestion: workChart - 1, side: -1 }}); folderIn();},function(){ letSuggest();}).click(function() { nextWorkChart = workChart - 1; EdgeStageJumper(); });

});

function suggestFollowChart(e) {

if ( suggestOn == 1 ) {

var $chart = $("#chart");

var $mask = $("#mask");

$chart.attr("src", "images/Charts/Chart_"+ e.data.suggestion +".gif");

// checks if horizontal or vertical chart is suggested next one and determines use of appropriate mask

var dir = (workChart == 10) ? 'ver' : 'hor';

$mask .attr("src", "templates/Chart_"+ e.data.suggestion +"/images/Mask_"+ dir +".gif");

$chart.removeClass().addClass("chart_"+ dir );

var comp = $.Edge.getComposition("work_" + workChart); // Edge animation control over the current visible animation (restored in function „titleChange(e)“) = fades in deeper shadow beneath

var stage = comp.getStage();

stage.getSymbol("Stage").play("Next") // „elevates“ animation (acutal chart visible) shadow becomes deeper

.$("NextChart").attr("src","templates/Chart_"+ e.data.suggestion +"/images/Chart.gif"); // flips underlaying chart inside animation that gets graduately visible by actual chart fading out

var ww = $(window).width();

var sw = 50-(ww/1024*ww/1024*1.44*e.data.side); // positive or negative value of variable „side“ determines where the suggested chart showes up: either to the left (negative value) or to the right (positive value); (dito for mask next line)

var el = (ww/6*e.data.side);

var co = 184 + el;

var cot = ww*1.5;

$("#works").stop(true).animate( {'left': sw+'%','opacity': 0.96}, cot, 'easeOutBack' );

$chart.stop(true).delay(450).animate( {'left': co+'px','opacity': 0.96}, cot*0.9, 'easeOutBack' );

$mask .stop(true).delay(450).animate( {'left': el+'px','opacity': 0.96}, cot*0.9, 'easeOutBack' );

}

</script>

</head>

<body>

</body>

</html>

In the original full script I tried to put this block:

var $chart = $("#chart");

var $mask = $("#mask");

in many different places.

Yet, the only place where it works was when inside the function (and so in all the others, too, again and again, everywhere the divs are used.

Would be dream to define it only one time for all.

Question to you personally:

Is it better for you to open a new thread to be able to assign you another „Best answer“ or isn’t it of any importance for you? I don’t have much experience with forum rules.

Thanks again for all your help and patience

Garavani

Top Reply

Response title

Attachments

jQuery Forum

cleaner shorter code for if else

Replies(7)

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Re: cleaner shorter code for if else

Statistics

Tags

Actions