Requirement : Star Shape should get added on click of a button .
I have implemented to add a circle by using the ng style in html, now i want to implement the star shape in similar way and for that i need to write a different class "star-six" in css.
But below html code already contains one css class "shapeClass". I have used the below jquery code in my controller method and added the css class "star-six".
The problem i am facing is my new css class"star-six" is replacing the existing class "shapeClass" for all the div's.
can someone please tell how to implment the star shape using the below controller .
HTML:
<div class="shapeClass" ng-repeat="element in viewModel.elementContainer.element"
data-ng-style="shapeCtrl.getShapeStyle($index)">
</div>
Controller:
vm.getShapeStyle = function (index) {
if ($scope.viewModel.elementContainer.element[index].name == "addCircle") {
return {
"width": "100px",
"height": "100px",
"background": "red",
"-moz-border-radius": "50px",
"-webkit-border-radius": "50px",
"border-radius": "50px"
};
}
if ($scope.viewModel.elementContainer.element[index].name == "addStar") {
$('.shapeClass').hasClass('star-six')
if ($('.star-six').hasClass('shapeClass')) {
$('.star-six').removeClass('shapeClass');
}
return {
};
}
CSS:
.shapeClass {
margin: 3px;
border: 1px solid;
position: relative;
background-color: blue;
overflow: hidden;
}
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
Related
I am wondering how to change the border of lock:before to solid transparent when the correct password is entered.
My JavaScript is like this, I need a lock before value to change to solid transparent when the IF is triggered
function lock(){
alert("It's locked, you have to guess the password.");
var pass = prompt("");
if (pass == "opensesame") {
alert("Lock opened");
} else {
alert("Wrong password");
}
}
My CSS is like this, lock before needs to be changed to solid transparent by a javascript function.
body {
position: absolute;
color: #00ff80;
background: green;
top: 100px;
left: 200px;
}
#lock {
font-size: 8px;
position: relative;
width: 18em;
height: 13em;
border-radius: 2em;
top: 10em;
box-sizing: border-box;
border: 3.5em solid red;
border-right-width: 7.5em;
border-left-width: 7.5em;
margin: 0 0 6rem 0;
}
#lock:before {
content: "";
box-sizing: border-box;
position: absolute;
border: 2.5em solid red;
width: 14em;
height: 12em;
left: 50%;
margin-left: -7em;
top: -12em;
border-top-left-radius: 7em;
border-top-right-radius: 7em;
}
#lock:after {
content: "";
box-sizing: border-box;
position: absolute;
border: 1em solid red;
width: 5em;
height: 8em;
border-radius: 2.5em;
left: 50%;
top: -1em;
margin-left: -2.5em;
}
#button {
background: transparent;
}
My HTML is like this, all it does is make a button and some text.
<!DOCTYPE html>
<html>
<head>
<title>The lock</title>
</head>
<body>
<h1>Unlock the lock</h1>
<button id=button onclick="lock()"><div id=lock></div></button>
</body>
</html>
Try something like this..
var str = '1em solid transparent';
document.styleSheets[0].addRule('#lock:before','border: "'+str+'";');
the style of a pseudo-element can be changed by using a new class name. For example, add the class name unlocked to the #lock element once the entered password is valid.
You can add the following style for the new class:
#lock.unlocked::before {
border: 1em solid transparent;
/* Your style for unlocked goes here */
}
And your script with the new instruction which add the class .unlocked.
function lock() {
alert("It's locked, you have to guess the password.");
var pass = prompt("");
if (pass == "opensesame") {
alert("Lock opened");
document.getElementById("lock").classList.add("unlocked"); /* NEW */
} else {
alert("Wrong password");
}
}
Add and remove a class to and from the button. Pseudo elements can't be targeting directly from JavaScript so you have to use CSS to change the styling.
// Select the button
const button = document.querySelector('button');
function lock(){
alert("It's locked, you have to guess the password.");
var pass = prompt("");
if (pass == "opensesame") {
// Add the class.
button.classList.add('unlocked');
// If it already has the class..
} else if (button.classList.contains('unlocked')) {
//.. then remove it.
button.classList.remove('unlocked');
}
}
And in your CSS add the class with the styling you need.
#lock.unlocked::before {
border: 2.5em solid transparent;
}
I am a bit confused as why my input box is frozen and a click is not working on my label. I looked around for an answer and read one that said i needed to set the value and a callback. Did that and still no go. Here is my code.
import React, { Component } from 'react'
class ItemsNew extends Component{
constructor(props){
super(props)
this.state = {
name: 'a',
price: '',
location: '',
used: '',
descriptipn: '',
imgUrl: '',
shippingCost: ''
}
console.log(this.state)
}
handleOnChange = (event) => {
debugger
this.setState({
name: event.target.value
})
}
handleOnClick = (event) => {
debugger
}
render(){
return (
<div>
<label onClick={this.handleOnClick}>name</label>
<input id='name' type='text' onChange={this.handleOnChange} value={this.state.name}/><br/>
</div>
)
}
}
export default ItemsNew;
My console.log hits and prints out this.state. However none of my event handler get hit with the debugger. The input box does get printed out with an 'a' when on the first load of the page.
Looking through the React dev tools this is my DOM.
![image of DOM]: https://ibb.co/mQEaN6
Also the tools say that the props are Read Only.
After building my app back up from scratch I found the problem is in the CSS. Which I find strange. The rendered out div was nested in a main div that had the z-index style of -1 so that my header content was on top of it. I changed the z-index around for the header and gave the header a position of relative and now everything works.
Previous css code:
.main{
width: 600px;
height: 650px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 7px;
border-style: solid;
border-color: grey;
box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
transform: translateY(-12%);
overflow-y: auto;
**z-index: -1;**
background: lightblue;
}
.app-title{
text-align: center;
color: teal;
margin-top: 38px;
}
New CSS code:
.main{
width: 600px;
height: 650px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 7px;
border-style: solid;
border-color: grey;
box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
transform: translateY(-12%);
overflow-y: auto;
background: lightblue;
}
.app-title{
text-align: center;
color: teal;
margin-top: 38px;
**position: relative;**
**z-index: 1;**
}
I tried to write a program to practice my js skills. There are 3 balls and they are hidden at first. I want the ball_1 shows up first, and after 1 sec, ball_1 disappears. Next, ball_2 shows up and after 1 sec it disappears; same logic goes with ball_3. When I run my code, the first two balls does not hide. I am not sure what is going wrong. The code below are the html, css, and js code that i wrote. Hope someone could help me out. Thank you in advance.
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
for (i = notes.length; i > 0; i--) {
var note = notes.shift();
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
}, 1000);
}
});
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
In general never modify an array when iterating using a for loop. The shift method will remove the first item from the array thus modifying it's length. Instead do this:
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
var i; // You were declaring "i" in global namespace before. Don't do that.
for(i = 0; i < notes.length; i++){
var note = notes[i];
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000);
}
});
Also you will see from my note that you were defining "i" in the global namespace. It is never good to do that so always make sure to define your variables at the beginning of the function block if using "var".
EDIT: missed a semicolon
EDIT2: completely missed that i needed to change up the loop condition.
You are looking for an asnychronous play of events - first ball_1 shows up for 1 sec and after that ball_2 shows up for 1 sec and so forth.
Something like this won't work:
for( var i = 0; i < notes.length; i++){
$('#' + notes[i]).addClass('shown');
setTimeout(function() {
$('#' + notes[i]).removeClass('shown');
},1000);
}
because the timeouts will be registered one after the other in quick succession and all the balls will show up and hide in little over one second.
So you can create a callback and set the timeout for the next ball only after the previous ball has been shown fully for 1 sec - see demo below:
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
hideBall(notes,0);
});
function hideBall(notes,i) {
$('#' + notes[i]).addClass('shown');
hide(function() {
if(++i < notes.length) {
hideBall(notes,i);
}
}, notes[i]);
}
function hide(callback, note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
callback();
}, 1000);
}
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
Hope this is what you need
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
for(i = notes.length; i > 0; i--){
var note = notes[i];
$('#' + note).addClass('shown');
hideBall(note, i)
}
});
function hideBall(note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000 * i);
}
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
What you are trying won't work as it will run the for loop all in one go, setting up 3x timeouts.
try something like this
jQuery(document).ready(function($) {
function myBallLoop(){
// increment as needed
if(typeof note == 'undefined') {
var note = 1;
} else if (note == 3){
break; // end loop
} else {
note ++;
}
// show current ball qickly
$('#ball_' + note).show('fast', function(){
// call back after show event
// hide current ball after 1 sec
r = setTimeout(function(){$('#ball_' + note).hide()}, 1000);
// self call function after 2 seconts
t = setTimeout(function(){myBallLoop();, 2000}
});
}
// loop start
myBallLoop();
});
Take advantage of what jquery gives you.
Iterate using $.each is also the same as ES5's forEach. Using delay method to delay a function of adding classes is similar to setTimeout.
$(document).ready(() => {
var notes = ['ball_1','ball_2','ball_3'];
let showBalls = (i, item) => {
$('#' + item).delay(i * 1000).queue(() => {
$('#' + item).addClass('shown');
$('#' + notes[i - 1]).removeClass('shown').clearQueue();
});
}
$.each(notes, (i, item) => {
showBalls(i, item);
});
});
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
I want to hide black arrow while clicking green arrow.. without using jquery
My fiddle:
http://jsfiddle.net/t5Nf8/195/
html:
<div class="arrow-down"></div>
<div class="arrow-up"></div>
css:
.arrow-down {
position: absolute;
/*display: none;*/
left: 1.5px;
top: 6px;
z-index: 1;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
.arrow-up {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
position: absolute;
left: 1.5px;
top: 14px;
z-index: 1;
height: 0px;
width: 0px;
}
js:
$('.arrow-up').click(function {
$('.arrow-down').hide();
});
Please anyone help
$('.arrow-down').click(function(){
$('.arrow-up').toggle();
});
$('.arrow-up').click(function(){
$('.arrow-down').toggle();
});
You had a syntax error in your Code after function you should have
() which you missed in your Code
I Have used toggle so that it shows and hides but you can use hide alone if you want.
DEMO
According to #JoeFitter's answer, you can toggle the "upArrow" to show and hide by clicking the "downArrow" using JavaScript
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
if(upArrow.style.display == 'none'){
upArrow.style.display = 'block';
}
else{
upArrow.style.display = 'none';
}
});
Live Demo
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});
http://jsfiddle.net/t5Nf8/197/
Use getComputedStyle(el).getPropertyValue("display"); to get the value of dispaly, after, you just do a test to show or hide your arrow!
Note: it's a pure Javascript, no library:
var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
up.style.display = 'block';
} else {
up.style.display = 'none';
}
Want to watch it in action? See demo: http://jsfiddle.net/g4g9doj0/
I don't think it is a simple task JUST using CSS, using Jquery should look like:
I don't know but I see useless CSS instructions, I think it could be reduce to:
.arrow-down {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
height: 0px;
width: 0px;
}
.arrow-up{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
Jquery would look like:
$(document).ready(function(){
$(".arrow-up").click(function(){
$(".arrow-down").hide();
});
});
http://jsfiddle.net/t5Nf8/209/
I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.
Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.