I am making a chat app in angular js and I have added the scroll bar to the chat area.
Here is the code:
<div class="chat active-chat" id="scrollme" >
<div class="scroll">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" >
<div class="bubble" ng-class="c.type" >
{{c.message}} <br/>
<a style="color: blue;" ng-click="openFile(c.uploadedFile.fileContentType, c.uploadedFile.file)" ng-if="c.uploadedFile.file" target="_blank">{{c.uploadedFile.fileName}}
</a>
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
</div>
and css for this is:
.scroll{
overflow-y: auto;
overflow-x: hidden;
}
#scrollme{
height: 403px;
width: 498px;
padding-right: 10px;
padding-bottom: 76px;
padding-left: 12px;
}
Now I want to keep the scroll at bottom by default and whenever a message arrives it should scroll up.
Thanks in advance
Keeping it at the bottom:
You can just set the scrollTop to the height of the element:
Changing the following element: <div id="innerScroll" class="scroll">
var ele = document.getElementById('scrollme');
var innerEle = document.getElementById('innerScroll') //add this ID to your scroll class element. Or whatever name you want to
var height = innerEle.offsetHeight;
ele.scrollTop = height;
See a fiddle for this feature: https://jsfiddle.net/qyj4h73g/1/
For the chat updating the elements scrollTop value:
Assuming that the chat object that is constantly being updated is in JSON representation, you can just watch that JSON string value:
$scope.$watch('activeConversations', function(newValue, oldValue) {
var ele = document.getElementById('scrollme');
var curScrollTop = ele.scrollTop;
ele.scrollTop = curScrollTop - 16; //Go up 16 pixels, but you can change this as you need
});
Related
I've got a div that I want to remain relative on page until the scroll position reaches the top of the div, then a fixed float is applied via adding a class.
I've got code that I would think should be working; however, cannot get it to do anything. When scrolling, the div remains relative and won't apply the class to fix the object.
$(function() {
var a = function() {
var b = $(window).scrollTop();
var c = $("#header");
var d = c.offset();
if(b > d){ alert(d); c.addClass("header-fixed"); }
else { c.removeClass("header-fixed"); }
};
});
This is the CSS
.header-fixed { position: fixed; top: 0; left: 0; right: 0; }
#header {
z-index: 1000;
float: left;
width: 100%;
z-index: 9999998;
}
I've got a div above the header that can fluctuate in height so I wanted to calculate the distance from the top of header to the top of the page dynamically. Whenever the scroll position reaches the position of the top of the div, I want to add class of header-fixed. If the scroll position goes less than the position, I want to removeClass header-fixed to show the div above the header again.
HTML:
<div id="header_container">
<div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark">
<div id="header_1" >
<a href="index" class="no-decoration"><img class="logo" src="images/12345.png" alt=""/>
<div class="display-none-mobile">
<h1 class="title1 color-gold">HEADER 1</h1>
<h2 class="subtitle color-navy-dark">SUB HEADER</h2>
</div>
</div></a> <?php /*---- header left ----*/ ?>
<div id="header_2">
shopping_cart
person
menu
</div> <?php /*---- header right ----*/ ?>
</div> <?php /*---- header ----*/ ?>
</div> <?php /*---- header site container ----*/ ?>
</div> <?php /*---- header container ----*/ ?>
There are few issues here like c.offset() returns an object. You need to actually use c.offset().top instead and you need to add this logic to jquery .scroll() event because right now the check only happens on page load. You need to check for this logic every time window is scrolled.
Working Demo:
$(function() {
var c = $("#header");
var d = c.offset().top - 20;
$(window).scroll(function() {
var b = $(window).scrollTop();
c.toggleClass("header-fixed", b > d);
});
});
.header-fixed{position:fixed;top:0;left:0;right:0}
#header{float:left;width:100%;z-index:9999998}
#announcement{height:500px;border:1px solid #ccc!important;padding:2em;border-radius:10px}
#announcement,#header_container{margin-bottom:15px}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;border:1px solid #e7e7e7;background-color:#f3f3f3}
li{float:left}
li a{display:block;color:#666;text-align:center;padding:14px 16px;text-decoration:none}
li a.active{color:#fff;background-color:#4CAF50}
.box-shadow-navy-dark { box-shadow: 0 3px 6px #071c38 !important; z-index: 9999999999 !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="announcement">
Announcement div - Scroll down below
</div>
<div id="header_container">
<div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div id="announcement">
Announcement div - Scroll up again
</div>
ngx-datatable > div > datatable-body > datatable-selection:hover > datatable-scroller > datatable-row-wrapper:nth-child(n) > datatable-body-row > div.datatable-row-center.datatable-row-group > datatable-body-cell:nth-child(1) {
background-color: #E9F1FA !important;
}
This is my long selector. I am trying to highlight the entire column based on the user hovering over an item on a column. This works great, except that it only highlights whatever nth-child I am using on the last datatable-body-cell:nth-child(1) I can change it to any number and it works, but it isn't dynamic. I want it to only select the column that is being hovered over. I've tried datatable-body-cell:nth-child(n):hover and datatable-body-cell:hover and a lot of different varieties but it either highlights the whole table, or nothing at all, unless I specify the nth-child.
Is there a way I can dynamically change the nth-child based on the what child the user is hovering over (with CSS or Javascript)?
Any help would be appreciated!
You can use document.querySelector to get the column and set its style it is being hovered over on mouseenter and reset it back to normal on mouseleave.
var n = 1;//the number
document.querySelector('ngx-datatable > div > datatable-body > datatable-selection:hover > datatable-scroller > datatable-row-wrapper:nth-child('+n+') > datatable-body-row > div.datatable-row-center.datatable-row-group > datatable-body-cell:nth-child(1)').style.setProperty('background-color', '#E9F1FA', 'important');
Demo:
var children = document.querySelectorAll('div.child');
Array.prototype.slice.call(children).forEach(function(child){
var n = child.parentNode.getAttribute('data-num');
var parent = document.querySelector('div.table>div:nth-child('+n+')');
child.addEventListener('mouseenter', function(e){
parent.style.backgroundColor = "yellow";
this.style.backgroundColor = "red";
});
child.addEventListener('mouseleave', function(e){
var n = +this.parentNode.getAttribute('data-num');
parent.style.backgroundColor = "";
this.style.backgroundColor = "";
});
});
.table{
height: 250px;
width: 400px;
margin: 5px;
padding: 5px;
background-color: goldenrod;
}
.column{
background-color: dodgerblue;
margin: 5px;
}
.child{
border: 1px solid black;
}
<div class="table">
<div class="column" data-num="1">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="column" data-num="2">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="column" data-num="3">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</div>
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
I have a div on which i used ng-repeat. It displays the list of photos in a grid. This is all very simple stuff and working fine.
I need to add file explorer like navigation on the items inside the grid. The easiest way would be to know the length of a line (number of items in the line) and then do simple math to calculate where to move the selection based on the key pressed.
The problem i'm having is finding out the length of the line. Is it even doable?
Edit :
<div class="images-cq__item" ng-repeat="photo in displayedPhotos">
<div ng-class="{active: photo.selected}" id="{{photo.uuid}}" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})">
<div class="images-cq-statut" ng-show="photo.statusCQ != 'none'">
{{photo.statusCQ}}
</div>
<div class="img-cq">
<img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" />
zoom
</div>
<p>
{{photo.title}}
</p>
<ul class="images-cq-tags">
<li id="{{photo.uuid}}.{{tag.value}}" ng-repeat="tag in tags" style="display:none">
<span>{{tag.name}}</span>
</li>
</ul>
</div>
The displayedPhotos is a simple array with photo objects obtained from the server. It contains several links (thumbnails, original), and some other info but i don't think it is relevant in this case.
This is what i got:
JavaScript
var items = $(".images-cq__item");
var previousTop = null;
var itemsPerRow = 0;
for(var i = 0; i < items.length;i++){
var item = items.eq(i);
var offset = item.offset();
var top = offset.top;
if(!previousTop || (top == previousTop)){
previousTop = top;
itemsPerRow++;
} else{
break;
}
}
console.log(itemsPerRow); // 3
HTML
<div class="container">
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
<div class="images-cq__item"></div>
</div>
CSS
.container{
width: 400px;
}
.images-cq__item{
width: 120px;
height: 120px;
background: green;
margin-right: 10px;
margin-bottom: 10px;
display: inline-block;
}
You can use {{$index}} inside ng-repeat
See this Angular.js. How to count ng-repeat iterations which satisfy the custom filter
I really didn't know how to come up with a descriptive title for this. Pretty much what I'm trying to do is make this accordion list item jump to the other side of the page when clicked. Currently the accordion is opening from left to right - but the last cell doesn't jump right it instead stays in place. How can I make that last cell jump to the right instead of staying in place.
The point of this is to put a picture in the tabs and have them come together at the beginning and end of browsing links.
JSFiddle Example - click the last cell
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Accordion</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
</head>
<body>
<div id="hc1" class="haccordion">
<ul>
<li>
<div class="hpanel">
<div class="preview" id="p1"></div>
<div class="contentContainer">
<div class="content">
</div>
</div>
</div>
</li>
<li>
<div class="hpanel">
<div class="preview" id="p2"></div>
<div class="contentContainer">
</div>
</div>
</li>
<li>
<div class="hpanel">
<div class="preview" id="p3"></div>
<div class="contentContainer">
</div>
</div>
</li>
<li>
<div class="hpanel">
<div class="preview" id="p4"></div>
<div class="contentContainer">
asdf
</div>
</div>
</li>
<li>
<div class="hpanel">
<div class="preview" id="p5"></div>
<div class="contentContainer">
</div>
</div>
</li>
</ul>
</div>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<!-- End Scripts -->
</body>
CSS
*
{
margin:0px;
padding:0px
}
html, body
{
height:100%;
width: 100%;
}
#hc1, #hc1 ul, #hc1 li
{
height: 100%;
}
#hc1, #hc1 ul
{
width: 100%;
}
.preview
{
width: 50px;
float: left;
height: 100%;
background-color: #E48525
}
#p1{background-color: #231F20}
#p2{background-color: #4F4E4F}
#p3{background-color: #919191}
#p4{background-color: #C4C4C3}
#p5{background-color: #E8E8E8}
/*
#p1{background-color: red}
#p2{background-color: blue}
#p3{background-color: green}
#p4{background-color: black}
#p5{background-color: orange}
*/
.contentContainer
{
background-color: gray;
margin: 0 auto;
width: 100%;
height: 100%;
}
/* -- Start Accordion -- */
.haccordion{
padding: 0;
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}
.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
/* -- End Accordion -- */
Javascript
var haccordion={
//customize loading message if accordion markup is fetched via Ajax:
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',
accordioninfo: {}, //class that holds config information of each haccordion instance
expandli:function(accordionid, targetli){
var config=haccordion.accordioninfo[accordionid]
var $targetli=(typeof targetli=="number")? config.$targetlis.eq(targetli) : (typeof targetli=="string")? jQuery('#'+targetli) : jQuery(targetli)
if (typeof config.$lastexpanded!="undefined") //targetli may be an index, ID string, or DOM reference to LI
{
config.$lastexpanded.stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract last opened content
config.$lastexpanded.removeClass('active');
}
$targetli.stop().animate({width:$targetli.data('hpaneloffsetw')}, config.speed) //expand current content
config.$lastexpanded=$targetli
if($targetli.attr('class') != 'active')
$targetli.addClass('active');
},
urlparamselect:function(accordionid){
var result=window.location.search.match(new RegExp(accordionid+"=(\\d+)", "i")) //check for "?accordionid=index" in URL
if (result!=null)
result=parseInt(RegExp.$1)+"" //return value as string so 0 doesn't test for false
return result //returns null or index, where index is the desired selected hcontent index
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name + "=" + value + "; path=/"
},
loadexternal:function($, config){ //function to fetch external page containing the entire accordion content markup
var $hcontainer=$('#'+config.ajaxsource.container).html(this.ajaxloadingmsg)
$.ajax({
url: config.ajaxsource.path, //path to external content
async: true,
error:function(ajaxrequest){
$hcontainer.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
$hcontainer.html(content)
haccordion.init($, config)
}
})
},
init:function($, config){
haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordion
var $targetlis=$('#'+config.accordionid).find('ul:eq(0) > li') //find top level LIs
config.$targetlis=$targetlis
config.selectedli=config.selectedli || [] //set default selectedli option
config.speed=config.speed || "normal" //set default speed
//KEY_CHANGE_BEGIN
var maxWidth = $targetlis.parent ().width ();
$targetlis.each ( function () { maxWidth -= $(this).outerWidth (true); } );
$targetlis.each(function(i){
var $target=$(this).data('pos', i) //give each li an index #
var lclMaxWidth = maxWidth + $target.find ('.hpanel:eq(0)').outerWidth (true);
$target.css ('width', config.paneldimensions.fullw);
//get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
var hpaneloffsetw = $target.find ('.hpanel:eq(0)').outerWidth (true);
if (hpaneloffsetw > lclMaxWidth)
hpaneloffsetw = lclMaxWidth;
$target.data('hpaneloffsetw', hpaneloffsetw);
$target.css ('width', '');
//KEY_CHANGE_END
$target.click(function(){
haccordion.expandli(config.accordionid, this)
config.$lastexpanded=$(this);
})
if (config.collapsecurrent){ //if previous content should be contracted when expanding current
config.$lastexpanded.removeClass('active');
$target.click(function(){
$(this).stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract previous content
})
}
}) //end $targetlis.each
var selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
selectedli=parseInt(selectedli)
if (selectedli>=0 && selectedli<config.$targetlis.length){ //if selectedli index is within range
config.$lastexpanded=$targetlis.eq(selectedli)
config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
}
$(window).bind('unload', function(){ //clean up and persist on page unload
haccordion.uninit($, config)
}) //end window.onunload
},
uninit:function($, config){
var $targetlis=config.$targetlis
var expandedliindex=-1 //index of expanded content to remember (-1 indicates non)
$targetlis.each(function(){
var $target=$(this)
$target.unbind()
if ($target.width()==$target.data('hpaneloffsetw'))
expandedliindex=$target.data('pos')
})
if (config.selectedli[1]==true) //enable persistence?
haccordion.setCookie(config.accordionid, expandedliindex)
},
setup:function(config){
//Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only
document.write('<style type="text/css">\n')
document.write('#'+config.accordionid+' li{width: '+config.paneldimensions.peekw+';\nheight: '+config.paneldimensions.h+';\n}\n')
document.write('#'+config.accordionid+' li .hpanel{width: '+config.paneldimensions.fullw+';\nheight: '+config.paneldimensions.h+';\n}\n')
document.write('<\/style>')
jQuery(document).ready(function($){ //on Dom load
if (config.ajaxsource) //if config.ajaxsource option defined
haccordion.loadexternal($, config)
else
haccordion.init($, config)
}) //end DOM load
}
}
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
selectedli: [4, false], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
Here it is: tinker.io/f7fe4/12
This is the simplest change of all of the versions, requiring only floating the first preview to the right. Can be done programatically or with css (can be buggy in IE7+):
$('#hc1 li .preview').first().css('float','right');
or
#hc1 li:first-child .preview {
float:right;
}
--
Is this the kind of effect you're looking for?
https://tinker.io/f7fe4/8
Here's the same kind of affect, with a 'smoother' animation (it keeps the outer div still on the screen however)
https://tinker.io/f7fe4/9
And this is what I thought you were talking about at first
https://tinker.io/f7fe4/4 (this pops the left most cell over to the right and opens it, kind of like an infinite slider)