We Keep Coding

Javascript Background toggle on Popup

I have a div assigned to trigger some Javascipt which opens a 'PopUp' RSVP form on my site,I however also want to have a black background full screen overlay when the window pops up to hide the rest of the site.
The popup window works fine using this:
$(function() {
// contact form animations
$('#contact').click(function() {
$('#contactForm').fadeToggle();
});
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
So I want to attach the overlay action into this function so that it toggles on and off with the PopUpWindow. I already have a div assigned with the correct CSS,I just need to get it to also toggle:
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
I am a little stuck so any help is very much appreciated. Thanks

I think in your script, you checked for the contact form being clicked or not, but then you hide only the form, and not the sidebar-overlay section. So it's really just a slight mix up in which selector is in use. (I can't be positive if that's what's going on, as you did not include the html markup in your question.)
Here's a quick example with your code and the matching html. Only, the sidebar-overlay is hid on click of the document area.
$('#contact').click(function() {
var container = $(".sidebar-overlay");
container.fadeToggle();
});
$(document).mouseup(function (e) {
var container = $(".sidebar-overlay");
var contactform = $("#contactForm");
if (!contactform.is(e.target) // if the target of the click isn't the container...
&& contactform.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
#contactForm{
width:50%;
margin:20px auto;
padding:20px;
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="contact">click</button>
<div class="sidebar-overlay">
<form id="contactForm">
This is my form<br />
field 1 ______<br />
field 2 ______<br />
</form>
</div>

Always focus mouse cursor in particular div in JQuery

I have a div "wtb_wrapper_middle" in middle of my web page.
For that div only scroll able in web page. In left and right div are not movable, it fixed in my web page.
So I want to mouse always focus on that particular div wherever my mouse clicked or mouse hover. Means when i use keyboard up or down button at that time that particular div only should be scroll.
Is there possible in JQuery.
My code is like below.
<div id="wtb_wrapper_inner">
<div id="wrapper_left">
....
....
....
</div>
<div id="wtb_wrapper_middle">
....
....
....
....
</div>
<div id="wtb_wrapper_right">
....
....
....
</div>
</div>
In from above html code "wtb_wrapper_middle" area only scrolls in my web page.
I have tried the below
window.onload = function() {
document.getElementById("wtb_wrapper_middle_inner").focus();
};
In this code is focus only on page load, but if clicked mouse in somewhere else, at that time also that middle area should be scroll. That is not working.
My Ajax callback function like below
$.ajax({
type: "POST",
url: "search.php?ajaxrequest=yes",
data: query_string
}).done(function( data ) {
$(".wtb_p_loader").remove();
$("#wtb_wm_listing").append(data);
});
I'm appending return success data into the di wtb_wm_listing which is i have placed inside of main div wtb_wrapper_middle
Anyone help me to make it success..

You can do this using css position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. Then the central div scrolls regardless of where the mouse pointer is. You can use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
And the Html is
<div class='left'>
<a href='#'>Hover to check the mouse focus and scorll</a>
</div>
<div class='center'>
//some long content
</div>
<div class='right'>
</div>
Css for doing this action.
a {
color: #000;
display: block;
font-family: arial;
margin: 10px;
text-decoration: none;
}
a:hover {
background-color: #f03055;
color: #fafafa;
}
p {
color: #fafafa;
font-family: arial;
line-height: 24px;
margin: 0 0 25px 0;
padding: 0 2%;
}
.center {
background-color: #97c;
height: 2000px;
margin: 0 25%;
width: 50%%;
}
.left {
background-color: #7c9;
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 25%;
}
.right {
background-color: #7c9;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 25%;
}

EDIT: to filter out input elements
document.body.onkeydown = function(event){
var e = event || window.event,
target = e.target || e.srcElement;
if (target.tagName.toUpperCase() == 'INPUT') return;
document.getElementById("wtb_wrapper_middle_inner").focus();
};
this will move focus to your middle div whenever keydown event occurs.

How to position two elements centered on top of each other?

The problem:
I have a form with a button underneath it to submit (post) from data with jQuery ajax(). I want for the button to be replaced with a spinner (animated png) for the duration of server ajax call. But such a trivial task is impossible in css to do right.
What i have tried:
I have placed button and image inside a bootstrap row. Ox ajax call I have set button display to none and img display to block. But because this two are not of the same size makes the whole page flicker, breaks the positioning of other elements and so on.
Another idea was to try to place both elements on top of each other with absolute positioning. But, stupid as css is I cannot center it on the middle of the row.
Is there a way to position both elements on top of each other so I can control their visibility?
Please bear in mind that I cannot used absolute position in pixel, because this is a web page and I do not not how wide the browser will be, image can change in the future, text in the button can change in the future, all this things affect absolute size.
If there is another solution to my problem which would prevent the page from jumping up and down it would also be great.
EDIT
Link to one of fiddle experiments:
https://jsfiddle.net/ofb2qdt8/
.button {
position: relative;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: relative;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This renders second element underneath on screen. Not on different z layer.
Experiment 2:
https://jsfiddle.net/ofb2qdt8/
.button {
position: absolute;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: absolute;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This does not center both elements, and they are pushed to the top of the containing div. The element with less height should be centered.

Check this working demo: https://jsfiddle.net/ofb2qdt8/3/
Add in a few lines of jquery and update your css.
Position your loading div according to button div's position, width, height using jquery.
*Click the button to see loading div, and try to play the margin of the button to any pixel.
###JQUERY
$(document).ready(function () {
$('.c2').each(function () {
$(this).css({
'width': $(this).siblings('.c1').outerWidth(),
'height': $(this).siblings('.c1').outerHeight(),
'top': $(this).siblings('.c1').offset().top,
'left': $(this).siblings('.c1').offset().left
});
});
$('.c2').on('click', function () {
$(this).hide(0);
});
});
###CSS
.c1 {
margin: 100px auto;
width: 100px;
text-align: center;
padding: 5px 10px;
background: blue;
z-index: 1;
}
.c2 {
position: fixed;
text-align: center;
background: red;
z-index: 2;
cursor: pointer;
}

Rough, ready and untested:
HTML
<div>
<input type='submit' />
<img src="spinneyIMage.gif" />
</div>
CSS
div{ text-align: center; }
div img{ display: none; }
jQuery
$('submit').click(function(e){
e.preventDefault();
$(this).hide().next().show();
});
After the Ajax call completes reverse the above jQuery.

As I haven't been able to find a working solution I have reverted to my first idea which I discarded at first. Albeit with a little twist.
HTML
<div class="row>
<div id="container-button" class="col-xs-12>
<button id="button" onclick="button_OnClick(e)">submit form via ajax</button>
<img src="img/spinner.png" sytle="display: none" />
</div>
</div>
JS
function btnContact_OnClick() {
// show the soinner and hide the button
showSpinner();
$.ajax(
{
type: 'POST',
url: "someurl.com/target",
data: $("#form").serialize(),
dataType: "json",
complete: function() { hideSpinner();},
success: onAjaxSuccess,
error : onAjaxError
});
}
function hideSpinner() {
$("#spinner").hide();
$("#button").show();
// make container height non-fixed and content adjustable again
$("#container-button").height('auto');
}
function showSpinner() {
// THis is the trick !!!
// Make the container fixed height as it was before displaying spinner, so it does not change with content (spinner is not the same height as button
$("#container-button").height($("#container-button").height());
$("#button").hide();
$("#spinner").show();
}
This is not the perfect solution but the best I could make.
Drawbacks:
it is not clean, you have to use javasript to fix what is css layout
problem
it still causes a little flicker
the height of container while displaying spinner is dependant on button, this may cause clipping if spinner is too big

Sliding a div from right > to left <

I have been searching for a code snippet that I assumed would already be out there somwhere. There are many different variations that I have found but none of which are best suited for me. I have attempted to modify jsfiddles ive found and tweak other examples but to no avail.
As I have little to no prior experience with javascript and Jquery languages I hoped someone on here could help.
In my current project I have a single page in which all the content is loaded. currently I have six divs all hidden off screen to the right. with a vertical navigation menu sitting on the left. What I want is for when a link with the assigned div is clicked, that targeted div slides on screen from right to left and stops next to the navigation menu.
The twist, however is when a new link is clicked the content of the previous div to slide off screen allowing the newely selected div to replace it.
Hopefully I have explained myself well enough.
The content divs I want slided are =
id="content-one"
id="content-two"
and so on.
Any solutions or pointers in the right direction would be extreamly usefull many thanks in advance.
This is what i was originally trying to modify but i was unsuccessful...
$(document).ready(function(){
$("#navigation li a").on("click", function(e){
e.preventDefault();`enter code here`
var hrefval = $(this).attr("href");
if(hrefval == "#content-one") {
var distance = $('#container').css('right');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
activateSlider();
} else {
deactivateSlider();
}
}
}); // end click event handler
// $("#closebtn").on("click", function(e){
// e.preventDefault();
// closeSidepage();
// }); // end close button event handler
function activateSlider() {
$('#container').animate({
right: '350px'
}, 400, 'easeOutBack');
}
function deactivateSlider(){
$("#navigation li a").removeClass("open");
$('#container').animate({
right: '0px'
}, 400, 'easeOutQuint');
}
});

Try like this,
Here .panel your sliding div class
JS Fiddle
$(document).ready(function() {
var settings = {
objSlideTrigger: '#trigger', // link button id
objSlidePanel: '.panel' // slide div class or id
}
$(settings.objSlideTrigger).on('click', function() {
//If the panel isn't out
if (!$(settings.objSlidePanel).hasClass('out')) {
slidePanelOut();
} else if ($(settings.objSlidePanel).hasClass('out')) {
slidePanelIn();
}
});
function slidePanelOut() {
//Animate it to left
$(settings.objSlidePanel).animate({
'right': '-67%'
});
//Add the out class
$(settings.objSlidePanel).addClass('out');
}
function slidePanelIn() {
//Otherwise, animate it back in
$(settings.objSlidePanel).animate({
'right': '-89%'
});
//Remove the out class
$(settings.objSlidePanel).removeClass('out');
}
});
.panel {
width: 85%;
padding: 2%;
position: fixed;
right: -89%;
top: 46px;
z-index: 2;
background: #2F2F2F;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
border-radius: 1% 1% 1% 1%;
border-radius: 5px;
}
.trigger {
width: 8%;
text-align: center;
color: goldenrod;
position: absolute;
top: 26px;
padding: 0.5% 0%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background: #2F2F2F;
right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panel" class="panel">
<!-- Trigger -->content
</div>
<a id="trigger" class="trigger">click here</a>

Float a div at the bottom right corner, but not inside footer

I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. I can do this with the following code, but I don't want this button to enter the footer of my page. How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page?
CSS
#to-top {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
text-align: center;
cursor: pointer;
display: none;
}
JavaScript
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
$('#to-top').click(function() {
$('body,html').animate({scrollTop:0},"fast");
});
HTML
<div id="to-top">Back to Top</div>
EDIT
Here is a drawing of how it should look like. The black vertical rectangle is a scroll bar. The "back to top" button should never enter the footer region.
Here is a jsfiddle.

The solution turned out to be more complicated than I thought. Here is my solution.
It uses this function to check if footer is visible on the screen. If it is, it positions the button with position: absolute within a div. Otherwise, it uses position: fixed.
function isVisible(elment) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$('#to-top').fadeOut();
} else if (isVisible($('footer'))) {
$('#to-top').css('position','absolute');
} else {
$('#to-top').css('position','fixed');
$('#to-top').fadeIn();
}
});
jsfiddle

Increase the value of bottom: 10px; than the height of footer.
I saw your screenshot now,just add some padding-bottom to it.

Solution
$(document).ready(function(){
$(window).scroll(function(){
btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
ftrTop = $(".footer").offset().top;
if (btnBottom > ftrTop)
$(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
});
});
Fiddle: http://jsfiddle.net/praveenscience/BhvMg/
You forgot to give the z-index, that prevents it from being on top!
z-index: 999;
Or if it is overlapping with the footer of your page, you can increase the co-ordinates.
bottom: 50px;
Your question is still not clear, "stop it from entering the footer". Does it overlap?