We Keep Coding

Selected picture and blurry others

I want when click on the img using JS, it will be selected and others will blur out.
That what I'm expect :
Here the code for the HTML :
<section class="choice-grid">
<div data-choice-id="blepping" data-question-id="one">
<img src="images/blepdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="happy" data-question-id="one">
<img src="./images/happydog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="sleeping" data-question-id="one">
<img src="./images/sleepingdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="dopey" data-question-id="one">
<img src="./images/dopeydog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="burger" data-question-id="one">
<img src="./images/burgerdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
</section>
Im trying to use target event when click on the img. But I stuck right here and don't know how to change the attribute of that img tag in the target section.
Here what I'm stuck at :
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
var choice = document.querySelector('.choice-grid');
choice.onclick = function(event) {
var target = getEventTarget(event);
var test = target.attributes.src;
// test
// var test =target.lastChild.src
alert(test);
}

[data-question-id] label input {
display: none;
}
[data-question-id] label .photo {
opacity: .5;
}
[data-question-id] label input:checked ~ .photo {
opacity: 1;
}
[data-question-id] label input ~ .checked {
display: none;
}
[data-question-id] label input:checked ~ .checked {
display: inline;
}
[data-question-id] label input:checked ~ .unchecked {
display: none;
}
With basic CSS selectors you can toggle what is displayed and set the opacity of the image.
<div data-choice-id="blepping" data-question-id="one">
<label>
<input type="checkbox"/>
<img class="photo" src="http://placekitten.com/200/300"/>
<img class="checkbox checked" src="images/unchecked.png" alt="checked"/>
<img class="checkbox unchecked" src="images/checked.png" alt="unchecked"/>
</label>
</div>

Passing id to jquery function

I have a button and a hidden div.
Button:
<input
type="button"
id="myButton"
name="answer"
value="OPTIONS"
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff"
onclick="showDiv()" />
Hidden div:
<div id="customDiv" style="display:none;" class="answer_list" > WELCOME</div>
I have included a function to hide/show the div:
$('#myButton').click(function() {
$('#customDiv').toggle('slow', function() {
// Animation complete.
});
});
The button and the div are included inside a PHP loop. There is an identifier for every loop, it is $row['id'].
Now, when the button is clicked, only the first item from the loop is showing its div, I would need to pass the id to the jquery function to identify which button/item is clicked.
How could I change my code to pass the id of every loop item to the jquery function?
EDIT
<?php
//output customizable
$customizable = $row["customizable"];
if ($customizable == 1){
$output .= '
<div class="col-md-3 col-sm-6 col-xs-6" style="margin-top:12px;">
<div class="item-content" >
<button type="button" style="float: right;background-color: Transparent;border: none;" data-toggle="modal" data-target="#modalPort"
data-id="'.$row["id"].'" ><img src="info.png" width=30
></button>
<div class="img-container">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info" style= "color:#666">'.$row["nombre"].'</h4>
<h4 class="text-info" style= "color:#000"><strong>'.$row["name"].'<strong></h4>
<h5 class="text-info" style= "color:#000">'.$row['descripcion'].'</h5>
<h4 class="text-danger" style= "color:#000">$ '.$row["price"] .'</h4>
<input
type="button"
id="myButton"
name="answer"
value="OPTIONS"
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff"
onclick="showDiv()" />
<input style= " color:#000" type="text" name="comentarios" id="comentarios' . $row["id"] .'" placeholder="Special Instructions" class="form-control" value="" />
<br>
';
if($statement_opc->execute())
{
$numero_opciones = 0;
$result_opc = $statement_opc->fetchAll();
foreach($result_opc as $row_opc)
{
if ($row_opc['producto'] == $row['id']) {
$numero_opciones = $numero_opciones + 1;
$output .= '
<div class="checkbox">
<label><input type="checkbox" data-nombre="'. $row_opc["nombre"] .'"
data-precio="'. $row_opc["precio"] .'" id="opcion'.$row["id"].'" class="opcion_cbox"
data-rowid="'. $row["id"] .'" value="">'.$row_opc['nombre'].' (+ $'.$row_opc['precio'].')</label>
</div>
';
}
}
}
?>
//zona custom
<?php
$output .= '
<div id="customDiv" style="display:none;" class="answer_list" > WELCOME</div>
';
?>
//fin zona custom

You could connect each button to the respective div using their individual index (so the first button will toggle the first div, the second will toggle the second...)
var buttons = $("input[type='button']");
var answers = $(".answer-list");
buttons.each(function(index, dom) {
$(dom).on("click", function(e) {
$(answers[index]).toggle("slow");
});
});
body {
display: block;
height: 120px;
}
input[type="button"] {
background-color: #C80918;
margin-bottom: 10px;
/*margin-top: -30px;*/
color: #ffffff;
float: right;
border: none;
}
.answer-list {
display: none;
}
.answer-list.slow {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="OPTIONS 1" />
<input type="button" value="OPTIONS 2" />
<input type="button" value="OPTIONS 3" />
<div class="answer-list">WELCOME 1</div>
<div class="answer-list">WELCOME 2</div>
<div class="answer-list">WELCOME 3</div>
Or you could have unique ids for each div and just somehow store that id in a data attribute in the respective button.
$("input[type='button']").on("click", function(e) {
$($(e.target).data("target")).toggle("show");
});
body {
display: block;
height: 120px;
}
input[type="button"] {
background-color: #C80918;
margin-bottom: 10px;
/*margin-top: -30px;*/
color: #ffffff;
float: right;
border: none;
}
.answer-list {
display: none;
}
.answer-list.slow {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" data-target="#answer-list-1" value="OPTIONS 1" />
<input type="button" data-target="#answer-list-2" value="OPTIONS 2" />
<input type="button" data-target="#answer-list-3" value="OPTIONS 3" />
<div class="answer-list" id="answer-list-1">WELCOME 1</div>
<div class="answer-list" id="answer-list-2">WELCOME 2</div>
<div class="answer-list" id="answer-list-3">WELCOME 3</div>
But you should never use duplicate ids on the same page or duplicate names on the same form.

You can simply do this :
$('#myButton').click(function() {
$('#customDiv').each( function() {
$( this ).toggle('slow', function() {
// Animation complete.
});
});
});
But you may think to change id#customDiv to a class.customDiv.
It's not good let two or more elements with the same id.
EDIT
On button click :
var ids = [];
$( 'div.checkbox' ).find( 'input' ).each( function() {
var currentID = $( this ).data( 'rowid' );
// Some code, id verification or others
ids.push( currentID );
});
Now ids contains id of all checkbox.
Documentation :
https://api.jquery.com/find/
https://www.w3schools.com/jsref/jsref_push.asp
https://api.jquery.com/data/

Javascript/HTML based customisable shop items

<html>
<head><title>Test</title>
<link rel="stylesheet" type="text/css" href="Lab4-Pizza.css" />
<script type="text/javascript">
function doSonic()
{
if (document.getElementById('sonicChecked').checked)
{
document.getElementById('sonic').style.visibility="visible";
}
else
{
document.getElementById('sonic').style.visibility="hidden";
cost=cost-1;
}
}
function doDrake()
{
if (document.getElementById('drakeChecked').checked)
{
document.getElementById('drake').style.visibility="visible";
}
else
{
document.getElementById('drake').style.visibility="hidden";
cost=cost-2;
}
}
function doEzio()
{
if (document.getElementById('ezioChecked').checked)
{
document.getElementById('ezio').style.visibility="visible";
}
else
{
document.getElementById('ezio').style.visibility="hidden";
cost=cost-1;
}
}
function doJoel()
{
if (document.getElementById('joelChecked').checked)
{
document.getElementById('joel').style.visibility="visible";
}
else
{
document.getElementById('joel').style.visibility="hidden";
cost=cost-1;
}
}
function doGta()
{
if (document.getElementById('gtaChecked').checked)
{
document.getElementById('gta').style.visibility="visible";
}
else
{
document.getElementById('gta').style.visibility="hidden";
}
}
function calcCost()
{
document.getElementById("costText").innerHTML = "The final cost of your pizza is: €" + cost + ".00";
alert("Please refresh page to create another pizza!");
}
</script>
</head>
<body>
<script type="text/javascript">
var cost = 10.00;
</script>
<div style="position: relative; left: 0; top: 0;">
<img src="images/redshirt.png" width="250" height="450" alt="redshirt" id="redshirt" style="position: relative; top: 0; left: 0;"/>
</div>
<img src="images/sonic.png" width="125" height="225" alt="Sonic" id="sonic" style="position: absolute; top: 80px; left: 70px;"/>
<img src="images/drake.png" width="150" height="250" alt="drake" id="drake" style="position: absolute; top: 80px; left: 50px;" />
<img src="images/Ezio.png" width="175" height="275" alt="ezio" id="ezio"style="position: absolute; top: 80px; left: 50px;" />
<img src="images/joel.png" width="120" height="225" alt="joel" id="joel"style="position: absolute; top: 80px; left: 60px;" />
<img src="images/gta.png" width="150" height="250" alt="gta" id="gta"style="position: absolute; top: 80px; left: 70px;" />
</div>
<input type="checkbox" id="sonicChecked" onclick="doSonic()" checked="true"> Sonic
<input type="checkbox" id="drakeChecked" onclick="doDrake()" checked="true"> Drake
<input type="checkbox" id="ezioChecked" onclick="doEzio()" checked="true"> Ezio
<input type="checkbox" id="joelChecked" onclick="doJoel()" checked="true"> Joel
<input type="checkbox" id="gtaChecked" onclick="doGta()"checked="true" > GTA
<br><br>
<div id="prices">
<p><h2>Shirt Prices:</h2></p>
<p>1. </p>
<p>2. </p>
<p>3. </p>
<p>4. </p>
<p>5.</p>
<p>6.</p>
</div>
<button type="button" onclick="calcCost()">Done - Calculate Cost</button>
<div id="costText" ></div>
</body>
</html>
I'm wondering if someone can help me with this, I a making a website where a user can order a custom game character on a range of different coloured shirts. I am using layering to render a live mock up of the character on the coloured shirt.
The code above starts with all the character options on the shirt and they are removed with a check box. My question really is how do I only display the user selected character on the shirt while also making each option a unique order-able product that can be added to a cart.
Also currently it only does the red shirt how do I make the base image user selectable.
Any help appreciated thanks.

Clicking on img class to upload file

I am trying to be able to just show my img class on my view .But also use that img to be able to click on it to pop up the file selector.
How am I able to do so I not sure. I thought might be able to do it with java-script but unsure how. Do not want "No File Selected To Show.
<div class="form-group">
<label for="input-image" class="col-lg-2 col-md-12 col-sm-2 col-xs-12"><?php echo $entry_image; ?></label>
<div class="col-lg-2 col-md-2 col-sm-10 col-xs-12">
<img class="thumbnail" src="<?php echo $image; ?>" style="width:100px; height:100px;"/>
</div>
</div>

<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="$('#file').click();">
with jQuery
or without it:
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">

File selector is raw behavior of browser,you can only emulate the "Raw File Input" by image background and hide the raw input button by setting "opacity" style.
Refer: the profile setting page in twitter, use chrome debugger to look into elements and styles.
https://twitter.com/settings/profile

this is a sample code taken from the folllowing Source
css:
<style>
.element{
background-color:red;
width:200px;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
width:200px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
html:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload">
<div class="element">Upload</div>
<input id="uploadBtn" type="file" class="upload" />
</div>
js:
<script>
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>

Hide Previous div and toggle next div on click a button?

I have a number of buttons in my html. Each button referring to a particular DIV. I want an easy way to hide the previously open DIV when another button is clicked. So far I have written a code in jquery, but I have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what I have tried to accomplish?
Here is what I have done so far.
My HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id="body">
<input type="button" name="division1" value="div1" class="buttons" id="button1"/>
<input type="button" name="division2" value="div2" class="buttons" id="button2"/>
<input type="button" name="division3" value="div3" class="buttons" id="button3"/>
<input type="button" name="division4" value="div4" class="buttons" id="button4"/>
<input type="button" name="division5" value="div5" class="buttons" id="button5"/>
<input type="button" name="division6" value="div6" class="buttons" id="button6"/>
<div id="div1" class="divs"></div>
<div id="div2" class="divs"></div>
<div id="div3" class="divs"></div>
<div id="div4" class="divs"></div>
<div id="div5" class="divs"></div>
<div id="div6" class="divs"></div>
</div>
</body>
</html>
My CSS:
#body{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.buttons{
width: 10%;
height: 5%;
position: relative;
left: 10%;
cursor: pointer;
z-index: 500;
}
.divs{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
#div1{
background-color: #377D9F;
}
#div2{
background-color: #02B0E6;
}
#div3{
background-color: #4b9500;
}
#div4{
background-color: #aaa;
}
#div5{
background-color:#aa0000;
}
#div6{
background-color: aquamarine;
}
My Jquery:
$(document).ready(function () {
$("#button1").click(function () {
$('#div1').toggle(100);
$("#div2,#div3,#div4,#div5,#div6").hide();
});
$("#button2").click(function () {
$("#div2").toggle(100);
$("#div1,#div3,#div4,#div5,#div6").hide();
});
$("#button3").click(function () {
$("#div3").toggle(100);
$("#div1,#div2,#div4,#div5,#div6").hide();
});
$("#button4").click(function () {
$("#div4").toggle(100);
$("#div1,#div2,#div3,#div5,#div6").hide();
});
$("#button5").click(function () {
$("#div5").toggle(100);
$("#div1,#div2,#div3,#div4,#div6").hide();
});
$("#button6").click(function () {
$("#div6").toggle(100);
$("#div1,#div2,#div3,#div4,#div5").hide();
});
});
I kind of have around 50 DIV's in my html like the above ones. And I think using the above JQUERY is a waste of coding lines. I know there will be a better way to do this. My code seems to work well, but is there any way in jquery to just hide the previous DIV, no matter which button user clicks?

$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings('.divs').hide("slow");
});
});

Going with this sentence I kind of have around 50 DIV's in my html like the above ones
This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div
Demo
HTML
<select id="show_divs">
<option>Select to show a div</option>
<option value="1">Show 1</option>
<option value="2">Show 1</option>
</select>
<div class="parent">
<div id="show1">This is the first div</div>
<div id="show2">This is the second div</div>
</div>
jQuery
$('#show_divs').change(function() { //onChange execute the function
var showDiv = $(this).val(); //Store the value in the variable
$('div.parent > div').hide(); //Hide all the div nested inside .parent
$('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});
CSS
div.parent > div {
display: none; /* Hide initially */
}
If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...

Try this
$(document).ready(function() {
$(".divs").hide();
$(".buttons").click(function() {
$(".divs").hide().eq($(this).index()).show();
});
});
DEMO

<input type="button" value="div1" class="buttons" id="button1" />
<input type="button" value="div2" class="buttons" id="button2" />
<input type="button" value="div3" class="buttons" id="button3" />
<input type="button" value="div4" class="buttons" id="button4" />
<input type="button" value="div5" class="buttons" id="button5" />
<input type="button" value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
$(".buttons").click(function () {
$('.divs').hide();
$('#div'+$(this).attr('id').replace('button','')).toggle(100);
})
})
</script>