ListView doesn't have scrollbar - javascript

I have problem with scrollbar
Inside body I have div like this:
<div id="PageBody"></div>
There I load my listview with javascript
WinJS.UI.Pages.render("./pagebody.html",document.getElementById("PageBody"), null, true);
PageBody.html looks like this
<!-- Simple template-->
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="smallListIconTextItem">
<img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
<div class="smallListIconTextItem-Detail">
<h4 class="win-h4" data-win-bind="textContent: title"></h4>
<h6 class="win-h6" data-win-bind="textContent: text"></h6>
</div>
</div>
</div>
<!-- listview-->
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Sample.ListView.data.dataSource,
itemTemplate: select('.smallListIconTextTemplate'),
selectionMode: 'none',
tapBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
Now, if my listview contains bigger number of items (all items cannot be displayed at once), then the scrollbar doesn't appear, and I can't access hidden elements.
If I make the listview normally (without loading it into div) scrolling works normally. However, I need to load different listviews or other controls into that div (depending on what data user wants)
How can I get around this problem?
UPDATE: I added to "PageBody" div this: style="overflow: scroll"
scrollbar shows, but doesn't work (u can't scroll)
UPDATE2: With grid layout scrolling works, but still with list layout doesn't

Put this CSS into your div in which data is populating:
overflow-y:auto;
JSFiddle for it.

The problem was
height: 100%
in .css file
I removed it, but then the only problem was how to fit listview to the page. I dealt with it within javascript.
window.addEventListener("resize", function () {
var listviewdiv = document.getElementById("listView");
var h = window.innerHeight;
listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
});
And then the only problem remains is how to do it initially, when application is created and loaded (code above works only after user resizes window)
For that case I've put this code:
WinJS.UI.Pages.render("./PageBody.html", PageBody).done(function () {
var listviewdiv = document.getElementById("listView");
var h = window.innerHeight;
listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
});

Related

looking to set equal heights to columns in Bootstrap - no Table

I want to set equal heights to my columns in Bootstrap 3. I CAN'T set the rows to 'display: table;' or anything like that cause it screws up the layout of everything.
<article>
<div id="post-<?php the_ID(); ?>"> <!-- just gets the post's id -->
<div class="row">
<div class="col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
</div><!-- /#row -->
</div><!-- /#post -->
</article>
The content is on the right, a column with a background image is on the left. That column needs a height so that the background image is shown, I want that height applied to the column with the text.
I want it to be responsive height, what I used so far for that is
CSS
indx-img {
padding: 16% 0;
}
problem is that height doesn't apply the the column with the text. The ultimate goal is to have the two columns the same height, with the text vertically centred in the 'text-cell' column
If you can't use any css solutions because they will break your layout, you can use javascript.
Here we define a function named resize which will loop through the posts.
If the page is larger than the break point, set the height of the post container to the height of the image.
Then set the height of the text container to 100% once.
If the page is smaller than the break point, check to see if the height is set.
If it is we remove the height setting to allow natural expansion and contraction.
We call the resize function once on page load, then assign it to the window resize handler
(Demo)
<script type="text/javascript">
window.onload = function() {
(function () {
"use strict";
var resize = function () {
var posts = document.querySelectorAll('[id^="post"] .row'), post;
for (var i = 0; post = posts[i]; i++) {
if (window.innerWidth > 768) {
post.style.height = post.firstElementChild.offsetHeight + 'px';
if(post.lastElementChild.style.height !== '100%') {
post.lastElementChild.style.height = '100%';
}
} else {
if(post.style.height !== '')
post.style.height = '';
}
}
};
window.onresize = resize;
resize();
})();
}
</script>
I use the matchHeight plugin for this kind of issue all the time and it works perfectly with Bootstrap.
Just install the plugin, add a class of matchHeight to your col-md-8 and col-md-4 columns:
<div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="matchHeight col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
And add the following to your javascript:
$('.matchHeight').matchHeight();
You can then use this fix throughout your site by simply repeating the above steps, even several times on the same page (it automatically scopes to within the current "row" element so if you have 3 rows with 6 elements then only those elements in any given row are matched in size).

Grid system does not work when it is inside a hidden div

I am using the Salvattore plugin to create a grid based layout for my website.
Here is how the plugin should set up in HTML:
<div class="grid columns2" data-columns>
<img src="">
<img src="">
</div>
It basically finds .grid and then .columns3 which determines how many columns the plugin should create inside .grid.
The outcome would look like:
<div class="grid" data-columns="2">
<div class="column count-2">
<img src="">
</div>
<div class="column count-2">
<img src="">
</div>
</div>
All works fine, until the .grid is a child of a parent which has display: hidden - i.e:
<div style="display:none" id="popup">
<div class="grid" data-columns="2">
<div class="column count-2">
<img src="">
</div>
<div class="column count-2">
<img src="">
</div>
</div>
</div>
Why I gave it display: none? well, I am trying to use this .grid inside div's which are hidden by default and only show when requested, for example, inside a popup window or UI accordion and tabs.
I have created a live test here: http://loai.directory/beta if you look, you will see two containers with the .grid one that works fine and the other one below where it says The hidden div is below me which is the one in question.
Here is what I thought of doing "but don't have the skills to try it or even know where to start" - I was wondering, would the problem be solved if using JavaScript to trigger the plugin again each time the .grid state changes?
Your problem with Salvatore's plugin is in grid-system.js (ln. 538)
self.registerGrid = function registerGrid (grid) {
if (global.getComputedStyle(grid).display === "none") {
return; // so basically any class or inline style with display set to none :s
}
/*...*/
};
To workaround this issue, you can bind an unique event to it's "toggle/display" trigger. It would be ideal that all triggers and hidden layers, match an unique id or some commonly mapped reference.
trigger popup
<div id="popup" class="grid hide" data-columns></div>
Then the js would be something like:
function delayedGrid() {
var grids = $('.grid.hide[data-columns]'); // assuming they all have the hide class
// var grids = $('.grid:hidden'); // could work as well
$.each(grids, function(){
// pickup the mapped references from your grid (id and ref)
var grid = $(this),
id = grid.prop('id'), // get the id reference
ref = $('[data-ref="' + id + '"]'); // get the referenced element by data-ref="popup" for ex.
// one time only event
ref.one('click', function() {
// gives browser reflow a better chance
setTimeout(function() {
// call the grid initializer again
salvattore.init();
}, 200);
});
});
}
Then all you need to do is render delayedGrid on DOM ready, or onload, or on resize, or whenever you need to recalculate your hidden grids.
// DOM ready
$(fuction(){
delayedGrid();
});
// window load
$(window).load(function(){
delayedGrid();
});
// window resize
$(window).on('resize', function(){
// google for throttle function perhaps
delayedGrid();
});

Vertically center divs with jQuery

I'm setting up a one page website, I want to vertically center a containing div within a div with 100% viewport height, currently I have -
function vertmiddle() {
var height = $('.vertmiddle').height();
var windowheight = $(window).height();
var vertmiddle = ((windowheight) - (height)) / 2;
vertmiddle = parseInt(vertmiddle) + 'px';
$(".vertmiddle").css('margin-top',vertmiddle);
}
$(document).ready(function() {
vertmiddle();
$(window).bind('resize', vertmiddle);
});
Edit, Here is an example of the HTLM I'm using as well -
<section id="community" class="full">
<div class="container">
<div class="vertmiddle">
content
</div>
</div>
</section>
It's working fine but all of my containing divs are getting the same margin amount because they all use the same class and it's just using the first div on the pages height.
How can I set it up so each containing div has the correct margin. I can probably make this work with unique classes and just repeat the script but I'm sure there's a cleaner way to do it.
Sorry if I'm unclear I'm new posting here.
thanks
Use this
function vertmiddle() {
$('.vertmiddle').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$(this).width()/2,
'margin-top' : -$(this).height()/2
});
}
Or may be you try this
$('.vertmiddle').css({
position:'absolute',
left: ($(window).width() - $('.vertmiddle').outerWidth())/2,
top: ($(window).height() - $('.vertmiddle').outerHeight())/2
});
Here is a solution that works, but you will need to add id attributes to your HTML. I have found trying to call jQuery methods that measure window objects using classes to be very buggy, where the same methods used on ids never give me any problems. Anyway, here is one approach...
<section id="community" class="full">
<div id="container" class="container">
<div id="content" class="vertmiddle">
content
</div>
</div>
</section>
function vertMiddle(){
var element_height = $('#content').height();
var element_offset = (window.innerHeight - element_height) / 2;
$('#content').css('margin-top', element_offset +'px');
}
$(document).ready( function(){
vertMiddle();
$(window).on('resize', vertMiddle);
});
Here is a working JSFiddle example

jScrollPane missing scrollbars

I've seen the same question over and over here, but no solution worked for me.
I am applying the jScrollPane() method on a <div> element with settled height and width, the content is cut by the overflow jScrollPane() inserts, but the scroll bar is not appearing.
My JavaScript code:
function openSubs(cont){
var width = 500;
var height = 500;
var mtop = ((height+65)/2)*(-1);
$('#lightbox .content').width(width).height(height).css('margin-top', mtop).load('content/'+cont+'.php', function(){
$('#sub-content').width(width).height(height);
$('#sub-content').jScrollPane();
});
openLightBox();
}
(on the openLightBox(); function are the fadeIns for the Lightbox divs below)
And the HTML before the Scroll Pane method is called:
<div id="lightbox">
<div class="fade"></div>
<div class="content">
A HUGE TEXT GOES HERE
</div>
<div class="fechar" onClick="resetLightBox();"></div>
</div>

JQuery Scrolling/Paging Tabs

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.
I have scoured the internet and can not seem to find anything other than:
http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!
I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.
$(document).ready(function()
{
$('.scrollButtons .left').click(function()
{
var content = $(".tabs .scrollable .content")
var pos = content.position().left + 250;
if (pos >= 0)
{
pos = 0;
}
content.animate({ left: pos }, 1000);
});
$('.scrollButtons .right').click(function()
{
var content = $(".tabs .scrollable .content")
var width = content.children('ul').width();
var pos = content.position().left - 250;
//var width = content.width();
if (pos <= (width * -1) + 670)
{
pos = (width * -1) + 600;
}
content.animate({ left: pos }, 1000);
});
});
My Html looked like this:
<div class="tabs">
<div class="scrollable">
<div class="content">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
<div class="scrollButtons">
<ul>
<li>
<div class="left">
</div>
</li>
<li>
<div class="right">
</div>
</li>
</ul>
</div>
</div>
I have just created a plugin myself:
Project home: http://jquery.aamirafridi.com/jst
Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?
I always use JQuery UI tabs as a starting point for tabs. You can customize the JQuery UI download in the download section of the website. This method should be lighter than any other implementation, if you are already using JQuery on your website.
Out of the box, the JQuery UI tabs will not give you the scrolling you desire. This I believe could be achieved by altering the CSS, but more than likely will be easier if you alter the navigation of your site (i.e. create more levels, use shorter titles).
Hope this helps

Categories

Resources