How to use i18next to localise my website? - javascript

I have a very simple website with no backend, just pure html pages.
I need to have English/Chinese versions for this website, what I need to achieve is have a button on NavBar, when users click this button, the wording on entire website will be changed to Chinese/English.
All the examples I have seen that they are all require something like this:
localize(".nav");
So does it mean that I need to do something like this:
localize("body");
in order to get the whole website language switched?

According to the doc here is the list of supported-frameworks. As your project is a basic HTML one you should use this https://github.com/mthh/loc-i18next. When you init the module on a TAG you should me make sure there is the data-i18n="myKey" attribute with the key of string that need to be translated. So localize("body"); should translate the whole body but you must add the data-i18n attribute to each tag with a string key

Related

Stopping AngularJS from not executing HTML tags

So I am wondering how to compute HTML in an AngularJS object (Like this: {{names}}) but I have an '<a>' element inside the object.
It comes out like this:
link text
I want this: link text
I want the links in this page to be the ones.
Im pretty sure the answer you are looking for can be found here ng-href will allow you to use the {{}} syntax to dynamically generate a url from your angular controller.
I think you need something like this <div ng-bind-html="name"></div>.
Note: you may need to do an '$sce.trustAsHtml()' if your HTML contents contain links. But be sure that what content goes in the HTML is safe before doing this. See more details Here

Convert HTML entities inside <code> tag to display on web site?

Good day,
I'm writing some HTML/CSS code examples on a web site. I'm using the <code> element to mark out my examples.
I'm trying to:
Convert all HTML-tags inside my <code> blocks to be displayed on my web site
Make my examples beautiful with syntax highlighting and maybe even auto indent
I have tried PrismJS and Highlighter.JS but I cannot get any of them to convert the HTML tags. Are you forced to make it server side? And if so are there any PHP-examples or tools for this that works fine with any of the JS-libraries?
Thanks in advance
Well you might do a simple trick to display html and css codes without and tag
You might simply but the text inside a input within the code
Then you might simply style it and give it custom background and everything also it will be easy for the user to copy it but make sure to right the code you want to display inside the html code not on the rendered page or it will not be displayed to the users like this
<input type="text" name="html_test_code">whatever code here</input>
And then the styling of sytax might be done using js easily

Is their a way to add separate CSS and JS files for a particular part of web page

Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.

How can I add a dropdown to add item to my ckeditor

I use ckeditor and would like to be able to give the use a list of Template Tokens (for php smarty, but could be anything) that can be inserted into the main editor text at the cursor
eg.
{[$FirstName]}
{[$PhoneNumber]}
{[$BalanceDue]}
Is there a simple way to create a plugin to do this?
There is a post at kuba.co.uk that gives a very simple example of how to do this.
http://www.kuba.co.uk/blog.php?blog_id=15

TinyMCE content/HTML filtering

I'll show you what I want to achieve.
I have some entities on my website(players, teams, articles, photos etc). I want to make some kind of BBcode that will create links to these elements. (I definitely don't want to use native link button for many reasons like changing url structure etc).
So I want to put into HTML code something like this:
[player=123ID]anchor text[/player]. After saving I will parse this HTML with my custom filter to make this linkable when showing on website in articles, private messages etc.
But my question is:
Is it possible to make custom TinyMCE editor button(one for each entity) that will open some kind of modal window where I'll add JS logic that will offer user some related autocompleter? And after selecting entity user wanted + writing anchor text it will put into HTML code my custom BBcode tag. Any guides, best practices, etc?
Is it possible to show in preview(not HTML) mode this custom BBtag as anchor? TinyMCE by default shows anchor tags like real anchors with anchor text, I want this custom tag to be shown(and editable) in the same way as regular anchors do. Do you have any ideas?
I am currently studying moxiecode wiki for some days, but I'm still not that in-depth in TinyMCE to solve this easily.
Will be happy for your inputs!
Regards,
Jim
To question 1: Yes this is possible. You might want to have a look at how to create a plugin for tinymce. It is not that difficult and you may create as many buttons as you need.
What "preview" mode are you reffering to?

Categories

Resources