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.
Related
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!'; }
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'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
In a CMS that returns a list of results from a search, I have a list of items that looks something like this:
<ul class="results_odd_row">
<li class=title> Title </li>
<li class=published> Year </li>
<li class="author"> Author </li>
<li class="avail"> Out; try Another Search</li>
</ul>
<ul class="results_even_row">... </ul>
<ul class="results_odd_row">... </ul>
...etc...
For the "try another search" link, I'd like to append onto the url some information about the record, like "http://another.search?title=[title]&author=[author]", so that information can be used to execute the other search.
How can I identify elements that have no specific ID, and where there are multiple elements of the same class on the same page? In pseudo code, what I want might be something like:
1. href = base URL (http://another.search) plus
2. the text from the first <li> element above with class="title"
3. the text from the first <li> element above with class="author"
Also, I'm limited by the CMS to whatever javascript I can use within the A tag.
If it's not already obvious, I'm a complete newbie with javascript, so please don't feel your potential response is insultingly basic.
You can build your query string in this way
var baseUrl = "http://another.search"
var author = $('.results_even_row .author, .results_odd_row .author').first().text();
var title = $('.results_even_row .title, .results_odd_row .title').first().text();
var queryString = baseUrl + "?title=[" + title + "]&author=[" + author + "]"
Try it here.
Then you just use this string for the next search.
I have a few tabs on a page that have this markup
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
The hiding and showing of the content in these tabs are controlled by some JQuery code that begins thus
$(document).ready(function () {
// Hide all tabs apart from the overview
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
...
The problem is that if I add, remove or rename tabs (like I have just done), then I have to change all this code. What I would like is to add, rename or remove as many tabs as I like but to not have to modify this JQuery code.
I'm not really looking for someone to code a solution for me but rather wanted to start a discussion on tools, techniques etc that can be used to avoid this sort of naming dependency.
EDIT
I also have this bit of ugliness for when a tab is clicked.
$('#holiday-details-nav ul li a').click(function () {
// Remove active class from all links
$('#holiday-details-nav ul li').removeClass('active');
//Set clicked link class to active
$(this).parent().addClass('active');
// Set variable currentTab to value of href attribute of clicked link
var currentTab = $(this).attr('href');
// Hide all tabs
$('#holidaydetails-description-imagecontainer').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
$('#holiday-details-bottom').show();
$('#holiday-details-left-booknow').show();
// Show div with id equal to variable currentTab
$(currentTab).show();
$('#holidaydetails-description-imagecontainer').show();
return false;
});
Thanks,
Sachin
You could assign a common CSS class, say tab, to every li except overview, and then use a jQuery class selector to hide them all. For example:
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
And then, to hide every tab except overview:
$("holiday-details-nav .tab").hide();
Or the other way around, that is, add a specific class to overview, and hide every other tab:
<div id="holiday-details-nav">
<ul>
<li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
Then, to hide, select all tabs, and exclude overview using .not():
$("#holiday-details-nav a").not(".overview").hide();
When dealing with tabs, especially in the setup you have (where the href attribute has the id of the div related to it), you don't need to hardcode anything, use the title attribute, or use any extra classes. Look at this:
http://jsfiddle.net/FAM2s/2/
All it does it find all of the tabs' detail divs and hide them all, then only show the one related to what was just clicked.
As long as you set the correct href attributes for the links, and set the corresponding divs with those id's, it will work, no matter how many tabs you add/remove whenever you want.