want to have parallax effect for that I am using plugin.currently I am using enllax.js for parallax effect as plugin but not getting any effect of parallax.Can any one tell me what's wrong in code.
Thanks in advance.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" href="s.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="scripts/jquery.enllax.js"></script>
<script type="text/javascript">
(function($){
//Plugin activation
$(window).enllax();
$('#a').enllax();
$('#first').enllax({
type: 'background', // 'foreground'
ratio: 0.5,
direction: 'vertical' // 'horizontal'
});
$('#second').enllax({
type: 'background', // 'foreground'
ratio: 1.0,
direction: 'vertical' // 'horizontal'
});
$('#third').enllax({
type: 'background', // 'foreground'
ratio: 1.5,
direction: 'vertical' // 'horizontal'
});
$('#fourth').enllax({
type: 'background', // 'foreground'
ratio: 2.0,
direction: 'vertical' // 'horizontal'
});
})(jQuery);
</script>
</head>
<body>
<div id="a">
<div id="first" class="dem1" data-enllax-ratio=".5" data-enllax-direction="horizontal" style="z-index:99">
This is my first div to display image.
<img src="images/r1.jpg" data-enllax-ratio=".5" data-enllax-type="foreground"/>
</div>
<div id="second" class="dem1" data-enllax-ratio="1.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my second div to display image.
<img src="images/r2.jpg" data-enllax-ratio="1.0" data-enllax-type="foreground"/>
</div>
<div id="third" class="dem1" data-enllax-ratio="1.5" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my third div to display image.
<img src="images/rc.jpg" data-enllax-ratio="1.5" data-enllax-type="foreground"/>
</div>
<div id="fourth" class="dem1" data-enllax-ratio="2.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
<img src="images/rr.jpg" data-enllax-ratio="2.0" data-enllax-type="foreground"/>
This is my fourth div to display image.
</div>
</div>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
color: #444;
line-height: 1.4;
overflow-x: hidden;
/* background: url(http://subtlepatterns.com/patterns/geometry2.png);*/
}
.text-center {
text-align: center;
}
}
.dem1 {
height: 400px;
background-size: cover;
box-sizing: border-box;
padding: 100px;
}
}.box {
width: 90%;
margin: 0 auto;
background: #efefef;
padding: 100px;
box-sizing: border-box;
border: 1px solid #ddd;
box-shadow: 0 0 1px #777;
margin-bottom: 15px;
}.b2 {
background: #dedede;
}.dl {
margin-top: 200px;
padding: 100px;
}
.fork-mmk {
position: fixed;
top: 0px;
right: 0px;
z-index: 99999;
}
If you use the simple activation, you don't need anything else.
So, I'd recommend you only use:
<script type="text/javascript">
(function($){
$(window).enllax();
});
</script>
And via data-attribute you config your enllax element. You can see his Github project https://github.com/mmkjony/enllax.js
Related
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
I know dragging works because i can do it on jsfiddle examples, but i'm clearly not doing something right. I have added the html, css and js below but still cant drag the div in chrome. All help appreciated.
html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel='stylesheet' href='drag.css'></link>
<script src='drag.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="car">
<div id="top"></div>
<div id="bottom"></div>
<div id="fwheel"></div>
<div id="bwheel"></div>
</div>
</body>
</html>
drag.css
#top {
position: relative;
height: 50px;
width: 50px;
border-radius: 5px;
background-color: #cc0000;
left: 25px;
}
#bottom {
position: relative;
height:25px;
width: 100px;
background-color: #cc0000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
top: -25px;
}
#fwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -35px;
left: 5px;
}
#bwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -55px;
left: 75px;
}
drag.js
$(document).ready(function() {
$('#car').draggable();
});
I have a Flowplayer flash issue. I'm using multiple video overlays and the player works perfectly on multiple desktop browsers but not on ios devices. I've tried the iPad js include and .ipad(). but nothing works. Can anyone point out the flaw here or a work around to get this to play on ios devices? Here's the full code... Thanks!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/example/flowplayer-3.2.6.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<style>
#overlay {
display: none;
padding: 0px;
width: 720px;
height: 466px;
background-image: url('http://www.angelmedflight.com/assets/images/BlackBox.png');
}
.close {
background: url('http://www.angelmedflight.com/assets/images/close.png') no-repeat;
position: absolute;
top: 2px;
right: 5px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
}
.close:hover {
background: url('http://www.angelmedflight.com/assets/images/closeHover.png') no-repeat;
}
#player {
display: block;
width: 640px;
height: 360px;
margin-top: 40px;
margin-left: 40px;
border-top: 1px solid #000;
border-left: 1px solid #111;
border-right: 1px solid #444;
border-bottom: 1px solid #666;
border: 1px solid #000;
}
#player *:focus {
outline-style: none;
}
</style>
<script>
$(function () {
var player = $f("player", "http://angelmedflight.com/flowplayer/flowplayer-3.2.15.swf").ipad();
$("a[rel]").overlay({
mask: {
color: '#000',
opacity: 0.8
},
onLoad: function () {
player.play(this.getTrigger().attr("href"));
},
onClose: function () {
player.unload();
}
});
});
</script>
</head>
<body>
<div class="ls-layer">
<img class="ls-bg" src="assets/images/carousel/video1.jpg" />
<a rel="#overlay" href="http://www.angelmedflight.com/video/Process_640x360_vegas_i.mp4"><img class="ls-s1" src="http://www.angelmedflight.com/assets/images/carousel/layer_play_button.png" /></a>
</div>
<div id="overlay">
<a class="close"></a>
<div id="player"> </div>
</div>
</body>
</html>
When you say "it doesn't work" what exactly is the experience?
Does it not load the video at all or just not load it in an overlay?
I believe the plugin opens the player in fullscreen mode and customizes the appearance of this mode.
When a player is loaded in full screen mode on iOS it is rendered in the system player, so the JS you are trying to use would have no effect.
If it is not playing at all, I cannot help you. Perhaps you could provide more information.
I'm using the default for jQueryUI, but it looks like the font is a little big.
I know that one solution would be "WELL! JUST MAKE IT SMALLER!", but I'm just wondering if I've messed something up or I don't have a value set correctly before I charge in and start changing things.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
google.load("jqueryui", "1");
function OnLoadCallbackUI(){
$('#tabs').tabs();
}
google.setOnLoadCallback(OnLoadCallbackUI);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
tabs-1
</div>
<div id="tabs-2">
tabs-2
</div>
</div>
</body>
</html>
Don't modify the jQuery CSS file. Instead, use your own CSS to override it as needed.
The demo page includes:
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}