CSS transitions for Single Page App section contents - javascript

I am developing a single page app using js/handlebars/phonegap. In the beginning the architecture was multiple pages using jquery mobile to do slide or flip effects using the standard data-transition="slide" attribute on tags. Pretty standard stuff. Since then i have switched over to handlebars and the architecture has become single pages with content loading into a container div.
<div data-role="page" id="mealplans">
<div data-role="header" id="header" data-position="fixed">
<div class="center-wrapper">
<img src="img/logo.png" width="40" height="40"/>
</div>
<div class="accountMenu">
<img src="img/menu.png" width="30" height="30"/>
</div>
</div>
<div id="container" data-role="main">
</div>
</div>
My page content is injected into the "container" div using append or innerHTML commands.
What i want is to have transitions between content loads where it looks like a slide effect. But since i only have one container that i am changing the inner content of then i am sure i would need something like a second container ?
I have been following this post http://coenraets.org/blog/phonegap-tutorial/ but i am not sure how it plays out with my content being loaded in a specific div.
Basically i want to show a slide effect on the content that is loaded in the "container" div.
Can someone help me digest the link above and apply to my architecture.
thanks in advance.

Related

How to reduce size of button

I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.
So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#
<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
<div class="nimageone">
<img src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
</div>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
Css
.change
.nimageone img {display:none}
desktop here
You have not included the tree structure of your HTML element comprehensively.
You can achieve what you are trying to do with the following.
<div>
<a id="mni" href="#">
<div class="container4"
onclick="myFunction(this)">
<div class="nimageone"><img
src="http://4309.co.uk/wp-
content/uploads/2020/05/IMG_20200509_165113-1-
219x300.jpg" alt="" width="350" height="300" class="
size-medium wp-image-14178" /></div>
</div>
</a> //remember to close the <a> tag here before the
footer item
/////Your footer item can come below here
<footer>
</footer>
</div>
If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.

Weird jQuery Mobile highlight behavior on click

I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.

Disable section of HTML code when Javascript Disabled

I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');

jQuery mobile reloads iFrame on panel opening

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

jQuery page transitions

I have the following
<body>
<div class="sidebar"></div>
<div class="main">
<div class="page-1">
<p>Page 1</p>
<button id="btn-page2">Go to Page 2</button>
</div>
<!-- Other Pages -->
<div class="page-2">
<p>Page 2</p>
</div>
</div>
</body>
I am trying to follow the same principle of JQuery mobile by having all the pages in a single HTML document.
On page load, only the div with class page-1 should be displayed. However on clicking the button with id btn-page2, the second page should be displayed instead of the first one.
I figured I could add an .active-page class on the visible page with a display:block as attribute.
However, I also want to slide the second page from the bottom smoothly.
Any suggestions?
You can have a look at this blog.
http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/
This demonstrates the way to add slide page effect using css3.
You can use the same concept to have the page slide form bottom to top.
you can create a css3 class which will slide any page from bottom and add it to the page div based on the button clicked

Categories

Resources