Replace Label/span with an already made Label/span - javascript

I'm trying to replace the words in a span ("Grades")
<span class="vui-heading-1">Grades</span>
with a more definite name from another label (the title="Peer Tutor Training")
<a class="d2l-menuflyout-link-link" title="Peer Tutor Training" href="/d2l/home/419542">Peer Tutor Training</a>
Wanting the title to replace when the page loads, as I'm using this to replace a span wording in an iframe with the title within the same iframe.
Not entirely sure how to go about this. Thanks in advance!
NOTE Upon further inspection, it turns out that the from the original page is not actually included into the iframe. Workaround method I'm requesting help with is an onload function to replace the "Grades" text in to "Peer Tutoring Training" (or other text since this is only one example)

var $iframe = $('iframe#your-iframe'); // iframe that u wanna modify
$iframe.on('load',function(e) {
// get the title value
var title = $(this).find('a.d2l-menuflyout-link-link').attr('title');
// get the span element
var $span = $(this).find('span.vui-heading-1');
// replace the text in the span
$span.text(title);
});

Related

How to dynamically add data from a span tag into a href tag

I think this may have a simple answer that I'm missing. The following tag inserts a TV show name into any page on my website:
<span class="show-title"></span>
what I'm trying to do is incorporate that data dynamically into a HREF URL link.
So, let's say on the page I'm on:
produced the result: GOTHAM.
I'd like to then use that data to create this url:
https://en.wikipedia.org/wiki/GOTHAM_(TV_series)
So I'm trying stuff like:
</span>_(TV_series)"> Link
or
Link
nothing working - any help would be awesome. Thanks!
You could do something like this:
In HTML
<a class="wikipedia-link">Link</a>
And your JavaScript function:
setLink(showTitle) {
var link = document.getElementsByClassName("wikipedia-link");
link.setAttribute("href", "https://en.wikipedia.org/wiki/" + showTitle + "_(TV_series)");
}
The html you use is wrong. span shouldn't be inside tag a. No tag inside another.
If your result is in javascript variable, you can set the url using jquery.
$('a').attr('href', "https://en.wikipedia.org/wiki/" + result + "_(TV_series)");
result variable is your desired result.
Although there's better ways of going about doing this, I'm going to answer the question in the context in which you presented it:
First, give the url link a class or ID so you can easily select it with JavaScript to change the href value later. Also, don't try to nest the span tag anywhere inside the a tag. Leave it outside.
<span class="show-title">GOTHAM</span>
Link
Next, in a JavaScript file or a <script> tag, define your variables:
var showTitle, showWikipediaLink, linkElement
Then, assign value to your newly defined variables
linkElement = document.querySelector('.show-wikipedia-link');
showTitle = document.querySelector('.show-title').innerText;
showWikipediaLink = 'https://en.wikipedia.org/wiki/' + showTitle + '_(TV_series)';
Finally, use JavaScript to update the href value of the link element to the show's Wikipedia link:
linkElement.href = showWikipediaLink;

Select all anchor tags based on href and Change it

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=', '');
});

How do I wrap text within a link tag using JavaScript/Jquery?

Here is my current code:
<a class="mg_label_7" href="/" shape="">Hello</a>
I want to have:
<a class="mg_label_7" href="/" shape=""><div id="hello">Hello</div></a>
So I can manipulate the background of the link text without changing the rest of the link areas text. Is there anyway to pinpoint this piece of text and insert a div or even a span using JavaScript/jQuery?
I've been trying to do this for around 3 hours, the closest I've got to achieving it is using
var elem = document.getElementsByTagName('a')[0];
var html = elem.innerHTML;
elem.innerHTML = '<div class="red">'+ html + '</div>'
which successfully targeted a link in my code and changed it to the span, but if I try to getElementsByTagName then getElementByClassName and use mg_label_7 it won't work. There are duplicates of the tag in the code and I want to target all of them.
I'm trying to manipulate a SharePoint web part so I'm not sure if it's stopping it from being edited.
You can use .wrapInner()
$('.mg_label_7').wrapInner('<div id="hello"></div>')

Replacing one specific word in the textarea

I have created a hashtag and user mention input, so that when you type an '#' it displays a list of users you may know.
To this point, everything is Okey, But when I click on a user a href tag :
<a href="javascript:void(0);">
<span style="background:url('/uploads/user_00010/thumbs/32x32_d30302e9-07d7-8fd7-dba0-1a217c9c5534.jpg') no-repeat" class="tny_avatar"></span>
<span class="username">Sara</span>
<span style="height:0px;display:block;" class="clr"></span>
</a>
I want to take its username, and put it directly in the right place in the textarea...
What I did:
I take the current word in the textarea (currentWord = 'sa' in the previous screenshot)... and replace this current word with the word in the username span from the list.
The problem with this solution is that, if the substring "sa" exists in another word in the textarea, it will replace it too.
This is my js code :
$('.suggest ul li a').live('click', function () {
var text = $('.quote textarea').val();
var newVal = $(this).find('.username').html();
text = text.replace(lastWord, '#' + newVal);
$('.advText').val(text);
$('.advText').trigger('keyup');
$('.tglst').hide();
});
lastWord is the current word, where the blanking cursor is pointing; It's a global js variable.
trigger('keyup') , is just triggering some functions creating a div containing the hashtags and mentions in different color (blue). That's all it's about.
$('.tglst').hide(); is hiding the dropdown.
Does anyone know how to replace the current word only?
Thanks in advance
As mentioned in my comment, you could replace the very last word, that is most probably the one you're currently typing.
Or you can take a look here and see how to get the current cursor position. You'll have the exact word to replace afterwards.

Can I pass a string variable into an <a href> tag for a website link?

I am somewhat new to web developing, so I am trying to learn along the way. I have a div that is 500 x 500. Inside of that div I have two divs that are each 250x500. So my outer div is filled up with the two inner divs.
I have it setup so that when I click on the first div (the left one) a JavaScript is called, and a prompt pop up box asks for a website URL which is then stored inside of a string variable.
How can I make it so that the second div (the right one) takes the string variable from the alert box from the left div and puts it into an a href tag so that I can link to the website from the right div?
Can a a href tag accept a value from a variable for its link? Maybe I am going about this all wrong, is there a better way I should be approaching this? Any help is appreciated!
There's the DOM creation method:
// Create an element
var aEl = document.createElement("a");
// Ask the user for the URL
aEl.href = prompt("Please enter the website URL");
// Determine whether to use innerText or textContent
if ("innerText" in aEl)
aEl.innerText = aEl.href;
else
aEl.textContent = aEl.href;
// Add the link to the right div
document.getElementById("rightDiv").appendChild(a);
Or the straight-up innerHTML method:
var url = prompt("Please enter the website URL");
document.getElementById('rightDiv').innerHTML = ''+url+'';
You can use:
document.getElementById('yourlink').href = 'entered link';
I haven't tested but I believe it should work.

Categories

Resources