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;}
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
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
I've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
I'm a complete noob to RoR, Bootstrap and all things code based. I'm trying to implement a full screen Bootstrap Carousel in my RoR app similar to this: http://surfscore.me/
This is what I have so far: http://cryptic-woodland-6000.herokuapp.com/
Can anyone please tell me why I can't get the image to full width....it's driving me crazy!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 0px;
height: 100%;
width: 100%;
color: #5a5a5a;
margin: 0;
margin-right: 0;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.logo-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 5%;
margin-bottom: -90px;
margin-left: 5%;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 100%;
}
.carousel img {
position: relative;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
margin: 0;
}
.carousel-caption {
background-color: #0001;
position: absolute;
max-width: 400px;
padding: 35px 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 45%;
z-index: 20;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: -90;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Logo attempt
================================================== -->
<div class="logo-holder">
<img src="images/hselogo.png">
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="carousel-caption">
<h1>COMING SOON!</h1>
<p class="lead">We're busy doing some 'market research'!</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
<div class="item active">
<img src="images/greek1.jpg" alt="">
</div>
<div class="item">
<img src="images/hotel.jpg" alt="">
</div>
<div class="item">
<img src="images/mykonos.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- FOOTER -->
<footer>
<p class="pull-right">91-93 Buckingham Palace Rd, London, SW1W 0RP.</p>
<p>© 2013 HOP SKIP ESCAPE LTD · Privacy · Terms</p>
</footer>
</div><!-- /.container -->
</body>
</html>
You can achieve a similar effect by dropping the container class