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>
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 2 years ago.
can anyone help me so slove my problem
it's i made this jquery popup
we have the popup "a" ,"b" ,"c" and "d"
when i open a i want when i click everywhere i close the a but in my case when i click in "b" or "c"or "d" it open them
i want when the popup it opened when i click evrywhere except the poupup it close it
please help me and thank you
here is my code
$('.open').click(function() {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length > 0) {
$('.popup:visible').fadeIn(400);
}
box.fadeIn(400);
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>
I reworked your $('.open').click() handler here.
Your have 3 cases:
1: There is a .popup visible and the click was made to open another. So you have to first fadeout the opened one and then (in the fadeout callback) open the new one.
2: There is a .popup visible and the click was made to open the same that is already opened. So just do nothing.
3: No .popup is visible. So just open the .popup.
$('.open').click(function(e) {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length && visibleBoxes[0].id !== box[0].id) {
visibleBoxes.fadeOut(400,function(){
console.log("case 1")
box.fadeIn(400);
})
}else if (visibleBoxes.length && visibleBoxes[0].id === box[0].id) {
console.log("case 2")
// do nothing!
}else{
console.log("case 3")
box.fadeIn(400);
}
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>
I'm trying to achieve that my button will be responsive. In precise, on first click when menu opens it darkens the entire screen and highlight the menu, as well as overflow-y:hiddenstarts working since my goal is to make sure when menu opens it won't have any scroll. There when the main issue starts to appear, overflow hidden takes place and I cannot switch off when I click on menu button again.
How to achieve this ?
my previous jquery:
$("#button").click(function(){
$('.slide').fadeToggle(500);
$('.darklayer').toggleClass('active');
$('body').css({'overflow-y': 'hidden'});
});
here is my new jquery:
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
($dark).toggleClass('active');
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
My HTML:
<div class="darklayer"></div>
<header id="main_menu">
<div id="menu">
<ul class="slide">
<li>Поиск строения</li>
<li>Оплатить ком услуги</li>
<li><a href=#>Обратиться за помощью</a></li>
<li><a href=#>Управляющая компания</a></li>
<li>Обратиться в Акимат</li>
<li><a href=#>Объявления</a></li>
<li>Информация о строении</li>
<li><a href=#>Обсуждения</a></li>
<li><a href=#>Помощь</a></li>
</ul>
</div>
<section id="main_header">
<div class="left_header">
<img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;">
<p class="text_ru">ru</p>
</div>
<div class="right_header">
<img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
<img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
<img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
</div>
</section>
</header>
try this: user hasClass as shown below
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
$dark.toggleClass('active');
if($dark.hasClass('active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
I think your problem in if statement you can use
if($dark.hasClass('active'))
instead of
if($dark.is(':active'))
Can you try this?
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').css({'overflow-y': 'visible'});
}
My goal is for an image inside of a div to get smaller when you scroll down in that div. I made a working example of it in the body but not in a div.
https://jsfiddle.net/53u2e86m/
HTML:
<div class="header">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/2000px-LEGO_logo.svg.png" id="logo">
</div>
<br>
<br>
<br>
<!-- more brs ... -->
The CSS
body {
text-align: center;
}
.header {
width: 100%;
padding: 10px 0;
text-align: center;
}
#logo {
height: 300px;
-webkit-transition: height .5s;
transition: height .5s;
}
And the JS
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 25,
logo = document.getElementById("logo");
if (distanceY > shrinkOn) {
logo.style.height="150px";
} else {
if (distanceY < shrinkOn) {
logo.style.height="300px";
}
}
});
}
window.onload = init();
Now I wanted to implement this in my project and I am using the mdl framework. The problem is that when I put this in the main div holder (the <div class="mdl-layout mdl-js-layout"> one) the body doesn't scroll at all. The reason why is because the main mdl div is just as big as your screen and no bigger and its contents scroll. So I tried to set the scroll event listeners to the div but nothing worked. Here is my HTML:
<!-- START OF MAIN DIV -->
<div id="mainDiv" class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">
<!-- header -->
<div class="header">
<img id="logo" src="pic/logo.png" alt="logo">
</div>
<header class="mdl-layout__header mdl-layout__header--transparent ">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Comments</a>
<a class="mdl-navigation__link" href="#">Pictures</a>
<a class="mdl-navigation__link" href="#">Activities</a>
</nav>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Website</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Comments</a>
<a class="mdl-navigation__link" href="#">Pictures</a>
<a class="mdl-navigation__link" href="#">Activities</a>
</nav>
</div>
<br>
<br>
<br>
<br>
<!-- lots more <br> -->
</div>
<!-- END OF MAIN DIV -->
Here is my CSS
.header {
width: 100%;
padding: 10px 0;
text-align: center;
}
#logo {
height: 150px;
-webkit-transition: height .5s;
transition: height .5s;
}
And my JS
mainDiv.onload=function(){
var mainDiv = document.getElementById("mainDiv");
function init() {
mainDiv.addEventListener('scroll', function(e){
var distanceY = mainDiv.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 25,
logo = document.getElementById("logo");
if (distanceY > shrinkOn) {
logo.style.height="150px";
} else {
if (distanceY < shrinkOn) {
logo.style.height="300px";
}
}
});
}
mainDiv.onload = init();
}
I just doesn't work and I get an error saying:
Uncaught ReferenceError: mainDiv is not defined(anonymous function) # main.js:2
I've gotten very frustrated cause I've searched every where and I still can't get it to work. Any help would be appreciated.
Edit: JSFiddle of the not working one https://jsfiddle.net/fe04kLf0/4/ .
I have a chat fontawesome icon currently coded as:
<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect">
<i class="fa fa-comments "></i>
</a></li>
I want a red badge with counter to display when new chat message arrives as follows:
<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect"><i class="fa fa-comments "></i>
<span class="badge badge-xs badge-danger">3</span>
</a></li>
3 is an example of unread chat message counter.
Selected portions of my javascript code are as follows:
var msgHistory = document.querySelector('#history');
var msg = document.createElement('p');
msg.innerHTML = name + ': ' + event.data;
msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';
The chat is displayed in:
<p id="history"></p>
and css are as follows:
#history {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
#history .mine {
color: #07715b;
text-align: left;
margin-left: 10px;
}
#history .theirs {
color: #4398db;
text-align: left;
margin-left: 10px;
}
The chat html will display as:
<p id="history">
<p class="mine">Me: Hi</p>
<p class="theirs">User-1: Hello</p>
<p class="mine">Me: I am testing</p>
<p class="theirs">User-1: Okay</p>
</p>
I want to enable the span class= badge and count of <p class="theirs"> being displayed on badge, when another user enters a message.
The span class= badge needs to be disabled and counter reset when <p class="mine"> is set. That is once i enter a message.
The span class= badge and counter needs to display again when new message arrives on <p class="theirs">
How is it possible with jQuery? Thanks in advance.