Why won't the modal launch when icon is clicked? - javascript

I have been trying all sorts of ways to activate the modal from javascript to directly calling the modal to no success. All the page would do is allow a click and then do nothing.
I have tried calling modal from a javascript file,
I have tried directly calling it from the div,
I have tried href the javascript,
I have tried checking for syntax or spelling errors,
and I have tried swapping between div, ancor, image and button tags.
<div class="child flex-child">
<div class="profile-btn">
<div class="profile-bubble-parent" data-target="#profileModal" data-toggle="modal" onclick="openProfileModal();" >
<img class="profile-bubble" src="assets/img/user.ico">
</div>
</div>
<div class="modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="title-pen"> User Profile <span>UI</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="box">
<div class="content">
<div class="user-profile">
<img class="avatar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTF_erFD1SeUnxEpvFjzBCCDxLvf-wlh9ZuPMqi02qGnyyBtPWdE-3KoH3s" alt="Ash" />
<div class="username">
Will Smith
</div>
<div class="bio">
Senior UI Designer
</div>
<div class="description">
I use to design websites and applications
for the web.
</div>
<ul class="data">
<li>
<span class="entypo-heart"> 127</span>
</li>
<li>
<span class="entypo-eye"> 853</span>
</li>
<li>
<span class="entypo-user"> 311</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
js file has:
function openProfileModal(){
setTimeout(function(){
$('#profileModal').modal('show');
}, 230);
}
CSS:
/*===================================================================================
======================================PROFILE========================================*/
.profile-bubble {
height: 55px;
width: 55px;
border-radius: 50%;
}
.title-pen {
color: #333;
font-family: "Coda", sans-serif;
text-align: center;
}
.title-pen span {
color: #55acee;
}
.user-profile {
margin: auto;
width: 25em;
height: 11em;
background: #fff;
border-radius: .3em;
}
.user-profile .username {
margin: auto;
margin-top: -4.40em;
margin-left: 5.80em;
color: #658585;
font-size: 1.53em;
font-family: "Coda", sans-serif;
font-weight: bold;
}
.user-profile .bio {
margin: auto;
display: inline-block;
margin-left: 10.43em;
color: #e76043;
font-size: .87em;
font-family: "varela round", sans-serif;
}
.user-profile > .description {
margin: auto;
margin-top: 1.35em;
margin-right: 4.43em;
width: 14em;
color: #c0c5c5;
font-size: .87em;
font-family: "varela round", sans-serif;
}
.user-profile > img.avatar {
padding: .7em;
margin-left: .3em;
margin-top: .3em;
height: 6.23em;
width: 6.23em;
border-radius: 18em;
}
.user-profile ul.data {
margin: 2em auto;
height: 3.70em;
background: #4eb6b6;
text-align: center;
border-radius: 0 0 .3em .3em;
}
.user-profile li {
margin: 0 auto;
padding: 1.30em;
width: 33.33334%;
display: table-cell;
text-align: center;
}
.user-profile span {
font-family: "varela round", sans-serif;
color: #e3eeee;
white-space: nowrap;
font-size: 1.27em;
font-weight: bold;
}
.user-profile span:hover {
color: #daebea;
}
/*===================================================================================
======================================MODAL========================================*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
Results should be a pop-up modal of the content.

Firstly I moved the modal body outside the tag and gave it an id, profileModal.
Next, thing I knew it worked.

If you don't intend to use jquery, use the Document API to access the HTMLElement node , and then manipulate the style properties on it.
var modal = document.getElementById('profileModal');
modal.style.display = 'block';
Since I don't know the exact nature of your CSS, it's difficult to give a more precise answer.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Related

I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden

I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.
The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>
Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>
I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite

Click open menu click out of the div to close

I have a menu and I want it to open when I click this text from a drop down menu and I want it to close when the mouse clicks anywhere else.
var ignoreClickOnMeElement = document.getElementById('status_menu');
document.addEventListener('click', function(event) {
var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
status_menu.classList.remove("status-menu");
status_menu.classList.add("nostatus-menu");
}
});
.avatar {
height: 7vh;
width: 7vh;
background: url('../images/blankprofilepicture.png');
background-size: cover;
border-radius: 100%;
}
.avatar img {
width: 7vh;
border-radius: 100%;
}
.dropdown {
z-index: 1;
height: 7vh;
width: 7vh;
float: right;
margin-top: 1vh;
margin-right: 3vw;
position: relative;
}
.avatar-dropdown {
display: none;
position: absolute;
padding-top: 0.5%;
}
.avatar-dropdown p {
cursor: pointer;
padding: 0.5vw 1vw;
font-family: "Ubuntu", sans-serif;
color: black;
text-decoration: none;
display: block;
font-size: 1em;
text-align: center;
background-color: white;
margin: 0;
}
.avatar-dropdown p:hover {
background-color: #b5b5b5;
}
.dropdown:hover .avatar-dropdown {
display: block;
}
<header id="header">
<h1>DEVIE</h1>
<div class="dropdown" id="dropdown">
<div class="avatar"></div>
<div class="online-offline"></div>
<div id="status_menu">
<div id="online-div">
</div>
<div id="offline-div">
</div>
</div>
<div class="avatar-dropdown" id="avatar-dropdown">
<p onclick="status_menu();">Change status</p>
<p onclick="window.location.href='profile.php';">Profile</p>
<p onclick="window.location.href='friends.php';">Friends</p>
<p onclick="logout();">Logout</p>
</div>
</div>
</header>
But couldn't make it work and make it remove the Event listener once the div is closed.
Please help, thanks!

Remove double-click on dropdown link

I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>

How do I add filtering to a Phanes template?

A year ago I bought a template html5 and I wanted to add filtering to the part where the portfolio is, but unfortunately I can not deal with it.
I searched many scripts in google, but they all have some problems with this template.
Link to the template where I want to add filtering:
http://ivang-design.com/phanes/slidermp/work.html
I tried to add MixItUP and I was really close to success:
HTML
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script>
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".category-1">Category 1</button>
<button class="filter" data-filter=".category-2">Category 2</button>
<label>Sort:</label>
<button class="sort" data-sort="myorder:asc">Asc</button>
<button class="sort" data-sort="myorder:desc">Desc</button>
</div>
<div id="Container" class="container">
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="2"></div>
<div class="mix category-1" data-myorder="3"></div>
<div class="mix category-2" data-myorder="4"></div>
<div class="mix category-1" data-myorder="5"></div>
<div class="mix category-1" data-myorder="6"></div>
<div class="mix category-2" data-myorder="7"></div>
<div class="mix category-2" data-myorder="8"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, button{
font-family: 'Helvetica Neue', arial, sans-serif;
}
.controls{
padding: 2%;
background: #333;
color: #eee;
}
label{
font-weight: 300;
margin: 0 .4em 0 0;
}
button{
display: inline-block;
padding: .4em .8em;
background: #666;
border: 0;
color: #ddd;
font-size: 16px;
font-weight: 300;
border-radius: 4px;
cursor: pointer;
}
button.active{
background: #68b8c4;
}
button:focus{
outline: 0 none;
}
button + label{
margin-left: 1em;
}
.container{
padding: 2% 2% 0;
text-align: justify;
font-size: 0.1px;
background: #68b8c4;
-webkit-backface-visibility: hidden;
}
.container:after{
content: '';
display: inline-block;
width: 100%;
}
.container .mix,
.container .gap{
display: inline-block;
width: 49%;
}
.container .mix{
text-align: left;
background: #03899c;
margin-bottom: 2%;
display: none;
}
.container .mix.category-1{
border-top: 2px solid limegreen;
}
.container .mix.category-2{
border-top: 2px solid yellow;
}
.container .mix:after{
content: attr(data-myorder);
color: white;
font-size: 16px;
display: inline-block;
vertical-align: top;
padding: 4% 6%;
font-weight: 700;
}
.container .mix:before{
content: '';
display: inline-block;
padding-top: 60%;
}
#media all and (min-width: 420px){
.container .mix,
.container .gap{
width: 32%;
}
}
#media all and (min-width: 640px){
.container .mix,
.container .gap{
width: 23.5%;
}
}
JS
$(function(){
$('#Container').mixItUp();
});
But during filtering filtered elements disappear and after second all elements disappear, and no longer appear.
Additionally, when I tried to use MixItUp, elements does not move as in the example.
Is there another simple way to make few categories for filtering in this template?
Thank you in advance for your help
I solved it with this:
http://isotope.metafizzy.co/filtering.html
I'm sorry for impatience and writing post

Why are these elements not staying within their DIV container?

I am new to CSS and it's not clear to me why the header and menu links stay within the container but not the other elements. I can fix this by including margins for the other elements but I would like to understand why this is happening.
Is there a way to keep elements within the container without specifying margins for each element or (div). See JS fiddle code and code below, for example. I would like to keep the #main content within #container.
JSFiddle link: http://jsfiddle.net/6qt8ry1L/
body {
background-color: #F7F7F0;
}
#container {
width: 1000px;
position: relative;
margin: 0 auto;
text-align: center;
background-color: #8e8e20;
}
header {
background-image: url("header.jpg");
background-repeat: no-repeat;
height: 224;
}
h1 {
color: #ffffff;
padding: 10px;
text-align: left;
}
#nav ul {
list-style: none;
background-color: black;
height: 40px;
margin-top: 0;
color: white;
}
#nav li {
display: inline-block;
padding-top: 10px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 10px;
}
#MainContent {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 200;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
#col1 {
width: 20%;
height: 30%;
margin-top: 15px;
float: left;
background-color: lightgray;
}
#col2 {
float: left;
margin-left: 1%;
margin-top: 15px;
height: 30%;
width: 20%;
background-color: lightgray;
}
#col3 {
float: left;
margin-top: 15px;
width: 20%;
height: 30%;
margin-left: 1%;
background-color: lightgray;
}
#Content:after {
content: '';
display: block;
clear: both;
}
#footer {
float: left;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 60;
width: 950px;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
<html>
<head>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="container">
<header>
<div id="heading">
<h1> Hello there !!! </h1>
</div>
</header>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
<div id="MainContent">
Main Content
</div>
<div id="Content">
<div id="col1">
Col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col 3
</div>
</div>
<div id="footer">
<p>Copyright 2004 xyz Association</p>
<p>All rights reserved etc etc..</p>
</div>
</div>
<!--end container-->
</body>
</html>
Your container is closed just after closing div#nav.
Put that closing div at the end and your problem'd be fixed.
I noticed you have more closing tags than you have opening DIVs. As a habit when ever you create a <DIV> be sure to insert </DIV> immediately. To keep track of the opening and closing DIVs. I am guessing this mismatch closing DIVs is likely the cause of your problem.

Categories