To begin with I want to state that I am newbie in Web Development.
I was asked to build a static website (for a small - size hotel), and I bought this responsive html5 - CSS3 template. It consists of pure html5 - css3 , and some JavaScript for slideshows etc and uses the bootstrap framework.
I have already build the website, and now I was asked to add multilanguage support to it. Can I accomplish this via bootstrap? Can it even be done with CSS?
If not, should I have a copy of all my .html files in a subfolder (e.g "website"/en/"content" ) and redirect the user via a link at the top of the page, or should I use JavaScript to decide the language?
Briefly, I would like a user that visits my website from another country to get the English version of the site, while all others get the default language. I want as fast development as possible (that's why I bought a template) to get up and running asap (summer season has already started). I have a reasonable background in programming, but I am totally new in Web Development.
You can do this within a single file without using any server-side programming languages. You should check out i18next for a proper javascript solution.
You can also use pure CSS to translate a homepage. Try something like
.en, .de, .it { display:none; } /* hide all elements with a language class */
.en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */
When you set a proper lang attribute on your html tag (e.g. by javascript) you can translate your page very easy:
<div class="en">Good morning</div>
<div class="de">Guten Morgen</div>
<div class="it">Ciao</div>
Bootstrap has nothing to do with that. No, you cannot translate a site using pure CSS. You'll have to change the HTML source to contain different text. Yes, you can do that by making a copy of all your HTML files and changing the text in them. Typically you'd have a server-side language with HTML templates which enable you to swap in translations for text dynamically without having to have a complete copy of your code. However, it doesn't sound like this is something you would be able to get up and running quickly enough.
Detection of client language and serving an appropriate version of the site is also something that will require some amount of server-side programming. Again, it doesn't sound like something you would be able to get into quickly enough.
Another example of the same thing what guys are already saying
let langs = ['en', 'fr', 'it'];
let lang = 'en';
setLangStyles(lang);
function setStyles(styles) {
var elementId = '__lang_styles';
var element = document.getElementById(elementId);
if (element) {
element.remove();
}
let style = document.createElement('style');
style.id = elementId;
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = styles;
} else {
style.appendChild(document.createTextNode(styles));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function setLang(lang) {
setLangStyles(lang);
}
function setLangStyles(lang) {
let styles = langs
.filter(function (l) {
return l != lang;
})
.map(function (l) {
return ':lang('+ l +') { display: none; }';
})
.join(' ');
setStyles(styles);
}
Italiano
English
French
<p lang='it'>Ciao a tutti!</p>
<p lang='en'>Hi everyone!</p>
<p lang='fr'>Bon Baguette!</p>
If your website it supposed to be static and use the same solution as the bootstrap page, that is powered by Jekyll, you can use Jekyll and github pages to mark in the template text files and reference externally in a Yaml file that holds the strings in each language (like en.yml and br.yml).
So when jekyll builds the static page it will generate the proper files, directories and references to navigate the page in different languages. This should not be done by Javascript, the page in each language it should be generated.
I made this with a website: https://github.com/worknenjoy/airspace-jekyll
that generate the page https://worknenjoy.github.io/airspace-jekyll/
The language chooser redirects to a pt address to a brazilian portuguese page and the default page is english. The code is open source and it's there.
You can see in Gemfile the gem used is the jekyll-multiple-languages-plugin (https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)
that is responsible to create all you need to have this translation made easier.
You can use multi button for multi button like two button for two languages
and linked them to each other.
for example:
english languages link here
index.html
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DESIGN</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="services.html">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>logo design</li>
<li>Banner Design</li>
<li>Psd Desgin</li>
</ul>
</li>
<li>contact us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span><img src="img/fr.png" height="20px" width="20px"></span>English</li>
<li><span><img src="img/eng.png" height="20px" width="20px"></span> French</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello Listen Dear !!!!</h1>
<p>Why i listen you?</p>
</div>
french language page
link here
fr_index
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CONCEPTION</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="fr_services.html">Prestations de service<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>création de logo</li>
<li>Conception de bannière</li>
<li>Psd Design</li>
</ul>
</li>
<li>Contactez nous</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span><img src="img/fr.png" height="20px" width="20px"></span>English</li>
<li><span><img src="img/eng.png" height="20px" width="20px"></span> French</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Bonjour Cher Ecoute !!!!</h1>
<p>Pourquoi je t'écoute?</p>
</div>
it's work definatly
thank you
No it's not possible to translate a website using only CSS, since CSS is used for styling only.
For a really smooth and easy translation you can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
It could even modify the Bootstrap style and other styles to support Right-To-Left out of the box, you just have to set the direction of the language to rtl.
You should add reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "de",
"DisplayName": "Deutsch"
}
]
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.
More information found on https://www.angrymonkeycloud.com/translation
I know its really old post but I fall on this and after much trouble for a project of mine, I found a solution that works.
For two different languages, Greek and English, I added a separate version of each element in every page, one version in Greek and one in English. In each page I put the Greek versions into a div with attribute lang='el' and English versions into a div with lang='en'. I have a function that changes the lang in every div setting display from none to block and viceversa depending on the language.
function allagiglossas() {
const l = document.getElementsByTagName("*");
if(document.querySelector('html').lang === 'en'){
for(i = 0; i<l.length; i++) {
if (l[i].lang === 'el') {
l[i].style.display = 'none';
}
if (l[i].lang === 'en') {
l[i].style.display = 'block';
//location.reload();
}
}
}else{
for(i = 0; i<l.length; i++) {
if (l[i].lang === 'en') {
l[i].style.display = 'none';
}
if (l[i].lang === 'el') {
l[i].style.display = 'block';
}
}
}
}
Another function that sets the HTML lang attribute.
function bilingual() {
if(document.querySelector('html').lang === 'el'){
sessionStorage.setItem("language", "en");
}else{
sessionStorage.setItem("language", "el");
}
document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
allagiglossas();
}
And some code to remember in the browser's session storage what language the user has chosen in order to keep this language when navigating from page to page on my website.
document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
document.getElementById("change").onclick = bilingual;//Με το κουμπί αλλάζει η γλώσσα
document.addEventListener('DOMContentLoaded', allagiglossas);
Of course I added a button in every page and with every click it changes the language.
Hope this will help someone who face the same problem and I will be very grateful if someone tells me if i have something wrong or some way to get things better.
Related
I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.
I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).
Code for text menu:
<ul>
<li class="page_item">
Test 1
</li>
<li class="page_item">
Test 2
</li>
</ul>
Code for Pictures menu:
<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
</div>
Screen shot with Picture and text menu:
Screen shot with Picture and text menu
I will be grateful for any help!
Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don’t even have ideas on how to do this.
All thanks in advance for any help!
If you like for this behaviour you can do this
hover: nav1 > imageNav1 ect...
You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter
$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});
.image-list__item--selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>
Here's a solution with pure js, works for elements that are not parents using ids.
html
<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>
and heres the js
function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}
there are many solutions , with an without using libraries. I think you may use some jquery if possible , and if not you should search for addeventlistener (the advanced way)
https://api.jquery.com/hover/
is a good example of doing what you are trying todo .
var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});
The above part is for php , still can be used in a plugin.
If you are in wordpress environment , you have to dig into how to write wp plugins also. Trying to achieve this in an environment , and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.
I'm using a shop CMS that allows me to apply a side menu for all product categories, let's call them Necklaces and Rings, that CMS also has an option to add "New" and "Promotions" to that side menu globally, however what I cannot do is specify where I want these "New" and "promotions" to be. For example I want them to be displayed in Rings category but not in Necklaces.
This is a rough sketch how the website is made:
<div class="menu" id="side_menu">
<ul class="standard">
<li id="category_newstuff">New</li>
<li id="category_14">Collection1
<li id="category_14">Collection2
<li id="category_14">Collection3
<li id="category_14">Collection4
<li id="category_promotions">Promotions</li>
</div>
What I want to achieve:
If the page is: rings.html then find "li id="category_newstuff" and apply "style="display"none">
I'm sorry if this is all gibberish lol.
Just add a class on your body tag. For example, the page you want to apply the style to, will have <body class="with-style"> and in the css file, you can simply write .with-style .category_newstuff { display: none; }, or just find .with-style .category_newstuff via JS and hide it.
I am using Selenium Webdriver for my project. I have a webpage where there are multiple menu items which in turn has sub menu items. I want to replace the classname attribute for all child elements under the nav-left-main div tag with "" (space) so that all elements are visible in the main page to click (instead of navigating to each menu->sub menu)
Basically i want to find all elements with classname under id=main and replace them with ''. How do i do that with JavaScriptExecutor in selenium webdriver?
<div id="nav-left-main">
<div>
<a class="left-nav-icons icomoon-icon-users3 " title="Users" href="#Users-tab">
<div id="Users-sub" class="nav-left-subnav">
<div id="Users-tab" class="hidden-menu">
<ul class="level3menu">
<li>
<i class="cm-icon18 iconfont-arrow-sans-right" style="margin-top:-2px;margin-left:-17px;"></i>
<a>Users</a>
<ul class="second-level-hidden-menu" style="margin-left:5px;margin- top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
</li>
</ul>
<ul>
<li>
<a id="AdminGroups" class="$item.className" title="" href="cms?action=groupList&pageTitle=Groups">Groups</a>
</li>
</ul>
<ul>
</div>
</div>
</div>
This might work for you:
var main_div = document.getElementById("nav-left-main");
var all_childs = main_div.getElementsByTagName("*"); // get all child elements
for (var i=0; i<all_childs.length; i++)
{
if ( all_childs[i].hasAttribute("class") ) all_childs[i].className = ""; // or all_childs[i].removeAttribute("class")
}
I'm assuming you're trying to write some automated tests. Consider this: if you modify the UI content, you just might affect the behavior of something else on the page (e.g. some JS assuming those class-attribute values might stop functioning).
Alternatively, inject CSS (via STYLE or LINK) that changes the appearance and visibility of those elements (hint: !important). However, even this, theoretically, is not ideal solution, because like-JS (for example) might go bananas for the same reason.
I'm not experienced in testing webpages, but isn't the point of Selenium to automate behavior of a human user? In other words, maybe the best would be to write test-code to activate the menu the same way human-user would (mouseover, etc).
In short, I am trying to have an HREF menu with Javascript functions to display DIVs. However, my concern is that while I could have two seperate DIVs, one with Javascript if enabled, and one with No JAvascript enabled, I do not want to duplicate raw content on my page (as spiders will index Display: none html)
I am not familiar with functions of javascript, and best practices. My instinct is to string replace the DIVs for a specific id style tags when javascript is present..
Ie, logic that if javascript enabled, then replace text of style tags to to display=none (for specific ID's)
Also - is there a way to be nonspecific with javascript. Such as if i have contentid1,contentid2,contentid3,contentid4,contentid5,contentid6 I could use, via regular expression or equivalent for contentid 2-6
I will use this on multiple pages where contentids change. I do not know if i should create a javascript conditional style, as I am not sure how that style would be applied for multiple IDs (seen here)
Hide html only when Javascript is available
Heres my current code
<script type="text/javascript">
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3','content4'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
then here is my menu
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
Then here is my content (note, i leave the content1 div visible by default
<div id="content1" >Content</div>
<div id="content2" style="display: none;">Stuff</div>
<div id="content3" style="display: none;">Things</div>`
I would like to avoid flickering if possible, and page refreshing if possible. Like could there be a condition so that content2+ have inlinestyle changed to hidden. If no javascript, my paeg just becomes really, really long.
?
Sorry-rambling. Tired, and have pneumonia :)
For my website project I am using ASP.NET MVC "Razor". Learning as I go.
I have 5 or 6 pages on my site, and one page that is on another site. I want users to feel like they are using the same site for all.
There is a typical HTML menu for the pages which follows the standard pattern of using a XHTML unordered list and CSS to layout:
<ul id="menu">
<li class="selected">Home</li>
<li>cek.log</li>
<li>Services</li>
<li>Charlie's Stuff</li>
<li>Contact</li>
</ul>
Elsewhere on SO I found questions similar to mine, where people wanted to track the selected menu item, but within a dynamic page. For example:
Javascript Changing the selected Menu items class
But this approach won't work in my case because in my case the user is not changing a selection on one page, but navigating to another page completely.
How can this be done?
...and I figured it out.
I used Razor to implement this on the server side.
First I implemented a function on my _SiteLayout.cshtml page (the template all pages use):
#functions {
public string Selected(string PageTitle) {
if (Page.Title == PageTitle)
return "selected";
else
return "";
}
}
Then I used this function in my list:
<ul id="menu">
<li class="#Selected("Home")">Home</li>
<li class="#Selected("cek.log")">cek.log</li>
<li class="#Selected("Services")">Services</li>
<li class="#Selected("Charlie's Stuff")">Charlie's Stuff</li>
<li class="#Selected("Contact")">Contact</li>
</ul>
Works perfectly. On my external page, I just hand-coded it since it's based on Wordpress and not Razor.