I've been researching around for code that will let me click an <a> tag to convert the page's language to a different language using a key value pair, but the countless ones that I've found online lurking around seems to be tailored for its own personal needs or incomplete.
So my question is, how would I go about changing every element with a certain class to the language from the <a> tag I clicked, while using the dictionary keypair?
Here's my current JQuery/JS code:
var langcodes = [{
code: "en",
name: "English",
}, {
code: "zh-Hant",
name: "Traditional",
}, {
code: "zh-Hans",
name: "Simplified",
}, {
code: "vi",
name: "Vietnamese",
}];
var dictionary = [{
//Word one
English: "Abby",
Traditional: "AbbyT",
Simplified: "AbbyS",
Vietnamese: "AbbyV",
}, {
//Word two
English: "Babby",
Traditional: "BabbyT",
Simplified: "BabbyS",
Vietnamese: "BabbyV",
},
//and so on and so forth
];
$(document).ready(function() {
$(".langtype").click(function() { //click an element(language) w/ class langtype
$(".trans").each(function(key, item) {
//for each element with the trans class, change its text to be fitting of .langtype's language
});
});
})
<div class="navitem languagediv">
<a>LANGUAGE <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a class="dropitem langtype">ENGLISH</a>
<a class="dropitem langtype" href="#">繁体中文</a>
<a class="dropitem langtype" href="#">简体中文</a>
<a class="dropitem langtype" href="#">Tiếng Việt</a>
</div>
</div>
I appreciate all the help or code templates I can get. Thanks!
One way would be to give each word or phrase in the dictionary a key and then put that key on each div that you want translated. Also put an attribute on your language selectors indicating the language that's being selected. In your each loop, read the $(this).attr('key') (if you used 'key' to set the key) and then look up the new word in the dictionary. This is a basic working example: https://jsfiddle.net/nghjucLs/
I wouldn't try to translate word by word (by scanning each .trans element for the word and then searching for it in the dictionary); that could get very slow with a larger dictionary and more text on the page to translate.
I recently used this library:
http://www.openxrest.com/translatejs/
to complete a similar task where I turned certain chunks of website to another language based on user feedback.
Give this a try. They give examples of use with jQuery as well.
Related
I am trying to modify the data-author of annotation in TinyMCE. The documentation said that :
The TinyMCE Annotations API provides the ability to add, modify, and delete annotations; listen to text selection events and retrieve all annotations with the same annotation name.
I have already annotated my selected words, using the
editor.annotator.annotate('comment', {
uid: id,
author: name
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\">Advice</span>
In that code, I've successfully annotated the selected words, but for some event, I want to change the author of the annotated words, and here's my code:
editor.annotator.annotate('comment', {
uid: id,
author: newName
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\"><span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name2\" data-mce-annotation=\"comment\">Advice</span></span>
I thought since the selected words are already annotated, by using the code above I can change the author. but it's just creating another span inside the original span.
What I want is just to edit or change the data-mce-annotation-author value from other values on some event.
Have anyone tried this issue or experience with this? Thank you very much!
I got the solution for this.
You just need to use the Retrieving All Annotations for a Particular Annotation Name
My solution for changing attributes of specific annotator:
const comments = editor.annotator.getAll(this.name);
const comment = comments[id][0];
comment.setAttribute('data-mce-annotation-author', newName);
editor.save();
Please bear with me because I don't know how to explain this in a shorter way. All the info I'm posting here is just an example, which is why they sound weird.
So, I wanted to have sort of a character select page and I wanted to display attributes of each character in a separate div when you click on the character's portrait. Certain data will be displayed on the character card div.
I basically have a list of character portraits, like this [html]:
<ul id="char-list">
<li id="greengirl">Green Girl</li>
<li id="maroonman">Maroon Man</li>
<li id="whitwoman">White Woman</li>
<li id="blackboy">Black Boy</li>
</ul>
<div id="char-card">
<div id="char-name"></div>
<div id="char-hair-color"></div>
<div id="char-eye-color"></div>
<div id="char-mag-power"></div>
</div>
All characters have for example, three attributes: hair-color, eye-color, and magical-power.
I want to display this within the #character-card div when the user clicks on each character.
Now, I know I can set a data-attribute to each character stat like this:
...
<li id="greengirl" data-eye-color="Green" data-hair-color="Green" data-mag-power="322">Green Girl</li>
...
And write my jQuery like this:
$('#char-list li').on('mouseup', function() {
var eyeColor = $(this).data('eye-color'),
hairColor = $(this).data('hair-color'),
magPower = $(this).data('mag-power'),
charName = $(this).text(),
nameDiv = $('#char-name'),
hairDiv = $('#char-hair-color'),
eyeDiv = $('#char-eye-color'),
magDiv = $('#char-mag-power');
nameDiv.text(charName);
hairDiv.text(hairColor);
eyeDiv.text(eyeColor);
magDiv.text(magPower);
});
This works with no issues, but I'm trying to do something that's rather complex and each character has a lot of data, including a quote for each character, 4 ability icons, health, mana, defense, etc. and I just don't think putting them all in data-attributes for each item would be efficient. If I follow that method, I'd have to edit the html itself and that would mean a very long and confusing html. I've already found one good way to make some attributes easy to apply via jQuery:
var greenHairList = '#greengirl, #blueboy'
...
$(greenHairList).attr('data-hair-color', 'Green')
This way, it will be applied via jQuery, leaving my html clean and uncluttered. However, this still uses data-attributes. I'd love it if there were any other ways to achieve what I want with minimal use of data-attributes, and addressing my issue with the character-card div. Thanks to anyone who can help!
Why you need to use data for your details?
The best solution is create an object list with all your characters deteails. And add just a data-id for get the good data.
You can:
var characters = [
{
id: 1,
firstname:"john",
lastname:"Doe",
mana:150,
power:2000
},
id: 2,
firstname:"Karl",
lastname:"Kanung",
mana:120,
power:300
}
];
When you create this list, you can add html element dynamicaly with data-id for your character:
This is just an example in loop:
id = 3;
characters.push({id: id, firstname: "Paul", lastname: "pool", mana: 500, power: 3000});
charlist = $("<li></li>").attr("data-id",id);
$("#char-list").append(charlist);
id++;
and know you need just to make a onclick function, get the data-id of element, check in object list the details to show and create the card.
The best is create just on card alredy in your html page and replace the value by your objects value.
This is one way.
I am using the tile example from polymers neon elements - and I am trying to make each expanded tile unique. My first try on how to do this was to pass a string in with the grid items like
{
value: 1,
color: 'blue',
template: 'slide-1'
}
And have that element be evaluated when rendered in a new element something like this. (this is the card template itself)
<template>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]">
<[[item.template]]></[[item.template]]>
</div>
This does not work - however I am wondering if there is some way to do this so I can load custom elements for the content of each card. For reference -https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages , it is the grid example and I am trying to replace the content of each card once it is clicked on ( the fullsize-page-with-card.html, here is all the html for it - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid ). Is this the wrong way of approaching this? Or maybe I have some syntax wrong here. Thanks!
Edit : OK, So I can send it through if i add it to the click to open the card like so
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$['fullsize-card'].template = event.detail.data.template;
this.$.pages.selected = 1;
};
and in the card's properties like so
template: {
type: String
},
So I can then evaluate it as [[template]] , however - the question still remains how to call a custom element (dynamically) using this string. I could pass a couple of properties and fill in a card or form so they are unique, but i think I would have much more creative freedom if I could call custom elements inside each card.
I have an element that allows referenced templates. There are a couple of others other there, but this one also allows data bindings to work: https://github.com/Trakkasure/dom-bindref
I have the following code on my ecommerce website.
I would like to search to check whether it contains "0.00"
If it does contain "0.00" I would like to hide the parent div containing the price
This is because we want the product to appear online but even though it cannot be purchased, the price is still displayed, so we don't want people to be confused if they see the price as £0.00.
<div class="ct_pd_item_price ct_pd_item_value">
<span itemprop="price">
<span class="ct_currencyCode">GBP</span>
<span class="ct_currencySymbol">£</span>0.00</span>
</div>
Is this possible using some form of javascript?
If you can't change your HTML, it's a little tedious because the text must be cleand from the currencyCode and currencySymbol. A way to do this is to clone the div and then take the text :
$(".ct_pd_item_price.ct_pd_item_value").filter(function(){
return $(this).clone().find('.ct_currencyCode, .ct_currencySymbol').remove().end().text().trim()=="0.00"
}).hide()
Demonstration
Of course a cleaner HTML, maybe with the value in a data attribute, would be easier to deal with.
Another way with a regular expression
$('[itemprop="price"]').each(
function() {
var elem = $(this);
if (elem.text().match(/[^\d]0\.00/)) {
elem.closest(".ct_pd_item_price.ct_pd_item_value").hide();
}
}
);
Pulls out the text and it will be £0.00 so match that the price is not [anynumber]0.00
I am currently trying to mark up my website product pages with product rating microdata for google SERP benefits.
The current cart software I am using does have a product rating system. It generates the following html related to the product's rating:
<span id="dnn_ctr783_ProductDetails_ctl02_lblAvgStars2">Average Rating: 5 Stars</span>
I am able to add the schema.org identifier to this span tag to produce the following:
<span id="dnn_ctr783_ProductDetails_ctl02_lblAvgStars2" itemprop="ratingValue">Average Rating: 5 Stars</span>
However, the value specified in the span tag is not valid with schema.org. They require that the "ratingValue" only contain a single digit to specify the rating. My span tag has a lot of additional text.
Somehow, I need to pull the number "5" from the generated rating span tag, and write it into another span tag which will have the proper value for the schema.org product markup.
Any ideas on how to accomplish this? Thanks!
Note that it's unlikely that search engines will execute any kind of javascript when crawling your site, so this technique would only work on regular browsers, but would have no effect in search engines.
Can you give more details on how this span is created and used?
This should get your value if you just want a single digit in a span with the 'itemprop' attribute.
$('[itemprop="ratingValue"]').text().match(/\d/g)
$('[itemprop="ratingValue"]').each(function() {
var txt = $(this).text(),
rating = txt.replace(/\D/g, '' );
// This will replace all the non-numeric instances
$('<span/>', {
'class' : 'newRatingValue',
text : rating
}).appendTo('#div1');
// Append this to a new span and remove the current span
$(this).remove();
});
Check Fiddle