Solved

add hashes to jquery tabs forward/back buttons and link

Posted on 2011-09-09
11
246 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

623 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