jQuery to regular Javascript - overlay - javascript

I've used the following jQuery code to create somewhat of an overlay for my website..
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div><div id='my_popup'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
I'd like to produce the same results, with regular javascript, no jquery, how would I start/go about this?
Also the code I'm currently using results in the overlay being re-loaded on every page, where as it should only load on the main page or landing page. Can anyone suggest a fix for that?

Translating directly from jQuery to Vanilla:
(function() {
if (window.location.href.split('/').pop() == "yourlandingpage") {
var body = document.body,
html = document.documentElement,
docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
body.innerHTML += "<div id='overlay'></div><div id='my_popup'></div>";
document.getElementById("overlay").style.height = docHeight + "px";
document.getElementById("overlay").className = "NewClass";
}
}());
And then declare CSS:
.NewClass {
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 100%;
z-index: 5000;
}
JSFiddle Example

Here is pure javascript/CSS analog of your jQuery overlay:
var overlay = "<div id='overlay'></div><div id='my_popup'></div>";
document.body.insertAdjacentHTML('beforeend', overlay);
and CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
background-color: #000;
opacity: .4;
}
Note, that I cheated a little by using position: fixed instead of absolute, so that I don't need to set overlay height with document height, and can go with simple CSS.
Exmaple: http://jsfiddle.net/ajwmcbww/

Related

JQuery Scroll Speed

I'm trying to get an image to scroll slower than other elements on a site with the div class slow-image however the JQuery doesn't seem to do anything. Does anyone know why?
CSS:
.slow-image
{
position: absolute;
width: 25vw;
top: 10vw;
margin-left: 60vw;
}
HTML
<div class="slow-image"><img src="..."></div>
JQuery
$(document).ready(function(){
var $win = $(window);
$('slow-image').each(function(){
var scroll_speed = 0.8;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});

Sticky sidebar 20px top size

TEST PAGE
Im trying to have the top of the vertical line of the sidebar to stop at the top nav (example image attached), I tried to add 'top': '20' in the js code and it didnt work. I also tried margin-top: 20px in CSS and that didnt do the trick. Im not sure where I can add 20px height above the sidebar.
JavaScript
$(document).ready(function () {
var length = $('#community-sidebar').height() - $('#community-section-col1').height() + $('#community-sidebar').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#community-section-col1').height() + 'px';
if (scroll < $('#community-sidebar').offset().top) {
$('#community-section-col1').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('#community-section-col1').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('#community-section-col1').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
CSS
#community-sidebar {left: -45px; position: absolute; top: -40px; height: 1500px;}
.h-line { border-left: solid black 1px; height: 550px; border-width: thin; width: 1px; left: 189px; position: absolute; top: 0;}
Wrapping the header with a div having height 20px followed with position:fixed for the header.
<div style="height:20px">
<div style="position:fixed">
//your header content
</div>
</div>

Add div every time the height is greater then 11.5in

How can i add div every time when height of page becomes greater than 11.5in? I need to copy same div every time that happens.
<div class="logo-etm">
<img src="/img/etm-logo.png" class="etm">
</div>
I have this code,but it wont work like i want it to:
$( document ).ready( function(){
var e = $( '.logo-etm' );
if( $("body").height() > 11.5 ){
e.clone().insertAfter( e );
}
});
it puts all divs one across the other... i need them below. Can someone help?
and this is css:
$('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
$('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
Your css is not css is JS so you have to apply it to the new cloned node !
Try to apply it after node cloning !
$(document).ready(function() {
var e = $('.logo-etm');
if($("body").height() > 11.5){
e.clone().insertAfter(e);
}
$('button').click(function(){
// $('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
// $('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
$('.logo-etm').css({
'display' :'block' ,
'margin-top' :'1100px' ,
'width' :'100%'
});
$('.etm').css({
'position' :'realtive' ,
'z-index' :'-1' ,
'width' :'30%'
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-etm">
<img src="https://openclipart.org/image/100px/svg_to_png/220732/Tribal-Kitten.png&disposition=attachment" alt="Tribal Kitten" title="Tribal Kitten by GDJ ( https://openclipart.org/user-detail/GDJ )" class="etm"/>
</div>
<button>click to apply css</button>
11.5 in is not a unit jQuery can work with. $('body').height() returns a unitless value based on pixels, as is stated in the documentation of the height() method. May I ask why you opted to using inches?
Would swapping the inches for its equivalent in pixels be an option? The element is properly inserted if so, see the attached example. If the body height is bigger than 500 px the element will be cloned and inserted after the first element.
To make sure that the body's (viewport) height is returned properly in this case, I have given the html and body tags height: 100%.
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// Where should the duplicated logo go to?
var target = $('.body');
// What should the min-height be before inserting the duplicated logo?
if ($("body").height() > 50) {
logo.clone().css({
'position': 'fixed',
'background': 'red',
'z-index': '-1',
'width': '75px',
'top': '0px',
'left': '0px',
}).insertAfter(logo);
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
border: 1px solid #000;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">elem</div>
Update
The following code will copy and insert the copied logo every amount of pixels defined in var size
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// At what size should a new logo be inserted?
var size = 1100;
if($('body').height() > size) {
for(var i = (size * 2); i < ($('body').height()); i += size) {
logo.clone().css({
'position': 'absolute',
'background': 'red',
'z-index': '-1',
'width': '100px',
'top': i + 'px'
}).insertAfter(logo);
}
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
height: 6000px;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">logo</div>

Get the div position and add some pixel to some div - Jquery

I want to get the current top position of .top class div, then i have to add some 20px+.top into the .bottom inline style.
Ex: if .top has top:200px; the .bottom must be changed to top:220px;
funtion(){
var position = $('.top').offset();
$('.bottom').css(position)+20px;
}
.parent
{
position: relative;
}
.child
{
position: absolute;
}
.top
{
top: 100px;
right: 0px;
}
.bottom
{
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child top">Top</div>
<div class="child bottom">Bottom</div>
</div>
funtion(){
var position= $('.top').offset();
var top= position.top;
var left = position.left;
var newtop = top + 20 + "px";
var newleft = left + 20+ "px";
$('.bottom').css( {
'position': 'absolute', // if require
'left': newleft,
'top': newtop
});
}
This might do the work:
var topPosition = $('.top').offset().top;
$('.bottom').css('top',(topPosition+20)+'px');
You can use the following code snippet for this,
$( '.bottom' ).css( 'top', $('.top').css('top'));
$( '.bottom' ).css( 'top', '+=20px' );

Responsive and Sticky Nav Bar

I have a nav bar that is fixed to the top of the page when the width is under 768px.
When it is over 768px it starts at the bottom and when the user scroll past it it become stuck to the top.
Both of these instance work fine on their own, but when the browser is resized there are some issues when going from under 768px to above. (Going from 768 to below works fine.)
When I load the page in a browser size under 768px and then resize the window above that is where I run in to problems.
I would like for the nav bar to smoothly transition between states. (It works beautifuly when loading above 768px then reszing to under and reszing above - Ideally this is how I would like it to work when loaded below 768px.) Or as an alternative just have the nav bar be fixed to the top when moving from under 768px to above.
This is the link to the site.
This is my CSS
.header{
width: 100%;
min-width: 300px;
height: 100px;
padding: 0px;
background: black;
position: absolute;
bottom: 0px;
z-index: 99999;
-webkit-font-smoothing: subpixel-antialiased;
}
.header.fixed{
width: 100%;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
#media only screen and (max-width: 768px){
.header{
width: 100%;
background: black;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
}
and this is the Javascript
<script>
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
</script>
I have also tried below to no luck.
<script>
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}</script>
<script>
jQuery(window).resize(function(){
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}})</script>
try this:
function sticky_navigation() {
var browserWidth = $(window).width();
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the page, change its position to fixed to stick to top,
// otherwise change it back to relative
if ((scroll_top > $('.header').height()) && (browserWidth > 720)) {
$('.header').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' });
} else {
$('.header').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' });
}
};
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// and run every time you resize to boot
$(window).resize(function() {
sticky_navigation();
});

Categories