Develop Reference

How Do I Stop Static Sidebar at Footer

I have a static sidebar on scroll but when it reaches the footer it overlaps. Is there a way for me to stop this scrolling onto the footer? I understand this may be a simple concept but I have little experience working with the Scroll event in JQuery so any help would be fantastic.
Please find my code and a CodePen below.
<div id="main">
<div class="spacing">CONTENT HERE TO SHOW HOW THE SCROLL WILL WORK. PLEASE SCROLL DOWN</div>
<div class="container">
<div id="sidebar">
<div id="nav-anchor"></div>
<nav>
<ul>
<li>Blue</li>
<li>Green</li>
<li>Red</li>
<li>Yellow</li>
<li>Purple</li>
</ul>
</nav>
</div>
<!-- /sidebar -->
<div id="content">
<section id="blue">
...
</section>
<section id="green">
...
</section>
<section id="red">
...
</section>
<section id="yellow">
...
</section>
<section id="purple">
...
</section>
</div>
<!-- /#content -->
</div>
<!-- /.container -->
<footer>
<p>Footer here</p>
</footer>
</div>
<!-- /#main -->
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() + 12;
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top) {
$('nav').addClass('stick');
} else {
$('nav').removeClass('stick');
}
});
});
http://codepen.io/harryberry94/pen/MyOezg

If you want to hide the static element when it is overlapping the footer, add one more condition in your if condition after $('nav').addClass('stick'); :
var footer_top = $("footer").offset().top;
var static_div_bottom = $('nav').offset().top + $('nav').height();
$('#abc').text(footer_top +" " + static_div_bottom +" " + window_top);
if(static_div_bottom > footer_top){
$('nav').removeClass('stick');
}

You can use css for that if all you want is for your div not to overlap the footer, no need to use javascript and the scroll event. Just add z-index:-1; for nav.stick. Also if it needs a greater z-index to go over other elements in the page you can give the footer position:absolute; and a greater z-index (to keep content from going under the footer add padding-bottom to the body element).

Count the number of current posts in Div

Hi I am trying to get the number of currently displayed posts in the content area. The number of Posts currently displayed is 3 but when I check the Length, its returning 1.
$(document).on("click", ".load-more", function() {
var currentPost = $('#postlist');
loadMore = currentPost.parent().find('.load-more');
initialPostcount = currentPost.length;
console.log(initialPostcount);
})
Current list of Posts:
Inspecting element:
<!-- Page: Blog Posts -->
<div id="blogposts" data-role="page">
<div data-role="header" data-position="fixed">
<h2>My Blog Posts</h2>
</div><!-- header -->
<div data-role="content">
<ul data-filter="true" data-filter-placeholder='Search blog posts...' id="postlist"> </ul><!-- content -->
</div>
<div class="load-more">Load More Posts...</div>
<div id='loader'><img src="css/images/loader.gif"/></div>
</div><!-- page -->

Your posts are in ul list. you need to count the length of the li's under this ul#postlist [assuming that each li is a post]
<ul data-filter="true" data-filter-placeholder='Search blog posts...' id="postlist"> </ul><!-- content -->
Change your $('#postlist')
var currentPost = $('#postlist');
with
var currentPost = $('#postlist li');
$('#postlist li') is what you are looking for,

Dynamic Listview and Button in Jquery Mobile

Im following a example where they mentioned Ive to insert
$('[data-role="button"]').button();
to add the button dynamically in a proper way. But it shows
button.(..) is not a function, error.
HTML
<div data-role="page" id="page">
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role="content" style="padding: 15px">
<ul data-role="listview" id="listview" data-inset="true" data-filter="true">
<li data-role="list-divider" id="divider">Available Devices</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="footer">
<h3>Footer</h3>
</div>
</div>
Javascript function:
function displayFeeds(items){
var ul = $('#listview');
for (var i = 0; i < items.length; i++) {
var li = $('<li/>').html(items[i].DeviceNames);
li.append($('<li/>').html(items[i].DeviceQuantity));
li .append('<a data-role="button" data-theme="b" data-icon="plus" data-iconpos="right">Save</a>');
// Enhance new button element
li.append($('<hr>'));
ul.append(li);
}
$('[data-role="button"]').button();
}
What should I do here Or what am I doing wrong?

I had same problem.
Don't put $('[data-role="button"]').button();
Put ul.parent().trigger( 'create' ); at end of your for loop.

Hide certain xml using Javascript

Anyway to display some li tags while hiding some using Javascript? I'm sorry if my question doesn't make sense.
Let me write my codes here.
XML:
<array>
<words>
<name>Milk</name>
<background>Background of Milk</background>
<recipes>Recipes using Milk</recipes>
</words>
<words>
<name>Tree</name>
<background>Background of Tree</background>
<recipes>NIL</recipes> or Not Applicable
</words>
</array>
Script/Javascript:
<script>
var wordsName, wordsBG, wordsRecipes, wordsCurrent;
var wordsArray = new Array();
$.ajax({
type:"GET",
url:"words.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('words').each(function() { //find <words> in words.xml
wordName = $(this).find('name').text();
wordBG = $(this).find('background').text();
wordRecipes = $(this).find('recipes').text();
$('<li>'+threatsName+'</li>').appendTo("#testingList");
threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
})
$('#threats li').click(function(){ //li
wordsCurrent = $(this).index()
$('#description h1').text(threatsArray[wordsCurrent].threatsName);
$('#name').text(threatsArray[wordsCurrent].threatsName);
var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
$('#backgroundInfo').empty(); //empty the things inside
for (x in backgroundInformation) { //starts from zero and go to the last object
$('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
} //for loop CLOSE
var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
recipesInformation = recipesInformation("\\n"); //to clear the line
$('#recipesInfo').empty(); //empty the things inside
for (x in recipesInformation) { //starts from zero and go to the last object
$('#recipesInfo').append(recipesInformation[x]+ '<br />');
} //for loop CLOSE
})
}
</script>
Lastly, my HTML
<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Words</h3>
</li>
<li>
<h3>Not Available</h3> <!--Not Available-->
</li>
</ul>
</div>
</ul>
</div>
<div data-role="content"> <!--Start of DESCRIPTION content-->
<ul data-role="listview" id="informationList">
<li>
<h3>Background</h3>
</li>
<li>
<h3>Recipes</h3>
</li>
</ul>
</div> <!--End of DESCRIPTION content-->
</div> <!--End of DESCRIPTION-->
<div data-role="page" id="background"> <!--Start of BACKGROUND-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of BACKGROUND content-->
<p id="backgroundInfo">Not Available</p>
</div> <!--End of BACKGROUND content-->
</div> <!--End of BACKGROUND-->
<div data-role="page" id="recipes"> <!--Start of RECIPES-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of RECIPES content-->
<p id="recipesInfo"> Recipes</p>
</div> <!--End of RECIPES content-->
</div> <!--End of RECIPES-->
As the information above, the second element in the Array, Tree, does not have any information for recipe tab, how can I prompt the page when user clicks into Tree, recipe li will hides itself?
Many thanks. It's the first time I am sending a question.

Welcome to StackOverflow! You seem to be parsing XML and generating HTML dynamically using JavaScript. In your case, maybe the easiest way is to detect the condition during parsing and add a "class" attribute to your <li> nodes. Then define the style class somewhere in your CSS, like this:
<li class="no-recipe">blah blah blah</li>
<style>
li.no-recipe {
display:none;
}
</style>
Not sure what you're aiming for exactly, but a declarative approach is almost always better than a dynamic approach (using JavaScript).

Dynamically add content to a listview jquery mobile

i am trying to dynamically load items into a listview using javascript.
below is my javascript code
//Dynamically load data fields for items
function initialiseFields(listViewId){
for(var i = 0; i < 10; i++){
loadField(listViewId, "hello", "type", "value goes here");
}
}
/**
load single item field
**/
function loadField(listView, label, type, value){
//append the list
$('#listView').append("<li><h3>"+label+":</h3><h4>"+value+"</h4></li>");
$('#listView').listview('refresh');
}
Html5 code
<body onLoad="initialiseFields('itemFieldslist');">
<div data-role="page" id="page">
<div data-role="header" data-position="fixed" data-theme="b" >
Back
<h1><span style="margin-left:1em">List</span></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="itemFieldslist" data-inset="true" data-scroll="true" >
<li data-role="list-divider"> <h2>Title</h2></li>
</ul>
</div>
</div>
</body>
The contents of the listview is always empty except for displaying the header divider for the list

Can you try to wrap initialiseFields in:
$(document).bind('pageinit')
if you check the jquery mobile docs you can see that they discourage
the use of $(document).ready()
check here: jquery events
I'll check myself later.