We Keep Coding

Show div display none to block after pass another div then use onclick to display none again

I'm trying to show a fixed div for some popup ad when scroll and pass another div on the page, and then use onclick button to hide it again, and I want this to load one time per page so the visitor if gone to the top of page and scrolled to the div again it will not appear again .. and all this work on mobile screens only!!
I use #onthediv just as a bridge without content. I tried many codes but no success.I hope it is clear what I really need :)
<div id = "onthediv"></div>
<div id="mydiv" style="position: fixed; z-index:9999; left: 0px; top: 35%;">
<button class="btn" style="position:absolute;left:0px;top:0px;z-index:999;"
onclick="document.getElementById('mydiv').style.display='none'">
<img src="CloseBtn.png" width="40" height="38">
</button>
<!--popup image -->
</div>
css
.mydiv { display: none;
}
$(document).ready(function() {
$("#mydiv").hide(); //hide your div initially
var topOfOthDiv = $("#onthediv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#mydiv").show(200); //reached the desired point -- show div
}
});
});
tried also
document.getElementById("target-id").style.display = "block";

Trouble with nested function, or looking for guidance on a better solution

I am using bootstrap 4 and would like to change the logo and shrink the navbar on scroll, except when screen size is less than 992px. I believe a nested function may be the best option, but I can't quite get it to work.
Open to other suggestions as well. Thanks in advance...
My code below:
function myFunction(x) {
if (x.matches) { // If media query matches
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
// Collapse Navbar & Change Logo on scroll
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
$("#mainNav").removeClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
}
}
var x = window.matchMedia("(max-width: 991px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

I think this should make things easier for you. In this case MyFunction will execute at: 1) Document ready event, 2) Window scroll event.
function myFunction() {
var x = window.matchMedia("(max-width: 991px)");
if (x.matches) { // If media query matches
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
// Collapse Navbar & Change Logo on scroll
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
$("#mainNav").removeClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
}
}
}
// Call myFunction on document ready event
$(document).ready(myFunction);
// Call myFunction on scroll event
$(window).scroll(myFunction);

You really don't need all that complicated JS to achieve what you want. You can just rely on some CSS and very minimal JS (just to store the scroll position). Take a look at this
// store the scroll position on the HTML element so css can react to changes
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
html,
body {
padding: 0;
margin: 0;
}
<!-- use a media query to prevent the change to the header on smaller devices -->
#media only screen and (min-width: 992px) {
<!-- You can check the data-scroll attribute on the HTML node to see if the user has scrolled and set the appropriate styles then, this add a padding to the top of the document -->
html:not([data-scroll='0']) body {
padding-top: 3em;
}
<!-- this changes the header to fixed and changes the image -->
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
background-image: url(https://png.pngtree.com/thumb_back/fh260/back_pic/02/65/14/5957873074946eb.jpg);
}
}
<!-- this is the default style for the header -->
header {
background-image: url(https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg);
width: 100%;
background-position: left;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
height: 3em;
}
h1 {
padding: 0;
margin: 0;
}
<!-- initialize the data-scroll attribute on the HTML element -->
<html data-scroll="0">
<head>
<title>Sample </title>
</head>
<body>
<header>
<h1>
I am your header
</h1>
</header>
<section>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
<p>
I am your content
</p>
<p>
There is a lot of me so i can scroll
</p>
</section>
</body>
</html>
Here is a fiddle so you can easily resize the window to see the effects.
Edit - Seems like the snippet viewer messes with the code, just use it to review the code and check it out on jsfiddle for a working example.

hide body tag but still show a div

<script>
$(document).ready(function(){
$("#print").click(function(){
$("body").hide();
$("p").show();
window.print();
$("body").show();
});
});
</script>
</head>
<body>
<p>THIS SHOULD BE PRINTED </p>
<button >Hide</button>
<button >Show</button>
<button id="print">print</button>
</body>
given is a sample code. Clicking on print button should hide body of page except the values inside "p" tags. need help as to how to achieve this ?
is there some way of making "p" tag or "div" tag act as body temporarily ?

Use below given function to first hide all child of body tag and then show the required child
$("body").find("*").hide();

I would structure your application differently as you can't show something contained within the element you have hidden.
<body>
<div id="hide-me"></div>
<p id="show-me">THIS SHOULD BE PRINTED</p>
</body>
and change your logic to something like this...
$(document).ready(function(){
$("#print").click(function(){
$("#hide-me").hide();
$("#show-me").show();
window.print();
$("#hide-me").show();
});
});

It can be risky to hide everything in the page. Also, the approach makes you ahve to add the content after hiding the body.
A better approach is to make the content you want come to the front, fill up the whole screen, and hide everything else behind it without deleting.
And it's very simply to do so.
$(function() {
$('.show-print').on('click', function() {
$('.print-container').addClass('active-print');
});
});
.print-container {
position: fixed;
background: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.print-container:not(.active-print) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Normal body content
</p>
<button class="show-print">Print</button>
<div class="print-container">
<div class="print-content">
I'm Print. I'm stronger than BODY!
</div>
</div>

scrollTo() function does nothing

I wanted to scroll to the bottom of the page using vanilla JS, but I encountered a problem. The code below is supposed to scroll to the bottom of the page:
window.scrollTo(0,document.body.scrollHeight);
Whereas all it does is logs "undefined" in the console. Inputting
document.body.scrollHeight
returns an integer 736. Other than that, it doesn't matter what I input into the function's parameters, nothing happens. What more, it only happens on one website. What may matter (not sure) is that the website hides its vertical scrolling bar, even thought it has a really long list of content.

The problem might be that the actuall scroll that you have on the website is not the scroll of the body but a scroll of another element inside that body.
Here is an example:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
Note - the usage of jquery is only to make the example shorter.

Put some content in your page o style the body heigth = 1500px for example, then try to execute same code.

Solved. This is what had to be done:
document.getElementsByTagName('body')[0].style.display = "block";
For whatever reason, changing the display to "block" enabled the scrolling using the given code:
window.scrollTo(0,document.body.scrollHeight);

If you will try to type in browser's console like a var a = 5 you also will get undefined. It happens that your example and my did not return anything.

jQuery slideDown() moves everything below downwards. How to prevent this?

I have a small problem with jQuery slideDown() animation. When this slideDown() is triggered, it moves all stuff below downwards too.
How do I make all the stuff below the <p> being slid down, remain stationary ?
Note:
I would prefer a solution where the change is done to the <p> element, or to the slideDown call or something. Because in my actual page, there is a lot of stuff below the <p> being slid down, so changing/re-arranging all of them will take much longer for me ~
Demo # JSFiddle: http://jsfiddle.net/ahmadka/A2mmP/24/
HTML Code:
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<p></p>
</section>
<div style="padding-top: 30px;">
<table border="1">
<tr>
<td>This table moves</td>
<td>down when</td>
</tr>
<tr>
<td>slideDown()</td>
<td>is activated !</td>
</tr>
</table>
</div>
JavaScript:
$(function () {
$("#submitBtn").click(function (event) {
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
CSS:
.subscribe p {
display: none;
}

You can position that element as absolute:
.subscribe p {
display: none;
position : absolute; // add this line
}
Demo: http://jsfiddle.net/A2mmP/25/
What's happening with your existing code is that the element starts out as display:none; so it doesn't take up any space at all until you slide it in and it is changed to display:block, hence the movement down of the following elements.
With position:absolute it doesn't take up space in that sense, it overlaps: in fact in my updated version of your fiddle you can see a slight overlap into the table underneath - you can obviously tweak margins on the table or whatever to make it fit the way you want.

All you need is to give a fixed height of your .subscribe.
.subscribe {
height: 50px;
}
.subscribe p {
margin: 0px;
display: none;
}
Here is the jsFiddle : http://jsfiddle.net/xL3R8/

Solution
We will put the sliding element in a div element with a fixed width, preventing the document flow from being affected by the slide event.
HTML
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<!-- this is the modified part -->
<div><p></p></div>
</section>
CSS
.subscribe div
{
/* We force the width to stay a maximum of 22px */
height:22px;
max-height:22px;
overflow:hidden;
}
.subscribe div p {
display: none;
/* We reset the top margin so the element is shown correctly */
margin-top:0px;
}
Live Demo

The problem is your CSS, it will render as block and push the other elements down when it slides in. Set it to be absolutely positioned and change the z-index to be in front, or behind.
.subscribe p {
display: none;
position: absolute;
z-index: 100;
}
Fiddle

.subscribe p {
display: none;
margin :0px;
}

IMO a good UI practice would be to, remove the subscribe button, and instead show a message there like :
"Hurray! You have been subscribed"
e.g
http://jsfiddle.net/UvXkY/
$(function () {
$("#submitBtn").click(function (event) {
$("#submitBtn").slideToggle('slow', function(){
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
});

The actual problem your facing is display:none which will remove the space for the element p
where as visiblity:hidden and showing will get ride of this problem
Even though it will not give the proper slideDown effects so you can use the position absolute and keep some spaces for the p element will solve your problem.
one of the solution
.subscribe p {
position:absolute;
display:none;
}
.subscribe
{
position:relative;
height:50px;
}
FIDDLE DEMO