Hi Wonder if anyone can point me in the right direction.
I'm after some code that I can put on a link that will go to the current page url but in a separate folder or add a language identifier into the url.
So for example, if someone is on FAQ.aspx , they click the Italian link in the menu and it will send them to it-FAQ.aspx or /it/FAQ.aspx and the same for other pages.
Does that make sense? and is it possible, and can someone point me into the direction of where to look
Thanks in advance!
Try something like this :
Get first pathname of the current url, then put language code in front and change href of the link with jquery :
<html>
<a class="switch_language" data-country-code="it" href="">Italian</a>
<a class="switch_language" data-country-code="de" href="">German</a>
and...
<script>
$('.switch_language').each(function() {
$(this).attr('href', $(this).attr('data-country-code') + '/' + location.pathname);
});
Your urls of the language links will be look like this
/it/faq.aspx
/de/faq.aspx
Using a data attribute, you can store the "part to add to the URL" on the link. You can read it using the .data() method.
Then... If you split the actual URL by the /, you can reassemble it and insert the part to be added.
This script will works on any page.
$(".menu .lang").on("click",function(){
// Get the actual page URL
var thisPage = location.href;
console.log(thisPage);
// Split the URL by the "/"
var splitted = thisPage.split("/");
var splittedLength = splitted.length;
// Get the data-lang value
var insert = $(this).data("lang");
// Re-assemble the URL except the last part
var destination="";
for (i=0;i<splittedLength-1;i++){
destination += splitted[i]+"/";
}
// Add the part to "insert" and last part of the URL
destination += insert+"/"+splitted[splittedLength-1];
// OR
// destination += insert+"-"+splitted[splittedLength-1]; // See explanation below the snippet.
// Go to that page!
console.log(destination);
//location.assign(destination); // Commented for this demo...
});
.menu a{
display:block;
text-decoration:underline;
cursor:pointer;
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>FAQ</h1>
<div class="menu">
<a class="lang" data-lang="it">Italiano</a>
<a class="lang" data-lang="en">english</a>
<a class="lang" data-lang-"fr">Français</a>
</div>
Here, the language parameter is added in between / like a it's a directory... But you can easilly add it to the page name like it-FAQ.aspx.
Related
On my page there're 2 href links like this:
Name
Phone
The URL that the user is on is based on this format:
http://localhost/site/name/ASDF
I want it so that the website automatically fill out the href boxes like this
Name
Phone
I know I can just assign an id to each of the a tag, and have javascript set the href, but I was wondering if there's a way to do it without having to have a function that sets it once the page is loaded.
Is there a way to do it like I want to? The main problem is the ASDF which is a unique string that the user can specify, so on the page with URL:
http://localhost/site/name/John
the 2 href will be:
Name
Phone
You should get current url then split it and get dynamic name then insert it to href tags. see this exaple:
var fakeUrl = $('#fakeURL').text();
var split = fakeUrl.split('/');
var user = split.pop();
$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);
#fakeURL {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="name" href="#">Name</a>
<a id="phone" href="#">Phone</a>
<span id="fakeURL">http://localhost/site/name/ASDF</span>
or another user:
var fakeUrl = $('#fakeURL').text();
var split = fakeUrl.split('/');
var user = split.pop();
$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);
#fakeURL {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="name" href="#">Name</a>
<a id="phone" href="#">Phone</a>
<span id="fakeURL">http://localhost/site/name/Jiff</span>
it's an example and will read from fake url you should use this code in your server to get real url:
var url = window.location.href;
var split = url.split('/');
var user = split.pop();
$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);
jsFiddle
If your server-side is generating the 's dynamically, you can make it without problem.
If your links are static you need javascript because parts of your href is based on their own properties.
If you use jquery, you dont need to add ids in links in order to fill hrefs, but, If your document is big, the script should be very inefficient.
If you give me more info about your use case, i can help you better.
you can try this..
use query string like localhost/site?name=Max
then do this
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].DIRECTORY_SEPARATOR.$_GET['name']
I am looking for a way to add an active class to the tag that has an href of the current page.
Say I am on the page localhost:3000/inbox, I need my html to change add the correct class to the correct which are all located in the div with the class sidebar.
So when at "/inbox" jQuery should make my html look like this:
<div class="sidebar">
<a href="/link">
<i class="fa fa-inbox"></i>
<span>A Link</span>
</a>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</div>
This is what I tried, but it doesn't work, it breaks the code:
var href = $(location).attr('href');
('.sidebar').find('a[href*=href]').addClass("active");
Thank you. Please let me know if I wasn't clear enough.
It looks like you're almost doing it right, with the minor mistake of forgetting to call jQuery or $. You also need to concatenate your selector, so that the value of href is searched for.
$('.sidebar').find('a[href*="' + href + '"]').addClass('active');
You probably also need to find just the path name to match your href values, like so:
var href = window.location.pathname;
How about this?
var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");
Please note the ' around the path. They are there because jQuery cause syntax error if there are unquoted / in the selector.
When I try it on JSFiddle, I get a / at the end of the path. You might want to add that to your links, or you can remove it from the path variable like this:
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
Then some browsers might not include the leading / (or at least I think so), so you might want to add it in case it isn't already there:
if(path.charAt(0) != "/")
path = "/" + path;
Since you use *= you might match more than the current page. For instance, if you are on /inbox/ you will also add the class to links to /inbox/sub/folder. To avoid this, use = instead.
Taken together, you would get this:
var path = window.location.pathname;
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
if(path.charAt(0) != "/")
path = "/" + path;
$(".sidebar a[href='"+path+"']").addClass("active");
Here is a working JSFiddle. (You might need to press run to make it work, as the URL is different the first time the page load.)
As far as I understand your question you want to change all divs that have a href of '/inbox' to have the class "active"
Your code should therefore look like this
$(document).ready(function(){
$(.sidebar a[href=='/inbox']){
$(a[href=='/inbox').addClass('active');
}
}
JavaScript novice, thanks in advance.
I'd like to get the the full string of query parameters and append them all to a link in the body. The link in the body will send the user to a registration website so I'd need those query strings to carry over to the next site. I'm thinking this would be the best way to do it, if not, please advise.
Example: http://example.com?utm_source=Twitter&utm_medium=HostedEvent&utm_campaign=Event2015
I'd like go grab ?utm_source=Twitter&utm_medium=HostedEvent&utm_campaign=Event2015 and add it to a link in the body
Link: Register
Assuming the link in the html link does not have other parameters and that you add a class to it so we can target it
Register
Then you need the following script
$(function(){
var urlparams = window.location.search;
$('.copy-url-params').prop('href', function(idx, current){
return current + urlparams;
});
});
I am working on a HTML template, but I cannot touch the HTML code, I can only work on CSS and JS files. So I cannot in any way edit the HTML code.
What I am trying to achieve is to put some links in active status when jQuery or Javascript recognizes that the current page URL is the same one of the link I want to put in active status, without editing the HTML code.
Is there a way to do it? I tried in many ways but with no luck.
Here is the HTML code ( Remember I cannot edit it ).
<span class="Tag_Nav_Aux">
Create Account
|
Login
|
My Cart
</span>
The jQuery or Javascript code should work on different links, other than the ones I reported above, since the HTML changes when the user is logged in or logged out.
So the jQuery should point the class Tag_Nav_Aux and add the Active class to any a tag it will find that has the link the same of the current URL.
You can do something like this. Your file name from the URL
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
After that get the anchor from the navigation and apply some class.
$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');
Here you have to write a CSS active class which will make that link to appear like an active link.
Try this script
jQuery(function($){
$('.Tag_Nav_Aux a').filter(function(){
return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
}).addClass('active');
});
and create a CSS rule for
.Tag_Nav_Aux a.active{
// style you want the active link to have
}
$(document).ready(function() {
var url = window.location.href.toLowerCase();
$(".Tag_Nav_Aux a").each(function() {
var $this = $(this);
var href = $this.attr("href").toLowerCase();
if(url.indexOf(href) > -1) {
$this.addClass("active");
}
});
});
I think you need to check the current page url and assign a class to the item like to active.
I usually do putting class="active" based on current URL match with help of server side code.
But if you dont want server code you can do with help of JavaScript
var currentPage=window.location.href;
if(currentPage=="")
{
//logic to find and add a Class for the proper anchor tag
}
Hi I have to use only html and javascript. I have created one single page which contains a top navigation links the url for those links are something like:
domain.com,
domain.com/b1,
domain.com/b2
how do I highlight the current link.
If I understend question you may try html-attribute style for link tag:
<a style="color: red">link</a>
OR edit CSS-file for that link.
You can set class with serverside and define this class into CSS.
If coding only JS see for JS-object window.location.
You'll need to use a simple JS script to check the href of the link and compare it to the window.location.href (the current URL).
Here's a simple example using JQuery:
var currentUrl = window.location.href;
$('a').each(function(index) {
var url = $(this).attr("href");
if (url === currentUrl) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
Here it adds a class current to the link if it is the current link. I have a demo here on JSFiddle.
Using jquery
$('a[href="' + window.location.pathname + '"]').addClass('highlight');
replace pathname by one property (or a combination of properties) of the location object if it's not the good one.
the snippet add 'highlight' class to the link with the specified href, then you can write some css to highlight your link.