How to insert a Pop up into a Div

How to insert a Pop up into a Div - javascript

I have been working on a Pop up but i'm unable to properly place it inside the container...
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
I'm trying to insert the pop up into the container whenever the minimize button is clicked. Any help will be appreciated.

Change .popup container from position:fixed to position:absolute
Add below css in .minimized class
.minimized {
position: relative;
z-index: 1;
vertical-align: bottom;
}
bottom property works when position is specified to the container.
position:relative will come handy in this scenario.

Try to reduce the height (approzimately more then the red div).
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
var fatherDiv=elem.parentNode.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
fatherDiv.style.zIndex="2";
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false;
fatherDiv.style.zIndex="0";
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 89px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
width: 100%;
height: auto;
overflow: auto;
z-index: 0;
top: 89px;
position: fixed;
}
.maximized {
top: 89px;
position: fixed;
display: block;
width: auto;
height: auto;
z-index: 2;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;z-index:2;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
Log:
new var fatherDiv that is the container div "Popup";
add "fatherDiv.style.zIndex='2'" to set the Div in front of the red Div (z-index work like a layer,is like 2 layer of paper).zIndex work only on the main container of a thing (in this case the Popup Div,may doesn't work on the children in some case);
add the "top" and "position" rule in .minimized because you can't use top without the position rule (i balance the position only to show you this result,you may balance this value in your file)
Say me what you think about this.

Related

Show popup once on localstorage cookie based not working?

I am making a popup where I am trying to show popup on cookie-based, it shows only once when user visit for the first time, also accept and deny button not working on more info button popup as below when we click on more info new popup also come I am trying to hide both on accept, close and all button and set a cookie for showing this popup
I have used this but not working:
if (localStorage.getItem("cookieSeen") != "shown") {
$(".popUp").delay(2000).fadeIn();
localStorage.setItem("cookieSeen","shown")
};
$("#submit").click(function() {
$(".cookie-banner").fadeOut();
});
$(document).ready(function() {
$(".footerr li:last-child").on('click', function(e) {
console.log("in")
e.preventDefault();
$('#popUpContain').css('display', 'none');
$(".serviceMainContent1").css('display', 'block');
})
$("#closeInfoBtn").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'block');
$(".serviceMainContent1").css('display', 'none');
})
$(".cat_btn").click(function(e) {
e.preventDefault();
$(".serv_btn a").css({
"color": "#303030"
});
$(".serv_btn").css({
"border-bottom": "none"
});
$('#services1').css('display', 'none');
$("#category").css('display', 'block');
$(".cat_btn a").css({
"color": "blue"
});
$(".cat_btn").css({
"border-bottom": "2px solid blue"
});
});
$(".serv_btn").click(function(e) {
e.preventDefault();
$(".cat_btn a").css({
"color": "#303030"
});
$(".cat_btn").css({
"border-bottom": "none"
});
$("#category").css('display', 'none');
$('#services1').css('display', 'block');
$(".serv_btn a").css({
"color": "blue"
});
$(".serv_btn").css({
"border-bottom": "2px solid blue"
});
})
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
})
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.popUp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: block;
background-color: white;
}
#language {
width: 57px;
padding: 4px;
border: 1px solid #dbdbdb;
}
.header1 {
display: flex;
justify-content: flex-end;
}
.container1,
.serviceMainContent1 {
display: flex;
flex-direction: column;
width: 595px;
padding: 14px;
box-shadow: -1px 16px 34px 2px #dbdbdb;
border-radius: 7px;
}
.bodyy h3 {
color: #303030;
}
.bodyy p {
line-height: 19px;
margin-top: 10px;
font-size: 13px;
}
.footerr>a {
padding: 7px 90px;
border-radius: 9px;
margin: 0px 10px;
}
.footerr>.deny {
background-color: #ededed;
color: #303030;
}
.footerr>.accept {
background-color: #0096FF;
color: #fff;
}
.footerr>.deny:hover {
background-color: #f4f2f2;
}
.footerr>.accept:hover {
background-color: #4eabf7;
}
.footerr>a:hover {
text-decoration: none;
}
.footerr>p {
text-align: center;
padding-top: 10px;
font-size: 12px;
}
.footerr>ul {
display: flex;
list-style: none;
font-size: 13px;
}
.footerr>ul li {
padding-right: 10px;
color: #c4c2c2;
}
/* more information css */
.serviceMainContent1 {
height: 654px;
overflow-y: scroll;
display: none;
}
.header1 a {
font-size: 20px;
width: 40px;
text-align: center;
}
.header1 a:hover {
text-decoration: none;
color: #303030;
}
.categoryServices1 {
height: 436px;
width: 563px;
overflow-y: scroll;
background-color: #f8f7f7;
}
.cat_serv_btn,
.footerBtn {
display: flex;
text-align: center;
}
.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
width: 50%;
}
.cat_btn,
.serv_btn {
padding: 10px 0px;
}
.cat_btn:active,
.serv_btn:active {
border-bottom: 2px solid blue;
}
.cat_btn a:active,
.serv_btn a:active {
color: blue;
}
.cat_btn a:hover,
.serv_btn a:hover {
text-decoration: none;
}
.bodyy span {
padding: 20px 20px 20px 0;
}
.bodyy a,
.bodyy i {
font-size: 13px;
}
.footerBtn a {
padding: 5px 0px;
border-radius: 5px;
margin: 0px 10px;
color: #303030;
}
.footerBtn a:hover {
text-decoration: none;
}
.footerBtn .save,
.footerBtn .deny {
background-color: #f5f5f5;
}
.footerBtn .save:hover,
.footerBtn .deny:hover {
background-color: #e7e6e6;
}
.footerBtn .close {
background-color: #0096FF;
color: #fff;
}
.footerBtn .close:hover {
background-color: #4eabf7;
}
/* switch buttons */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider1 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider1:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider1 {
background-color: #2196F3;
}
input:focus+.slider1 {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider1:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider1.round {
border-radius: 34px;
}
.slider1.round:before {
border-radius: 50%;
}
/* accordions */
.accordion1 {
margin: 20px 0px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.accordion1 div p {
font-size: 13px;
}
.accordion1 {
display: flex;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion1:hover {
background-color: #fff;
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 13px;
}
#services1 {
display: none;
}
/* media query for mobile device */
#media only screen and (max-width: 600px) {
.container {
width: 400px;
}
.footerr>a {
padding: 5px 40px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popUp">
<div class="container1" id="popUpContain">
<div class="header1">
<img src="img/logo.png" alt="" width="20">
<div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
<!-- <select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
</select> -->
</div>
<div class="bodyy">
<h3>We value your privacy</h3>
<p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
later by clicking on the settings button on the left lower corner of the page.</p>
</div><br>
<div class="footerr">
<ul>
<li><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</li>
<li><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Travel Condition</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> More information</li>
</ul><br>
<b>Deny</b>
<b>Accept and close</b>
<p>Powered by BCT-Touristik</p>
</div>
</div>
<div class="serviceMainContent1">
<div class="headerBody">
<div class="header1">
<img src="" alt="">
<select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
<option value="PT">PT</option>
</select>
✖
</div>
<div class="bodyy">
<h3>Privacy Settings</h3>
<p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
<span><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</span>
<span><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</span>
</div>
<div class="cat_serv_btn">
<div class="cat_btn">
<b>Categories</b>
</div>
<div class="serv_btn">
<b>Services</b>
</div>
</div>
<div class="categoryServices1">
<div id="category1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="services1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<br>
<div class="footerBtn">
<a class="save" href=""><b>Save</b></a>
<a class="deny" href=""><b>Deny</b></a>
<a class="close" href=""><b>Accept and close</b></a>
</div>
<p>Powered by Usercentrics Consent Management</p>
</div>
</div>
</div>
</div>
</div>

Using js-cookie, you could create a function to handle this logic.
import * as Cookies from 'js-cookie';
function initCookiesPopup() {
window.acceptsCookies = Cookies.get('acceptsCookies');
if (window.acceptsCookies != null) {
// The user has already clicked accept / reject
$('.popUp').remove();
return;
}
// The user has not accepted or rejected cookies
$('.popUp').show()
}
function acceptCookies() { closeCookiesAlert(true) }
function rejectCookies() { closeCookiesAlert(true) }
function closeCookiesAlert(accepted) {
Cookies.set('acceptsCookies', accepted);
window.acceptsCookies = accepted;
$('.popUp').remove();
}
// Initialize popup
initCookiesPopup();
From there you can call acceptCookies() and rejectCookies() within click handlers for the respective buttons.
The popup container <div class="popUp"> should also be hidden by default: <div class="popUp" style="display: none">.
initCookiesPopup() will show it if necessary.
I've made the users selection accessable as a global variable on window.acceptsCookies which you can use elsewhere in your code.

Show Navbar when increase scroll, hide Navbar when decrease scroll

Currently i want to show my navbar when i am scrolling on my webpage and hide my navbar when i am scrolling back. I search all over on Google, and i could not find something that could help me. I am surprised that this wasn't on the web yet. Maybe i didn't search good enough, however, after several hours of frustrating myself, i decided to get some help from the pro's here. ;-)
Would appreciate any help!
<body>
<nav>
<ul>
<li>Help</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>
</body>
nav{
position: fixed;
padding: 30px 70px;
width: 100vw;
height: 10vh;
background: black;
transition: .5s ease;
z-index: 5;
}
nav ul{
float: right;
margin-right: 100px;
padding: 0px 40px;
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
var p = $win.scrollTop() / max;
var x = window.matchMedia("(max-width: 800px)")
console.log(scroll);
if (scroll > 0) {
$('nav').css({
"top": "0%",
});
} else {
$('nav').css({
"top": "-25%",
});
};
});

I think you mean something like that https://www.w3schools.com/howto/howto_js_navbar_slide.asp
Or something like this:
let lastScrollTop = 0;
function scrollFunction() {
scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll > lastScrollTop) // Scrolling Down
document.getElementById("navbar").style.top = "0";
else // Scrolling Up
document.getElementById("navbar").style.top = "-50px";
lastScrollTop = scroll;
}
window.onscroll = function() {scrollFunction()};
let lastScrollTop = 0;
function scrollFunction() {
scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll > lastScrollTop) // Scrolling Down
document.getElementById("navbar").style.top = "0";
else // Scrolling Up
document.getElementById("navbar").style.top = "-50px";
lastScrollTop = scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: -50px;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div id="navbar">
Home
News
Contact
</div>
<div style="padding:15px 15px 2500px;font-size:30px">
<p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll to the top to hide the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
And someone already did it in jQuery
How can I determine the direction of a jQuery scroll event?

Dialog with a fixed footer

I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.

This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here

Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...

how to change the dimensions of multiple backgrounds of a single div elements using jquery

I have given multiple backgrounds to a single div in a webpage. I wanted that as I scroll down that the background-image(Stickman), which is at the front, should remain of the same size, and the background-image(Landscape), which is behind it, should zoom.
I want to keep the size of stickman less than the container size.
But in my code both the background images are getting zoomed, kindly help me with it.
Below is the code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>

You've just forgot to set a value for the stickman.
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
See the snippet below:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});
body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>

Javascript - Loading Multiple functions onLoad

I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
Where am I going wrong here?
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
css: body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
</body>

Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.

The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}

Your idea is correct. Probably we can simplify the implementation.
First, let's define a new class hidden to remove elements.
.hidden {
display: none;
}
Now we just can toggle this class to show and hide the content.
function toggleFunction() {
...
content.classList.toggle('hidden')
...
}
Also remove toggleOnLoad function from the body and add hidden to the content div
<body onLoad="toggleFunction()">
...
<div id="dropdown01" class="dropdowns hidden">
...
</body>
Finally, the toggleFunction must add the right class based on the hidden class of the content.
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
...
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
This is functional snipped:
const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
content.classList.toggle('hidden')
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 2em 1em 2em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300px;
height: 2em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 1em;
background-color: #eeeeee;
}
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<body onLoad="toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
</div>
</div>
<div id="dropdown01" class="dropdowns hidden">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

How to insert a Pop up into a Div - javascript

Change .popup container from position:fixed to position:absolute Add below css in .minimized class .minimized { position: relative; z-index: 1; vertical-align: bottom; } bottom property works when position is specified to the container. position:relative will come handy in this scenario.

Related

Show popup once on localstorage cookie based not working?

Show Navbar when increase scroll, hide Navbar when decrease scroll

Dialog with a fixed footer

how to change the dimensions of multiple backgrounds of a single div elements using jquery

Javascript - Loading Multiple functions onLoad

Categories

Resources