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">
Related
I'm currently working on a single page website using Bootstrap and fullpagejs :
I've followed the required HTML structure, but each sections of my website have got a huge height. So the sections don't fit with their content.
I noticed that if I add the fp-auto-height class, everything is ok. The content fits with the sections. But this is not the right way to do that.
I have no idea about what happens.
Here is my first section for example
<div id="fullpage">
<!-- section 1 begin -->
<div data-anchor="p1-a" class="section">
<div class="container-fluid">
<div id="p1" class="row vertical-align">
<div class="col-md-offset-5 col-md-6">
<div class="row">
<div class="col-xs-12">
<h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
</div>
</div> <!-- end row title intro -->
<div class="row">
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div><!-- end left intro -->
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div> <!-- end right intro -->
<div class="container-fluid">
<i class="intro-text"> ...</i>
<p class="intro-text">- Luc Fayard </p>
</div><!-- end citation intro -->
</div> <!-- end row content text intro -->
</div> <!-- end colonnes + offset page 1 -->
</div><!-- end bigrow page 1 -->
</div>
</div> <!-- SECTION 1 END -->
[... other sections]
</div> <!-- end fullpage -->
Make sure you are not forgetting to add the compulsory <!DOCTYPE html> declaration at the very start of your document as detailed in this tutorial.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
</body>
</html>
Doctype is necessary in any website.
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
Hello I am trying to make my page transitions and test them a bit but they are not working when I add data-transition="something" and its not working at all can you guys have a look? Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kontrol Panel</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="slicknav.css" />
<script src="jquery.slicknav.min.js"></script>
<script src="js.js"></script>
<script src="ajaxupload-v1.2.js"></script>
</head>
<body>
<?php
if (!strpos($_SERVER['PHP_SELF'], 'index')) {
$htmmm = '
<div id="go-back">
</div>';
echo $htmmm;
}
?>
<div id="demo1"></div>
<ul id="menu">
<li>
<a class="scroll menuButton" href="index.php" data-transition="pop">Forside</a></li>
<li>
<a class="scroll menuButton" href="menukort.php" data-transition="slide">Menukort</a></li>
<li>
<a class="scroll menuButton" href="udstillinger.php" data-transition="fade">Udstillinger</a></li>
</ul>
</div>
Yes. Make sure each page is set up this way.
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Header and footer are not required
Hy, my answer is late but it seems that *.php page is not support...
Try using *.html and it should work.
Maybe I'm wrong and in this case, please give to us the solution.
Regards,
I have a working pinchzoom in html using iscroll but when i build it for phonegap for ios and android it pinch zoom seems to stop to work.
The code below is my working code on html but when i try to port it to an ios and android app it stops working. Viewing it in a browser works.
I am not really good with javascript maybe somebody can help me fix this issue.
Here is my code.
<!DOCTYPE html>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Scripys -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',{
zoom:true, zoomMax: 4
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<!-- Start of Page - Map-->
<div id="map" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div id="logo">
<img src="images/logo-dark.png">
</div>
</div>
<!-- Start of Content - Schedule [Map] -->
<div data-role="content">
<div id="wrapper" style="width:100%">
<img class="mapimage" src="images/leaf_map.jpg"/>
</div>
</div>
<!-- End of Content -->
<!-- Start of Footer -->
<div data-role="footer" data-position="fixed" data-role="footer" data-tap-toggle="false">
<div class="banner">
<div>
<a href="promo.html" data-rel="dialog" data-transition="pop">
<span>This app was created by:</span>
<span><img src="images/iwebxpert-logo.png"></span>
<span>iWebXpert</span>
</a>
</div>
</div>
<!-- Navbar / Main Navigation -->
<div data-role="navbar">
<ul>
<li>
<img src="images/home-icon.png">
</li>
<li>
<img src="images/schedule-icon.png">
</li>
<li>
<img src="images/map-icon.png">
</li>
<li>
<img src="images/design-icon.png">
</li>
<li>
<img src="images/about-icon.png">
</li>
</ul>
</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Page - Map-->
<script>loaded();</script>
Since you are loading scripts from external sources (if you haven't already) make sure you add
<access origin="*" />
to your config.xml file
i'm currently in middle of developing a mobile app/site and i'm using the jquery mobile framework and also the SC Minimal custom player found here:
https://github.com/soundcloud/soundcloud-custom-player/blob/master/examples/sc-player-minimal.html
The custom player plays fine, that's not the issue, the issue i'm seem to be getting is that the page it is on seems to change the main body into some sort of iframe with a added scroller on the right side of the screen. This is a example page
http://www.blackburnravers.com/test/media/blackburnravers/blackburnravers_hypedup.html
I also have the latest jquery installed on my server, i just can't seem to find anything conflicting anywhere
Here's the code i'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blackburn Ravers - Hyped Up Mix</title>
<link rel="stylesheet" href="../../css/themes/blackburnravers.mob-3.0.0.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="../../_assets/css/jqm-brctemplates.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="../../js/jquery.js"></script>
<script src="../../_assets/js/index.js"></script>
<script src="../../js/jquery.mobile-1.3.2.min.js"></script>
<script src="https://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script type="text/javascript" src="../../js/soundcloud.player.api.js"></script>
<script type="text/javascript" src="../../js/sc-player.js"></script>
<link rel="stylesheet" href="../../css/sc-player-minimal.css" type="text/css" />
</head>
<body>
<div data-role="page" class="jqm-brctemplates" data-quicklinks="true">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></h1>
<div data-role="popup" id="wedowhatwewant" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
<div data-role="content" data-theme="f">
<center>
WE DO WHAT WE WANT!
</center>
</div>
</div>
Navigation
Search
<div class="jqm-search">
<ul class="jqm-list">
</ul>
</div>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Hyped Up Mix</h1>
<p>
Re-recording of our set from Hyped up from Friday 14/06/2013.<br />
Fantastic night and superb bunch down there.
<p>
Hyped Up Mix
</p>
<br />
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h4>Tracklist</h4>
<ol data-role="listview">
<li>Scott Brown - All About Elysium (Al Storm Remix)</li>
<li>Darren Styles & Squad-E - Party People</li>
<li>Asa & S1 Feat. Lou Lou - Makin� Me Wanna Dance (Sy & Unknown Remix)</li>
<li>Ben Xtreme & Mc Ortie - Looking Down (Dj Kurt Remix)</li>
<li>Darren Styles - Take Me Away</li>
<li>Darren Styles - Save Me (Re-Con Remix)</li>
<li>Dougal & Gammer Feat. Lisa Abott - Something Good</li>
<li>Gusto - Discos Revenge (Breeze's Filthy Hardcore Mix)</li>
<li>Joey Riot & Chaos - I Wanna Freak U Bby</li>
<li>Paradise - Angel (Sy & Unknown Remix)</li>
<li>Re-Con Feat. Sophie may - Dont hold calling back (Azzyd Vox Booty)</li>
<li>Anon - How Low (Naughty is Nice Remix)</li>
<li>Scott Brown - Rock You Softly (UFO & Supreme Remix)</li>
<li>Dj Kurt - Right About Now</li>
<li>Starkillers - Discoteka (Dougal & Gammer Remix)</li>
</ol>
</div>
<br />
<div class="ui-grid-a">
<div class="ui-block-a">
<center><img width="150px" src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix"></center>
<div data-role="popup" id="screenshot" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
Close<img src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix">
</div>
</div>
<div class="ui-block-b">
<center><img width="150px" src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix"></center>
<div data-role="popup" id="screenshot2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
Close<img src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix">
</div>
</div>
</div><!-- /grid-b -->
<br />
<div class="ui-grid-a">
<div class="ui-block-a">SoundCloud</div>
<div class="ui-block-b">Share</div>
</div><!-- /grid-b -->
</p>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p><span class="copyright">©</span> 2013 The Blackburn Ravers -
DJ NJ & Dj Upalnite
<div data-role="popup" id="aboutapp" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
<div data-role="content" data-theme="f">
<center><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></center>
<br />
App Version - <i>v3.0.0</i><br />
App Creator - <i>Dj Upalnite</i><br />
Bugs - <i>Please email us</i><br />
Website - <i>www.blackburnravers.com</i><br /><br />
</div>
</div>
</p>
</div><!-- /footer -->
<!-- Here are a bunch of panels at the end, just before the close page tag -->
<!-- main navigation panel -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">
<li data-role="list-divider">Main Links</li>
<li data-filtertext="Home" data-ajax="false">Home</li>
<li data-filtertext="Media" data-ajax="false">Mixes</li>
<li data-filtertext="ajax navigation navigate event method">Social Sites</li>
<li data-filtertext="ajax navigation navigate event method"><a data-ajax="false" href="../../events/">Events</a></li>
<li data-filtertext="ajax navigation navigate event method">Contact Us</li>
<li data-filtertext="ajax navigation navigate event method">Main Website</li>
<li data-role="list-divider">Mix Section</li>
<li data-filtertext="ajax navigation navigate event method">Blackburn Ravers</li>
<li data-filtertext="ajax navigation navigate event method">Dj Upalnite</li>
<li data-filtertext="ajax navigation navigate event method">DJ NJ</li>
<li data-filtertext="ajax navigation navigate event method">Mad For It</li>
</ul>
</div>
<!-- /main navigation panel -->
<div data-role="panel" id="share-panel" data-display="reveal" data-position="right" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">
<li data-role="list-divider">Share this page</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Google +</li>
<li>Email</li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
</body>
</html>
is there something i could have missed? hope somebody can help me,
thanks,
Blackburn Ravers.
I was looking at it and then refreshed the page and it seems that the code changed so I am figuring that you are playing with it. I'm not sure but before the change, I believe that it seemed like .sc.scrubber div was the issue. Try using max-width: 100% (or 95% I believe was in there) instead of just width: 100%.
Fixed it. For some reason there was 2 'content' classes that where clashing and causing it to over scale and resize the page. I removed it from my code and it is working perfect.
thank you for your time looking at it for me. Cheers.
Blackburn Ravers.