Vietnam Archive Vietnam Archive - 7 months ago 14
Javascript Question

How can I activate a pane from the main page url entry?

I want to be able to load the main page to the site where the "active" pane can be chosen in the URL when the page is loaded. For example http://www.somepage.com/#advancedSearch Is that possible?

Here is my current setup:

<div class="well">
<div class="row-fluid">

<div class="span12">

<div class="tab-content">
<div id="simpleSearch" class="tab-pane active">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "simple_search" %>
</div>
<div class="span4">
<%= render_aspace_partial :partial => "browse_side" %>
</div>
</div>
<div id="advancedSearch" class="tab-pane">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message_adv") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "advanced_search" %>
</div>
<div class="span4">
<%= render_aspace_partial :partial => "browse_side" %>
<%= render_aspace_partial :partial => "advanced_help_side" %>
</div>
</div>
<div id="cartographicSearch" class="tab-pane">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message_map") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "cartographic_search" %>
</div>
<div class="span4">
<%= render_aspace_partial :partial => "cartographic_side" %>
</div>
</div>
<div id="operationSearch" class="tab-pane">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message_ops") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "operation_search" %>
</div>
<div class="span4">

</div>
</div>
<div id="cdecSearch" class="tab-pane">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message_cdec") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "cdec_search" %>
</div>
<div class="span4">

</div>
</div>
<div id="thesaSearch" class="tab-pane">
<div class="span8">
<h4><%= I18n.t("brand.welcome_message_thesa") %></h4> <h5>(Other searches are listed below.)</h5>
<%= render_aspace_partial :partial => "thesa_search" %>
</div>
<div class="span4">

</div>
</div>
</div>

<div class="span12">
<ul class="search-switcher">
<li class="active">
<a href="#simpleSearch" data-toggle="tab" style="font-size:110%" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.hide_advanced_search") %></a>
</li>
<li>
<a href="#advancedSearch" data-toggle="tab" style="font-size:110%" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_advanced_search") %></a>
</li>
<li>
<hr />
</li>
<li>
<a href="#cartographicSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_map_search") %></a>
</li>
<li>
<a href="#operationSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_operation_search") %></a>
</li>
<li>
<a href="#cdecSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_cdec_search") %></a>
</li>
<li>
<a href="#thesaSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_thesa_search") %></a>
</li>
</ul>

<%# recent_posts %>
</div>
</div>

</div>
</div>

Answer

You probably have setup a javascript code or jQuery plugin that does all the logic of tabbing already. So, all you have to do is to trigger a click event on the correct tab:

$(document).ready(function(){
    var hash = window.location.hash;
    if(hash) {
        $('.search-switcher a[href="'+hash+'"]').click();
    }
});
Comments