Change Tab Link on Click (and Already Active Anchor) - javascript

Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!

I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div

Related

Remove appended anchor/#link from url after use

Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!

UINavigationController type menu in HTML

I'm trying to create a popup menu with some kind of navigation inside it. For this, I'd like to mimic the style of the UINavigationController on iOS. If you're not familiar with it, it creates a hierarchal menu with sliding pages, like this:
(source: apple.com)
I'd like to make something similar in HTML and JavaScript. The elements I'd like to take from iOS design are
the sliding animation that occurs when going between pages.
the back button that appears once navigation has occurred
I need something that doesn't involve page refreshes or moving between pages, but the menu only needs to be one level deep. Has anyone created this type of menu in JavaScript? I'd prefer vanilla JS, but it's not a requirement.
Build an hash from that menu, then iterate trough it like this.
At first you display the first level of the hash.
When the user clicks a link navigate in the hash at that position, fetch all it's children's and populate another instance of the menu behind the visible one.
Then it's a simple job of moving the new menu to a side so that it's visible.
And repeat...
As for the back button, you just fetch the parent of the current position i the hash...

Is this tab navigation and if so how?

I am not sure if tab navigation is the right term, but here goes. As you know if you hit the tab button on your keyboard the focus of the element changes to the next element. So the first question is, is this called tab navigation or is tab navigation like moving from one tab to another changing the screen (two different web page one on each tab)? Second question is how do I control the flow of the the tab when it is moving, for instance I want it to move vertically to a certain point before it moves horizontally. I am not even sure how to tag this so if I tag something wrong please correct me.
First:
Both can and are called tab navigation. But the one referred to that way more, is the one you describe. Using the tab button to move from one element to the next.
Second:
Most of the time you shouldn't mess with the tab navigation. People see a form and expect the tab button to work a certain way, when it doesn't then they usually assume that tab is broken for your website. It's also very browser dependent which means head-aches galore when messing with it.
If you must have the tab work a certain way, then form elements have a tabindex attribute, and you can set this to a number. The tab should then follow the numbers, i.e. from 1 --> 2 --> 3.
More info can be found here.
Any element in html has a tab index <element tabindex="number">. Hitting the tab will traverse the elements on your page. The navigation part of your question is answered -- as you concluded in the first of two alternatives for interpretation -- nicely here: http://en.wikipedia.org/wiki/Tabbing_navigation

Sharethis Buttons for Dynamic Pages (Page 2, 3, 4 etc.)

I am using this Social Sharing tool called "Sharethis".
I gives you some header J.S. links to add to your HTML header.
Then, you'll need to add some SPAN in your code to add the social buttons, like this:
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
Then, on load, you'll see your buttons to click on and get some social activity feedback.
Look at my page, if you have no idea how it looks like: http://www.seoroger.com/seo_quotes_archive.php
Problem is, I make dynamic pages like: /seo_quotes_archive.php?page=2, page=3, etc.
And this widget considers each of these pages a separate one (which is true somehow), and keeps each page's statistics separately.
I think the right thing to do for this instance, is to have one account for all of these pages and if the user clicks on facebook button on /seo_quotes_archive.php?page=5, for example, it increments the general facebook count.
If you agree, and you know how this is feasible, please help!
Thanks in advance!
PS. This case is the opposite of Multiple Sharethis buttons per page. In Fact, it's looking for a way to have one Sharethis statistics for Multiple pages.
You can add a "st_url" Parameter to specify the shared url. Insert the current url without the page-parameter to share the same url across multiple pages.
<span class='st_fblike_hcount' st_url='http://www.example.com/seo_quotes_archive.php' displayText='Facebook Like'></span>
Source: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#sthash.EoamLhNZ.dpbs

Conditional actions when an Oracle APEX navigation bar item is click

The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.

Categories