How to link to a "tab" on my website - javascript

I have made tabs on my site. By tabs I mean the navigation links, rather then loading a new page use some java script and css to just switch to another tab containing more content. I'm wondering how I would be able to link to a specific page when it's done like this?
My code is similar to this one:
Using jquery easyui, how to create a tab by a link which is in a tab?
Edit: http://fogest.net16.net/righttoweb/ <<< There is a link to the site. Look at the tabs. How would I link to the page of one of those tabs?

Add anchors to the end of your URL, ie http://URL/righttoweb#about and on $(document).ready() block of code pick up the anchor and using a hash table figure out what tab needs to be selected.
Also make sure when users click on your tabs, you update the anchor in the top bar as well, in order to preserve which tab was selected if the user decides to bookmark the URL or send it to someone else
edit:
Well every time a user clicks on one of your tabs, with the onClick event you need to alter the navigation history of your page, for ex:
window.history.pushState("object or string", "Some Title", "#tab" + tabname);
This will enable the back/forward buttons to work
then everytime the page loads you need to
$(document).ready(function() {
if(window.location.href.indexOf('#'))
updateTab(location.hash);
});
function updateTab(tabname) {
your logic to update tab...
}
Hope this makes sense

Related

How to trigger Elementor Popup based on specific url

I have a one page website with different sections and few simple popup which are triggered when user clicks on link/button on a page. I want same popup to open when user access website with a specific url example
www.example.com/#menu
www.example.com/#privacy-policy
I found setting under Elementor popup when arriving from specific URL but this option is not working for me.
I can do same using custom JavaScript unless it will not work with elementor feature.
I tried different combination of url such as https://www.example.com/#menu #menu https://example.com/#menu
its not working for any combination.
I did keep condition setting also as Entire site etc..
Just need a point as i could not find any specify article regarding this as most of the article are about how to trigger popup from link.
Set a class on the section you want.
Go to Popup triggers
Check "On scroll to element" en put the class in.
Now the pop up show op when you scroll on the section.

Changing tabs and landing back on the same tab?

Ok, I do not have code for this so I would need assistance here. I have a page that has multiple tabs worth of information. If I proceed to an entirely new page (URL) and then hit back on the browser, is there a way to land back on the tab I left off of?
when you click on a tab you can append a url parameter e.g. ?tab=tab1. And when you load the page you can check you're url parameters and default to that tab if it is in the parameter.
Here's an example that's similar. When you click on the toolbar on the left on bootstrap's getting started page it appends that item to the url. so when i click on 'support' the url looks like http://getbootstrap.com/getting-started/#support and when you go to that url it automatically scrolls you to that section on the page.

After clicking a link, open new URL and automatically *click* on tab link inside that page

Is it possible to implement this behavior:
I have a HTML link on one page, and after a user clicks on it, it goes to another page which has several tabs on it. Upon clicking on one of those tabs, it triggers an AJAX post call which populates and displays content for that tab.
I would like that when a user clicks a link on the previous page, it takes him to another page and automatically clicks a specific tab so it triggers an ajax call which displays the content for that tab.
This site is a Wordpress site, if that information helps at all.
On the 'from' page you can have links such as
Click Me
You can set an onpage load function to load and use a trigger like this
if(window.location.hash === "#customHash"){
//my custom tab loader
}
You can use jQuery Cookie plugin to achieve this. http://plugins.jquery.com/cookie/
You just set the cookie on the first page, when the user clicks on the link
$.cookie('the_cookie', 'the_value');
And on the next page use the jQuery on load function to check for the cookie.

How to call div content in widows.open()

Actually i have a asp:LinkButton in aspx page and i just want that whenever user clicks on asp:LinkButton open popup on dat asp:LinkButton its already done and i have given another link to it(its ur website's link only) and its working fine,
but the problem is now i want to open a popup with checkboxes with the cities name.
i have made one type of you can say block in a DIV on the same aspx page in the bottom and now i want is to call this div content in the script above in windows.open..
Please help me out ..
asap
Thank You!
You can't show only piece of the current page using the window.open function - only the whole page.
Use ModulPopup from the AjaxControlToolkit or Dialog from the jQuery-UI or some similar functionality.
Or you can create new page that will contain only div with cities names checkboxes and open it via the window.open function

Using the BACK button to revert to the previous state of the page

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites

Categories