I purchase a static HTML, CSS, JavaScript(jQuery) landing page template and I need to add language to it, it has some animations in text for example
<h2 class="large-title-bold">
<span
class="slider-title-fill slider-tr-delay01"
data-text="Enjoy"
>Enjoy</span
><br />
<span
class="slider-title-fill slider-tr-delay02"
data-text="the Difference &"
>the Difference &</span
><br />
<span
class="slider-title-fill slider-tr-delay03"
data-text="the Luxury!"
>the Luxury!</span
>
</h2>
it's a title which I need to have both English and Turkish lang, what is the best way that I can achieve this?
There are many ways of how to do this. A very simple way is to do it over HTML, CSS and JavaScript (no backend programming language needed).
HTML
You will need to work with lang attribute for every single text.
<h2 class="large-title-bold">
<span class="slider-title-fill slider-tr-delay01" data-text="Enjoy">
<span lang="en">Enjoy</span>
<span lang="fr">Profitez</span>
</span><br />
<span class="slider-title-fill slider-tr-delay02" data-text="the Difference &">
<span lang="en">the Difference &</span>
<span lang="fr">la différence &</span>
</span><br />
<span class="slider-title-fill slider-tr-delay03" data-text="the Luxury!">
<span lang="en">the Luxury!</span>
<span lang="fr">le luxe!</span>
</span>
</h2>
CSS
Hide all elements with lang attributes.
span[lang=en], span[lang=fr] {
display: none
}
JavaScript
Display only the elements with the active language.
const url = new URL(window.location.href);
const lang = url.searchParams.get('lang');
if (lang) {
elements = document.querySelectorAll(`span[lang=${lang}]`);
for (let element of elements) {
element.style.display = 'inherit';
}
}
Your URL should be either example.com?lang=en or example.com?lang=fr
Related
I have some HTML which looks like this
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
I would like to use javascript to populate all of the <span> elements with the class hot-drink applied to them with the variable hot-drink-status().
So far I have managed to do this to only one of the elements. The code I wrote looks like this:
var hot-drink = "Avaiable";
document.querySelectorAll('.hot-drink')[0].innerHTML = hot-drink;
I believe I need to change the [0] to something else. I have tried [i] but this does not work.
I know that querySelectorAll is working as it allows me to apply the script to any element. I am just unable to apply the script to all element.
The outcome I am looking for is the HTML to be rendered as below
<p>Latte: <span class="hot-drink">Available</span></p>
<p>Capuccino: <span class="hot-drink">Available</span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
All elements with the class hot-drink are populated with the text "Available"
Try (do not use minus char in variable names - camel case instead)
var hotDrink = 'Available';
document.querySelectorAll('.hot-drink').forEach(el=> el.innerHTML= hotDrink)
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
I am working on project where I need to collect the price value form below div
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
I need help to find the solution.
Here is my suggestion to make it understandable what you are looking for
Plain JS
console.log(
document.querySelector("span.price span:last-child").getAttribute("data-price")
);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
jQuery version
console.log(
$("span.price span:last").data("price")
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
or $("[data-currency-iso]").next().data('price');
or $(".price").find("[data-price]").data('price');
Use jQuery to do stuff like this easily.
Insert into your HTML in the <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then:
$('.price [data-price]').data('price');
It would be better though if you just added a class to your price div and did this:
$('.price-amount').data('price');
I guess you're looking for dataset
The HTMLElement.dataset property allows access, both in reading and
writing mode, to all the custom data attributes (data-*) set on the
element, either in HTML or in the DOM.
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
I want to change only text content inside an h1 tag. Here's my code:
<h1 id="pageTitle" class="ms-core-pageTitle">
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
</span>
</h1>
I've tried this code :
document.getElementById("DeltaPlaceHolderPageTitleInTitleArea").innerHTML = "text changed";
But it doesn't work, here's the result:
<h1 id="pageTitle" class="ms-core-pageTitle">
<span id="DeltaPlaceHolderPageTitleInTitleArea">text changed</span>
</h1>
Any help would be appreciated
You have to use querySelector() method, in order to change text content of hyperlink.
document.querySelector("#pageTitle a").innerHTML = "text changed";
<h1 id="pageTitle" class="ms-core-pageTitle">
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
</span>
</h1>
What you are doing is changing "DeltaPlaceHolderPageTitleInTitleArea" 's innerHTML therefore you replace :
<span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
with:
text changed
What you wanted to change is the title's text am I right ? To do so :
really basic JS:
document.getElementById("DeltaPlaceHolderPageTitleInTitleArea").children[0].children[0].children[0].innerHTML = "text changed";
a bit more advanced :
document.querySelector("DeltaPlaceHolderPageTitleInTitleArea > span > span > a").innerHTML = "text changed";
Or using jQuery :
$("DeltaPlaceHolderPageTitleInTitleArea > span > span > a").text("text changed");
You can try out this.
function changeContent(){
var element = document.getElementById('DeltaPlaceHolderPageTitleInTitleArea');
element.children[0].innerHTML = "whatever";
}
<h1 id="pageTitle" class="ms-core-pageTitle">
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
<button name="change content" onClick="changeContent()">change content</button>
</h1>
You are pointing to the id of the h1 tag and not the anchor ()tag containing the text to be changed. this im not not sure will allow you to insert the text exactly where you want it to be. using the query selector or any other means of selecting the tag wrapping the text you what to change will surely do. if you dont mind, jquery selector will do the job much easier
you can try something like $("#DeltaPlaceHolderPageTitleInTitleArea a").text("")
It's similar to this topic but not working.
Here my codes:
<span class="main_price">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
By default "main_price" and "option_price" class is visible and "option_price_value" class is visible where has the options.
Now I'm trying to hide "main_price" when "option_price_value" is visible.
For more clear,
When has no options by default it's showing
<span class="main_price">
$50
</span>
<span class="option_price">
</span>
And when options available it should look like
<span class="main_price" style="display:none;">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
EDITED to include jquery, my fiddle is working now. Check this new version out: https://jsfiddle.net/cbbs2oms/3/
Basically checking if there's any text in the option span and showing the main price only if there's not option value. Let me know if I've misunderstood.
$(".option_price_value").each(function(){
if ($(this).text().trim().length) {
$('.main_price').hide();
console.log('has option');
} else {
$('.main_price').show();
console.log('has no option');
}
});
How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.
You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');
$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?