Develop Reference

How to change language and keep changed language for all sites?

I found a way to change the langauge:
<h2 class="fr_lang">Français</h2>
<h2 class="en_lang">English</h2>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
#lang-switch img {
width: 32px;
height: 32px;
opacity: 0.5;
transition: all .5s;
margin: auto 3px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#lang-switch img:hover {
cursor: pointer;
opacity: 1;
}
.fr_lang,
.en_lang {
display: none;
transition: display .5s;
}
/* Language */
.active-lang {
display: flex !important;
transition: display .5s;
}
.active-flag {
transition: all .5s;
opacity: 1 !important;
}
$(document).ready(function(){
// By default
$('.en_lang').addClass("active-lang");
$('#lang-switch .en').addClass("active-flag");
// Function switch
$(function() {
// French button
$("#lang-switch .fr").click(function() {
// Enable French
$('.fr_lang').addClass("active-lang");
// Disable English
$('.en_lang').removeClass("active-lang")
// Active or remove the opacity on the flags.
$('#lang-switch .fr').addClass("active-flag");
$('#lang-switch .en').removeClass("active-flag");
});
// English button
$("#lang-switch .en").click(function() {
// Enable English
$('.en_lang').addClass("active-lang");
// Disable French
$('.fr_lang').removeClass("active-lang")
// Active or remove the opacity on the flags.
$('#lang-switch .en').addClass("active-flag");
$('#lang-switch .fr').removeClass("active-flag");
});
});
});
This works find but my project includes many different sites.
How to keep the changed language for all sites/the hole project?
And is it possible to change the button text too? Or should I give the button the language class and create a new button with the other language class?
Thank you :)

If all your sites run on the same domain you can use localStorage to store last language used.
Otherwise you will need a 'mediator' like a server to store the data.

Using touchmove to trigger hover event

I'm relatively new to coding and am running into a particular issue with my website. My homepage has images on it with overlay text hover effect that occurs when a cursor is moved over the image. It works perfectly on desktop, however, not on mobile. I would like for the hover text to appear when the user swipes across the image in any direction. I've done some research and it appears that I should somehow be using jQuery and the touchmove function to make this happen. But I just can't figure it out. I am using Shopify (debut theme) to build my website. Any help will be greatly appreciated!
Here's my CSS for hover event:
//hover effect//
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 99%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #000000;
}
.container:hover .overlay {
opacity: 0.7;
}
.text {
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
white-space: pre;
}
Thanks!!!!

You'd need to apply a class with the desired effect to the target element.
You could do it with Jquery, but javascript is perfectly capable to do it on its own.
Something like:
Javascript:
const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed
// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
CSS:
.container:hover .overlay,
.overlay.hover {
opacity: 0.7;
}
Note: if you want to target all the elements .overlay on your page with that code, you would need something like:
Javascript:
const myTargetElements = document.getElementsByClassName('overlay');
// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {
// add hover style
element.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
element.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
});

so Moustachiste's code works! It had a few syntax errors but I was able to resolve them quickly. Here's the final version:
const myTargetElements = document.getElementsByClassName('overlay');
// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {
// add hover style
element.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
element.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
});
Paste the code into your theme.js and adjust the variable names accordingly. Should work for everyone!
Cheers to this guy!

Scrolling div in another div

I want to add scrolling to the second part, it is "chat-messages" div in "chat-bar" div. I want JUST this "chat-messages" to make scrollable, leaving rest of the site with no any scrool. At this moment I have to scroll the whole site to see "input-row" div. It's quite working when i set overflow: auto to the "chat-bar" but then whole input-row is also included in scrolling. Please give me best css/html option how to resolve this problem, or give me simple javascript library.
jsfiddle link:
jsfiddle.net/o9vmfgpx/3
edit:
I made it working, but in some hacky way.
.chat-messages {
overflow-y: scroll;
-ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
display: none;
}
#-moz-document url-prefix() {
.chat-messages {
right: -5%;
padding-right: 3%;
}
}
Works on latest version of IE, EDGE, Chrome, Firefox and Opera (as 10.14.2016)

This should work.
body {
overflow:hidden;
}
.chat-messages {
overflow:scroll !important;
}

Try adding the below css?
.chat-messages {
height:200px;
overflow:scroll;
}

Try this.
.input-row {
position: fixed;
bottom: 10px;
left: 10px;
}

Using JavaScript to apply opacity to an div image

I was trying to use the :beforeselector for images, but found out that it's not possible, but I read that i can do it using javascript.
I'm not a pro at javascript and not exactly sure how to write the code.
This is the css being used
.carousel-cell.is-selected {
background: #ED2;
}
/* cell number */
img.carousel-cell:before{
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
It's being used in the carousel located here --> http://codepen.io/desandro/pen/YPezvR
Now what I want to accomplish is a :before and :after for the carousel-cell but for the images in the div.
I was trying to accomplish this with javascript.
/* cell number */
img.carousel-cell:before{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
/* cell number */
img.carousel-cell:after{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Can anyone help me to accomplish this?

css
.carousel-cell {
opacity: 0.5;
}
.carousel-cell.is-selected {
opacity: 1;
}
The JS lib gives the focus item a class of is-selected, and in your css file, you can add those two bits of code and you should be a-okay without tossing in javascript.

You can apply opacity to an img using javascript with an ID selector or other selectors, I will show you an example to apply opacity to img tag in div:
<script>
document.getElementById("myimgid").style.opacity="0.5";
</script>
<div>
<img id="myimgid" src="img url" >
</div>
And you can add options to this js script (click, focus, blur and etc.) I showed basic way to apply opacity to img.

.carousel-cell.is-selected {
opacity: 0.5;
filter: alpha(opacity=50);
text-align: center;
}

How to change css background-image on click?

I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/

You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.

1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.

$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image

There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>

Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}

If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked