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.
Related
I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.
If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});
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();
});
The multipage is working, but I want to inject the footer code in every page container.
Page Code:
<div data-role="content">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
<div class="upage" id="uberpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
</div>
And the I just inject the footer code with some buttons (When device is ready):
$(".upage-outer").append('<div data-role="footer">Copyright + Buttons</div>');
This is the full footer code:
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_4" data-uib="jquery_mobile/footer" data-ver="0">
<div data-role="controlgroup" data-type="horizontal" class="brideButtonGroup">
<a class="widget uib_w_6" data-role="button" href="#mainpage" rel="external">Wetter</a>
<a class="widget uib_w_7" data-role="button" onclick="intel.xdk.device.launchExternal('http://wetter2.mt-labor.it.hs-worms.de/plot');">Mehr</a>
<a class="widget uib_w_8" data-role="button" href="#uberpage" rel="external">Über</a>
</div>
</div>
The code gets injected, but on the mainpage, the Buttons are not displayed; instead, there are plain text links. On the second page, everything is displayed very well. I can switch between the pages.
What did I do wrong?
edit: I used enhanceWhithin(), and its working. But when I click somewhere on the document, strange colors appear, which are caused by the class ".ui-fixed-hidden". Where does this come from?
edit2: https://jsfiddle.net/564f1fkf/ It's not exactly the same, but if you go to site 2 and then back to site 1 and click somewhere on the page, you should see the problem.
PS: See pictures
You have to call the enhanceWithin() method on data-role="content" element. This will enhance the newly added HTML into jQuery mobile format.
$("[data-role='content']").enhanceWithin();
I have stumbled upon this weird problem, where an iframe in the content area of a jQuery mobile site is reloaded the first time I open a panel. Any subsequent opening does not reload the iFrame.
You can see it in action in this fiddle: http://jsfiddle.net/jakobgt1/Z3mmn/7/ (watch the network requests).
<body>
<div data-role="page">
<div id="nav-panel" data-role="panel">
Close panel
</div>
<div data-role="content">
FooBar
<iframe src="http://gedefar.dk/"/>
</div>
</div>
</body>
If I replace the iframe with anything else it is not reloaded (such as a picture - http://jsfiddle.net/jakobgt1/GdKu2/1/):
<img src="http://dummyimage.com/200x200/000/fff"/>
I'm using jQuery 1.10.1, jQuery Mobile 1.4.0 RC-1.
Is it a bug, or is there something I have missed?
Updated answer:
By wrapping the content div inside a ui-panel-wrapper div the iFrame is not reloaded. (See the original fiddle with just an 8 instead of a 7 in the URL, as I can't post more than two links)
<div class="ui-panel-wrapper">
<div data-role="content">
FooBar
<iframe src="http://gedefar.dk/"/>
</div>
</div>
Jakob
Answer:
Thanks to Omar I realized that by wrapping the content div inside a ui-panel-wrapper div, the iFrame is not reloaded, as this is then not done by jQuery mobile. (See the original fiddle with just an 8 instead of a 7 in the URL, as I can't post more than two links).
<div class="ui-panel-wrapper">
<div data-role="content">
FooBar
<iframe src="http://gedefar.dk/"/>
</div>
</div>
Jakob
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