0

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)

but I wonder if this has.

I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).

basically these are links to tabbed content on the about us page.

first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:

<a id="#learn-more-1" href="about-us.html#company-history"/> 

<a id="learn-more-1" href="about-us.html#why-choose-us"/>

about-us.html has a tab container with two divs that are assigned the id's:

#company-history and #why-choose-us

and below these we have our content (a heading with the paragraphs containing respective info).

The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.

I'm at wits end trying to understand what I'm missing.

My question is, Is there a way for me to use jQuery on the about-us page, i.e:

$document.ready(function() {

* psuedo code here *
if the user arrived here via clicking learn-more-1 button

make the tab button #company-history ACTIVE
and scroll up 50px  ( so we can see the damn button as it only shows 
us the heading and paragraph content of the tab container..)

else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us  ACTIVE
and scroll up 50px
};

Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.

Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?

Would appreciate some direction here folks cheers!

EDIT:

Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.

Manoj Kumar
  • 41
  • 9
  • 1
    Just check [`window.location.hash`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash). – Marat Tanalin Dec 27 '16 at 00:59
  • It's not what button was clicked that matters but as mentioned what the hash is in the url – charlietfl Dec 27 '16 at 01:18
  • Thanks Marat but that doesn't help much. – Manoj Kumar Dec 28 '16 at 08:24
  • Use parameters. `website.com?src=home` http://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript/21210643#21210643 – roberrrt-s Dec 28 '16 at 08:56
  • What's the problem to detect link via provided hash and display required content? – br3t Dec 28 '16 at 09:05
  • I am more then sure I have done it already, judging from pseudo code, yes it is possible to do what you describe, If you could provide plunker for that or url I think I might help – Raimonds Dec 28 '16 at 09:05
  • ok here you go folks- take a look at what im trying to explain here. http://www.spiraldigital.co.uk/hqs - now if you scroll down on the home page you will notice the two div boxes with the cool transition effect. click either inner button (just an a href styled...) and it will take you to the about us page tabbed container, this is evidently Steven Schwartz 'easy tabs' that i've modified and styled to my needs. Hopefuly now Raimonds, Marat, Roberrrt you guys can see what the issue is. clicking on a hrefs from home page takes us to about us page but we cannot see the tabs lol – Manoj Kumar Dec 28 '16 at 09:19

1 Answers1

0

Some code to show you algoritm

$(document).ready(function() {
    var tabId = window.location.hash; // get id of destination tab
    if(tabId) {
        $("#our-company-history").hide(); // hide default tab
        var tab = $(tabId); // get destination tab
        $(window).scrollTop(tab.offset().top); // scroll to destination tab
        tab.show(); // display tab-content
    }
});
br3t
  • 1,646
  • 2
  • 20
  • 27
  • Oh My God br3t thats awesome bro ! Bro, man it works ! ^_^ , BUT the problem with your code was, using just ' $(window).scrollTop(tab.offset().top); // scroll to destination tab ' didn't make any change. I simply added a numerical value to get it show more or less all the tab container, i.e $(window).scrollTop(tab.offset().top - 250); // scroll to destination tab , as i am testing offline (localy on wampserver) i will update the about-us page with this snippet of code and observe at different viewports the effect. im GUESSING on phones the ' -250 ' MAy cause havoc, but i can fix that. – Manoj Kumar Dec 28 '16 at 10:19
  • Hi br3t, its me again heh. Yeah so like, this code here right, goddamn it how does one achieve a 'return' on here in this comment box !? if i hit return it sends whatever ive typed lolz, jokes. OKAY - that code ? it works on desktops only. the magic clearly happens with the line: $(window).scrollTop(tab.offset().top); , but what I want to know is - why is this not happening on tablets and phones ?? i did some research on this and for some reason scrollTop doesn't get picked up by the phone browsers or something. So though I awarded you b/a, i need you to help me out here bro. – Manoj Kumar Jan 03 '17 at 18:58
  • It's good to play with pseudocode and imaginable html, but nobody helps you without real code. – br3t Jan 05 '17 at 20:46