I have a web page (Wordpress) with a tab module. What i want is that if you click on a specific tab title, it will redirect to another URL.
The problem is that the tab module doesn't give me options to edit the URL.
The tab module code is like this:
<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_0">Sat 1st Service</li>
<li class="et_pb_tab_1">Sat 2nd Service</li>
<li class="et_pb_tab_2"></li>
<li class="et_pb_tab_3">Sun 2nd Service</li>
<li class="et_pb_tab_4"></li>
<li class="et_pb_tab_5">test</li>
</ul>
Since each tab title has a class, is it possible to use Javascript to change the URL? Let say I want to change the link in the class 'et_pb_tab_5' to www.google.com.
Thanks!
You could use in Javascript:
window.onblur = function () { document.title = 'Why Did You Leave?'; }
window.onfocus = function () { document.title = 'You Came Back! YAY!'; }
Related
I have a list of links on a services page that when clicked, reveal content relevant to the individual service. This is to save space on the page. I have done this using slide in JS.
On the homepage I also have a list of services that I would like to have linked the services page and then open up the relevant content dependant on service clicked on the homepage.
I'm a new user of Javascript so unfortunately this isn't something I could work out myself or find a solution for elsewhere. I would really appreciate somebody helping me to find a way of doing this.
Find below a short example of my code:
Homepage
<ul id='homepage-services-list'>
<li><a href='services.php'>Service 1</a></li>
<li><a href='services.php'>Service 2</a></li>
</ul>
Services
<ul class='services-tabs'>
<li class='services-tab'>
<a class='service-1-trigger'>
<div>
<h3>Service 1</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-1-content'>
<p>Content about service etc.</p>
</article>
<li class='services-tab'>
<a class='service-2-trigger'>
<div>
<h3>Service 2</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-2-content'>
<p>Content about service etc.</p>
</article>
</ul>
Javascript - JQuery
$(document).ready(function(){
$(".service-1-trigger").click(function(){
$(".service-1-content").slideToggle(600, function(){
$(this).toggleClass("service-1-toggle").css('display',' ');
});
});
$(".service-2-trigger").click(function(){
$(".service-2-content").slideToggle(600, function(){
$(this).toggleClass("service-2-toggle").css('display',' ');
});
});
});
Thank you!
You can add anchors to your links.
<ul id='homepage-services-list'>
<li><a href='services.php#1'>Service 1</a></li>
<li><a href='services.php#2'>Service 2</a></li>
</ul>
With these anchors, you can extract from the URL the service wanted (1 or 2) and simulate a click with jQuery.
In your document.ready :
var url = document.location.toString();
if (url.indexOf('#') != -1) {
var num_service = url.split('#')[1];
$(".service-" + num_service + "-trigger").click();
}
Here's one way to approach it:
On the home page, add fragment identifiers to those links:
<ul id='homepage-services-list'>
<li><a href='services.php#service-1'>Service 1</a></li>
<li><a href='services.php#service-2'>Service 2</a></li>
</ul>
On page load (inside your ready handler will do) look at location.hash. That is the current fragment identifier for the page. If it's one of your service identifiers, trigger the code showing that service.
You might also have your click handlers add the hash to the URL by setting location.hash, for consistency.
Look also at the history API for more control over hashes and URLs for in-page transitions.
Short of switching to a SPA-type framework, there's no way for javascript on one page to directly affect a subsequently-linked page.
Two simple approaches to work around this are
Cookie / localStorage: Have your outgoing link set a cookie with a specific value for each link. The receiving page can check the value of this cookie and adjust as needed.
URL hash: Include a hash value or parameter in the outgoing links, i.e. <a href='services.php#service1'>. The receiving page can then check location.hash to read this value.
I have a simple jQuery tab working fine. The code for this feature is:
$(document).ready(function() {
var tabHead = $('ul li');
var tabContent = $('.content');
tabContent.not(':first').hide().end();
tabHead.on('click',function() {
tabContent.hide().eq($(this).index()).show();
});
});
And the HTML markup for the tabs is:
<ul>
<li>Head 1</li>
<li>Head 2</li>
</ul>
<div class="content"> Some Content/........</div>
<div class="content"> Some Content/........</div>
However, when I click the "Back" and "Forward" buttons of the browser, only the url changes e.g.
http://some-path/demo-tabs/#tab2
The content of the tab does not show up. How can I make the tab's content also show up on clicking the "Back" or "Forward" buttons?
Listen for the "hashchange" event on the window object, and trigger a click on the relevant anchor link when that's fired.
You can target the correct link using the jQuery attribute-equals selector. That looks something like this: a[href='#tab1']. You can get the link's href from the URL via the window.location.hash property.
$(window).on("hashchange", function() {
$("a[href='" + window.location.hash + "']").click();
});
Take a look at this list of browsers that support the hashchange event.
Use id instead of href
<ul>
<li><a id="#content1">Head 1</a></li>
<li><a id="#content2">Head 2</a></li>
</ul>
<div class="content"> Some Content/........</div>
<div class="content"> Some Content3........</div>
This will prevent change in URL
JSFiddle
I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
I want to add a language switcher to a specific html page. I don't need any language text only the link to another site will need to be changed depending on the click.
It wouldn't make much sense here to create three html pages just to deal with some link change but my jquery skills are not that great.
The destination structure looks like this:
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
<li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
<li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/Spanish/folder/index.html">Index Link</a></li>
...
<ul>
As you can see I would only need to replace the language name ("English") with Spanish in order to make the link work.
So I was thinking that the user clicks on the according flag and the url string changes accordingly.
I would be happy about some example how to switch the language name
HTML:
<a data-lang="Spanish">To Spanish</a>
<a data-lang="Russian">To Russian</a>
JavaScript:
var current = "English"
$("[data-lang]").on("click", function() {
var lang = $(this).data("lang");
$(".clickButton").prop("href", function(i, href) {
return href.replace(current, lang);
});
current = lang;
});
DEMO: http://jsfiddle.net/a2xqL/
make it easy for yourself: add custom data attribute to links;
<a data-lang="English" href="">
Than access it with jQuery by $link.data('lang'); and add it to the href.
I am trying to make a jquery menu that when I click on one of the links (with reloading the page), it changes its class to "active" and removes this class when I click on another link.
here is my code :
enter code here`$(document).ready(function(){
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
});
<ul id="mainMenu">
<li class="hover-width1">STRONA GŁÓWNA</li>
<li class="hover-width3">OFERTA</li>
<li class="hover-width3">CENNIK</li>
<li class="hover-width2">PRZEPISY</li>
<li class="hover-width2">GALERIA</li>
<li class="hover-width1">NASI KLIENCI</li>
<li class="hover-width2">NARZĘDZIA</li>
<li class="hover-width1">CIEKAWOSTKI</li>
<li class="hover-width2">KONTAKT</li>
</ul>
Can someone tell me why my code is not working when I reload the page:(
You can use $(document).ready(function(){ or $(function(){ to init jquery code, but not both at the same time.
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
The code should work fine, and when you reload the page the markup changes won't stay up, so you must make use of the uri / cookies to determine what item to show active.