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).
Related
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 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. :)
<script type="text/javascript">
$(document).ready(function () {
var divs = $('.mydivs>div');
var now = 0; // currently shown div
divs.hide().first().show();
$("button[name=next]").click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // or .css('display','block');
//console.log(divs.length, now);
});
});
</script>
This is my first time developing a mobile apps and I am really slow in all this coding stuff.so my problem is, I have the above code to view previous and next image in my app.it works fine but when I have different categories of gallery need to be shown (eg: animals category,plants category,etc), and inside each categories, there are few images need to be displayed and can be controlled using the prev and next button (eg: animals [24 images], plants[20 images]), I encounter some problem.problem now is that the script only works on the first categories(eg:animals)..but when I want to view images in other categories (eg: plants), there seems to have problem with the counter. I need to click a few times the next button before the first images from the plant categories appear.
This is my related HTML and CSS for the above code:
HTML:
<body>
<!-- *************HOME PAGE**************** -->
<div data-role="page" id="home" data-title="home">
<div data-role="header">
<h1>Menu Utama</h1>
</div><!-- /header -->
<div><img id="Logo" src="images/logo.png"> </div>
<div data-role="content" class="content-primary">
<ul data-role="listview" data-inset="true">
<li><a href="#animal">
<img src="images/animal-thumbnail.png" />
<h3>category:animal</h3>
<p>view animals </p>
</a></li>
<li><a href="#plant">
<img src="images/plant-thumbnail.png" />
<h3>category:plant</h3>
<p>view plants</p>
</a></li>
</ul>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY ANIMAL PAGE**************** -->
<div data-role="page" id="animal" data-title="animal">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/animal1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal3.png" alt="photo" /></div>
</div>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY PLANT PAGE**************** -->
<div data-role="page" id="plant" data-title="plant">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/plant1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant3.png" alt="photo" /></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- ************* END **************** -->
</body>
css
.mydivs {
height:100%;
width: 100%;
}
.mydivs>div {
width : 100%;
}
Try
$(document).ready(function () {
$('.mydivs').children().hide().filter(':first-child').show().addClass('current');
$("button[name=next]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $next = $current.next();
if(!$next.length){
$next = $current.parent().children().first();
}
$next.show().addClass('current'); // show next
});
$("button[name=prev]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $prev = $current.prev();
if(!$prev.length){
$prev = $current.parent().children().last();
}
$prev.show().addClass('current'); // show next
});
});
Demo: Fiddle
I have a working left panel in my App that I have began to build, however when I try and go back to my main screen the panel no longer works. To see this bug, use the following method:
1) Click on 'Bars' Icon top left and go to Google Maps
2) Once on the blank page, use the panel to go back to Home page.
3) Try and open panel once more.
JSFiddle Link
Any ideas?
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"> -->
<!-- <script src="jquery-2.0.3.min.js"></script> -->
<!-- <script src="jquery.mobile-1.4.0.min.js"></script> -->
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="home">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
</div>
<!-- Content -->
<div role="main" class="ui-content">
<div>
<img src="" id="picture">
</div>
</div>
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
</div>
<!-- Maps Page -->
<!-- Start of second page -->
<div data-role="page" id="two">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars">
</div>
<div role="main" class="ui-content">
</div><!-- /content -->
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
Fixed, here is the fiddle:
http://jsfiddle.net/tHDWJ/1/
Problem was that you were referencing the same panel in both pages and when you navigate the current page hides the previous panel.
Note the difference in the following lines:
<div data-role="panel" id="left-panel1" data-display="overlay">
<div data-role="panel" id="left-panel2" data-display="overlay">
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'.