I have a frustrating issue.
According to the documentation, I am allowed to have external panels:
http://demos.jquerymobile.com/1.4.2/panel-external/
In the above example the header is inside the page, but the panels are outside the page
I am also allowed to have external headers and footers:
http://demos.jquerymobile.com/1.4.2/toolbar-fixed-persistent/
Then logically I should be able to combine them:
<div data-role="header" data-position="fixed" data-theme="a">
<span>Open left panel</span>
<h1>Info</h1>
</div><!-- /header -->
<div id="locale" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>LOCALE</h1>
</div><!-- /content -->
</div><!-- /page -->
<div id="privacy" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>PRIVACY</h1>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="panel" id="main_menu" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" id="menu_contents">
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 1
</li>
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 2
</li>
</ul>
</div>
Fiddle: http://jsfiddle.net/sidouglas/qVNyf/1/
As you will see in the fiddle, the sliding animation is not the same as ( http://demos.jquerymobile.com/1.4.2/panel-external/ ). It's laggy and the height of the document is not being calculated correctly.
As per another question, I tried using <div class="ui-panel-wrapper"> in this fiddle. Still the same problem.
And here's a working solution: http://jsfiddle.net/Palestinian/8nM4u/
At least until this bug is solved, you should subscribe to bug report I left you in my comments on top.
Here's additional code you need for this to work correctly:
$(document).on("pagecreate", function () {
$("[data-role=panel]").one("panelbeforeopen", function () {
var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
$(".ui-panel-wrapper").css("height", height + 1);
});
});
And say hi to Omar, he made you this solution. :)
Related
I have a question about how to add layers of tabination inside one webpage.
Currently, the pages which I would like to edit have a jQuery tab function to swap between tabs with different content. I would like to go one step further and have an encompassing tabination system with a page entry tab containing initial content and a button to the next tab; and inside the next tab have the current active tab function. Check out the picture if this is confusing:
Image for Visualization Edit: In the image the 'layers' should be 'sections'.
My current code: One layer of tabination
jQuery in header.php
<script>
$(function() {
$('.tab-panels .tabs li').on('click', function(){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
// Figure out which panel to show
var panelToShow = $(this).attr('data-panelid');
// Hide current panel
$panel.find('.tab.active').hide(0, showNextPanel);
// Show next panel
function showNextPanel() {
$(this).removeClass('active');
$('#'+panelToShow).show(0, function() {
$(this).addClass('active');
});
}
});
});
</script>
Tabs include file
Styled as a horizontal bar.
<div class="tabs-container">
<ul class="tabs">
<li data-panelid="panel1" class="active">Tab 1</li>
<li data-panelid="panel2">Tab 2</li>
<li data-panelid="panel3">Tab 3</li>
<li data-panelid="panel4">Tab 4</li>
</ul>
</div>
HTML of the webpage
I have wrapped each of the encompassing tabs as 'SECTIONS', and the inside tabs as 'TABS'. The header (containing the jQuery), and this page are called in another php file.
<div class="section-wrap">
<div class="container section active" id="section1">
<div class="row">
<div class="col-md-12">
<div>CONTENT</div>
<div class="button-container">
<span>BUTTON TO NEXT SECTION</span>
</div>
</div>
</div>
</div>
<div class="container section" id="section2">
<div class="container tab-container">
<!-- Incluce Tabs -->
<?php include(ROOT_PATH . "/inc/tabs.php") ?>
<div class="row tab active" id="panel1">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<p>CONTENT</p>
</div>
</div>
<div class="row tab" id="panel2">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<ul>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
</ul>
</div>
</div>
<div class="row tab" id="panel3">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-breadcrumb">
<!-- Include Breadcrumb -->
<?php include(ROOT_PATH . "/inc/breadcrumb.php") ?>
</div>
</div>
<!-- END PAGE CONTENTS -->
<!-- Include Footer -->
<?php include(ROOT_PATH . "/inc/footer.php") ?>
I imagine the same jQuery script could be used to switch between sections, however I'm not sure how to implement this and would love some help. The user would not need to go back to the initial page entry 'section'. Also, the reason why I do not wish to use a different web page entirely is that the pages that this system will be implemented on are already 4 layers deep in the website.
I hope this isn't too confusing, thanks in advance! :)
Definitely not the best way to do this but here is my current solution:
jQuery in header
$(function() {
$('#section1').show().siblings().hide();
$('.section-button').find('a').on('click', function(e){
e.preventDefault();
$(this.hash).show().siblings().hide();
})
});
</script>
HTML of page
<div class="section-wrap">
<div class="container section" id="section1">
<div class="row">
<div class="col-md-12">
<p>CONTENT</p>
<p>CONTENT</p>
<span class="section-button">GO TO SECTION 2</span>
</div>
</div>
</div>
<div class="container section" id="section2">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
</div>
Is there a way for a youtube video to autoplay when the video is on the screen (when scrolled to)?
I got a section in my site that looks like this:
<!-- Home -->
<section id="home" class="container relative pattern-black">
<!-- Ful Screen Home -->
<div id="fullscreen" class="fullscreen pattern-black soft-bg-1 z-1">
<!-- Video -->
<div id="P2" class="player video-container" data-property="{videoURL:'gpSSGCf9nHY',containment:'#fullscreen',autoPlay:true, showControls:true, mute:false, startAt:0, opacity:0.2}"></div>
<!-- End Video -->
</div>
<!-- End Ful Screen Home -->
<!-- Home Elements v2 -->
<div class="home-elements">
<!-- Home Inner -->
<div class="home-inner v2 t-center">
<!-- Home Text Slider -->
<div class="home-text-slider relative">
<div class="text-slider clearfix">
<!-- Home Text Slides -->
<ul class="home-texts clearfix t-center semibold">
<li class="slide white uppercase">we are create awesome themes!</li>
<li class="slide white uppercase">We are creative designers</li>
<li class="slide white uppercase">we love to designing</li>
</ul>
<!-- End Home Text Slides -->
<!-- Home Fixed Text -->
<h1 class="home-fixed-text t-center">Welcome to <span class="gray-tone">North!</span> We love to design. We are happy with <span class="gray-tone">you are !</span></h1>
</div>
</div>
<!-- End Home Text Slider -->
<!-- Home Button -->
<a href="#" target="_blank" class="home-button-1 uppercase oswald semibold gray">
purchase
</a>
<!-- Home Button -->
<a href="#about" class="scroll home-button-1 uppercase oswald semibold gray">
read more
</a>
</div><!-- End Home Inner -->
</div><!-- End Home Elements -->
</section><!-- End Home Section -->
This is the code that is used for the video (jquery.mb.YTPlayer.js):
http://jsfiddle.net/55omdr0o/
I found a way to do this.
Using the jQuery waypoints plugin you can detect when a user is scrolling to an element.
The div with the video has the id 'P2', so I added this code to my page with the video:
<script>
// Use waypoints.min.js to detect if the user is at div with id P2
$(function() {
$('#P2').waypoint(function() {
$('#P2').playYTP();
});
});
</script>
You can find waypoints here: https://github.com/imakewebthings/jquery-waypoints
i am using Jquery Mobile (Open panel on swipe) and adding some attributes to the markup using JavaScript function code below
<?php if(Yii::app()->theme->name=='mobile'){ ?>
<script>
$(document).ready(function(e) {
$('#merchants-grid').removeAttr('class');
$('#merchants-grid').children('table').attr('data-role','table').attr('id','table- custom-2').attr('data-mode','columntoggle').attr('class','ui-body-d ui-shadow table-stripe ui-responsive').attr('data-column-btn-theme','b').attr('data-column-btn-text','display Column').attr('data-column-popup-theme','a').attr('cellpadding',1).attr('cellspacing',0);
$('#merchants-grid').children('table').children('thead').children('tr:first').addClass('ui-bar-d');
$('#merchants-grid').children('table').children('thead').children('tr:first').children('th').attr('data-priority',2);
});
</script>
<?php } ?>
but the javascript function not being included or being executed in the content
here is the markup
<div data-url="mob-top" data-role="page" id="mob-top" data-theme="d">
<div data-role="header" data-theme="b">
<a href="#mob-left-panel">
Left Panel
</a>
<a href="#mob-right-panel">
Right Panel
</a>
</div><!-- /header -->
<div data-role="content">
Content
</div><!-- /content -->
<div data-role="panel" id="mob-left-panel" data-theme="b">
Left Panel Navigation
</div><!-- /panel -->
<div data-role="panel" id="mob-right-panel" data-display="push" data-position="right" data-theme="c">
Right Panel Navigation
</div><!-- /panel -->
Thanks in Advance
If you are using phonegap/cordova, you have to listen to "deviceready"
document.addEventListener("deviceready", onDeviceReady, false);
In normal browsers this should work if your selector is correct (not tested).
So I am creating a survey app and depending on one survey page's selected options, one of two pages will be loaded once a user clicks 'Go'. In determining which link to load into the go button's href property, I also assign the link to a future survey page's 'back' button... I am confused about why this is returning undefined as I am doing the exact same thing earlier in the application and the back button's link is returning the correct link...
So after calling setSurveyFromSurvey5a(), once a user taps 'go' from survey5a, console.log($("#survey5bback").attr("href")) returns 'undefined', even after it should have been assigned within setSurveyFromSurvey5a()... it will pass the conditional to set the href value, but it just isn't changing it and I'm not sure why...
Here is my code:
relevant javascript:
function setSurveyFromSurvey5a(){
if(goto5a){
survey5adata.alo_wthfam = translateCheckBox($("#checkbox-alo_wthfam").prop("checked"));
survey5adata.alo_wthpart = translateCheckBox($("#checkbox-alo_wthpart").prop("checked"));
survey5adata.alo_wthwork = translateCheckBox($("#checkbox-alo_wthwork").prop("checked"));
survey5adata.alo_wthfr = translateCheckBox($("#checkbox-alo_wthfr").prop("checked"));
survey5adata.alo_wthoth = translateCheckBox($("#checkbox-alo_wthoth").prop("checked"));
}
//set go and back buttons:
if(survey5adata.alo_wthfam == 2){
goto5a1 = true;
console.log("within survey5adata.alo_wthfam == 2");
$("#survey5ago").attr("href", "#survey5a1");
$("#survey5bback").attr("href", "#survey5a1");
}
else if(survey5adata.alo_wthfam == 1){
console.log("within survey5adata.alo_wthfam == 1");
goto5a1 = false;
$("#survey5ago").attr("href", "#survey5b");
$("#survey5bback").attr("href", "#survey5a");
}
console.log("#survey5ago:" + $("#survey5ago").attr("href"));
console.log("#survey5bback:" + $("#survey5bback").attr("href"));
}
The html from survey5a, survey5a1, and survey 5b:
<div data-role="page" id="survey5a">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5acontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5a1 -->
<div data-role="page" id="survey5a1">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5a1content">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5b -->
<div data-role="page" id="survey5b">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5bcontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- Need to determine how to go back correctly -->
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
You just have a typo in your HTML markup:
<li>Back</li>
Should be
<li>Back</li>
Remove the '#' from the id.
I have this code for my tabs...
<!-- Start first page -->
<div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">
<div data-role="header" data-position="fixed" data-id="header">
</div>
<div data-role="navbar">
<ul>
<li><a href="#homePage" class="ui-btn-active ui-state-persist" >Enter data</a></li>
<li><a href="#syncData" >Sync data</a></li>
<li>Manage data</li>
</ul>
</div><!-- /navbar -->
</div> <!-- /header -->
</div><!-- /page -->
<!-- Start second page -->
<div data-role="page" id="syncData" data-rel="dialog" data-dom-cache="true">
<div data-role="header" data-id="header1" data-position="fixed">
</div>
<div data-role="navbar">
<ul>
<li>Enter data</li>
<li><a href="#syncData" class="ui-btn-active ui-state-persist" >Sync data</a></li>
<li>Manage data</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
</div><!-- /page -->
<!-- Start third page -->
<div data-role="page" id="manageData" data-rel="dialog" data-dom-cache="true">
<div data-role="header" data-id="header2" data-position="fixed">
</div>
<div data-role="navbar">
<ul>
<li>Enter data</li>
<li><a href="#syncData" >Sync data</a></li>
<li><a href="#manageData" class="ui-btn-active ui-state-persist" >Manage data</a></li>
</ul>
</div><!-- /navbar -->
</div> <!-- /header -->
<div data-role="popup" id="dialog-confirm" style="display: none" data-overlay-theme="b" data-theme="b">
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Low storage space!!</h3>
<p>You must perform one of the actions below before you proceed!.</p>
Sync data
Backup data
Increase storage space
Cancel
</div>
</div>
</div><!-- /page -->
I want to change to sync data wen i click on the sync data button on the popup dialog which is on manage data tab.
it should happen on a click button event
e.g
$('#syncDataId').click(function () {
//change to the sync data tab page
}
am new to jquery.any help willl be appreciated.thanks
jQuery('.next-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
});
jQuery('.previous-product').click(function() {
debugger;
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
});
live demo, this may be what you are looking for
Use $.mobile.changePage(hashedPage) where hashedPage is '#' + 'id of the div that has data-role page'.