Develop Reference

Changing images on Button press

I have this bit of code that changes multiple images on my website. Right now I can change the images once but I can not change them back to the original images. I was trying to use .toggle after my .css to change the images back and fourth but that did not work. How would I go about solving this?
$("button").click(function(){
$("#secriuty").css({"background-image": "url('images/certificates/secriuty-fundamentals-certificate.png')"}),
$("#js").css({"background-image": "url('images/certificates/js-certificate.png')"}),
$("#html5").css({"background-image": "url('images/certificates/html5-certificate.png')"}),
$("#html-css").css({"background-image": "url('images/certificates/html-and-css-certificate.png')"}),
$("#photoshop").css({"background-image": "url('images/certificates/photoshop-certificate.png')"}),
$("#illustrator").css({"background-image": "url('images/certificates/illustrator-certificate.png')"})
});

Try this :
$('.checkbox').click(function() {
const button = $(this).parent('#button');
if( $(button).find('.checkbox').is(':checked') ) {
$("#aaa").css({"background-image": "url('https://picsum.photos/id/141/150/150')"})
$("#bbb").css({"background-image": "url('https://picsum.photos/id/222/150/150')"})
$("#ccc").css({"background-image": "url('https://picsum.photos/id/27/150/150')"})
} else {
$(".div").css({"background-image": ""})
}
})
.gallery {
display: flex;
flex-direction: row;
}
#aaa {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
#bbb {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
#ccc {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
.div {
margin-right: 5px;
}
.div:last-of-type {
margin-right: 0;
}
/* Button */
.btn {
width: 150px;
height: 40px;
margin-top: 10px;
background-color: #999;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background: #444;
color: #fff;
}
.btn .checkbox {
position: absolute;
left: 0;
right: 0;
width: 150px;
height: 40px;
opacity: 0;
z-index: 999;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
<div id="aaa" class="div"></div>
<div id="bbb" class="div"></div>
<div id="ccc" class="div"></div>
</div>
<div id="button" class="btn">
<input type="checkbox" class="checkbox" />
<span>Change Background</span>
</div>

Using .toggleClass:
$("button").click(function(){
$("#security").toggleClass("newpic");
});
#security {
height: 100px;
width: 100px;
background: red;
}
#security.newpic {
background: url("http://www.fillmurray.com/300/253");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="security"></div>
<button>Click me</button>

How can I increase marginLeft onclick in Javascript?

I want to begin my onclick() function in javascript style.marginLeft=0 to be like start from '0px' to '-100%' to '-200%' and then at the end with '-200%', when It become '-200%' If you click It again, It will bring you back to .marginLeft='0'
Code on Jsfiddle
var x = document.getElementsByClassName('box')[0];
var u = -100;
function addMargin() {
var current = x.style.marginLeft = u + '%';
if (x.style.marginLeft == -200) {
x.style.marginLeft = '0';
} else {}
}
#container { display: inline-block; position: relative; width: 100%; height: 150px; white-space:
nowrap; overflow: hidden; }
.box { width: 100%; height: 150px;
display: inline-block; position: relative; }
.box:nth-child(1) { background: lightblue; }
.box:nth-child(2) { background: red; }
.box:nth-child(3) { background: green; }
<div id='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

You can step-down with 100 at each iteration and use modulo operator (% 400) for a reset
Here is an example:
var x = document.getElementsByClassName('box')[0];
var u = -100;
function addMargin() {
x.style.marginLeft = u + '%';
u -= 100
u %= 400
console.log("margin-left:", x.style.marginLeft)
}
#container {
display: inline-block;
position: relative;
width: 100%;
height: 150px;
white-space: nowrap;
overflow: hidden;
}
.box {
width: 100%;
height: 150px;
display: inline-block;
position: relative;
}
.box:nth-child(1) {
background: lightblue;
}
.box:nth-child(2) {
background: red;
}
.box:nth-child(3) {
background: green;
}
.as-console-wrapper {
max-height: 20px !important;
}
<div id='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

Condition match was wrong you need validate with some external count variable instead of matching marginLeft
var x = document.getElementsByClassName('box')[0];
var u = -100;
var count = 1;
function addMargin() {
count = count%3;
x.style.marginLeft = count * u + '%';
count++;
}
#container {
display: inline-block;
position: relative;
width: 100%;
height: 150px;
white-space: nowrap;
overflow: hidden;
}
.box {
width: 100%;
height: 150px;
display: inline-block;
position: relative;
transition:all 0.8s ease;
}
.box:nth-child(1) {
background: lightblue;
}
.box:nth-child(2) {
background: red;
}
.box:nth-child(3) {
background: green;
}
<div id='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

This is the cleanest/most compact implementation I could think right now. As other people said, the key is to use the Remainder Operator.
Additionally, please use addEventListener/removeEventListener API as it has been by many years the correct way to handle events.
const box0 = document.getElementsByClassName('box')[0];
box0._current = 0;
function addMargin() {
box0.style.marginLeft = `-${++box0._current % 4 * 100}%`;
}
document.getElementById('button').addEventListener('click', addMargin);
#container {
display: inline-block;
position: relative;
width: 100%;
height: 150px;
white-space:
nowrap; overflow: hidden;
}
.box {
width: 100%; height: 150px;
display: inline-block;
position: relative;
}
.box:nth-child(1) {
background: lightblue;
}
.box:nth-child(2) {
background: red;
}
.box:nth-child(3) {
background: green;
}
<div id='container'>
<div class='box'>0</div>
<div class='box'>1</div>
<div class='box'>2</div>
</div>
<input id='button' type="button" value="Next>" />

How can I select all DIVs with querySelectorAll?

I want to call all divs because TUTTIiDIV is already an array. When I run this code the console looks okay, but the code doesn't work as expected.
How can I select all the elements of the array TUTTIiDIV?
document.addEventListener("DOMContentLoaded", function() {
var TUTTIiDIV = document.querySelectorAll("div");
document TUTTIiDIV.onclick = function() {
coloraicontorni()
}
}); //END DOMcontentLoaded
function coloraicontorni() {
var TUTTIiDIV = document.querySelectorAll("div");
for (i = 0; i <= TUTTIiDIV.length; i++) {
TUTTIiDIV[i].classList.add('contorno');
}
};
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>

Use delegation from the closest container to choose a click on anything in that container
window.addEventListener("load", function() { // when the page has loaded
document.getElementById("container").addEventListener("click", function(e) {
[...this.querySelectorAll("div")] // the "this" is the container
.forEach(div => div.classList.add('contorno'));
});
});
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="container">
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
</div>
If you ONLY want to click the divs, do this
window.addEventListener("load", function() { // when the page has loaded
document.getElementById("container").addEventListener("click", function(e) {
if (e.target.tagName === "DIV") { // only if we click a div in the container
[...this.querySelectorAll("div")] // the "this" is the container
.forEach(div => div.classList.add('contorno'));
}
});
});
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="container">
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
</div>

You can do it like this, I've adjusted your function.
Run the snippet below:
var TUTTIiDIV = document.querySelectorAll("div");
for (let i = 0; i < TUTTIiDIV.length; i++) {
//addEventListener "click" for each div that you are looping through with querySelectorAll
TUTTIiDIV[i].addEventListener("click", function() {
TUTTIiDIV[i].classList.toggle("contorno");
});
}
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="rosso">
</div>
<div id="blu">
</div>
<div id="giallo">
</div>

This works for me. Give me feedback if u too. ;)
Edit after Scott Marcus comment.
const tuttiDiv = document.querySelectorAll('div');
document.addEventListener("click", (event) => {
if(event.target.nodeName === "DIV"){
tuttiDiv.forEach((div) => {
div.classList.toggle("contorno");
});
}
});

As you correctly point out TUTTIiDIV is a collection and so it won't have an onclick property to set, however your coloraicontorni function correctly loops over each item in the collection and modifies its classList.
But, better yet, use event delegation to more simply solve this.
Also, you should only have your <script> referenced once and that should be just before the closing body tag so that by the time the script is processed, all the HTML will have been parsed. This removes the need for the DOMContentLoaded event handler.
See comments below:
// If your <script> is located just before the closing body tag,
// then it is not necessary to set up the DOMContentLoaded event
//document.addEventListener("DOMContentLoaded", function(){
// Instead of setting up an event handler on each <DIV>, just
// set up a single event handler on the document and when the
// click events bubble up to it, check event.target to see
// which element actually triggered the event. This is called
// "event delegation".
let divs = document.querySelectorAll("div");
document.addEventListener("click", function(event){
// Check to see if it was a <div> that triggered the event
if(event.target.nodeName === "DIV"){
// Loop over all the <div> elements in the collection
divs.forEach(function(div){
div.classList.add("contorno"); // Add the class
});
}
});
* { box-sizing: border-box; }
body { background-color: antiquewhite; }
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno { border: 8px solid black; }
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>

let divs = [...document.getElementsByTagName('div')];
divs.forEach(div => {
div.addEventListener('click',function(){
div.classList.toggle('border');
})
});
div{
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.border{
border: 10px solid black;
}
<div class='d' style="background: red;"></div>
<div class='d' style="background: green;"></div>
<div class='d' style="background: blue"></div>

How to stop resizing div element when it reaches the specific width?

I tried to make a site with a resizable sidebar using jquery-resizable.js. What I want to do is making stop resizing once it reaches the specific width. However, it keeps moving even though it is already over the min-width value. I found the ResizeObserver to detect the changing width values and tried to change the div element's CSS values like resize:none; but it didn't work.
How could I stop resizing once it reaches a certain width value?
Here are my codes.
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
resizeHeightFrom:'center',
});
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px x ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
if (cr.width <= 330) {
console.log("its too small");
cr.css('resize', 'none');
}
}
});
ro.observe(document.querySelector('.panel-right'));
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 900px;
/* min-height: 100%; */
min-width: 650px;
white-space: nowrap;
background: #8E44AD;
color: white;
}
.panel-right {
flex: 1 0 auto;
padding: 10px;
width: 300px;
/* min-height: 100%; */
min-width: 350px;
background: #34495E;
color: #fff;
overflow-x: hidden;
}
.splitter {
flex: 0 0 auto;
width: 8px;
background: url(images/vsizegrip.png) center center no-repeat #ccc;
min-height: 100%;
cursor: col-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>
<div class="panel-container el" style="height:100%;">
<div class="panel-left resizable">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right" id="panelRight">
right panel
</div>
</div>

What you try do do is possible with max-width like #JHeth mentioned.
You can set the min-width to set the minimum width of your div and max-width to stop on the pixel size you want.
.panel-left {
min-width: 50px;
max-width: 200px;
width: 50%;
}
See the example below:
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
resizeHeightFrom:'center',
});
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
width: 100%;
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
min-height: 100vh;
min-width: 50px;
max-width: 200px;
white-space: nowrap;
background: #8E44AD;
color: white;
width: 50%;
}
.panel-right {
flex: 1 0 auto;
padding: 10px;
min-height: 100vh;
background: #34495E;
color: #fff;
overflow-x: hidden;
}
.splitter {
flex: 0 0 auto;
width: 8px;
background: url(images/vsizegrip.png) center center no-repeat #ccc;
min-height: 100%;
cursor: col-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>
<div class="panel-container el" style="height:100%;">
<div class="panel-left resizable">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right" id="panelRight">
right panel
</div>
</div>

Show Specific Paragraph within a Div - jQuery

I am trying to show a specific Paragraph when a specific div is clicked upon. I cannot get the jQuery to function the way I would like it to.
I want that if the ".Virus" div is clicked on, it shows the contents "v", if ".screenRepair" div is clicked on then it shows the ".screenInfo" contents
Any help would be appreciated.
HTML:
<div class="outerService">
<div class="service">
<div class="virus" style="width: 230px; height: 208px;">
<center>
<h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="images/Services/virus.jpg" alt="virus" height="140px"/>
</center>
</div>
<div class="information">
<p class="v">This is information</p>
<p class="screenInfo">hello</p>
</div>
<div class="screenRepair" style="width: 230px;">
<center>
<h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
border: 1px solid blue;
}
.service {
display: table;
height: auto;
max-width: 1044px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
}
#vInfo {
float: none;
width: 50%;
text-align: justify;
border: 1px solid #000;
display: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
.information p {
text-align: justify;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
jQuery
$(document).ready(function () {
$(".virus").click(function () {
$(".information .v").show();
});
});

With your current CSS you can try something like this:
$(document).ready(function() {
var $info = $( '.information' );
$(".virus").click(function() {
$info.show().find( 'p:not(.v)' ).hide().siblings().show();
});
$(".screenRepair").click(function() {
$info.show().find( 'p:not(.screenInfo)' ).hide().siblings().show();
});
});
Or you can slightly change your CSS and try to hide every P within .information instead of hiding .information itself.
Hope this helps.

change information div properties in your css (remove display:none)
.information {
margin-left: 10px;
border:3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
}
and add this lines to your css
.information .v {
display:none;
}
.screenInfo{
display: none;
}

Use Toggle if you want to show and hide div
Try something like this:
jQuery(document).ready(function(){
jQuery('#virus').live('click', function(event) {
jQuery('#information').toggle('show');
});
});
its working here is the JS Fiddle

$(document).ready(function() {
$(".virus").click(function() {
$(".information").show().find('p').show().next('.screenInfo').hide();
});
$(".screenRepair").click(function() {
$(".information").show().find('p').show().prev('.v').hide();
});
});
JSFiddle

Try something like this:
$(".service img").click(function () {
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
.hasClass() returns boolean true/false.
.toggle(true) results to show the hidden object while .toggle(false) results in hiding the object.
As suggested in the comments you need to hide all the infos rather than .information div. otherwise you need to show this one before showing any other info div.
Some other edits can be done like:
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
display: none; /*<-----add this to hide the info divs.*/
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
and then you can add one more line:
$(".service img").click(function () {
$(".information").show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
May be you want to look into this:
$(".service > div:not(.information)").click(function () {
$(".information").hide().show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).hasClass('virus'));
$(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});

Try this
$(document).ready(function () {
$(".virus").click(function() {
$(".information").show();
$(".v").show();
$(".screenInfo").hide();
});
$(".screenRepair").click(function() {
$(".information").show();
$(".screenInfo").show();
$(".v").hide();
});
});

see in live
$(document).ready(function() {
$('.virus').click(function() {
$('.information').show();
$('.v').show();
});
});
.information {display:none;} .information p{display:none;}