javascript - how to give auto scroll to bottom when page before show -
we developing chat application in showing image,audio , text in content div.
we have header div,content div,footer div.in content div adding new data dynamically want show in bottom every time. if want see previous data want scroll down see. how using jquery
$(document) .on( "pagebeforeshow", "#chat", function() { window.requestfilesystem(localfilesystem.persistent, 0, onfilesystemsuccess, fail); load = true; $('#opchat').empty(); $("#preopchat").empty(); $("#opchat1").empty(); var checkdata = storagechat.getitem("chatdata"); if (json.parse(checkdata) != null && json.parse(checkdata) != undefined) { storechatdata = json.parse(checkdata).slice(); if (storechatdata.length > 10) { var slicechatdata = []; slicechatdata = storechatdata.slice(math.max( storechatdata.length - 10, 1)); for (var = 0; < slicechatdata.length; i++) { if (slicechatdata[i] != undefined) { if (slicechatdata[i].startswith("file:///")) { var filepath = slicechatdata[i].split(",") if (filepath[1] == 'image/jpeg') { var storedchat = '<img class="popphoto" id="profimgdashbrd" style="height: 70px; width: 70px;" src=\'' + slicechatdata[i] + '\' >'; previewdata(storedchat); } else if (filepath[1] == 'audio/mpeg') { var storedchat = "<audio controls>" + "<source src='" + slicechatdata[i] + "' type='video/mp4'>" + "</audio>" + "<br>"; previewdata(storedchat); } else { var filepath = storechatdata[i].split(",") var storedchat ="<div class='right'>" + "<p>" + filepath[1] + "</p>" + "</div"; $("#opchat1").append(storedchat); } } else { var storedchat ="<div class='left'>" + "<p>" + slicechatdata[i] + "</p>" + "</div>" + "<br>"; $("#opchat").append(storedchat); } } } } else { for (var = 0; < storechatdata.length; i++) { if (storechatdata[i] != undefined) { if (storechatdata[i].startswith("file:///")) { var filepath = storechatdata[i].split(",") if (filepath[1] == 'image/jpeg') { var storedchat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\'' + filepath[0] + '\' >'; previewdata(storedchat); } else if (filepath[1] == 'audio/mpeg') { var storedchat = "<audio controls>" + "<source src='" + filepath[0] + "' type='video/mp4'>" + "</audio>" + "<br>"; previewdata(storedchat); } else { var filepath = storechatdata[i].split(","); var storedchat ="<div class='right'>" + "<p>" + filepath[1] + "</p>" + "</div"; $("#opqicchat1").append(storedchat); } } else { var storedchat ="<div class='left'>" + "<p>" + storechatdata[i] + "</p>" + "</div>" + "<br>" $("#opqicchat").append(storedchat); } } } } } }); function onfilesystemsuccess(filesystem) { foldername = "qlm" var directoryentry = filesystem.root; directoryentry.getdirectory(foldername, { create : true, exclusive : false }, gotdirentry, fail) } function gotdirentry(direntry) { direntry.getfile("newfile.txt", { create : true, exclusive : false }, gotfileentry, fail); } function gotfileentry(fileentry) { return true; } function fail() { alert("error code"); } // text ,audio , images display in chat function previewdata(data) { var storedchat ="<div class='right'>" + "<p>" + data + "</p>" + "</div>" + "<br>"; $("#opqicchat1").append(storedchat); } // text enter , submit $(document).on('click', '#btnchatsend', function() { var txtareaid = "txtarchat"; var txtareaval = $("#" + txtareaid).val(); if (txtareaval != null && txtareaval != undefined && txtareaval != "") { storechatdata.push("file:///" + "," + txtareaval); storagechat.setitem("chatdata", json.stringify(storechatdata)); previewdata(txtareaval) } $("#" + txtareaid).val(""); $(textarea).val(""); }); // record audio , store function startrecord() { navigator.device.capture.captureaudio(capturesuccess, captureerror, { limit : 1 }); } function capturesuccess(e) { var audiofile = e[0].localurl; var audiofilepath = e[0].fullpath; audioname = audiofile.substr(audiofile.lastindexof('/') + 1); filename = date.now().tostring() + audioname; window.resolvelocalfilesystemurl(audiofile, copyfilepath, fail); } function captureerror(e) { alert(json.stringify(e)); } function playrecaudio(url) { if (play == true) audiorecord = new media(url, onaudiosuccess, onaudioerror); if (play == true) { audiorecord.play(); play = false; } else { audiorecord.pause(); play = true; } } function onaudiosuccess() { } function onaudioerror() { } // capture image camera function getcapimg(source) { navigator.camera.getpicture(onsaveddocurisuccess, onfails, { destinationtype : navigator.camera.destinationtype.file_uri, sourcetype : source, savetophotoalbum : true }); } function imagegallery(source) { navigator.camera.getpicture(onsaveddocurisuccess, onfail, { quality : 30, targetwidth : 600, targetheight : 600, destinationtype : destinationtype.file_uri, sourcetype : source }); } function onsaveddocurisuccess(imageuri) { filename = imageuri.substr(imageuri.lastindexof('/') + 1); filename = date.now().tostring() + filename; window.resolvelocalfilesystemuri(imageuri, copyfilepath, fail); } function copyfilepath(fileentry) { window.requestfilesystem(localfilesystem.persistent, 0, function(filesys) { filesys.root.getdirectory(foldername, { create : true, exclusive : false }, function(dir) { fileentry.copyto(dir, filename, oncopysuccess, fail); }, fail); }, fail); } function oncopysuccess(entry) { entry .file(function(file) { storechatdata.push(entry.tourl() + "," + file.type); storagechat.setitem("chatdata", json .stringify(storechatdata)); var getimagedata = storageqlmchat.getitem("chatdata"); var arrayformate = json.parse(getimagedata); $ .each( arrayformate, function(index, value) { var imagepath = value.split(",") if (index == arrayformate.length - 1) { if (file.type == 'image/jpeg') { var storedchat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\'' + imagepath[0] + '\' >'; previewdata(storedchat); } else if (file.type == 'audio/mpeg') { var storedchat = "<audio controls>" + "<source src='" + imagepath[0] + "' type='video/mp4'>" + "</audio>" + "<br>"; previewdata(storedchat); } } }); }); } function fail(error) { alert("error" + error.code); }.left { margin-top:10px; position: relative; background: aqua; text-align: left; min-width: 85%; padding: 15px 10px; border-radius: 6px; border: 1px solid #ccc; float: left; left: 8%; } .left::before { content: ''; position: absolute; visibility: visible; top: -1px; left: -10px; border: 10px solid transparent; border-top: 10px solid #ccc; } .left::after { content: ''; position: absolute; visibility: visible; top: 0px; left: -8px; border: 10px solid transparent; border-top: 10px solid aqua; clear: both; } .right { position: relative; background: white; text-align: right; min-width: 85%; padding: 10px 15px; border-radius: 6px; border: 1px solid #ccc; float: right; right: 5%; margin-top: 10px; } .right::before { content: ''; position: absolute; visibility: visible; top: -1px; right: -10px; border: 10px solid transparent; border-top: 10px solid #ccc; } .right::after { content: ''; position: absolute; visibility: visible; top: 0px; right: -8px; border: 10px solid transparent; border-top: 10px solid white; clear: both; }<div class="headerdiv" data-role="header" id="hdridchat" data-position="fixed" data-tap-toggle="false" data-transition="none"> <a class="ui-btn ui-icon-arrow-l ui-btn-icon-left" onclick="navback()"></a> <h1 id="lblhdrchat">chat</h1> <div data-tap-toggle="false" data-transition="none" style="border-top:1px solid white;width: 100%; text-align: center; display: inline-flex;"> <div style="width: 100%; padding: 10px;"> <img alt="" src="images/vo.png" onclick="startrecord()" style="height: 25px;"> </div> <div style="width: 100%; padding: 10px"> <img alt="" src="images/imcht.png" onclick="imagegallery(picturesource.photolibrary)" style="height: 25px;"> </div> <div style="width: 100%; padding: 10px"> <img alt="" src="images/camcht.png" onclick="getcapimg(navigator.camera.picturesourcetype.camera);" style="height: 25px;"> </div> </div> </div> <div data-role="content"> <div onclick="prechatdata()"> <p align="center"></p> </div> <div id="example"> <div id="preopqicchat"></div> <div id="opqicchat" ></div> <div id="opqicchat1" ></div> </div> </div> <div data-role="footer" data-position="fixed" id="chatfooter" style="background: transparent; border: none;" data-tap-toggle="false" data-transition="none"> <div style="display: inline-flex; width: 100%;"> <div style="width: 100%"> <textarea autofocus="autofocus" id="txtarchat"></textarea> </div> <div> <button data-role="button" class="ui-btn ui-btn-b" id="btnchatsend" style="width: 100% !important;">send</button> </div> </div> </div>
have @ demo
header, footer { flex: 0 0 auto; } main grows in height content. number '1' in flex shorthand tells how free space in container allocated element. in our case, main given free space. auto part of value default size of flex element. want auto flex children.
main { flex: 1 0 auto; ... } the footer beneath content, no matter what.
footer starts @ bottom
footer gets pushed down content
Comments
Post a Comment