I try to open a panel with jQuery Mobile.
The panel should come from the left and push the page, but it seems like the panel overlay the whole side.
In the console i get the error:
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'
My HTML:
<div data-role="page">
<div data-role="header">
<header>
<div id="header">
Menu
<h1 id="headline">Text</h1>
<div class="clean"></div>
</div>
</header>
</div>
</div>
<footer>
</footer>
<div data-role="panel" id="menue_panel" data-position="left" data-display="push">
<ul class="ui-alt-icon ui-nodisc-icon">
<li>Startseite</li>
<li>Medikamente</li>
</ul>
</div>
My JS
$( document ).ready(function() {
$( "#menu-btn" ).on( "click", function() {
$( "#menue_panel" ).panel( "open" );
});
});
I don't know why it doesnt work.
The panel should be inside the page DIV.
see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/
Related
In my webapp i dynamicaly load data via ajax. After loading i trigger a "create" on the page i have changed. But after the create, the navbar on bottom (fixed) stays on bottom, even when i switch to another page without any navbar.
Problem is, that inside the dynamic content are some jQuery Mobile elements which have to be redrawed (buttons)
Page looks like this:
<div data-role="page" id="fax" data-title="Fax" data-theme="b">
<div data-role="header" data-theme="b">
back
<h1>Fax</h1>
</div>
<div data-role="ui-content" role="main">
<div id="myAjaxContent"></div>
</div>
<div data-id="fax" data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Fax</li>
<li>Map</li>
</ul>
</div>
</div>
</div>
My Ajax:
$.post('ajax.php',{ action: 'fax', ID: faxID, lat: lat, lon: lon },function(data){
$('#fax').find('div[data-role="ui-content"]').find('#myAjaxContent').html(data.fax);
$('#fax').trigger("create");
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#fax" );
},'json');
Problem:
I have tabs that are powered by jQuery tabs. Inside tabs there are accordion items that expand when clicked. I'd like to hide all active(opened) accordion div's when I change to a different tab.
Current code that manages accordion behaviour:
var all_spans = $('.accordion-item-text').hide();
$('.accordion-item h3').click(function(e){
$('.accordion-item h3').removeClass('active');
$(this).toggleClass('active');
var thisSpan = $(this).parent().find('.accordion-item-text'),
isShowing = thisSpan.is(":visible");
all_spans.hide(500);
if (!isShowing) {
thisSpan.slideToggle();
}
e.preventDefault();
});
Current code that should manage tab change and hiding all opened accordion elements:
So, i thought that a simple click function would do it but apparently I was mistaken.
$('.ui-tab').click(function() {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
});
This just does not work, do I have to search that exact div before? Any suggestions are welcome.
Current HTML part:
<div class="product_content">
<div id="tabs">
<ul class="clearfix">
<li>About</li>
<li>General specifications</li>
</ul>
<div id="tabs-0" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
<div id="tabs-1" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
</div>
</div>
So, I have found a solution for it.
I dont know exactly why my previous function did not work but after sleeping on it i read jQuery UI documentation and found out that I can use my regular tabs fire function.
$("#tabs").tabs({
activate: function(event, ui) {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
}
});
This is my .html code
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
I have .js file code here ..
$( ".rt a" ).click(function() {
$( ".wholebox" ).slideToggle( "slow" );
return false;
});
Problem : When i click on link it show all div having classwholebox.In .css file i set property to display:none for this wholebox class.How can i show wholebox only for particular link with this hierarchy of HTML code .
$('.rt a').click(function() {
$(this).closest('.col-content').find('.wholebox').slideToggle('slow');
return false;
});
Try sth like following:
$( ".rt a" ).click(function() {
//first look for <div class="col-content"> and find class .wholebox
$(this).parent().parent().find(".wholebox").slideToggle( "slow" );
return false;
});
Give some data-id to your tag and map that id to your "wholebox" class.
Refer below code.
Only need to collect id from <a href="" data-id="1"> and map it to <div class="wholebox**1**">
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox1">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
$( ".rt a" ).click(function() {
$( ".wholebox"+($(this).attr("data-id")) ).slideToggle( "slow" );
return false;
});
I am using jQuery mobile 1.3.1 panels. I have two panels (one on the left, one on the right) and to open my panels there are buttons and at the same time swipe events. Everything is working fine if the user doesn't refresh the page. If the user refreshes the page he can open the panel at that page but when he clicks to a link on the panel and routes to another page he can't open the panels any more (swipe or button both of them doesn't work). But if I refresh the page again it again starts to work just for one time. By the way I am using ajax for transitions in jqm. I couldn't find out why. Am I missing something in the usage of panels. Here is html;
<div data-role="page">
<div data-role="panel" id="left-panel" class="panel" data-display="push" data-position="left" data-theme="a" class="ui-response">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" placeholder="search"/>
</div>
<a data-role="button" href="home">home</a>
<a data-role="button" href="settings">settings</a>
<button id="signOutButton">sign out</button>
</div><!--Left Panel--> <div data-role="panel" id="right-panel" class="panel" data-display="push" data-position="right" data-theme="a" class="ui-responsive">
</div><!--Right Panel-->
<div data-role="header" data-tap-toggle="false">
<h1>header</h1>
<button id="openLeftPanel">open</button>
<button id="openRightPanel">open</button>
</div><!-- /header -->
<div data-role="content"
<p>this is home</p>
</div><!-- /content -->
</div><!-- /page -->
And here is my js;
$(document).on('pageinit', function(){
//Opening panels with swipe, if any open don't open the panel (avoid closing swipe to open other panel)
//Catch swipes
$( document ).on( 'swipeleft swiperight', function( evt ) {
if ( $.mobile.activePage.jqmData( 'panel' ) !== 'open' ) {
if ( evt.type === 'swipeleft' ) {
$( '#right-panel').panel( 'open' );
} else if ( evt.type === 'swiperight' ) {
$( '#left-panel').panel( 'open' );
}
}
});
$(document).on('click tap', function(evt){
$.mobile.hidePageLoadingMsg();
var target = evt.target;
var targetId = target.getAttribute('id');
//Sign Out
if(targetId === 'signOutButton'){
window.authFunctions.deleteCookie('apiKey');
window.location.replace('/');
evt.stopImmediatePropagation();
evt.preventDefault();
}
else if(targetId === 'openLeftPanel'){
$('#left-panel').panel('open');
}
else if(targetId === 'openRightPanel'){
$('#right-panel').panel('open');
}
});
sorry if the code is looking not pretty thats because I am using laravel's blade to create these pages on the server side.
Thanks in advance.
EDIT
When trying it I recognized that; when I click on open panel button after it starts not working, it opens previous page's panel rather than active page's panel. I used previous page button on browser and saw that it is controlling previous page's panel. How can I solve this issue?
$(document).on('pagehide', function(event, ui){
var page = $(event.target);
page.remove();
});
This code solved my problem by removing page that is going to hide.
I have this code:
<script>
$(function() {
$("#tabs").tabs({ event: "mouseover" });
$("#tabs").tabs("add","#tab-4","Friends Discussions");
$("#tabs").tabs("add","#tab-5","Announcements");
$("#tabs").tabs("add","#tab-6","Contact");
});
</script>
<div class="demo" align="center" >
<div id="tabs">
<ul>
<li>Recent Discussions</li>
<li>Most Popular Discussions</li>
<li>Most Viewed Discussions</li>
</ul>
<div id="tabs-1">
<p>111111111111</p>
</div>
<div id="tabs-2">
<p>222222222222</p>
</div>
<div id="tabs-3">
<p>333333333333333</p>
</div>
<div id="tabs-4">
<p>4444444444</p>
</div>
<div id="tabs-5">
<p>555555555</p>
</div>
<div id="tabs-6">
666666666
</div>
</div>
</div>
Tabs 4, 5 and 6 have got the same content as appears in tab 1, 2 and 3. Why does that happen?
There's a typo in your code, you are adding #tab-n, yet in your code they have the Id tabs-n.
Try this:
$("#tabs").tabs("add","#tabs-4","Friends Discussions");
$("#tabs").tabs("add","#tabs-5","Announcements");
$("#tabs").tabs("add","#tabs-6","Contact");
You made a typo in the tabs you're adding. The id of the divs has to match the second parameter of each function.
Your divs look like this:
<div id="tabs-4">
But your code references:
$("#tabs").tabs("add","#tab-4","Friends Discussions");
^
s is missing
Try this code instead:
http://jsfiddle.net/ugjLs/
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
$( "#tabs" ).tabs("add","#tabs-4","Friends Discussions");
$( "#tabs" ).tabs("add","#tabs-5","Announcements");
$( "#tabs" ).tabs("add","#tabs-6","Contact");
});