Solved

add hashes to jquery tabs forward/back buttons and link

Posted on 2011-09-09
11
241 Views
Last Modified: 2012-05-12
I'm using this to change some tabs around. Is there a way to add hashes to the URL too or some way that i can enable back/forward buttons functions and link to a particular tab?

$(document).ready(function(){
		   
		    $(".buttons").click(function () {
			
			if ($(this).hasClass("current_tab_button")){ 		//is it the tab that's already displayed
			return false										//if so, don't change anything
			}
			else
			{
			$(".buttons").removeClass("current_tab_button");	//if not, delete that class for all .buttons
			$(this).addClass("current_tab_button");				//add that class to the current button
			$('.tip').hide(); 									//hide tooltip product descriptions
		    var divname= this.id;
			//alert(divname);
			$(".viz").fadeOut(350, function(){
			$(".viz").removeClass("viz");
			$("#"+divname+"div").addClass("viz");
			$(".viz").fadeIn(350);
			$(".scroll-pane").jScrollPane();
		});
	   }
	});
});

Open in new window



<div class="home_page_background_div" id="home_page_background_div">
<div style="display:none" id="button1"  class="buttons font_typ_button_red">WELCOME</div>
<div  id="button2" class="buttons font_typ_button_red" style="margin-top:7px;">ABOUT US</div>

<div  id="button3" class="buttons font_typ_button_red">ABOUT OUR PRODUCTS</div>
<div  id="button6" class="buttons font_typ_button_red">ARTWORK SPECIFICATIONS</div>
<div  id="button4" class="buttons font_typ_button_red">CONTACT</div>
<div  id="button5" class="buttons font_typ_button_red">SAMPLE KIT</div>

Open in new window



...


<div class="viz" id="button1div"> 
		<img src=" img/gif/husker_baseball.jpg" width="517px"/> 
	</div> 
	
	  <div style='display: none' id="button2div">
    <div class="scroll-pane" style="max-width: 517px; height:521px;">
    <div class=" home_page_margin_div">
		<table class="contact_us_table" border="0">
            	<tr height:"10px" >
                	<td style="width:150px;">
                        <p class="contact_us_header">SINCE 1940</p>
                    </td>
                    <td style="width:55px;">
                    </td>
                    <td style="width:150px;">
                     <p class="contact_us_header"></p>
                    </td>
                </tr>   
                       
           
            
            <tr>
                <td valign="bottom" colspan="3">
                    <p class="contact_us_h2">OUR HISTORY</p>
                </td>
               
                
            </tr>
            <tr>
            <td  style="width:150px; border-bottom:1px solid #666" valign="bottom" colspan="3"></td>
            </tr>
            <tr>
               <td  style="width:150px;" valign="bottom" colspan="3">
                    <p class="contact_us_h3_2">Independent's Service Company has been serving the outdoor advertising needs of America since 1940. Our company began with one small screen print press, printing billboards for the Independent Baker's Association, which is the origin of the company's name. <br /><br />

The family-owned company today is run by the third and fourth generations of the founder, Frank Berry. Over the years, one screen press in a small shop evolved into a company employing many skilled workers.  Today, the silk-screen presses have been replaced by a number of state-of-the-art, grand format, digital printers. 
				<br /><br />
Independent's Service Company now produces large format graphics for the full gamut of America's large and small billboard companies, printing houses, sign shops, and individuals, along with some of the country's most prestigious advertising agencies.</p>
                </td>
             
                
            </tr>
             <tr>
                <td valign="bottom" colspan="3">
                    <p class="contact_us_h2">AND OUR PRESENT</p>
                </td>
               
                
            </tr>
            <tr>
            <td  style="width:150px; border-bottom:1px solid #666" valign="bottom" colspan="3"></td>
            </tr>
            <tr>
                <td  style="width:150px;" valign="bottom" colspan="3">
                    <p class="contact_us_h3_2">Today we are a proud member of the outdoor advertising community's foundation. We serve our customers with high quality printing, and an increasing diversification and modernization of products. We specialize in quality, top-notch customer care that hasn't changed in our 70&#43; years of doing business, and won't in the future. <br /><br /><br /><br /></p>
                </td>
              
                
            </tr>
            </table>
	</div>
    </div>
    </div>

Open in new window



etc.


Thanks so much for looking!
0
Comment
Question by:hibbsusan
  • 6
  • 5
11 Comments
 
LVL 29

Expert Comment

by:fibo
Comment Utility
1 - At line 2 in the 3rd code, I would probably remove the extra space in the src and add a space before the /, and so change
            <img src=" img/gif/husker_baseball.jpg" width="517px"/>
to
            <img src="img/gif/husker_baseball.jpg" width="517px" />

2 - JScrollPane needs an extra file, did you include it?
     <!-- the jScrollPane script -->
     <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>


0
 

Author Comment

by:hibbsusan
Comment Utility
i don't understand how that addresses the question(?)

thanks
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
Point 1 does not specifically address the question, although making the suggested changes can do no harm and maybe remove soe later bugs.

Point 2 addresses the problem. So, can you please check?
0
 

Author Comment

by:hibbsusan
Comment Utility
yes. it's included.
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
Is there a way to add hashes to the URL too or some way that i can enable back/forward buttons functions and link to a particular tab?
What do you meabn precisely?
If it is the current url as displyed in the address bar, then the precise answer is "no, there is no way to change de displayed of a displayed url", if only for evident security reason.
BUT in your case, you could probably reload the page with the right #place. Bandwidth consuming if your page is not optimized, really fast otherwise.

I understand this is not what you wanted to achieve by "ajaxing" the tab change...
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 29

Expert Comment

by:fibo
Comment Utility
Oops, I forgot to add the edited code...

...
else
{
	$(".buttons").removeClass("current_tab_button");	//if not, delete that class for all .buttons
	$(this).addClass("current_tab_button");				//add that class to the current button
	$('.tip').hide(); 									//hide tooltip product descriptions
	var divname= this.id;
	//alert(divname);
	$(".viz").fadeOut(350, function(){
		location.href="#"+divname+"div";
  	}); // fade/ function
}//else

Open in new window

0
 

Author Comment

by:hibbsusan
Comment Utility
i don't know what you mean by "ajaxing the tab change". do i need to use ajax?
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
1 - B-) well you don't need to use ajax, but in fact what you are trying to achieve (changing the look of a page based on some action and without reloading it) is very ajax-like.

2 - Did you test my suggested change?
0
 

Accepted Solution

by:
hibbsusan earned 0 total points
Comment Utility
this plugin and this tutorial gave me everything i needed. Thanks.
0
 

Author Closing Comment

by:hibbsusan
Comment Utility
found plugin and tutorial as indicated in my previous comment
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
Thx for these highly useful references!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now