Please see below example of HTML structure
<div data-role="page" id="p1">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">
Click Me
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div data-role="page" id="p2">
<div data-role="header"><h1>Header 1</h1></div>
<div data-role="content">
Page Two
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
jquery for same
$('#p1').live('pagecreate', function(e){
$("#add").click(function(e) {
$.mobile.changePage('#p2', { transition: "flip"} );
});
});
The above example is working fine but header part is repeating.
So how to avoid this issue because I am using same header as well as footer part for each data-role="page"?
There seems to be no nice "built-in" method to do it. You can find some workarounds here: jQuery Mobile: Use same header footer for all pages
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
When using transitions to navigate between two pages in my jQuery Mobile application, I see a blank page between the two pages. This behavior occurs at least on the Slide transition, fade does not show this behavior.
My page structure is like this:
<div id="MainPanelPage" data-role="page">
<div id="MenuLeft" data-role="panel">
...
</div>
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
<div id="BannerPage" data-role="page">
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
Note: jQuery Mobile wraps these divs into a global div automatically.
I am calling the transition with the following link:
<input type="submit" name="ctl25" value="Meer informatie" onclick="$.mobile.navigate('#BannerPage', { transition: 'slide' });" data-role="button" href="#BannerPage" data-transition="slide">
Please note that I am running ASP.NET and the language is kind of dirty in combination with jQuery Mobile.
I am running jQuery Mobile 1.4.5. After spending hours of trying I decided to ask here for a possible solution. Thanks in advance.
I can not see why it is not working this dialog. I am using jqm 1.3
Open dialog
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I have added on the "head"
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js>
and others jqm events are working.
You need to wrap your anchor tag which invokes the dialog inside a page div as given below.
<div data-role="page">
<div data-role="content">
Open dialog
</div>
</div>
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
You can check out an example at Live fiddle
I'm trying to use the Overthrow Plugin, which is a polyfill for overflow:auto on mobile devices. Sample here.
My question:
How can I detect scrollstart/scrollstop on a div.element that is scrollable? Is this possible at all, or do the scroll/scrollstart/scrollstop events only work on $(document)?
Specifically, if I have two panels on my page, which both are scrollable, is there any way to make this work:
$(document).on('scrollstart','div:jqmData(panel="main"), div:jqmData(panel="menu")'), function() {
console.log("scroll detected");
});
EDIT:
My HTML looks like this:
<html class="ui-popover-mode">
// OR depending on screen size
<html class="ui-splitview-mode">
// panel 1
<div data-panel="main" class="ui-panel">
<div data-role="page" class="ui-page" id="mainOne">
<div data-role="content" class="ui-content"></div>
</div>
<div data-role="page" class="ui-page" id="mainTwo">
<div data-role="content" class="ui-content"></div>
</div>
</div>
// panel 2
<div data-panel="menu" class="ui-panel">
<div data-role="page" class="ui-page" id="menuOne">
<div data-role="content" class="ui-content"></div>
</div>
<div data-role="page" class="ui-page" id="menuTwo">
<div data-role="content" class="ui-content"></div>
</div>
</div>
// panel 3
<div data-panel="pop" class="ui-panel">
<div data-role="page" class="ui-page" id="popOne">
<div data-role="content" class="ui-content"></div>
</div>
<div data-role="page" class="ui-page" id="popTwo">
<div data-role="content" class="ui-content"></div>
</div>
</div>
</html>
Screen Mode is set depending on screen size. In every panel there can be multiple pages, which each have a content section, which is scrollable using overthrow.
I want to bind to scrollstart in main and menu content section in splitview-mode AND main content sections in popover-mode.
Originally my selector tried to capture this and only attach to the relevant content elements:
$(document).on('scrollstart','.ui-splitview-mode div:jqmData(panel="main") .ui-content, .ui-splitview-mode div:jqmData(panel="menu") .ui-content, .ui-popover-mode div:jqmData(panel="main") .ui-content, ', function() {
// do sth
});
Agreed this is complex and did not work. But it attached events only to the necessary elements. Now I'm doing like this:
$('.ui-content').on('scrollstart', function() {
// check here if .ui-content is on the correct panel
});
So I now have a lot of unnecessary bindings and only check if the binding is correct after the event is detected vs. the other way I would only attach the event to the required elements.
That's what I was wondering.
You can directly select the element and attach the scroll event. Simple example
$("#selector").on('scrollstart', function() {
//...do stuff
});
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>