I have been having a look at several post here with issues similar than this one, but none of them solve my problem.
Here I post the HTML:
<div id="scroller" class="general_scrollingContainer" layout="column" layout-fill layout-align="top left">
<ul class="dynamic-grid" angular-grid="pics"
ag-grid-width="200"
ag-gutter-size="10"
ag-id="gallery"
refresh-on-img-load="true">
<li class="grid" ng-repeat="product in products">
<a ng-href="{{product.link_shop}}" target="_blank">
<img class="grid-img" ng-src="{{product.url_imagen}}" />
</a>
<div class="img-desc-wrap" layout="column" layout-fill layout-align="top left">
<a class="title" ng-href="{{product.link_shop}}" target="_blank" style="font-size:12px;line-height:16px">
{{product.title}}
</a>
<div class="date"><b>Category</b>: {{product.category_name}}</div>
<div class="object_icons_holder" layout="row" layout-align="space-between stretch">
<div flex layout-align="start center" layout="row">
<ng-md-icon icon="share" size="30" style="fill:#666;margin:-5px 0 0 10px" class="social_icon" aria-label="Share Product"
ng-click="showSocialShare($event, 0)">
<md-tooltip md-direction="top">
Share in Social Networks
</md-tooltip>
</ng-md-icon>
</div>
<div class="shop_price">{{product.price}}</div>
</div>
</div>
</li>
</ul>
</div>
The CSS for the class general_scrollingContainer:
.general_scrollingContainer {
overflow-y: scroll;
padding: 0 10px;
width: 100%;
}
and a Javascript with an event that resize the visible height of the div to adjust it:
$(window).resize(function() {
var $main_container = $(window).height();
$(".general_scrollingContainer").css({
"height": ($main_container - 160) + 'px'
});
});
The main div 'general_scrollingContainer' has a fixed height depending on the window height and inside are the elements which overflow the visible area.
The question is that I'm trying to get the event when scrolled to the bottom and need the real height of the div including the height not visible.
Using $('div.general_scrollingContainer').innerHeight(), displays only the height of the visible area of the DIV, the same value than $('div.general_scrollingContainer').height(), so I do not know how to get the whole height.
Any help?
For the height of your content, get the height of the ul-element inside the div. If you have multiple elements, you could wrap it in another inner-content div and get the height of that.
Related
I have some nested DIVs, on my page. Inside the content area, I have a row defined, with two DIVs (left DIV is 3 columns and right DIV is 9 columns). I want the left DIV to be sticky at the top of the page when I scroll. My code is working, however when my div sticks to the top of the browser, for some reason the DIV changes width. I can't explain why.
CSS
#media only screen and (min-width: 40.063em) {
.my-sticky-element.stuck {
position: fixed;
top: 5px;
}
}
JS
var stickyElement = $('.my-sticky-element');
var vTop = stickyElement.offset().top - parseFloat(stickyElement.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
stickyElement.addClass('stuck');
} else {
stickyElement.removeClass('stuck');
}
});
HTML
<div class="row">
<div class="medium-3 columns">
<div class="my-sticky-element">
<div class="box-body radius bg-white clearfix">
<div class=" filter" style="padding-bottom: .5rem;">
<i class="fa fa-filter fa-2x text-black"></i>
<input id="contactFilter" type="search" placeholder="Filter by Contact Name" style="margin-bottom: .5rem;" />
<i class="fa fa-square-o fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="medium-9 columns">
<div class="box-body no-padding" style="">
<!--- content -->
</div>
</div>
</div>
It seems that .my-sticky-element.stuck causes the div to shrink in width. I have not written the full CSS, however I have observed that before the DIV becomes sticky it is position:relative and after it becomes stuck it is position:fixed.
Hi i am trying add a horizontal scroll bar in bootstrap modal. I know horizontal scroll bars are not a good idea but in my case i have dynamic content which can have variable width so i want to make modal body scroll-able horizontally when width exceed modal body's width.
here is what i have tried
<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS:
.modal-body {
max-width: 900px;
overflow-x: auto;
}
here is the fiddle what i have tried..
https://jsfiddle.net/4duq2svh/2/
Any help is appreciated.
Thanks in advance.
check https://jsfiddle.net/4duq2svh/3/
HTML
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS
.modal-body {
max-width: 100%;
overflow-x: auto;
}
.scoll-tree {
width:5000px;
}
JS
var totalwidth = 190 * $('.list-group').length;
$('.scoll-tree').css('width', totalwidth);
Here I am calculating .scoll-tree width using jQuery to help horizontal scroll bar appear.
Sorry to answer my own question, I solved it by calculating the width of scroll-tree div based on number of list-groups inside, as one single list group is 180px wide the width will be 180 * numberOfItems. here is the code:
$scope.getStyle = function(){
var numberOfItems = $scope.tree.length;
return {
width : 200 * numberOfItems + 'px',
overflowX: 'auto'
}
}
<div class="modal-body" style="overflow-x: auto;">>
<div class="scoll-tree" ng-style="getStyle();">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
I make one UI after googling .But my UI is not responsive it not look good when I increase the window size or decrease the window size/.
Here is my fiddle
http://jsfiddle.net/X8HV9/1/show/
I have only two issues
"up level" button it look good when window size is more (full screen).When I decrease the size of window it changes it position.But next and previous button look good.
When you click "add" button it show pop up screen when screen size is more(full screen).but it hide when screen is smaller.
can I give width in %?
<div data-role="page" id="home">
<div class="main_cont">
<div class="cb"></div>
<section>
<div class="contentbox">
<div class="actionbar">
<a href="#" class="previous" id="previous_h"><i
class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
class="iconnext"></i>Next</a>
<a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
<div class="cb"></div>
</div>
</div>
</section>
<footer id="firstPageFooter">
<button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>
</footer>
<div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">Test Case ID:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase"/>
</div>
Done
</div>
</div>
Thanks
Yes you can use % scaling with width,height,top,left,margins
for example in your css:
#next_h{
position:absolute;
width:10%;
}
this will set width to 10% of window's width
if you want to scale when window is below certain width,
you can use javascript:
if($(window).outerWidth() < 500){
$('#next_h).css({
'position':'absolute',
'width':'80%',
'height':'10px'
});
}
something like this.
you might be interested in this post too
I am trying to get a safe position specification for my moveable div in several window solutions and sizes. I want to have one 0 position at the left side of the droppable area (#drop1). The jQuery-function position() is not enough for this task.It is understandable what I mean? I do there an alert with several position specifications and differences between, but I don't get an steady result for the position of my moveable div. jsFiddle
alert('e.pageY-this.offset().top:'+(e.pageY - $(this).offset().top)+"\n"
+'e.pageX-this.offset().left: '+(e.pageX - $(this).offset().left)+"\n"
+'e.pageX/e.pageY: '+e.pageX+'/'+e.pageY+"\n"
+'offset(left/top): '+$(this).offset().left+'/'+$(this).offset().top+"\n"
+'posLeft/pos.top: '+pos.left+'/'+pos.top+"\n"
+'draggable.position(left/top): '+ui.draggable.position().left+'/'+ui.draggable.position().top+"\n"
+'draggable.offset(left/top): '+ui.draggable.offset().left+'/'+ui.draggable.offset().top+"\n"
+'dropPositionX-dragItemOffsetX: '+dropPositionX+' - '+dragItemOffsetX+"\n"
+'innerWidth: '+window.innerWidth+"\n"
+'Main centered area width: '+$('#main').css('width')+'- bar left width: '+$('.col').css('width')+"\n"
+'position calculated: '+((window.outerWidth/2-parseInt($('#main').css('width'))/2+100)));
Html:
<div align="center" width="100%">
<div id="drag1" class="ui-widget-content" rel="a"><p>drag 1</p></div>
<div id="drag2" class="ui-widget-content" rel="b"><p>drag 2</p></div>
<div id="main">
<div class="col"> </div>
<div id="drop1" class="bg1">
<div id="drop-inner1" class="widget1"><p>AREA 1</p></div>
<div id="drop-inner2" class="widget1"><p>AREA 2</p></div>
</div>
<div class="col"> </div>
</div>
</div>
<div style="clear: both;"> </div>
I found a solution by myself.
THIS was what I am searching for:
var diffDragX = (ui.draggable.offset().left - $('#drop1').offset().left);
var diffDragY = (ui.draggable.offset().top - $('#drop1').offset().top);
I have a div with several nested divs. All the child div's are float:left so they are all on the same line. The parent div "newDistractor" has a width of 100% so as it's parent grows it does as well. All of the child nodes have fixed widths of 20px. I want the div "distractorText" to grow at the same rate as it's parent so it occupies all empty space. Any ideas how to do it.
<div class="newDistractor">
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
This could work. It doesn't actually resize the distractorText div, but it might be what you need:
<div class="newDistractor">
<div class="left"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="right"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
The CSS for it is basically:
.left { float: left; }
.right { float: right; }
Look at it in action here
edit I cleaned the jsfiddle a little: look now
You could use jQuery's .resize() and then each time count the number of children <div>s, divide it into the current width, and set accordingly.
For this example specifically, you could use margins instead of floating div elements.
<div class="newDistractor">
<div class="distractorText" style="margin:0px 40px;">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
I haven't tried this right-off, but if you set the width of class "distractorText" to 100%, it should take care of the issue... or to some other "acceptable" percentage (maybe 50).
All religious crusades put aside, the following HTML will do what you need ^L^ :
<table class="newDistractor" style="width:100%">
<td style="width:20px">a</td>
<td style="width:20px">b</td>
<td class="distractorText" style="width:100%">Enter text to add option.</td>
<td style="width:20px">c</td>
<td style="width:20px">d</td>
<td style="clear:left;margin-bottom:-43px;">e</td>
</table>