I am currently using jqtouch to develop my ruby on rails into an iphone app. I can't figure out how to load a media player to play audio / video files. Does anyone know?
To add a movie page to jqtouch (adapted from the jqTouch demo page):
<!doctype html>
<html>
<head>
<title>Video Demo</title>
<style type="text/css" media="screen">#import "../../jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">#import "../../themes/jqt/theme.css";</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('#play_movie').bind('tap', function(){
$('#movie').get(0).play();
$(this).removeClass('active');
});
$('#video').bind('pageAnimationStart', function(e, info){
$('#movie').css('display', 'none');
}).bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in')
{
$('#movie').css('display', 'block');
}
});
</script>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Video Demo</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<ul class="rounded">
<li class="arrow">Video</li>
</ul>
</div>
<div id="video">
<div class="toolbar">
<h1>Video</h1>
<a class="back" href="#">Home</a>
</div>
<video id="movie" src="video/fireworks.mov" poster="video/fireworks.jpg" width="320" height="426" controls></video>
Play Movie
</div>
</div>
</body>
</html>
Related
My test is very basic like this web page below. I don't understand why on iphone 6 or 5 Foundation seems not working. Do you have any idea ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="info4"></div>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
</div>
</div>
</div>
<script>
$(document).foundation();
$(document).ready(function(){
$("#info").html($( window ).width());
$("#info2").html(JSON.stringify(Foundation.MediaQuery.queries));
$("#info3").html(Foundation.MediaQuery.current);
$("#info4").html(window.devicePixelRatio);
});
</script>
</body>
</html>
The result is medium any way flex grid or x-y grid.
I use sass for my project but for this test i use directly the full official cdn file. I still get same result.
This is my plunker url and code snippet:
http://plnkr.co/edit/lUB8pYKRn5JudhToxykj
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap#3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.
So how to set it up right?
Thanks much!
Zhen
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
I'm trying to add fancy box to the photos part of my website currently in progress...
When i click on the image it doesn't show up like it is supposed to. Instead, it goes to its own separate url to show the image.
I have tried watching a few tutorial videos to help but nothing has worked. I believe I have all the right code (for the first two images at least).
Could you please look at my code and assist me in anyway possible?
http://www.chrislcarrier.com/photos.html
This is my code.
<link rel="stylesheet" href="css/bootstrap.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="img/glyphicons-halflings-regular.svg">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/…;
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'width' : 1200px,
'height' : 800px,
'overlayShow' : false
});
});
</script>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
<a class="fancyImg" href="img/water.png">
<img id="move" src="img/water_small.jpg" alt="">
</a>
<hr class="hidden-lg">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a class="fancyImg" href="img/flower_large.jpg">
<img id="move2" src="img/flower_small.jpg" alt="">
</a>
<hr class="hidden-lg">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#">
<img id="move3" src="img/view_small.jpg" alt="">
</a>
</div>
</div>
I'm building a responsive webpage with bootstrap plugin. Everything works fine in desktop browsers, even in low resolution and toggle device mode (chrome). But when i open the page on chrome or safari, on my iphone, the carousel just don't slide. It goes to the next slide, but without using the sliding effect.
This is the URL: http://diogoalmeida.pt/2/index.html
This is my HTML code:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Menu -->
<nav class="navbar navbar-fixed navbar-green" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav nav-green navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container-fluid myCarousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
<div class="item">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div class="container">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
</a>
</div>
</div>
<!-- JQuery -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Blueimp Gallery -->
<script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
</body>
</html>
Problem solved, the bootstrap auto compiler (website) wasn't including vendor prefixes.
Solution here -> https://github.com/twbs/bootstrap/issues/14973
similar problem .....my problem was that the images were not sliding to the next on small screens , i added to the head and it worked
<script src="../resources/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../resources/assets/js/smoothproducts.min.js"></script>
<script src="../resources/assets/js/theme.js"></script>
mmenu crashes the page when used with Google Publisher Tags (async), as soon as the page loads the css formatting and html structure seems to be lost and all further javascript execution stops. It can be reproduced by adding a google publisher tag in the demo file of mmenu download.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
(function() {
var useSSL = 'https:' == document.location.protocol;
var src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
</script>
<script type='text/javascript'>
googletag.defineSlot('/5910/symall/ROS', [1, 1], 'div-gpt-ad-1403693262284-0').addService(googletag.pubads());
googletag.pubads().enableSyncRendering();
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
</script>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../src/css/jquery.mmenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.mmenu.min.js"></script>
<script type="text/javascript">
$.fn.mmenu.debug = function( msg ) {
console.log( msg );
};
$(function() {
$('nav#menu').mmenu();
});
</script>
</head>
<body>
<div id="page">
<div class="header">
Demo
</div>
<div class="content">
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>For more demos, a tutorial, documentation and support, please visit mmenu.frebsite.nl</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>The team
<ul>
<li>Management</li>
<li>Sales</li>
<li>Development</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- SYMALL/ROS -->
<div id='div-gpt-ad-1403693262284-0'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1403693262284-0');
</script>
</div>
</body>
</html>