Develop Reference

How to prevent named anchor jump/scroll in main page using easytabs jQuery plugin?

Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}

$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/

Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40

Hide a li if div is empty?

I've looked around for about a week or so now trying various techniques but so far no luck.
I am using javascript based tabs to tab out content on a page. The content is dynamically generated from Wordpress custom fields. If the div has no content to display in the HTML I would like that corresponding tab to not appear. Is this possible?
my code is as such:
<ul class="tabs">
<li class="tab1">Tab 1</li>
<li class="tab2">Tab 2</li>
<li class="tab3">Tab 3</li>
<div class="tabcontents">
<div id="view1">
<div class="noScreen">
<h2>Tab 1</h2>
</div>
<div class="view1">
<?php the_field('tab1'); ?>
</div>
</div>
<!--end Tab1-->
<div id="view2">
<div class="noScreen">
<h2>Tab 2</h2>
</div>
<div class="view2">
<?php the_field('tab2'); ?>
</div>
</div>
<!--end Tab2-->
<div id="view3">
<div class="noScreen">
<h2>Tab 3</h2>
</div>
<div class="view3">
<?php the_field('tab3'); ?>
</div>
</div>
<!--end Tab1-->
</div>
<!--end tabcontents-->
So if Tab1 and Tab3 respond back with data from the post but Tab 2 is empty I would like to hide the li for Tab 2 up above.
Can anyone help?
thank you in advance

I had to fix some missing tags and quotes from your HTML above, but this seems to do the trick.
JSFiddle:
http://jsfiddle.net/Q27K6/
$(function(){
$('div.tabcontents > div').each(function(index){
var innerView = $(this).find('div[class^="view"]');
var innerHtml = $(innerView).html();
if(innerHtml.trim() == ''){
$(this).hide();
$('ul.tabs').find('li').eq(index).hide();
}
});
});

instead of using the_field (which prints info) see if theres a get_field function that returns info. That way you could decide beforehand if the div will be empty.
$tab2content=get_field('tab2');
if(!empty($tab2content)) {
echo '<div id="view2">';
echo '<div class="noScreen"><h2>Tab 2</h2></div>';
echo '<div class="view2">'.$tab2content.'</div>';
echo '</div>';
}
If that doesn't work, after your contents is loaded and any ajax calls are resolved, you could tell if the div was empty by running
if(jQuery('.view2').html()==='') {
jQuery('#view2').hide();
}
However, keep in mind that if your DOM has more than one elements with view2 class, the html() method will yield the contents of the first one that matches.

You want to know if the contents of <div class='view2'> is empty? div id='view2'> will never be empty, so I'll assume it's the former.
So, whether it is empty or not depends on whether there is anything returned from the php function the_field('tab2'), right?
So, one way of solving the problem is to do it on the server, by checking if the function the_field('tab2') (or whatever) is empty. That's slightly convoluted in php though.
Or in javascript:
$().ready(function() {
var hideTab = function(index) {
var $view = $('.view' + index)
, $tab = $('.tab' + index);
if($.trim($view.html()).length === 0) {
$tab.hide();
}
}
// Stick this in a loop to make it neater
hideTab(1);
hideTab(2);
hideTab(3);
});

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).

Check if a jquery mobile listivew already contains a specific item?

as the title says, is there a function that helps me find out if a listview contains a specific list item that has an id of say hello?
in my javascript i am currently pre loading items in a listview but there is a situation where the same code that adds the items in the listview, it will of coure add and duplicate the items.
i want to do something like this to find id of "hello"
if( (#listView).find("hello") ){
//do nothing
}else{
$(#listView).append('<li id="hello">hello</li>')
}
Html:
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" >
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="listViewId" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">divider</h2>
</li>
</ul>
</div>
</div>
</div>
</body>
Is this possible? is there some kind of .Find("id") method for a listview?

what is wrong with find?
if(!$('#listViewId').find("#hello").length){
// append the element
}