Develop Reference

Animation doesnt work when onClick event occurs (react.js)

I'm creating a simple hamburger menu and I want to add new className to element when onClick event occurs. This new className should transform the element, but when onClick occurs element dissapears, animation doesn't work. I understand the problem is in classes.line[i] part, but what could be the problem maybe someone can help me here.
link to the example https://repl.it/#RokasSimkus/DelectableFrugalMuse
jsx:
const menu = (props) =>{
let lineArray= ['', '', ''];
let lines= lineArray.map((lineArray, i) => {
return <span key={"classes.line" + i} className={!props.active ? classes.line : classes.line[i]}></span>
});
console.log(props.active);
return(
<>
<div className={!props.active ? classes.hamburger: classes.hamburger}
onClick={props.open}
onMouseOver={props.mouseHover}
onMouseLeave={props.leaveMouseHover}>
{lines}
</div>
</>
)
};
css code:
#media(min-width: 500px){
.hamburger{
display: none;
}
}
.hamburger {
left: 0;
top: 0;
}
.hamburger .line {
display: block;
width: 30px;
height: 2px;
background-color: white;
margin: 8px 0;
transition: all 0.3s ease-in-out;
}
.hamburger:hover {
cursor: pointer;
.line:nth-of-type(1) {
transform: translateX(15px);
width: 40px;
}
}
.hamburger .line1 {
transform: translate(4px, 1px) rotate(45deg);
width: 18px;
}
.hamburger .line2 {
transform: rotate(-45deg);
width: 51px;
}
.hamburger .line3 {
transform: translate(14px, 4px) rotate(45deg);
width: 28px;
transform-origin: bottom right;
}

If I change the line you marked to the following, it works:
return <span key={"classes.line" + i} className={`${classes.line} ${props.active ? `${classes["line" + i]}` : ''}`}></span>
To show anything, your lines need the class .line. To be in the "active" state, they need to add their respective .lineX class to add the transform you want to see. As you need both classes at the same time, you need to put both into the className property, which I've done here by putting them together into a string.
I'd suggest to change your CSS and add an active class to your menu.
The underlying problem is that you need to add multiple classes to your elements at some point. You can do that with string interpolation like I showed above (same would be for adding an active class to .menu) or you could use a module like classnames which does a great job concatenating classes. Thus you could write
return <span key={"classes.line" + i} className={classnames(classes.line, props.active && classes["line" + i])}></span>
I'd still suggest to create an active modifier class on your "root" element of your component, to keep modifiers on the top level and your code a bit more understandable. Here is your modified example.

Getting JQuery to create multiple buttons that are styled in a group with CSS

So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).

The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)

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

No scrolling at all after iScroll 5 library integration

I added the iScroll library on http://dev.bit.co.in
I've put in place the bare minimum. The entire body content is encapsulated by
<div id="wrapper">
<div id="scroller">
...
</div>
</div>
and in the head I put this:
<script type="text/javascript" src="/themes/bit.co.in/js/iscroll-master/build/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
Also, to the body tag I added onload="loaded()" and in the CSS I added this:
#media (max-width: 430px) {
body {
/* On modern browsers, prevent the whole page to bounce */
overflow: hidden;
}
#wrapper {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent text resize on orientation change, useful for web-apps */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
}
These are the barebones changes recommended by iscroll.
Right now when I pull it up in mobile it doesn't seem to scroll at all
unfortunately.
If you have any ideas, let me know. :)

Problem
I suspect the reason is this javascript code here:
window.onload = function(){
var text_input = document.getElementById ('shortname-lookup');
text_input.focus ();
text_input.select ();
}
which overrides the onload="loaded()". The .onload is a traditional event registration in which case there can only be one function attached to this handler using this method and it seems it also overwrites inline events. As a demonstration, I made simple page up with these code
<body onload="alert('onload')">
<script>
window.onload=function(){
alert('denied')
}
</script>
There should only be one alert with "denied". (Though testing it, sometimes onload appears. But only onload)
Solution
Use .addEventLister/attachEvent either for loading iScroll or focusing you text. Something like
window.addEventListener("load",function(){
var text_input = document.getElementById ('shortname-lookup');
text_input.focus ();
text_input.select ();
});
or since you are using jquery anyway
$(function(){ //shortcut for onload
$("#shortname-lookup").select().focus()
})