Using a session.storage variables in a link - html

I'm trying to make a simple configurator using session.storage where the user first chose the first attribute, which then will be stored in a session.storage variable (ie: onclick="sessionStorage.at1='red'")
then, then second and the third.
That works fine and I can display the different attributes as text - but I would like to show the corresponding image that I have made with the following syntax: at1at2at3.jpg (redlargewood.jpg) but I have no clue in how to actually use the variables like: <img src=sessionStorage.at1 + sessionStorage.at2 + sessionStorage.at3 + ".jpg " >
any help would be greatly appreciated

You can achieve this via javascript.Add id to your image tag and do the following in javascript:
let first = 'red';
let second = 'large';
let third = 'wood';
let pic = `${first}${second}${third}.jpg`
document.getElementById('demo').src = pic;

Related

How to convert this HTML to a string?

I have a link that is currently a string. It looks like this:
"<h2>New Test</h2><br><a href='/map/create-new?lat=35.7&lng=-83.55'>Create</a>"
The above works, but when I try to insert variables into the spot where 35.7 and -83.55 are then I end up breaking the link and it doesn't work.
I tried like this:
"<h2>New Launch</h2><br><a href='/map/create-new?lat='+ event.latlng.lat + '&lng=' + event.latlng.lng'>Create</a>"
The variables are event.latlng.lat and event.latlng.lng.
When I try it like this, then the href ends up only being translated to:
map/create-new?lat= so I know that something is wrong with my placement of quotes but I'm just not seeing the issue.
EDIT: just for clarification, it must be a string like I have. I am passing this into a component that I did not make and this is how it works.
You can not add or use variables directly in your markup (html) but you can solve it and get desired results by using javascript (code below):
const customLink = document.getElementById("customLink");
var1 = 35.7;
var2 = -83.55;
customLink.href = "/map/create-new?lat="+var1+"&lng="+var2;
<h2>New Test</h2><br><a id="customLink" href=''>Create</a>
By using the right quotes:
var a = 1;
var b = 2;
var mylink = "http://website.com/page.aspx?list=" + a + "&sublist=" + b;
If you start a string with doublequotes, it can be ended with doublequotes and can contain singlequotes, same goes for the other way around.
This answer was found to this question.
How to insert javascript variables into a URL
best way to use variables within quotes is like this.
<a href=`/map/create-new?lat= ${event.latlng.lat} &lng=${event.latlng.lng}`>
Use variables like this within a string.
<a href=`/map/create-new?lat= ${event.latlng.lat} &lng=${event.latlng.lng}`>
Nothing in the other answers worked for me. I ended up having to install jquery and then used it like this:
var link = jQuery("<a href='#'>Create New</a>").click(function () {
self.onClickCreateNewLaunch(event.latlng.lat, event.latlng.lng);
})[0];
And then just navigated to the page using the function.

Microsoft edge multi element copy

Does anyone know a fast way to copy multiple elements from an inspect page?
What I mean by that is I have a number of elements with same qualities i.e. same class and I want to copy all of them to my clipboard. Is there a way within inspect tool to do such a "trick" ? :)
Thank you in advance!
There's no specific simple way to do this, you can only using code to extract the elements you want.
For example if you want to get elements with the same class name, you can use the following code:
var outputText = "";
var targets = document.getElementsByClassName('classname');
for( var i = 0; i < targets.length; i++ ) {
outputText += targets[i].outerHTML;
}
console.log(outputText);
Then you can copy the output in the console.

SwiftSoup - Extracting specific div tags/elements

I'm not the most knowledgeable when dealing with scraping/getting data from a website, so apologies in advance. I have loaded in the HTML file locally, into my project so that I can have a reference and breakdown of the elements:
<div class="price">99</div>
<div class="size">M</div>
I want to select both these div classes, name and price and extract the value(s) which are 99 and M accordingly, how can I do this? I looked at SwiftSoups
let elements = try doc.select("[name=transaction_id]") // query
let transaction_id = try elements.get(0) // select first element
let value = try transaction_id.val() // get value
But that gave me an error. I can see you can select <P> tags, which are paragraphs, but how do I select the specific div class?
Once again, apologies if this is a beginner question.
Thank you.
Edit - The data I wish to parse:
var pstats = {att1:85,att2:92,att3:91,att4:95,att5:38,att6:65,acceleration:91,agility:91,balance:95,jumping:68,reactions:94,sprintspeed:80,stamina:72,strength:69,aggression:44,positioning:93,tactaware:40,vision:95,ballcontrol:96,crossing:85,curve:93,dribbling:96,finishing:95,fkacc:94,headingacc:70,longpass:91,longshot:94,marking:32,penalties:75,shortpass:91,shotpower:86,slidetackle:24,standingtackle:35,volleys:88,composure:96};
Edit 2 - New data I want to parse:
<div style="display: none;" id="player_stats_json">{"test":0,"ppace":85,"pshooting":92,"ppassing":91,"pdribbling":95,"pdefending":38,"pphysical":65,"acceleration":91,"sprintspeed":80,"agility":91,"balance":95,"reactions":94,"ballcontrol":96,"dribbling":96,"positioning":93,"finishing":95,"shotpower":86,"longshotsaccuracy":94,"volleys":88,"penalties":75,"interceptions":40,"headingaccuracy":70,"marking":32,"standingtackle":35,"slidingtackle":24,"vision":95,"crossing":85,"freekickaccuracy":94,"shortpassing":91,"longpassing":91,"curve":93,"jumping":68,"stamina":72,"strength":69,"aggression":44,"composure":96}</div>
If these tags have unique classes you can use getElementsByClass(_:) function and then get the first item, like this:
let price = try doc.getElementsByClass("price").first()?.text()
let size = try doc.getElementsByClass("size").first()?.text()

Find first word in html and replace

I have following construct:
<h1>
<span>
</span>
</h1>
....
and
<div id="tourname">Riding trip arround the volcano</div>
Now the div with the id is filled by a php function and I would like that
my h1 looks like this:
<h1>
<span>Riding</span>
trip arround the volcano
</h1>
I managed to fill the h1 using this function:
$("h1").html($("#tourname").html());
but I have no idea how to split my string into 2 parts and fill one part
into that span and the rest behind the /span
Can you give a hint ?
Many thanks
You can do that in 2 ways .
1 - When you are writing using php , you can create the span for first word.
2 - Using jQuery. You can see the below code using jQuery
$(document).ready(function(){
var text = $("#tourname").html();
var firstword = text.substr(0,text.indexOf(' ')); // to get the first word
var remaining = text.substr(text.indexOf(' ')+1); // remianing words
var final = '<span>'+firstword+'</span> '+ remaining // combining by adding <span> around the first word
$("h1").html(final);
});
use this:
var strArr = $("#tourname").html().split(' ');
$("h1 span").html(strArr.shift());
$("h1").append(document.createTextNode(strArr.join(" ")));
This should be of some help.
Also consider this fiddle
This will be specific to your use only.
For more flexibility with number of text elements use strArr.splice(index, number_of_elements_to_include_in_span);
instead of strArr.shift();

Umbraco MediaById not working as expected

Trying to display a set of images from uComponents' MNTP, and can't get a value for the umbracoFile property - in the example below, both umbracoFile and url return empty strings:
foreach (var id in #Model.sliders) {
var media = Model.MediaById(id.InnerText);
if (media != null){
var url = media.umbracoFile;
<p>name = #media.Name</p>
<p>alt = #media.altText</p>
<p>url = #media.umbracoFile</p>
<p>url = #url</p>
}
}
It's getting really really really annoying... I've worked around it in other areas like so, using Model.Media:
<img src="#Model.Media("topRightImage", "umbracoFile")" alt="#Model.Media("topightImage", "altText")" />
But that will only help if with the media picker data type, not mntp. It shouldnt' be that difficult, should it?
I can get the images to load if I rebuild the internal search index, but they're gone again on subsequent refreshes.
I've seen others having similar problems, and would really appreciate a solution...
ta
Nathan
This looks like a bug that was fixed in 4.7.2. See the following codeplex item:
http://umbraco.codeplex.com/workitem/30778