not able to move scroll bar inside a div - javascript

I have a div that gets filled dynamically when the user sends data from form, it is similar to chat box. where the user ends message and that message gets displayed inside the div. Now this div has a scroll bar that should stay at the bottom but if the user scrolls then it should stay at that position where the user has kept it
The issue is that although the scroll bar stays at the bottom but when the user pulls it up, then also it pulls itself to bottom and the user can't use it to scroll.
Code for div
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
if (event.target.id === 'scrollBottom') {
clearInterval(youInterval);
}
}, true);
startInterval();
.chatbox__body {
overflow-y: auto;
}
<div class="chatbox__body" id="scrollbody"></div>
Can anyone please help me with the issue

Your condition here is failing if (event.target.id === 'scrollBottom') {
The event generated by scroll is on document so, event.target.id is actually checking id property of document which is not there.
You have to disable overflow in body first and then add overflow to div
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
In your JS check for if (event.target.id === 'scrollbody') {
SNIPPET
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
debugger;
if (event.target.id === 'scrollbody') {
clearInterval(youInterval);
}
}, true);
startInterval();
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
#content{
height:200%;
width:100%;
background-color:red;
}
<div class="chatbox__body" id="scrollbody">
<div id="content"></div>
</div>

Related

Scroll lock for body while mobile menu is open is not working

I have found several other solutions that demonstrate how you can lock scroll behaviour for a website by using CSS overflow property. As such I have implemented this solution and added the overflow: hidden; to the body tag when the menu is open. However when using iOS Safari or Chrome the body is still scrollable.
CSS:
body.opened-drawer {
overflow: hidden !important;
height: 100% !important;
width: 100% !important;
position: fixed !important;
z-index: 0 !important;
}
JS:
timber.openDrawerMenu = function () {
var $mobileMenu = $('.nav-bar'),
$mobileMenuButton = $('#menu-opener'),
$body = $('body');
$mobileMenuButton.addClass('opened');
$mobileMenu.addClass('opened');
$body.addClass('opened-drawer');
// Make drawer a11y accessible
timber.cache.$navBar.attr('aria-hidden', 'false');
// Set focus on drawer
timber.trapFocus({
$container: timber.cache.$navBar,
namespace: 'drawer_focus'
});
// Escape key closes menu
timber.cache.$html.on('keyup.drawerMenu', function(evt) {
if (evt.keyCode == 27) {
timber.closeDrawerMenu();
}
});
}
timber.closeDrawerMenu = function () {
var $mobileMenu = $('.nav-bar'),
$mobileMenuButton = $('#menu-opener'),
$body = $('body');
$mobileMenuButton.removeClass('opened');
$mobileMenu.removeClass('opened');
$body.removeClass('opened-drawer');
// Make drawer a11y unaccessible
timber.cache.$navBar.attr('aria-hidden', 'true');
// Remove focus on drawer
timber.removeTrapFocus({
$container: timber.cache.$navBar,
namespace: 'drawer_focus'
});
timber.cache.$html.off('keyup.drawerMenu');
}
Here you go for the quick fix
body.opened-drawer {
overflow: hidden;
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
Please find the modified script here
function menuDrawerButtons (){
cache.$mobileMenuButton.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass('opened')) {
timber.closeDrawerMenu()
} else {
timber.openDrawerMenu();
}
});
setTimeout(function() {
cache.$mobileMenu.addClass('animate');
}, 500);
}
The solution I came to is more of a hack and less a solution but gets the job done either way. What I did was fix the position on the body when the menu was opened and calculate and set the scrollTop position as the menu was opened or closed.
jQuery:
var tempScrollTop = null;
tempScrollTop = $(window).scrollTop();
$(window).scrollTop(tempScrollTop);
var fixed = document.getElementById('fixed--nav');
fixed.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);

Wait for element to be displayed to user

How do I wait for an element to be displayed/seen by the user? I have the following function, but it only checks to see if the element exists and not whether it is visible to the user.
function waitForElementDisplay (selector, time) {
if (document.querySelector(selector) != null) {
return true;
} else if (timeLimit < timeSince) {
return false;
} else {
timeSince += time;
setTimeout(function () {
waitForElementDisplay(selector, time, timeLimit, timeSince);
}, time);
}
}
It's a bit confuse, are you trying a simple "sleep"?
You can wait element load using:
document.querySelector(selector).onload = function() {
// Your code ...
}
Some working snippet, run it:
// Triggering load of some element
document.querySelector("body").onload = function() {
// Setting the timeout and visible to another element
setTimeout(function () {
document.querySelector("#my_element").style.display = "block" /* VISIBLE */
}, 1000);
}
#my_element{
width: 100px;
height: 100px;
background-color: red;
display: none; /* INVISIBLE */
}
<div id="my_element"></div>
If you want to wait time as you have set to the function and the selector which should appear after this time.. You can mind about a simple setTimeout() and CSS.
Run the example below, hope it helps:
// Triggering, in my exemple i've used: WINDOW ONLOAD
window.onload = function() {
waitForElementDisplay("#my_element", 1000);
}
function waitForElementDisplay (selector, time) {
// Check the DOM Node in console
console.log(document.querySelector(selector));
// If it's a valid object
if (typeof document.querySelector(selector) !== "undifined") {
// Setting the timeout
setTimeout(function () {
document.querySelector(selector).style.display = "block" /* VISIBLE */
}, time);
}
}
#my_element{
width: 100px;
height: 100px;
background-color: red;
display: none; /* INVISIBLE */
}
<div id="my_element"></div>
You could use jQuery .ready()
selector.ready(function(){
// do stuff
})

How to reload the page on the scroll event?

I'm trying to reload a page on the scroll event, the condition works with other methods but not with the window.location.reload()
Why is this not functioning as intended?
var $searchBox = $('#searchBox');
var $the = $(window);
$the.on('resize', function() {
if($searchBox.is(':focus')) {
if($the.width() > 940) {
window.location.reload(true);
};
}
});
I do not have 50 reputation so I have to use the answer field.
I uploaded the code here: jsfiddle
HTML:
<input type="text" id="searchBox" />
CSS:
#searchBox {
width: 100%;
}
#searchBox:focus {
background: #000;
}
JavaScript
var $searchBox = $('#searchBox');
var $the = $(window);
$the.on('resize', function() {
if($searchBox.is(':focus')) {
if($the.width() > 940) {
// alert('page will be reloading');
window.location.reload(true);
};
}
});
Your code works fine if you focus the input box and then pull the left border to the left side so your page is bigger than 940px. There won't be a loop because the field has to be focused.

javascript print code is not working properly

My java script print code is not working properly. I have this code is dialog box. when user clicks on print button I am calling print() function.
The problem I am facing when My print section is opening in Chrome data and table are not coming fine in preview.
I tried to implement this code here
HTML code:
<div class="modal-body">
<div class="" id="mydata">
<div id="grid">Some Data</div>
</div>
</div>
<button type="button" id="outageSummary_printBtn" class="btnPrint" data-dismiss="modal" onclick="print()>Print</button>
JS Code :
function print(data, event) {
event.preventDefault();
printElement(document.getElementById("grid"));
};
function printElement (elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("grid");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "grid";
document.body.appendChild($printSection);
} else {
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
}
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome == true) {
window.print();
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
window.stop(); //immediately stop reloading
}
} else {
window.print();
}
return false;
};
CSS Code:
#media screen {
#grid {
/*display: none;*/
}
}
#media print {
body * {
visibility:hidden;
}
#grid, #grid * {
visibility:visible;
}
#grid {
position:absolute;
left:0px;
top:0px;
}
}
I checked lot of print functionality, but I am not able to get this issue. I believe this is related to CSS or when I am adding Html element.
Please Guide !!
Unfortunately I cannot post as a comment, but do you mean that it shows correctly in the preview, but not on the webpage?
(Also from the code you've posted, it seems you're missing the below [or an onclick function on the button]:
document.getElementById("outageSummary_printBtn").onclick = function () {
printElement(document.getElementById("grid"));
};
Sorry if you've deliberately left this out in the snippet)

Button hiding not functioning properly

HTML Code:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>​
JavaScript:
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})​
CSS Code:
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
​
Now the desired behaviour is that when mouse is slide over yellow div("wxyz") black div("abcd") should slide down and if mouse is moved out of yellow without moving on to black div, the black div should hide after two seconds.
This is happening. If mouse is moved over black div immediately after moving out of yellow div the black div should not hide as long as the mouse is on the black div. This is also happening.
Next steps are bit difficult to explain but I'll try, when mouse is moved over yellow div and black div comes out then mouse is moved over black div and within two seconds if it moved out of it(black div) then the whole animation goes haywire. Its behaviour is reversed. But if the mouse is kept on black div for more than two seconds and then it is moved out then the whole script runs fine.
This is the link to explain better. http://jsfiddle.net/HAQyK/381/
Try replacing slideToggle() with the appropriate slideUp() and slideDown() calls. http://jsfiddle.net/tppiotrowski/HAQyK/386/
var hoverVariable = false;
var hoverVariable2 = false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2 = true;
$('#slickbox').slideDown(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2 = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2 = false;
hoverVariable = true;
})​
I re-coded a solution. Checkout the fiddle here
var hideB;
var $black = $('#slickbox');
var $yellow = $('#slick-slidetoggle');
function showBlack() {
if( hideB ) window.clearTimeout( hideB );
$black.stop( true, true );
$black.slideDown(600);
}
function hideBlack() {
hideB = setTimeout( function( ) {
$black.stop( true, true );
$black.slideUp( 600 ); }
, 1000 );
}
$black.hide();
$yellow.mouseenter(function() {
showBlack();
})
$yellow.mouseleave(function() {
hideBlack();
});
$black.mouseleave( function( ) {
hideBlack();
});
$black.mouseenter( function( ) {
showBlack();
});
Your problem seems to be that the slideToggle in firing twice in quick succession because of your duplicate timeout functions. The cleanest way to deal with timeouts or intervals is to store them in a variable to give you the control of removing them when not needed:
// Defined in global scope
var timer;
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
// Timer set as function
timer = setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
// Timer no longer need and so cleared
clearTimeout(timer);
return false;}
}, 1000);
});
EDIT: Neglected to add the slideUp/slideDown instead of Toggle as per the correct answer above. See the updated jsFiddle which is now correct: http://jsfiddle.net/HAQyK/390/
Another way you could approach your script is to use jQuerys delay funciton and the stop(); method for animation. Wrap the divs in a container and you've got a much simpler block of code:
$('#slick-container').mouseenter(function() {
$('#slickbox').stop().slideDown(600);
}).mouseleave(function(){
$('#slickbox').stop().delay(1000).slideUp(600);
});
Check it out here: http://jsfiddle.net/HAQyK/387/

Categories