Solved

add hashes to jquery tabs forward/back buttons and link

Posted on 2011-09-09
11
243 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
ID: 36516570
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
ID: 36517490
i don't understand how that addresses the question(?)

thanks
0
 
LVL 29

Expert Comment

by:fibo
ID: 36518974
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:hibbsusan
ID: 36519113
yes. it's included.
0
 
LVL 29

Expert Comment

by:fibo
ID: 36519276
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
 
LVL 29

Expert Comment

by:fibo
ID: 36519627
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
ID: 36520053
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
ID: 36523989
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
ID: 36526776
this plugin and this tutorial gave me everything i needed. Thanks.
0
 

Author Closing Comment

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

Expert Comment

by:fibo
ID: 36527503
Thx for these highly useful references!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

776 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