i've been trying to get jquery ui working for an area I would like to have tabs in and have been trying for the past couple of days with no luck!
The idea is to display or not display tabs, depending on whether there is content or not. Also for the content area, when there is no entries, the relevant html is not created either.
The address for the development site is http://garden.paperfish.co/index.php/problem-solving/roses
the code is:
<div id="tabs">
<ul>
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="diseases" limit="1" require_entry="yes"}
<li>ασθένειες</li>
{/reverse_related_entries}
{/exp:channel:entries}
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="pests" limit="1" require_entry="yes"}
<li>εχθροί</li>
{/reverse_related_entries}
{/exp:channel:entries}
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="nutrition" limit="1" require_entry="yes"}
<li>τροφοπενίες</li>
{/reverse_related_entries}
{/exp:channel:entries}
<li>όλα</li>
</ul>
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="diseases" limit="1" require_entry="yes"}
<div id="#tabs-1">diseases</div>
{/reverse_related_entries}
{/exp:channel:entries}
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="pests" limit="1" require_entry="yes"}
<div id="#tabs-2">pests</div>
{/reverse_related_entries}
{/exp:channel:entries}
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="nutrition" limit="1" require_entry="yes"}
<div id="#tabs-3">nutrition</div>
{/reverse_related_entries}
{/exp:channel:entries}
<div id="#tabs-4">all</div>
</div>
any help would be very much appreciated
Can you try removing the hashes in front of the ids of content divs
Change
<div id="#tabs-1">
diseases
</div>
to
<div id="tabs-1">
diseases
</div>
Related
xpath = //comment()[contains(.,'noindex')] is working for me in Selenium IDE, but it won't work using ruby & webdriver.
How to find all tags?
I'm trying use code:
result = driver.find_elements(:xpath, "//comment()[contains(.,'noindex')]")
puts result
It returns /var/lib/gems/1.9.1/gems/selenium-webdriver-2.44.0/lib/selenium/webdriver/remote/response.rb:52:in `assert_ok': invalid selector: The result of the xpath expression "//comment()[contains(.,'noindex')]" is: [object Comment].
html code
<html xmlns="http://www.w3.org/1999/xhtml" class="">
<body class="siteBody">
<div class="wrapper">
<div class="head">
<div class="headIn">
<div class="middleBlock">
<!--noindex-->
<!--/noindex-->
</div>
</div>
</div>
</div>
<div class="foot">
<div class="footerIn">
<div class="footerBottomLeft">
<div class="counters">
<!--/noindex-->
<!-- /Yandex.Metrika counter -->
<!--/noindex-->
<!--noindex-->
<!--LiveInternet counter-->
<!--/LiveInternet-->
<!--/noindex-->
</div>
</div>
</div>
</div>
</body></html>
The resolution is
result = #driver.find_elements(:xpath, "//*[comment()[contains(.,'noindex')]]").count
I am trying to use the panel feature from JQuery mobile, and after following some tutorials I cannot make the panel to link the pages within my app to work, and it just stays at the first page The animation works fine tho´. Any suggesting of how to fix this?
This is my code:
<body>
<!--Activity Feed Page-->
<div id="activityFeed" data-role="page">
<!--Panel-->
<div data-role="panel" id="myPanel" data-display="reveal" data-theme="a" class="ui-response">
<div data-role="listview" class="nav-seacrh">
<li>Activity</li>
<li>Messages</li>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</div>
</div> <!--ends panel-->
<div data-role="header">
<h1>Activity Feed</h1>
Panel
</div>
<p>Activity Feed Page</p>
</div>
<!--End Feed Page-->
<!--Messages Page-->
<div id="messagesPage"data-role="page">
<div data-role="header">
<h1>Messages</h1>
Panel
</div>
<p>Messages Page</p>
</div>
<!--Ends Messages Page-->
<!--Profile Page-->
<div id="profilePage"data-role="page">
<div data-role="header">
<h1>Profile</h1>
Panel
</div>
<div>
<p>Profile Page</p>
</div>
</div>
<!--Ends Settings Page-->
<div id="settingsPage"data-role="page">
<div data-role="header">
<h1>Settings Feed</h1>
Panel
</div>
<div>
<p>Settings Page</p>
</div>
</div>
<!--Ends Settings Page-->
The data-rel="close" inside your page links is causing JQM to override their click handlers to close the panel.
Remove that and it should navigate to page mentioned in href.
My issue is with the collapsible block 'accordion' menu. I initially followed a tutorial online and it was only when I got to applying the collapsible blocks that I realised the tutorial was quite old and the scripts I had copied from the tutorial were:
with these scripts, the collapsible content simply cannot be set to be closed by default so data-collapsed="true simply doesn't work and the menus are open by default. After much googling it seems other people has the same issue and when upgrading to the latest script version the problem was sorted so when I updated to the current up to date versions i.e.:
The data-collapsed="true did work however every page now goes tiny on the screen. Please see the below screenshots to see what I mean.
What is wrong here, is it a css issue?
Using the older scripts I had this: http://www.magnetikmedia.co.uk/m/old_script.png
Using the newer scripts I had this: http://www.magnetikmedia.co.uk/m/new_script.png
I know the Galaxy note has a massive screen but using a mobile site emulator (to see sites on various handsets) the site looks fine on there (although now and again this morning when browsing the site on an emulator of an iphone 5 for example, the screen shrinks as per my screenshot so there must be a bug somewhere) The code from the head to the end of one page is here as the other pages are the same just with different content
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>
<li><a href="#about">
<div class="mobile_menu_hpage"></div>
<div class="list-text">About Us</div>
</a></li>
<li><a href="#getsocial">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Get Social</div>
</a></li>
<li><a href="#services">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Services</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/portfolio.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Portfolio</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/contact.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Contact Us</div>
</a></li>
</ul>
</div><!-- /content -->
<div id="footer1">
<div id="footer_left">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div align="center"><!-- /footer -->
</div>
</div><!-- /page -->
Add viewport meta tag as follows.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am having some trouble with Checkboxes click event on my mobile device browser.
The following codes work fine on desktop browser. I can see the text shown on the TempPage once the Checkbox ic clicked.
<script type="text/javascript">
$(document).ready(function(){
// Check Box click event
$(".checkboxclass").bind ("click", function (event)
{
var tempstring ='<p> CHECKBOX Click works </p>'
$('.class-TempPage').append(tempstring);
});
}
</script>
<!-- ########### -->
<!-- TEMP page -->
<!-- ########### -->
<div data-role="page" id="id-TempPage">
<div data-role="content">
<div class="class-TempPage">
</div>
</div><!-- /content -->
</div><!-- /page -->
<!-- ########### -->
<!-- CHECKBOX page -->
<!-- ########### -->
<div data-role="page" id="id-CheckBoxPage">
<div data-role="content">
<div class="class-CheckBoxPage">
<ul id="dataPointList" data-role="listview" data-filter="true">
<li>
<input type="checkbox" id="checkbox-4" />
<label class="checkboxclass" for="checkbox-4" data-iconpos="right">blah4</label>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
However, when I run it on my mobile phone's broswer (Dolphin for eg) it doesn't work.
Why is that so? How to get round this?
This link -- http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html -- mention something, not sure if relevant.
Thanks.
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
<div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
<h3>Read only Section 3</h3>
</div>
</div>
using the above pattern I want to make some divs within the collabsile-set with heading only and I want to make them non-collapsible because of some requirements. If anybody know anything regarding this, please let me know
The collapse/expand of content is being handled in the click handler of the collapsible heading.So by unbinding the click event you can keep accordion always expanded.
$(".ui-collapsible-heading").unbind("click");
A demo here - http://jsfiddle.net/8dLw4/
Edit
Edited fiddle for keeping some in expanded state always- http://jsfiddle.net/8dLw4/2/
An attribute data-allow-collapse is added.For sections you want to allow collapse,set it as true.For other sections false.
Here is the complete source code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page").live('pageinit', function(event) {
$(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 1-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 2-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 3-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 4-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Or you can use this code until section-box role is available:
<div class="ui-collapsible ui-body-c">
<h3 class="ui-collapsible-heading">
<span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
<span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
</span>
</span>
</h3>
<div class="ui-collapsible-content ui-body-c ui-corner-bottom">
<div>Content
</div>
</div>
</div>
You can do this:
$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
$(this).unbind();
});