We Keep Coding

Easy solution for a switcher between hiding and showing lang="" attributes with JS?

I am looking for a fairly simple solution to show and hide lang="" specified DIV's (a switcher between the two).
This must not be too hard, but I am a beginner in Javascript, and I couldn't find any proper resources. Does anyone have a suggestion?
:lang(eng) {
display: block;
}
:lang(de) {
display: none;
}
button {
width:100px;
height: 50px;
background-color: blue;
}
button: active{
background-color: green;
}
#example :lang(eng){
width: 100vw;
text-align: center;
height: 50vh;
background-color: yellow;
}
#example :lang(de){
width: 100vw;
text-align: center;
height: 50vh;
background-color: red;
}
<button onclick="myFunction()">English</button>
<button onclick="myFunction()">German</button>
<div id="example" lang="eng">
<p>DIV with English text</p>
</div>
<div id="example" lang="de">
<p>DIV with German text</p>
</div>

You need to select the HTML Element and set the specific attribute and insert the text:
const texts = {
"de": 'deutscher text',
"en-us": 'english text'
}
function selectLanguage(lang) {
const element = document.getElementById('example')
element.setAttribute("lang", lang)
element.innerHTML = texts[lang]
console.log(document.getElementById('example'))
}
<button onclick="selectLanguage('de')">German</button>
<button onclick="selectLanguage('en-us')">English</button>
<div id="example">
<p>Text</p>
</div>
Note that I store the texts in a simple object here. The usual way to store texts which should be available in multiple languages is to make use of a database like mysql or MongoDb.
I would also not use stylesheets to implement the language switchig feature. I have not much experience with multi language platform development but imho the styles should not have an effect to the websites logic.
If you have got any questions feel free to ask.
Edit:
Generally you should not mix contents, logic and styles. You should always use the most practicle way to develop your website. If you intend to provide your content in multiple languages you should think about your architecture first. There are several different ways to achieve this kind of stuff. The internet is full of tutorials and guidelines :) Happy Coding!

Responsively select compact or normal sized google recaptcha

As per the title looking for help to be able to responsively have Google recaptcha change from the data-size="compact" to data-size="normal" at 768px. Is it possible without javascript?
Captcha HTML:
<div class="captcha_container">
<div class="g-recaptcha" data-sitekey="6Le8iBkTAAAAzeCvzZRO3FePZO" data-size="compact">
</div>
</div>
CSS:
.captcha_container{padding: 20px 0px 0px 0px; text-align: center;}
.g-recaptcha{ display: inline-block;}

You can't change the data-size without using javascript, however if you'd like, you can change the scale to conform to new screen widths.
example:
.g-recaptcha {
-webkit-transform:scale(0.77);
-ms-transform:scale(0.77);
transform:scale(0.77);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
Someone has asked this previously, there were some interesting answers here:
https://stackoverflow.com/a/29521983/6049581

Including CSS, jQuery, and HTML all into one .html

I've been looking around, but I can't seem to find exactly what I'm looking for. I want to include both my jQuery and CSS into one .html page, but I cant seem to get the jQuery working. I'm not new to coding, but I am new to jQuery. Here's what I have so far:
http://jsfiddle.net/b63nLkfa/1/
<div class=aboutMe>aboutMe</div>
<style>
.bodyAmendment{
width:100px;
}
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
$(document).ready(function() {
$('.aboutMe').click(function() {
$(this).toggleClass('bodyAmendment');
});
});
</script>
Obviously, I want to toggle classes when clicked (simply change the width of the div).

You didn't select jquery from jsfiddle sidebar. And remove
<script src="jquery-1.11.2.js"></script>
or use
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Here is the new link.

Both aboutMe and bodyAmendment have a width defined. toggleClass() appends the class, so you wind up with <div class="aboutMe bodyAmendment">. width: 200px "wins" so it appears the code is doing nothing. Try
.bodyAmendment{
width: 100px !important;
}
or some other combo so you're not defining the same property in both classes.

http://jsfiddle.net/b63nLkfa/1/
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
.bodyAmendment{
width:100px;
}
Your problem is about css priorities. Let's check my fiddle and use tool like firebug. Always.

You neglected to add in jQuery when you created your fiddle. This means your code was not firing. Also, when working with CSS, the last rule that is added takes precedence, regardless of when the class was added.
.test2 {
width: 100px;
background-color: #F00;
}
.test1 {
width: 200px;
background-color: #F00;
}
HTML
<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>
The CSS "cascades" down the document, each rule that comes later taking precedence over the last.
http://jsfiddle.net/b63nLkfa/21/

I normally use .php, and use an
<? include "includes/js.php"; ?>
which in this one file I have all my script calls. Make it alot easier to update an entire site from one file.

try <div class="aboutMe">aboutMe</div>
sometimes the " " are important

Javascript DIV Background issue

I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen');
docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
Thanks in advance
Chris

Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.
Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
set overflow: hidden on #outerscreen

This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.

Although i don't recommend using a table for your layout here is a solution that works better and gives you more control
<style type='text/css'>
.outerCell {
width: 750px; height: 300px; background-color: Black; border: 0px;
}
.outerScreen {
background-image : url('pics/intro.gif');
height: 300px;
}
</style>
<td class='outerCell' >
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
now the javascript:
var docEl = document.getElementById('outerscreen');
docEl.className = "outerScreen";
Having your style defined in a css is more flexible when you want to make changes,
code seperation is always good

I think the problem is with the '
try:
docEl.style.backgroundImage = "url(pics/intro.gif)";

CSS overflow: ???? and Tables or some other method?

I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.
The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.
I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.
I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.
Thanks

If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead.
Tables should be use for tabular data, not for structure.
Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this
<div id="container">
<div id="left">
<div id="right">
<div class="clr" >
</div>
CSS:
#container{
width: 640px;
}
#left{
width: 150px;
flot: left; /*if you want them to be next to each other */
overflow: scroll; /*or hidden?*/
}
#right{
width: 490px;
float: left;
overflow: scroll;
}
.clr {
clear: both;
}

I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:
HTML
<table>
<tr>
<td class="left">
<div>This is your left content</div>
</td>
<td class="right">
<div>This is your right content</div>
</td>
</tr>
</table>
CSS
table {
width: 640px;
}
td div {
overflow: scroll;
}
td.left,
td.left div {
width: 150px;
}
td.right,
td.right div {
width: 490px;
}
The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.

Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.