CODEWITHSUNDEEP
javascriptjqueryhtml
Prateek Saini
Prateek Saini

Reputation: 173

Enable / disable jQuery script on switching to different tab in a HTML page

I've a HTML page in which I'm creating a collage maker and FB cover maker.

There are two tabs in my page in which canvas are placed for both of them respectively. I've a separate script for collage maker and another script for FB cover maker.

Problem: Whenever I switch tabs, I want the scripts to be enable/disable respectively.

Here's my code for tabs.

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#tab1" data-toggle="tab">Collage Maker</a></li>
        <li><a href="#tab2" data-toggle="tab">FB Cover</a></li>
        <li><a href="#tab3" data-toggle="tab">Help</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1">
            <!--canvas-->
            <div id="canvas-container" class="canvas-container">
                <canvas id="c" width="1024" height="768" style="left: -300px; border: 1px dotted;"></canvas>
            </div>
            <!--Buttons-->
            <input type='file' id='fileElem' multiple accept="image/*" style="display: none" onchange="handleFiles(this.files)" />
            <input type='file' id='upload' accept="image/*" style="display: none" onchange="handleFiles(this.files)" />
            <input type="button" class="button button-small" onclick="convertCanvasToImage()" value="Create Collage" />
            <input type="button" id="setBackgrnd" class="button button-small" value="Set Background" onclick="setBackgrnd();" />
            <input type="button" id="delBackgrnd" class="button button-small" value="Delete Background" onclick="delBackgrnd();" />
            <input type="button" id="clear" class="button button-small" value="Reset Canvas" onclick="clearCanvas();" />
            <input type="button" class="button button-small" id="add-text" value="Add Text" style="margin-bottom: 5px;"><i class="icon-plus icon-white"></i>
        </div>
        <div class="tab-pane fade in" id="tab2">
            <div class="canvasbox" style="margin: 0 auto; width: 850px; min-height: 315px; border: 1px solid #ccc; margin-top: 10px; margin-bottom: 10px;">
                <canvas id="FBCanvas" width="850" height="315"></canvas>
            </div>
        </div>
        <div class="tab-pane fade in" id="tab3">
           HELP   
        </div>
    </div>
</div>

Upvotes: 0

Views: 561

Answers (2)

Thiago
Thiago

Reputation: 1555

If I understood your problem...

You could add an Id to "a" tag and add a boolean var to your script.

<a id="btn1" href="#tab2" data-toggle="tab">
<a id="btn2" href="#tab3" data-toggle="tab">

And your script could...

var execute;    
$("#btn1").click(function(){execute = false;});
$("#btn2").click(function(){execute = true;});
$('a[data-toggle="tab"]').on('shown', function (e) {
     if(execute){................}
});

Upvotes: 0

sangram parmar
sangram parmar

Reputation: 8726

Try this

see this DOCUMENTATION

and event part of tab

it is bootstarp tabs

shown =>    This event fires on tab show after a tab has been shown. 
            Use event.target and event.relatedTarget to target the active tab 
            and the previous active tab (if available) respectively.

like

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Upvotes: 2

Related Questions