I'm looking to make an image sprite fade in after a certain amount of time. (please see code below)
The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.
How do I make all of these work together?
Thanks for any help you can give!
K
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
html, body {margin:0px;}
a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}
a.LaunchCourse:hover{
background-position: 0px -60px;
}
a.LaunchCourse:active{
background-position: 0px -120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>
</head>
<body>
<a class="LaunchCourse" href="wbt.htm" ></a>
</body>
</html>
I think what you might want to try is putting this:
$('.LaunchCourse').hide();
setTimeout(showImage, 5000);
function showImage() {
$('.LaunchCourse').fadeIn(1000);
}
instead of this:
$('.LaunchCourse').delay(1500).fadeIn(1500);
That way, you start by hiding the image... and then you just fade in with however much delay you want in that fadeIn(number) part.
Why not use javascript's setTimeout function?
Related
I try this osm-way sample for a-frame and ar.js:
`
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>AR.js osm example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>
<script type='text/javascript' src='osm.js'></script>
<script type='text/javascript' src='osmway.js'></script>
<script type='text/javascript' src='gps-vector-ways.js'></script>
<style type='text/css'>
#status {
font-family: Roboto, sans-serif;
color: white;
position: absolute;
top:50%;
left:calc(50% - 100px);
font-size: 150%;
font-weight: bold;
}
</style>
</head>
<body style='margin: 0; overflow: hidden'>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
<div id='status'></div>
<a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
<a-entity id='osmElement' osm gps-vector-ways />
</a-scene>
</body>
</html>
`
This sample work fine even iof a change the properties simulateLatidude and simulateLongitude on gps-projected-camera.
How i can display the osm gps-vector-way based on the current user gps position without simulate it ? I search but i don't find results. Thanks in advances
I was trying to use iron-flex-layout during the development of a website and became extremely frustrated when I spent hours try to get it to work, but to no avail. Eventually, I decided to try a bare-bones web page to see if it would work (thinking that it was probably something in my website). However, I tried the following code and I still can't get it to work! Can anyone spot my errors?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
body {
font-weight: 300;
}
div {
border: 2px solid grey;
background-color: white;
}
.layout {
margin-bottom: 20px;
background-color: grey;
}
p {
margin: 5px;
}
</style>
</head>
<body fullbleed unresolved>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
</body>
</html>
Here is what the result is supposed to look like
And here is what I am getting
If you want to use the CSS classes, you need to import them separately:
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The import you have only gives you access to the #apply mixins. Do note that Polymer is dropping /deep/ support in their elements and are encouraging people to use the mixins instead of the classes: https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
A simple nested polymer-element inside another one will not display:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
indx-grid.html
<polymer-element name="indx-grid">
<template>
<style>
#host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
indx-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
#host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
Strangely enough, although I can see it in developer tools in Chrome and CSS properties are all correct, the element will not display and not even have a 'size tooltip' while inspecting it with Chrome dev tools.
Does someone have any clue about the problem here?
Thanks
You need <content> 1 to bring in <indx-griditem> ("light DOM") into the <indx-grid>'s shadow DOM.
Demo: http://jsbin.com/eRimiJo/2/edit
Bonus tip: you can also use noscript on Polymer elements that don't setup a prototype (e.g. only call Polymer('element-name');
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
Look at this Link
It's seemed to be a Chrome bug. But it's fixed in Canary-Version. So I think it's just a temporary problem.
I have a page with this in the head
<style type="text/css">
#columnList { list-style-type: none; margin: 0; padding: 0; width: 95%; }
#columnList li { margin: 0 3px 3px 3px; padding: 0.1em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#columnList li span { position: absolute; margin-left: -1.3em; }
.column { font-size: small; border:1px solid; background-color: lightyellow; }
body { background : beige }
</style>
<link rel="StyleSheet" href="css/dashCss.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcolor/jscolor.js"></script>
<script type="text/javascript" src="js/dashboard.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
And now I want to move that page into an aspx user control but dont know what to do with the head stuff... help?
1) Either add it to the pages that will use the user control manually or
2) If you use the ASP.NET AJAX framework, use the ScriptManager and ScriptManagerProxy to manage your scripts. ScriptManager goes at the top of the page, or in the master page, and ScriptManagerProxy can go in any number of user controls. You can put the ScriptManagerProxy in your user control, register your scripts in the section, and these get wired up to the ScriptManager and registered at the ScriptManager location.
In the user control, the ScriptManagerProxy would look like:
<asp:ScriptManagerProxy id="smp" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/jquery.js" />
</scripts>
</asp:ScriptManagerProxy>
Just make sure that the site master page or the page using this user control has this at the top, but within the form.
<asp:ScriptManager id="sm" runat="server" />
Or
3) Programmably add them from code-behind; get the pages header reference, and add script tags programmatically.