index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!
As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);
Related
I haven't seen this proble manywhere, no clue if it could be possible but is there a possibility for me to have a link to a website but when I press the link the website opens up in a div on my site?
The reason for why I want this is becuase I have articles on my site and instead of opening the article itself I want it to be when I click the article it should open in a div that is hidden normally but shows when an article is clicked with the full article on it
`document.querySelectorAll('.title').forEach((item) => {
item.addEventListener('click', (event) => {
var get_href = document.querySelectorAll('.title').getAttribute('href')
event.preventDefault()
alert('get_href')
})
})
You can create this using AJAX and JavaScript.
First,
detect a click on a link, (addEventListener)
then cancel the event so the user won't be redirected to the link, (event.preventDefault())
grab the link and (getAttribute('href'))
load it onto your page.
I'm not sure what exactly you want to do with that, but I think the most easiest way would be to create an iFrame and set the link as URL, because otherwise you might get problems with CORS (if the page is on a different URL and you don't own the other page).
document.addEventListener('click', function(event) {
if(event.target.matches('a[href]')) {
event.preventDefault();
var url = event.target.getAttribute('href');
// Do whatever you want, create/open a div, ...
}
});
Here is an example of loading the website into an iframe: https://jsfiddle.net/1hefuLrs/
I have a menu with ~6 buttons, each that lead to the same page.
In that page, there is a drop down menu.
The purpose of the 6 buttons is that when one of those buttons is clicked, the page is redirected, and then the drop down menu opens to the correct tab.
However, all scripts are killed when a page is redirected, so I cant do something like this:
<body>
<a id="buttonID" onclick="GoToPage('buttonID')">All</a>
</body>
<script>
function GoToPage(buttonID){
redirect to page.html;
open menu to tab related to buttonID
}
</script>
Instead I would probably have to create a function that executes when the page loads, and then attempts to find from which button did it get there from, and opens the menu to the correct configuration based on that.
Should I use something like:
window.onload = ....
And how would I be able to pass which button redirected the page to this?
Opening the dropdown menu should be the responsibility of the destination page, not the source page. Since the server doesn't care about the dropdown menu state, send that information in the fragment identifier:
<a id="buttonID" href="page.html#all">All</a>
On the receiving end, you can retrieve the identifier with
document.addEventListener('DOMContentLoaded', (event) => {
let target = window.location.hash; // target = "#all"
// modify your menu as appropriate
});
The load event doesn't fire until the page has completely finished loading: images, stylesheets, everything. Modifying the dropdown menu doesn't require any of that, so use the DOMContentLoaded event instead. It fires when the HTML page has been loaded and parsed and is ready for DOM manipulation.
I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...
I am using multiple pages that each have jQuery tabs. Lets say I have Page1.html with #tab1 and #tab2 and Page2.html with #tab3 and #tab4. My code has issues with:
1) Within the tab content, Page1.html#tab2 has a hyperlink to Page1.html#tab1. The link does not work - the page just stays on #tab1 when clicking the link. However, a hyperlink in the menu container on Page1 to #tab1 does work. Both hyperlinks use the same a href="#tab1" but for whatever reason, only the link outside of the Page1.html#tab2 content works when linking to Page1.html#tab1. The hyperlinks in the menu container always work.
2) If I send someone a hyperlink to www.Page1.html#tab2, the page URL shows as www.Page1.html with tab 1 showing, meaning I cannot link directly to a tab. However, the menu on the website does correctly link to tabs. If I click the menu link for Page2.html#tab3 while browsing Page1.html, the tab will correctly load and the URL shows Page2.html#tab3 and will remain that way even if I click #tab4 on the page. The URL ONLY changes when clicking menu hyperlinks to different pages, i.e. Page1.html#tab1 to Page2.html#tab3. Clicking Page2.html#tab3 while on Page2.html#tab4, the tab content will correctly change to #tab3 but the URL will remain as Page2.html#tab4.
What I Want:
A) To be able to send someone a link directly to a tab. Sending someone a link to www.Page1.html#tab2 will always load as the URL www.Page1.html with the first tab displaying. However, the menu hyperlinks on the page do work.
B) To be able to link between tabs on the same page if the link is within the tab content. For example, a link in the content of Page1.html#tab1 should be able to link to Page1.html#tab2. Right now, it only works if the link in the content of Page1.html#tab1 is linking to a tab on a separate page like Page2.html#tab3.
C) **EXTRA CREDIT**: When I click directly on a tab, the tab image "pops" out and the previously selected tab "unpops". When I click a menu hyperlink to a tab, the previous tab remains popped out even with the correct content for the newly selected tab showing. Or, if using a menu link to travel to a tab on a new page, no tabs "pop" out but the correct tab content shows. I think fixing the above problems will solve this problem, too.
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
Anyways, I'm a huge noob so the better the code you provide, the easier I can approve your answer as being correct. :)
Thanks!
You need to make your anchor tags hashable, that is, make them 'bookmarkable' for the front-end user. You seem to be on the way to creating your own tab plugin, but jQuery UI will do the hashing part for you. Here is a demonstration setting tabs up as you have mentioned:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
Here's the demo page -> http://muledesign.com/demo/tabs/default-tabs.html
Demo page with hashable link to tab -> http://muledesign.com/demo/tabs/default-tabs.html#movie
Re: point C) - Try using a lightbox plugin and attaching the lightbox plugins open/init function to the activate event on UI tabs -> http://api.jqueryui.com/tabs/#event-activate
I appreciate you may not want to use plugins, but you're already using jquery so meh.
I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.