We Keep Coding

How to substitute specific pages? [HTML Multilingual Website]

My question is pretty straight forward.
I have a static HTML website in English.
www.website.com
www.website.com/services
www.website.com/contacts
I also have it translated in German:
www.website.com/de/
www.website.com/de/services
www.website.com/de/contacts
My button (flag) for changing language is located next to my navigation:
<ul class="language">
<li class="de"></li>
</ul>
Option 1: I can just replace the "#" with the German version of the page. For example on www.website.com it is <a href="www.website.com/de/"> and on www.website.com/services it is <a href="www.website.com/de/services">
But this is so much work. Is there an easier way for calling pages by using javascript or .htaccess..or whatever you suggest.
My pages are in .html, so the .php option isn't efficient. And adding "id" to every element in order to translate it.. is even more complicated than the first option.
Thanks in advance!

Ideally, you should probably do that with the server-side language of your website (PHP / ASP / Java / …). If you still want to do it in Javascript, you can do something like that to add /de on front of your current location:
<a href="www.website.com/de/" id="language">
<script>document.getElementById('language').setAttribute('href', '/de'+document.location.pathname);</script>

yep I suspect this javascript should work:
$(document).ready(() => {
let path = window.location.pathname;
if (path.startsWith('/de'))
$('a.lang-switch').attr('href', path.substr(3));
else
$('a.lang-switch').attr('href', '/de' + path);
console.log($('a').attr('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="lang-switch">Change Language</a>

Do you have two distinct copies of the HTML? If so, this is probably pretty easy.
Go with your first option, but only for changing languages.
Include a <meta> tag that indicates the current language
Use a javascript event listener to intercept each link clicked and insert the language based on the above meta tag. Something like this;
let lang = document.getElementsByName('lang')[0].getAttribute('lang');
// Get the parent DIV, add click listener...
document.body.addEventListener("click", function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
e.target.href.replace('yourwebsite.com', `yourwebsite.com/${lang}/`);
}
});
<meta name='lang' lang='de'>
References:
Part of code taken from an answer here

Javascript slider class

I'm doing something wrong but can't find what? will be grateful if someone can help me. this JavaScript code works perfectly fine when I check it on my website but once I host it online it does not
$(".slider").click(function(){
if ($('.sliding_navigation').hasClass('trial')){
$('.sliding_navigation').removeClass('trial');
alert('works');
}
else
{
$('.sliding_navigation').addClass('trial');
alert('even this works');
}
});
problem is when i click the slider class it removes the trial class but after that it automatically proceeds to execute the else statement and adds the class creating no effect at all I've been running in circles with this and will be grateful for any help;
this is the html code i'm targeting
<div class="complete_nav">
<header class="slider">MENU</header>
<header class="sliding_navigation trial">
<nav >
<ul>
<b>HOME</b></li>
<li><b>ABOUT ME</b></li>
<li><b>FROM MY PEN</b></li>
<li><b>BOOKS</b></li>
<li><b>REVIEWS AND PRESS</b></li>
<li><b>CONTACT ME</b></li>
</ul>
</nav>
</header>
</div>
trial class has display set to none.

You can replace all that javascript with this :
$(".slider").click(function(){
$('.sliding_navigation').toggleClass('trial');
});
$.toggleClass() alone, checks whether an element has the certain class, and removes it if it does, or adds it if it doesn't.
And this works for me pretty well, just add :
.trial {
display:none;
}
See this fiddle : https://jsfiddle.net/LnpLzykp/
Don't forget to add this to your code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
EDIT : Perhaps you have more of those in your code, in this case, use this instead :
$(".slider").click(function(){
$(this).parent().find('.sliding_navigation').toggleClass('trial');
});
This way you're telling javascript to toggle the class trial only for the .sliding-navigation that is directly below the .slider.
Check this fiddle : https://jsfiddle.net/LnpLzykp/1/
I'm using four menus to illustrate the new code.

it's official i'm a fool.... i had put the scripts twice so like some people pointed out it was clicking twice.. sorry for wasting your time and thanks a lot

Jquery script not working to alter CSS on change

I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.

Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.

You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.

Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});

I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/

jQuery Make a Link in Active Status

I am working on a HTML template, but I cannot touch the HTML code, I can only work on CSS and JS files. So I cannot in any way edit the HTML code.
What I am trying to achieve is to put some links in active status when jQuery or Javascript recognizes that the current page URL is the same one of the link I want to put in active status, without editing the HTML code.
Is there a way to do it? I tried in many ways but with no luck.
Here is the HTML code ( Remember I cannot edit it ).
<span class="Tag_Nav_Aux">
Create Account
|
Login
|
My Cart
</span>
The jQuery or Javascript code should work on different links, other than the ones I reported above, since the HTML changes when the user is logged in or logged out.
So the jQuery should point the class Tag_Nav_Aux and add the Active class to any a tag it will find that has the link the same of the current URL.

You can do something like this. Your file name from the URL
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
After that get the anchor from the navigation and apply some class.
$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');
Here you have to write a CSS active class which will make that link to appear like an active link.

Try this script
jQuery(function($){
$('.Tag_Nav_Aux a').filter(function(){
return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
}).addClass('active');
});
and create a CSS rule for
.Tag_Nav_Aux a.active{
// style you want the active link to have
}

$(document).ready(function() {
var url = window.location.href.toLowerCase();
$(".Tag_Nav_Aux a").each(function() {
var $this = $(this);
var href = $this.attr("href").toLowerCase();
if(url.indexOf(href) > -1) {
$this.addClass("active");
}
});
});​

I think you need to check the current page url and assign a class to the item like to active.
I usually do putting class="active" based on current URL match with help of server side code.
But if you dont want server code you can do with help of JavaScript
var currentPage=window.location.href;
if(currentPage=="")
{
//logic to find and add a Class for the proper anchor tag
}

How to get Text of Nested Span HTML element?

I want to get text from Nested SPAN element in Following HTML code:
<span id='result_box'>
<span class="hps">text_content</span>
</span>
I want to get "text_content" value using JavaScript.
I have tried this but have a problem:
var resBox=document.getElementById('result_box');
var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
alert(strTrans);
EDIT: Actually i want to do this from Online Page

your code works fine. i guess your problem is you are executing these code when DOM not loaded completely.if you are testing something, you can try this.
window.onload = function () {
//put your code here,it will alert when page loaded completely.
};
or put the script after your span element. like this.
<span id='result_box'>
<span class="hps">text_content</span>
</span>
<script type='text/javascript'>
var resBox=document.getElementById('result_box');
var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
alert(strTrans);// it will alert
</script>

you get the element by classname.. document.getElementsByClassName() and then grabbing the first item off the resulting node list
window.onload = function () {
document.getElementsByClassName("hps")[0].innerHTML
};
jsfiddle

var resBox=document.getElementById('result_box');
var strTrans=document.getElementsByTagName('span')[0].innerText;
alert(strTrans);​
or better
strTrans = document.querySelector(".hps").innerText ;

got you, i guess you embed a link in your html page,then you wanna manipulate DOM in the page you embed,right? if so, you can check browser same origin policy.
if you wanna implement online translation via google, you can google 'google translate api', google provides a api to others for implementing online translation in their own applications.
it seems like bing also provides a api.i'm not sure.