Jquery .resizable function - resize icon not displaying properly

Jquery .resizable function - resize icon not displaying properly - javascript

New to coding and doing an interview challenge.
They've asked for a dashboard made from JQuery (which I've never used before).
Lots of help from W3schools and here in stack has me accomplished 100% of the functionality I need (even if the design could be improved: functionality first polish later!)
One of the bonus is to have some UI
/UX functionality, so I've made the divs dragable, and I added the snip below from https://jqueryui.com/resizable/ to make the divs resizable.
$(function()){
$( "resizable" ).resizable();
});
But when it runs, the little resize icon seems to do something different from the example on the page above.
Are there any ideas how I can fix it back into the resize icon, the way it is supposed to look?
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div{
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>

You simply did not use the jQuery-ui CSS file...
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
And you have a way too "wide" rule on div. So specific to the rezise handles, it needed an exception using the :not() selector.
div:not(.ui-resizable-handle){
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div:not(.ui-resizable-handle){ /* Added an exception to your generic rule */
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Related

Image change with toggle

Been working on a home automation dashboard and I need some help. How do I get the image to change when the button is toggled ON and OFF. I have a sun svg for on and moon svg for off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<ol class="b">
<li class="dashboard_item kitchen">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item frontdoor" >
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ul>
</body>
</html>
<!-- variable in js -->
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
KitchenState = !KitchenState;
});
Been trying examples online with no luck so far.

Give some id attribute to the image and then change it in the same way like you are changing the innerHTML. For image you just need to change the src accordingly.
<script>
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
KitchenState = !KitchenState;
});
</script>
<img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">

use .setAttribute or .src
add id kitchen-icon to tag <img> icon
and try code:
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'
KitchenState = !KitchenState;
})

From the point of view of your question, I think you need the following code
let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length
//Create a callback function for the click event of each button
for (let i = 0; i < btnAllLen; i++) {
!(function(n) { // Register click events
btnAll[n].addEventListener('click', function() {
for (let j = 0; j < btnAlllen; j++) {
btn[j].className = ""
conAll[j].style.display = "none"
}
this.className = "active"
conAll[n].style.display = "block"
})
})(i)
}
.main {
text-align: center;
}
button:focus {
outline: none;
}
nav {
margin-top: 30px;
box-sizing: border-box;
}
button {
background: white;
border: none;
height: 36px;
line-height: 36px;
width: 80px;
text-align: center;
border: 1px solid lightgray;
border-radius: 4px;
cursor: pointer;
}
nav>button:not(:first-child) {
margin-left: 15px;
}
.active {
background: black;
color: white;
}
.content {
margin-top: 40px;
}
.content>p {
display: none;
}
<div class="main">
<nav>
<button class="active">content 1</button>
<button>content 2</button>
<button>content 3</button>
<button>content 4</button>
</nav>
<div class="content">
<p style="display: block;">content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
</div>
</div>

After adding a non-case sensitive search and clickable pictures, script stopped working

Trying to make my first project with bunch of pictures, with a filter/search bar at the top that would filter the pictures depending on the input. For example if the input would be "Aatrox", it would show "Aatrox" and not "Jayce" and or "Senna" and so on. Script was working fine, I added a .toLowerCase() so its not case sensitive and then I added to the pictures so they are clickable and each lead to their own page. After adding these two the search bar stopped working.
Here is the snippet of the script
<script>
function search(){
var searchText = (document.getElementById("searchInput").value).toLowerCase();
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if((image.dataset.tags).toLowerCase().indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
</script>
Here is the HTML part
<head>
<title> Counterpicks </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Counterpicks pro debily </h1>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="aatrox" src="aatrox.webp" alt="Aatrox" class="actionimages">
<img data-tags="ahri" src="ahri.webp" alt="Ahri" class="actionimages">
</div>
I input only few of the lines because they are just repeating for 130 lines.
And here is the CSS
.container {
background: rgba(0,0,0,0);
text-align: center;
margin-left: 20%;
margin-right: 20%;
}
.searchbox {
text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 20px;
}
.image_container {
clear:both;
}
.hide {
display:none;
This is my first project with JavaScript so I will be happy for any constructive criticism.

Replace:
var images = document.querySelectorAll(".image_container > img");
with:
var images = document.querySelectorAll(".image_container > a > img");

How to generate group in jsplumb angular and add nodes to it dynamically after the group is created in angular 7

I would like to create a jsplumb group and then add nodes to it dynamically. But I can find in the document that one node needs to created and then after that only it can be added to the group. But in my case I have to add the group first and then I will drag drop the node. Both should have same jsplumb instance so that I can save the node values as well as group values.
I got this code from the main documentation.
HTML
<!doctype html>
<html>
<head>
<title>jsPlumb - groups demonstration</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
<link rel="stylesheet" href="demo.css">
</head>
<body data-demo-id="groups">
<a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>
<div class="jtk-demo-main">
<!-- demo -->
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="group-container" id="container1" group="one">
<div class="title"></div>
<ul>
<li>Elements constrained to group (<strong>constrain:true</strong>)</li>
<li>Elements are draggable to other groups </li>
<li>Deletes group and children</li>
<li>Not droppable (<strong>droppable:false</strong>)</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
<div id="c1_2" class="w" style="left:160px;top:140px">1.2</div>
</div>
<div class="group-container" id="container2" group="two">
<div class="title"></div>
<ul>
<li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
<li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
<li>Deletes group only</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
<div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
</div>
<div class="group-container" id="container3" group="three">
<div class="title"></div>
<ul>
<li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group only</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
<div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
</div>
<div class="group-container" id="container4" group="four">
<div class="title"></div>
<ul>
<li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
<div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
</div>
<div class="group-container" id="container5" group="five">
<div class="title"></div>
<ul>
<li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group only</li>
<li>Not droppable (<strong>droppable:false</strong>)</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
<div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
</div>
<div class="group-container" id="container6" group="six">
<div class="title"></div>
<ul>
<li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
<div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
</div>
<div class="group-container" id="container7" group="seven">
<div class="title"></div>
<ul>
<li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
<div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
</div>
<div class="group-container" id="jananicontainer" group="janani">
<div class="title"></div>
<ul>
<li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="jananinode1" class="w" style="left:30px;top:35px">Janani node 1</div>
<div id="jananinode2" class="w" style="left:90px;top:150px">Janani node 2</div>
</div>
<div class="w" id="standalone" style="left:455px;top:280px" title="drag me into a group. if you want to.">?</div>
<div class="events"><h3>Events</h3><div id="events"></div></div>
</div>
<!-- /demo -->
<!-- explanation -->
<div class="description">
<h4>GROUPS</h4>
<p>Demonstrates all of the ways you can use Groups.</p>
</div>
<!-- /explanation -->
</div>
<!-- JS -->
<script src="../../dist/js/jsplumb.js"></script>
<!-- groups -->
<script src="../../src/group.js"></script>
<script src="../demo-list.js"></script>
<script src="demo.js"></script>
</body>
</html>
js
jsPlumb.ready(function () {
var j = window.j = jsPlumb.getInstance({Container:canvas, Connector:"StateMachine", Endpoint:["Dot", {radius:3}], Anchor:"Center"});
j.bind("connection", function(p) {
p.connection.bind("click", function() {
j.detach(this);
});
});
var evts = document.querySelector("#events");
var _appendEvent = function(name, detail) {
evts.innerHTML = "<br/><strong>" + name + "</strong><br/> " + detail + "<br/>" + evts.innerHTML;
};
j.bind("group:addMember", function(p) {
_appendEvent("group:addMember", p.group.id + " - " + p.el.id);
});
j.bind("group:removeMember", function(p) {
_appendEvent("group:removeMember", p.group.id + " - " + p.el.id);
});
j.bind("group:expand", function(p) {
_appendEvent("group:expand", p.group.id);
});
j.bind("group:collapse", function(p) {
_appendEvent("group:collapse", p.group.id);
});
j.bind("group:add", function(p) {
_appendEvent("group:add", p.group.id);
});
j.bind("group:remove", function(p) {
_appendEvent("group:remove", p.group.id);
});
// connect some before configuring group
j.connect({source:c1_1, target:c2_1});
j.connect({source:c2_1, target:c3_1});
j.connect({source:c2_2, target:c6_2});
j.connect({source:c3_1, target:c4_1});
j.connect({source:c4_1, target:c5_1});
j.connect({source:c1_1,target:c1_2});
j.connect({source:c2_1,target:c2_2});
// NOTE ordering here. we make one draggable before adding it to the group, and we add the other to the group
//before making it draggable. they should both be constrained to the group extents.
j.draggable(c1_1);
j.addGroup({
el:container1,
id:"one",
constrain:true,
anchor:"Continuous",
endpoint:"Blank",
droppable:false
});
j.addToGroup("one", c1_1);
j.addToGroup("one", c1_2);
j.draggable(c1_2);
j.draggable(c2_1);
j.addGroup({
el:container2,
id:"two",
dropOverride:true,
endpoint:["Dot", { radius:3 }]
}); //(the default is to revert)
j.addToGroup("two", c2_1);
j.addToGroup("two", c2_2);
j.draggable(c2_2);
j.draggable(c3_1);
j.addGroup({
el:container3,
id:"three",
revert:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("three", c3_1);
j.addToGroup("three", c3_2);
j.draggable(c3_2);
j.draggable(c4_1);
j.addGroup({
el:container4,
id:"four",
prune:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("four", c4_1);
j.addToGroup("four", c4_2);
j.draggable(c4_2);
j.draggable(c5_1);
j.addGroup({
el:container5,
id:"five",
orphan:true,
droppable:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("five", [c5_1, c5_2]);
j.draggable(c5_2);
j.draggable(c6_1);
j.addGroup({
el:container6,
id:"six",
proxied:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("six", [c6_1, c6_2]);
j.draggable(c6_2);
j.draggable(c7_1);
j.addGroup({
el:container7,
id:"seven",
ghost:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("seven", [c7_1, c7_2]);
j.draggable(c7_2);
// the independent element that demonstrates the fact that it can be dropped onto a group
j.draggable("standalone");
//janani test start
j.draggable(jananinode1);
j.addGroup({
el:jananicontainer,
id:"janani",
ghost:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("janani", [jananinode1,jananinode2]);
j.draggable(jananinode2);
j.connect({source:"jananinode1",target:"jananinode2"});
//janani test end
//... and connect others afterwards.
j.connect({source:c3_1,target:c3_2});
j.connect({source:c4_1,target:c4_2});
j.connect({source:c5_1,target:c5_2});
j.connect({source:c5_1,target:c3_2});
j.connect({source:c5_1,target:container5, anchors:["Center", "Continuous"]});
j.connect({source:c5_2,target:c6_1});
j.connect({source:c6_2,target:c7_1});
// delete group button
j.on(canvas, "click", ".del", function() {
var g = this.parentNode.getAttribute("group");
j.removeGroup(g, this.getAttribute("delete-all") != null);
});
// collapse/expand group button
j.on(canvas, "click", ".node-collapse", function() {
var g = this.parentNode.getAttribute("group"), collapsed = j.hasClass(this.parentNode, "collapsed");
j[collapsed ? "removeClass" : "addClass"](this.parentNode, "collapsed");
j[collapsed ? "expandGroup" : "collapseGroup"](g);
});
jsPlumb.fire("jsPlumbDemoLoaded", j);
});
css
.w {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
font-size:12px;
border-radius:3px;
text-align:center;
background-color:WhiteSmoke;
opacity:0.7;
z-index:10;
color:black;
cursor:move;
}
.w:hover {
background-color:#629f8d;
}
.group-container {
position: absolute;
width: 200px;
height: 200px;
border-radius: 12px;
background-color: WhiteSmoke;
font-size: 12px;
cursor:move;
}
.group-container ul {
margin-left:25px;
padding: 0;
}
.group-container ul li {
list-style-type:circle;
margin-bottom: 7px;
}
.large {
width:600px;
height:600px;
}
.group-container.collapsed {
height:40px;
}
.title {
background-color:#ABC1BB;
padding-right:16px;
font-size:13px;
height:30px;
}
#container1 { left:20px;top:50px; }
#container2 { left:250px;top:50px; }
#container3 { left:480px;top:50px; }
#container4 { left:710px;top:50px; }
#container5 { left:600px;top:340px; }
#container6 { left:370px;top:340px; }
#container7 { left:140px;top:340px; }
.del, .node-collapse {
position:absolute;
top:5px;
right:5px;
background-color:white;
padding:1px;
cursor:pointer;
font-size:13px;
width:20px;
height:20px;
border-radius: 50%;
text-align:center;
display:block;
}
.del:after {
content:"X";
}
.node-collapse {
right:29px;
text-align: center;
}
.node-collapse:after {
content:"-";
}
.group-container.collapsed .node-collapse:after {
content:"+";
}
.del[delete-all] {
background-color: pink;
}
.jtk-connector path {
stroke-width:1;
}
.jtk-group-collapsed .w, .jtk-group-collapsed ul, .jtk-group-collapsed .container, .jtk-group-collapsed .name {
display:none;
}
.jtk-drag-hover {
outline:4px solid cornflowerblue;
}
.katavorio-ghost-proxy {
outline:2px solid red;
}
.events {
position:absolute;
right:0;
top:0;
border-left:4px solid #58775d;
bottom:0;
width:156px;
font-size: 11px;
padding-left:11px;
background-color: white;
}
#events {
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #58775d;
bottom: 0;
width: 256px;
font-size: 11px;
padding-left: 11px;
background-color: white;
}
.events h3 {
font-size: 20px;
margin-top: 10px;
}
The drag drop nodes will get populated in the sides and it will be cloned that logic is done.

I followed the JSplumb documentation on master.. and added the similar code by creating a separate component and css file. Automatically When I dropped the created nodes inside the group it got added to the group. Delete is also working fine but for minimize we need to make the changes based on the class collapsed which gets added to the group div.

Faded text not reappearing

I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});

You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();

Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...

This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});

Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.

Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.

Toggle divs to display mutiple information boxes using buttons on the nav bar

Here is what I have now...
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-image: url("images/mark-athena-2.png");
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
Okay So when I click "Contact Info" on the Nav bar I want the "contact info div" to display or disappear or toggle... same for Submission methods, Data base, and Frequent kick codes. the divs should be able to be toggled to display information inside, and stay displayed until toggled off by the button that toggled them on...
So here is my HTML Code i have created for this project...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
</head>
<body>
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info">
<p>Contact info</p>
</div>
<div class="submission-methods">
<p>submission methods</p>
</div>
<div class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
And here is my css
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}

You could use jQuery .toggle function, documentation and samples are available here.
You can give an 'id' to the individual navigation anchors, and associate a click event that with jQuery will toggle the div you want. I'd use id in all of them, but you can surely work with class too.
The sample code becomes some like:
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
The jQuery/javascript code looks like:
$("#contact").click(function(){
$("#contact_div").toggle();
});
$("#submission").click(function(){
$("#submission_div").toggle();
});
$("#database").click(function(){
$("#database_div").toggle();
});
$("#frequent").click(function(){
$("#frequent_div").toggle();
});
Two notes:
1. the database section is missing in the original post
2. you need to include the jQuery on the page, either you
load it locally on your server, or include it via CDN, like:
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
For the second request on this, the code blocks would to be added/removed based on clicks. The jQuery method change, and for the full working solution you also need to correctly both import jquery, source the javascript code, and have an document.ready handler that will actually initialize the elements. The code looks like this (css remains unchanged).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
<script>
$( document ).ready(function() {
initialize();
});
</script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
with the js/cont.js as:
function initialize() {
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
}

You can do this like this:
Html
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info" data-container>
<p>Contact info</p>
</div>
<div class="submission-methods" data-container>
<p>submission methods</p>
</div>
<div class="frequent-kick-codes" data-container>
<p>frequent kick codes</p>
</div>
Jquery
$(document).ready(function() {
// initially don't show anything
$('*[data-container]').hide();
// Hide or show the div for that menu item. We don't hide the others because that wasn't asked.
$('*[data-container-class]').click(function(e) {
var className = $(this).data('container-class');
$('.' + className).toggle();
});
});
Jsfiddle example here

We Keep Coding

JavaScript is the programming language of the Web.

Jquery .resizable function - resize icon not displaying properly - javascript

Related

Image change with toggle

After adding a non-case sensitive search and clickable pictures, script stopped working

How to generate group in jsplumb angular and add nodes to it dynamically after the group is created in angular 7

Faded text not reappearing

Toggle divs to display mutiple information boxes using buttons on the nav bar

Categories

Resources