How is jquery being applied and how can I apply it?

[EricOnAdventure]

On this page

http://efunstudies.com/guide.php

There is an arrow on the left that selects between tabs by:

At the same time I have some links on the main tabs that don’t do this. After exploring it I found that that two jquery codes were doing this.  If I could figure out how the codes were being applied to the tabs I could apply them to my links, however after searching and searching, I have no idea how this theme is applying these codes to the tabs.  

The code that goes along with the tabs is this:

<div id="services">

                        <div class="container">

                                    <div class="information">

                                                <div class="row margint50">

                                                            <ul class="tabbed-area col-lg-3 col-sm-3 tab-style1">

                                                                        <li class="active"><a href="#tab1">Step by Step Guide</a></li>

                                                                        <li><a href="#tab2">Before You Apply</a></li>

                                                                        <li><a href="#tab3">Your Application</a></li>

                                                                        <li><a href="#tab4">Your Acceptance</a></li>

                                                                        <li><a href="#tab5">Final steps</a></li>

                                                                        <li><a href="#tab6">Cheap Travel Tips</a></li>

                                                            </ul>

This code is primarily CSS, right? So any ideas? Any Advice? Thanks guys!

 

Also if it is of any use, here are the jquery codes being applied.

function(e) {
  e.preventDefault()
  $(this).tab('show')
}


f = v.handle = function(e) {
  return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}

[kicken]

It appears to be using the Bootstrap tab component. If you look at the documentation you can see some examples of how to activate individual tabs. Basically you select an <a> who's href attribute points to a fragment and call the .tab('show') method.

 

What you can do is attach an onclick handler to all the links which have a fragment URL. In the handler, prevent the default action and then call the tab method, like in the code you show. If you plan to use fragment links for other purposes you'll want to add a check to ensure the fragment is a tab. How you do that is up to you.

 

For example:

jQuery(function($){
  $('a[href^="#"]').click(function(e){
  	e.preventDefault();
    $(this).tab('show');
  });
});

[EricOnAdventure]

Ah, I see, thanks for the clear lesson, I'll apply this and try to learn more. But one  question, are are the current tab buttons triggering this jquery?

[EricOnAdventure]

Sadly I couldn't get it to work. I added the Jquery code at the bottom of the body and tried my best to get it to work, what am I missing?

[Muddy_Funster]

Post up your full (relevant) code, so we can see what you have done so far and what libraries you are linking to.

[EricOnAdventure]

I uploaded the changes to http://efunstudies.com/guide.php
the code didn't end up changing except that I added the jquery into it.

I am sure it is a simple issue, but since I am new to Jquery, that is how it goes.

[kicken]

Near as I can tell the jQuery code is either not running at all, or not finding any matching anchor tags to attach the event listener too.

 

Add some console.log calls to the code so you can see if it's running and if the event handler is firing. Then based on that result, try and figure out why.

[EricOnAdventure]

well I tried this

jQuery(function($){
  $('a[href^="#"]').click(function(e){
  	e.preventDefault();
    $(this).tab('show');
	alert('anything');
	console.log('whatever');
  });

});

And I got no alerts and no cousole.log information.

Any idea where I should take it from here? I'm clueless

[Zane]

It's because you're calling the tab() function on an anchor link that is not in your .tabbed-area

 
I'm assuming also that you're wanting these links to trigger clicking on the real tabs, and in order to target your tabs, you'll have to give them IDs.

 

So for your 4th tab, for instance.  Give it an ID of say, "step4" because these tabs are each unique to the page

<a href="#tab4" id="step4">Your Acceptance</a>

Then, for your links inside #tab1, first off, get rid of the hrefs, and replace them with a data attribute like data-target='step4', and also give them a class so you can target them with jQuery and use data-target to trigger a click on the appropriate tab.

<a data-target="step2" class="tab1-anchor">One year before</a>

Now that you have this, you can trigger a click on the step4 tab with this jQuery

jQuery(function($){
    $("a.tab1-anchor").click(function(e){
         e.preventDefault();
         var theTab = "#" + $(this).data('target');
         $(theTab).trigger('click');
    });
});

There's possibly other better ways of accomplishing this, but this is the first thing that came to mind.  

 

I feel like this solution of mine is more of a hack than it is the " proper" way to handle this.  Kicken's fiddle, I notice, works just fine without my hack.. So now I'm a bit unsure why things aren't working for you.. 

[EricOnAdventure]

Zane, thanks for your hack but it is still not working for me. Perhaps I did it wrong in some way? I tried many, many diffrent ways, but none works, Anyway here is the code as it is with me trying to reflect your hack as best I can...

	<li class="active"><a href="#tab1">Step by Step Guide</a></li>
	<li><a href="#tab2">Before You Apply</a></li>
	<li><a href="#tab3">Your Application</a></li>
	<li><a href="#tab4">Your Acceptance</a></li>
	<li><a href="#tab5">Final steps</a></li>
	<li><a href="#tab6">Cheap Travel Tips</a></li>
</ul>
<div class="col-lg-9 col-sm-9 tab-content animated-area">
	<div class="row tab-pane fade in active" id="tab1">
		<div class="tab-text col-lg-6 col-sm-6">
			<h2>Your Step-By-Step Guide to Studying Overseas</h2>
			<p class="margint20">
				Below is our step-by-step guide to applying to any higher education program. Pay attention to the dates and if you decided you want to work with EfunStudies we will provide you even more information and help guide you through all the steps.
				</p>
			<ul class="margint30">
				<li><i class="icon-long-arrow-right"></i> <a data-target="step2" class="tab1-anchor">One year before</a></li>
				<li><i class="icon-long-arrow-right"></i> <a data-target="step3" class="tab1-anchor">10 months before</a></li>
				<li><i class="icon-long-arrow-right"></i> <a data-target="step4" class="tab1-anchor">6 months before</a></li>
				<li><i class="icon-long-arrow-right"></i> <a data-target="step5" class="tab1-anchor">5 months before</a></li>
				<li><i class="icon-long-arrow-right"></i> <a data-target="step6" class="tab1-anchor">Cheap Travel Tips!</a></li>
			</ul>
		</div>
		<div class="col-lg-6 col-sm-6">
			<img src="temp/tab-image.png" class="img-responsive animated" data-animation="fadeInUpBig" data-animation-delay="0.3s" alt="" />
		</div>
	</div>
	<div class="tab-pane fade" id="tab2">
		<p class="about-title"><a href="#tab2" id="step2">Before You Apply (One year before you plan to start studying)</p></a>
		1.	Find out what you want to study, think deeply about where you want to be in 5 or 10 years and then find the right program of study that will help you get there.
		<br>2.	Search for universities with good programs that match your life goal and which you can get into based on your past performance. Choose several universities that you like.
		<br>3.	Check out the universities’ websites. Which best suits you?
		<br>4.	Check out the universities deadlines and requirements
		<br>5.	Make plans to do an internship or volunteer in order to increase your chances.
		</div>						<div class="tab-pane fade" id="tab3">
		<p class="about-title"><a href="#tab3" id="step3">Your Application (10 months before you plan to start studying)</p></a>
		1.	Prepare your Resume / CV (if needed), your Reference letters, and your Personal Statement.
		<br>2.	Fill out your application form.
		<br>3.	Double check all of your documents and your application.
		<br>4.	Submit your application early, especially if there are rolling deadlines. DO NOT WAIT TILL THE LAST DAY. You should try to apply 1-2 months before the deadline or sooner.
		</div>						<div class="tab-pane fade" id="tab4">
		<p class="about-title"> <a href="#tab4" id="step4">Your Acceptance (6 months before you plan to start studying)</p></a>
		1.	Wait.
		<br>2.	Receive your acceptance letter and celebrate.
		<br>3.	Your acceptance letter may or may not mention if you have already received scholarships or assistantships. 
		<br>4.	Check for scholarships at the university that has accepted you, and in the country that you were accepted in for programs of the type you are studying.
		<br>5.	Email your future head professor and ask for a Teaching and or Research Assistantships.
		<br>6.	If your future head professor says no, then email other professors in your department.
		<br>7.	Ask your head professor for any other financial aid that may be available.
		</div>						<div class="tab-pane fade" id="tab5">
		<p class="about-title"><a href="#tab5" id="step5">Final steps (5 months before you plan to start studying)</p></a>
		1.	Choose which university you will be studying in.
		<br>2. 	Get your transcripts from your previous schools and send them to the university you selected.
		<br>3.	Sign up for an appointment with the embassy of the country you will be studying in.
		<br>4.	Go to the embassy appointment, bring your acceptance letter with you. Apply for a student visa. (tip – don’t say you plan to work while studying abroad)
		<br>5.	Prepare your tuition and pay it before the deadline.
		<br>6.	Buy your airline ticket after you receive your VISA, not before!
		</div>						<div class="tab-pane fade" id="tab6">
		<div class="row">
			<p class="about-title"><a href="#tab6" id="step6">Cheap Travel Tips</p></a>
			I prefer to travel by land, to see the cities, the people, and the environments on the way, but sometimes I just don’t have the time to spend a few weeks or months crossing over land. In that case I do take planes. In the course of these flights, I have learned a few tricks. I have learned how to maximize my flexibility to lower my price, to use buddy passes, to make small regional hops and to hitchhike flights.
			<p class="about-title">Flexibility</p>
			The more flexibility you have with dates and locations, the more money you can save. For my last trip from Europe to the USA, I was able to get a flight, including all fees, taxes and Insurance for $200. I used two different websites Skyscanner.com and Momundo.com, both of which allow me to search whole months or even whole years and search multiple arrival and departure cities. I use both websites because they give different results. My flight time was flexible, I wanted to fly either in October or November, so I searched those months. Next I didn’t really care which city I left from, as I could easily travel to any major city in Europe for cheap. I also didn’t really care where I ended up in the USA, as I could also travel within the USA for fairly cheap. The tickets I found were as much as $1600, but one ticket was the cheapest of them all, Paris to New York City for $200. I bought it, and a few weeks later I traveled to the USA.<br>
			When you are looking for flights you should try and be flexible about the date that you travel on. The more flexible you are, the cheaper the ticket.
							<p class="about-title">Holidays</p>
			My sister came to visit me in Asia during the summer, most of the tickets were %$2000+ but she was able to find a flight from the USA to China for only $400. Why was it so cheap? She left the USA on a Holiday, July 4th, the US Independence Day, and because very few people travel on this date she got a very cheap ticket. She also headed back to the USA at the end of the Chinese golden week, a time when everyone in china is heading home, and not to another country. Both ways her planes were almost empty, and both ways, here tickets were cheap.
							<p class="about-title">Airport Hopping </p>
			Long ago I was headed to the USA from the Ukraine. Flights were normally about  $1500. To save money I flew from one regional airport the next and saved about $1000. First I flew from the Ukraine to Turkey for $80, then after a short layover I was off to Germany for $50. I dashed to my next flight to Paris which was only 30$. In Paris I slept most of my 8 hour layover then headed to New York for $300.
							<p class="about-title">Last Minute Tickets</p>
			Did you know that some airlines will give you a discount on tickets that will be boarding ASAP?  Many airlines won’t drop the tickets unless there are quite a few empty seats and it is the very last minute, but I have gotten some very cheap tickets by waiting at the airport and asking about discounted flights.
		</div>
	</div>
</div>

				
				
				
				</div>
			</div>
		</div>
	</div>
	<br>
	<!-- FOOTER -->
	<script>
jQuery(function($){
    $("a.tab1-anchor").click(function(e){
         e.preventDefault();
         var theTab = "#" + $(this).data('target');
         $(theTab).trigger('click');
    });
});
</script>

[Zane]

I would completely disregard the "hack" I suggested.  Kicken's fiddle clearly shows this working without a hack.

I recommend you revert back to what it was before you took that advice, and then figure it out from there.

[EricOnAdventure]

I would completely disregard the "hack" I suggested.  Kicken's fiddle clearly shows this working without a hack.

I recommend you revert back to what it was before you took that advice, and then figure it out from there.

I reverted back, but still I cant get his fiddle to work, maybe some interference with a script?

Zane since you have the theme could you take a quick look at it and see if you can figure out why it doesn't work? I would like it to work, but nothing I do works.

[kicken]

It doesn't work because your BoxmeGmap(); call in your main.js file is throwing an error which is preventing any further on-load events from running. Either fix this or remove that call for now and then see if it works.