I made an iframe on the right side of the main page/parent page and added some pictures, these are working with Fancybox.
Pictures are not showing their preview out of the iframe. I need the preview in full screen. Need to help in settings.
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<head>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ntzsportsonline.com/source/jquery.fancybox.css" media="screen" />
<style> .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; } </style>
<iframe src="http://www.ntzsportsonline.com/advertisements.htm" width="335" height="629" name="Advertisements" border="0" frameborder="0" scrolling="no" target="_blank">
Technical Problem</iframe>
Related
I have a snippet of code below, and what it does is when the image is clicked, it displays the video underneath. I am simply trying to align the video to be the same size as the image and fit snug underneathe it but make the image disappear as well. That way once the image is clicked, the video will displays seamlessly. Any help would be great!
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/ng-media.js"></script>
<script>
var myApp = angular.module('myApp', ['media']);
myApp.controller('MoocCtrl', function($scope, $http) {
$scope.videoSources = [];
$scope.loadVideos = function() {
$scope.videoSources.push('https://example.com/images/Intro.mp4');
};
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body ng-App="myApp">
<div ng-controller="MoocCtrl">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 vidPlayer">
<img src="images/introImage.png" class="img-responsive">
</div>
<video html5-video='{{ videoSources }}'autoplay='true' controls='true'></video>
</div>
</body>
Practially, i have a css file with some classes ,id's and html selectors (index.css) and the kendo.mobile.all.min.css.
I've tried putting it before and after to no avail.
My classes won't work , for example:
<div data-role="view" data-title="main-menu" id="main-menu" data-persist="true" class="body" data-transition="overlay:up" >
<h1>Text text</h1>
<h2>Another</h2>
<div>
This code, when used only with my css and the kendo.common.min.css and kendo.default.min.css files, shows the proper styling with background, when used , in any combination with kendo.mobile.all.min.css all i see is the plain html.
I'm a begginer (still in university) , is there something implicit about this that escapes me? I also tried jquery mobile but quit that because it overrided all my css and got blank html.
Also anyone know how can i change the default android skin from android-dark to android-light without forcing the app to run on one platform? (as in still adapt to different platforms)?
My include order:
<script type="text/javascript" src="cordova.js"></script>
<script src="js/load.unload.js"></script>
<script src="js/hangman.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<!-- audio css-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.ui.core.min.js"></script>
<script src="js/kendo.mobile.listview.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- audio js sources-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
you can try adding the !important property to your css to see if that works.
like this:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
HERE Maps JavaScript API errors in Firefox and Chrome (but not IE) when there are style sheets in the body.
Working example:
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
Failing Example:
<!DOCTYPE html>
<html>
<head>
<title>Failing</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
The problem appears to be from the following logic:
var f = c.styleSheets, p = f.length, a, k, m = c.createElement("style");
m.setAttribute("type", "text/css");
c.getElementsByTagName("head")[0].appendChild(m);
a = f[f.length - 1];
It looks like what's happening is document.styleSheets will have elements in the body after elements in the head, so this tries to manipulate an external style sheet instead of the style element it just created.
According to the HTML5 specification on link:
If the rel attribute is used, the link element is restricted to the head
element....
Therefore your HTML5 markup is invalid, since the link should not occur within the body, this is metadata content which should be placed in the head. Obviously IE is being more lenient for some reason (I guess there must be some sort of IE specific code being used here to try and get it to be standards compliant, which happens to accept the link in a body as a by-product)
I'm using phonegap to develop a small demo which will run on the Android device. And the resolution of my device is 1280*720, so I create a canvas which is 1280*720 to fill the whole screen and draw a picture with the same size.But I find it's too big to show in my advice, I must adjust this to 640*360. But it is very blurred.How can I fix it?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/demo.js" type="text/javascript"></script>
<style>
body {
margin:0 !important;
}
</style>
</head>
<body>
<canvas id="canvas" width="360" height="640"></canvas>
<script>
$(document).ready(function(){
prepareCanvas();
});
</script>
</body>
</html>
... in fact all markup that i put before the
<div data-role="page">...</div>
is visible a very little time and when page is fully rendered, all these content disappears. Its still visible in Source / Firebug although.
i'm using HTML5Boilerplate for this project. Here's some code - maybe there are some collisions that i didn't find?!
<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>
<body>
<!-- header disappears after page is rendered :( //-->
<div data-role="header">
Here goes the Head-Content
</div>
<h3>This content disappears also :( ... </h3>
<!-- everything below this point stays visible! //-->
<div data-role="page">...</div>
</body>
...
<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
As asked :)
In jQuery mobile, data-role="page" isn't a container for your content, it is literally the page that you want to serve, anything else won't be shown. You need to put your data-role="header" inside data-role="page", and it will work
Basic jQuery mobile page from jquerymobile.com:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
// Anything here will not be on the page
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
// Anything here will not be on the page
</body>
</html>
Proof here