I am new to this site, and I know almost nothing about programming, so this question may have a simple answer.
I want to have links in my site that are able to grab a part of the current URL address to complete the href and send me to the desired webpage.
For example, let’s say that the webpage in my site I am viewing is:
https://www.example.com/notes/note-1
And then I have links in the same page like these ones:
https://www.example.com/editor1
https://www.example.com/editor2
Is there a way (java or jquery) that I can grab the last part of the path name (/note-1) to dynamically add it to my html links so the new addresses become?:
https://www.example.com/editor1/note-1
https://www.example.com/editor2/note-1
Now, I don’t need a code that appends “note-1” to the href, but that appends the ending of the current path—whatever it maybe (“/note-2, /note-3, etc.) to the href.
Thanks for your help.
You could implement it like so:
const idx = location.href.lastIndexOf('/');
const lastPart = idx !== -1 ? location.href.slice(idx + 1): "";
document.querySelectorAll('a').forEach(a=>a.href+=lastPart);
Related
I have an interesting idea, but maybe (or rather hopefully) it isn't new to you.
I have an image-based menu on a homepage. That is, hundreds of images. When the user has browsed to a certain URL, and then opens the dropdown again (containing the images) I want the URLs image to have a frame.
For example, the user is on my-homepage.com/flowers and the image "#flowers" gets a frame from a class.
I know I can do this which works great:
jQuery(function() {
var loc = window.location.href;
if(/my-url/.test(loc)) {
jQuery('#my-image').addClass('active-image-url');
}
});
.active-image-url {border: 1px solid #000;}
But then again, I have hundreds of images, so it would be quite crazy to add that code a hundred times.
Isn't there a way to compare URL and image ID and if these are the same, the class gets added? For example, if a part of the URL my-homepage.com/flowers partly equals "#flowers" please add class.
I know it is not like this, but for the sake of explaining well:
jQuery(function() {
var loc = window.location.href;
if(/flowers/.test(loc)) {
jQuery('#flowers').addClass('active-image-url');
}
});
What do you think, could it be done? Maybe it's a JavaScript task?
Best regards,
Skt
You can take the path of the URL or the href like you did, split the string by '/' into an array, and use the last element of the array to query for an HTML element. Something like this:
const path = window.location.pathname;
const words = path.split('/');
jQuery(`#${word[words.length - 1]}`).addClass('active-image-url');
i have a question regarding changing URL of anchor tags based on HREF.
What i do to select all anchor tags is like this:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
With this i select all anchor tags that refers to secureloan.asim.no
What i want also is to CHANGE the links when user click on it (i want to remove a parameter)
example of URL can be:
Example URL:www.secureloan.asim.no/oasis/index.html#/no/asim?lang=nb-no&product=lev&lanekilde=&campaigncode(etc....).
i want to remove "lanekilde=" from the parameter. im using this code:
String(document.location.href).replace("&lanekilde=", "");
This gives me right URL but how do i change it for all users on website when they click on it.
Code ive made til now:
var anchortags= document.querySelectorAll("a[href*='secureloan.remember.no']");
String(document.location.href).replace("&lanekilde=", "");
thank you :)
PS: NO Jquery please!
PS: im using tag manager if anyone has a idea of different way
You just need to iterate over the nodeset and change each one in turn:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
anchortags.forEach(function(tag) {
tag.href = tag.href.replace('&lanekilde=', '');
});
I'm building a web app to make my business more automated with HTML/CSS/jQuery in the front end and python in the backend .
I wrote an easy script with jQuery that call a route with ajax and recieve the data as json and after that parse it and return a list of iframes depending on it's length : If we have 20 items in that list and we want 5 items per page, create 4 pages and put 5 iframes in each link .
Here's the code responsible for this feature :
$('.pageContent').empty()
for (var i = 0; i < vidPageList.length; i++){
var videoUrl = vidPageList[i].videoLink
var postUrl = vidPageList[i].postLink
console.log(postUrl)
$('<iframe src ="'+videoUrl+'" class = "videoEntry" width = "360" height = "250"></iframe>').appendTo( ".pageContent" )
$('<a class = "postLink" href = "'+postUrl+'"> Video link </a>').appendTo(".videoEntry")
}
The problem:
iframes are added perfectly but the links are not added at all, I don't know why, the console is not showing me any error, I tried to debug the values of postUrl and they are all correct, why is it doing this ? It looks like the last line responsible for adding the link is not working, I also tried to add everything with one appendTo() call but it only added iframes, what I'm missing here ?
The first time your selectors ran, there was no .videoEntry class because it is in the iframe. It may be useful to first make all your html content before appending.
I need to create a link for a set of documents. They are created dynamically, thus the names are also different, f.ex. Test, Test2, so one.
I need to show the link like "Document TestN", where links changed according to the current document. I can now create the links by a href="id" onklick=bla+bla+bla", but the name does not change. Instead of 'Dashboard' I need to get 'Dashboard of "ConcreteSite"', where I can get names by pageHeader:
document.getElementById("pageHeading").appendChild(pageHeading);
<script language="javascript" type="text/javascript">
var siteNameAsParam = window.location.search;
var scrt_var = siteNameAsParam.split("siteName=")[1];
</script>
<p>You are here: Dashboard </p>
Based on your code I think this is what you're after but more detail on what you're trying to do would be great.
<p>You are here: Dashboard </p>
<p>You are here: Dashboard </p>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
var siteNameAsParam = window.location.search;
var scrt_var = siteNameAsParam.split("siteName=")[1];
links[i].href = links[i].href + '?siteName=' + scrt_var;
links[i].innerText += ' fred';
}
}, false);
</script>
This does the following:
On page load gets all links on the page
loops through the links and grabs the query strings from the url
splits the query string on siteName
sets each link url to add the query string
updates the links text to append the query string (or undefined if it doesn't exist (see note below)
Note: your code implies you already have a query string in the url of siteName=SITENAMEHERE. Also, depending what you're trying to achieve, there are probably much better approaches. This I hope answers your current question but I think you should review how other achieve what you're after.
Update:
Here is a jsfiddle with a different working sample of what I think you might want. Hopefully it helps. there are comments in the fiddle. I think you want to try doing more when the link is created (set the event listener there, update the text as desired, etc.) instead of on the click event.
I'm creating a userscript which adds new functions to a website.
The website has many users, but doesn't have a feature to search for users.I want to create such a function. To do that, I have created a button in the already existing search page for other search purposes. When I click the button, I need the script to search for the input on Google and fetch the URLs and show the results in a piece of HTML code on a non-existing page.
Can I fake an URL with a userscript, so that it uses it to show HTML?
If not, can I replace certain HTML within the page?
The code isn't really that interesting. It just adds a button with a link and selects it when on the non-existing page.
CODE:
if (document.URL == "http://www.bierdopje.com/search" || document.URL == "http://www.bierdopje.com/search/" || window.location.href.indexOf("search/shows") > -1 || window.location.href.indexOf("search/episodes") > -1 || window.location.href.indexOf("search/forum") > -1) {
var users = document.createElement('li');
users.setAttribute('class', 'strong');
var UsersNode = document.createTextNode("Gebruikers");
var UsersLink = document.createElement('a');
UsersLink.setAttribute('href', 'http://www.bierdopje.com/search/users/');
document.getElementById("submenu").childNodes[1].appendChild(users).appendChild(UsersLink).appendChild(UsersNode);
if (window.location.href.indexOf("search/users/") > -1) {
UsersLink.setAttribute('href', './');
UsersLink.setAttribute('class', 'selected');
}
}
Sorry for answering my own question, but like Brock Adams already said: it may have been too localized.
The solution to fake an url is to replace the 404 not found content.
If there's like a container with a header and a paragraph, find the container by making it a variable, and then replace it with another variable:
// find the container
var example = document.getElementById('container').childNodes[0];
// set new container
var newcontainer = document.createElement('div');
newcontainer.setAttribute('id', 'ncontainer');
// replace the existing container with the new one
example.parentNode.replaceChild(replacement, example);
// write content to the new container
document.getElementById('ncontainer').innerHTML ='<p>This is not a 404 anymore</p>';
There are probably a lot more and shorter ways to accomplish this, but they can be found by Google (javascript replace).
To replace the complete page, use
document.write()
To finish the page, you can set the title with the following:
document.title = "WEBSITE TITLE";