How to trigger Polymer paper ripple animation by API code? - javascript

I tried $.find("paper-ripple").animate(); described at https://elements.polymer-project.org/elements/paper-ripple but this does not work.


You can use simulatedRipple() method of paper-ripple.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
<style>
.card {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<template id="demo" is="dom-bind">
<div class="card">
<paper-ripple recenters></paper-ripple>
</div>
</template>
</body>
<script>
var demo = document.querySelector('#demo');
demo.addEventListener('dom-change', function() {
setInterval(triggerRipple, 1000);
});
triggerRipple = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.simulatedRipple();
}
</script>
</html>

Related

Javascript Affecting Image Position

I have an image and a line of text on top of a blue box, all fading in with JavaScript. If I don't use any JS, I can center the image without any problems. But as soon as the JS is used, the image does not center anymore. However, the line of text does. Why does this happen?
Here are the code samples:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>

Velocity is setting your element's CSS display property to inline. Explicitly specify the fadeIn should set the display to block on your #img element:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500,
display: "block"
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>

Behavior change when declaring style in-line vs class

I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!

In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.

make plugin to embed video player on wordpress

I want from anyone to do plugin WordPress that add my special link video to post.
I have this page that is work good and I want to change it to do as plugin wordpress.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ace Stream</title>
<style type="text/css">
* {
font-family: Arial;
}
body {
background-color: #222
}
.modal {
background-color:#fff;
display:none;
width: 500px;
padding:15px;
text-align:left;
border:2px solid #333;
font-size: 12px;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal input {
font-size: 12px;
}
.button-long {
display: inline-block;
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat 100% -129px;
height: 27px;
line-height: 24px;
cursor: pointer;
position: relative;
margin-left: 17px;
top: -3px;
padding-right: 12px;
width: 115px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 14px;
}
.button-long b {
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat -579px -129px;
height: 27px;
width: 17px;
position: absolute;
left: -17px;
}
</style>
<!-- black style -->
<link type="text/css" rel="stylesheet" href="http://static.torrentstream.org/jsapi/css/ts-controls-black.css" />
<!-- api files -->
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/core.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.scrollText.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/cufon.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/a_LCDNova_400.font.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/player.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/controls.js"></script>
<script type="text/javascript">
function init() {
var useInternalControls = true;
var controls = new TorrentStream.Controls("tsplayer", {
style: useInternalControls ? "internal" : "ts-black",
debug: true
});
try {
var player = new TorrentStream.Player(controls.getPluginContainer(), {
debug: true,
useInternalControls: useInternalControls,
bgColor: "#000000",
fontColor: "#ffffff",
onLoad: function() {
this.registerEventHandler(controls);
controls.attachPlayer(this);
try {
var p = this;
this.loadPlayer("f47d788d767eaec24320f265e9c0cec5307d94ab", {autoplay: true});
}
catch(e) {
console.log("init: " + e);
}
}
});
}
catch(e) {
controls.onSystemMessage(e);
}
}
</script>
</head>
<body>
<div id="player_container" style="background-color: #000; width: 800px; height: 483px; margin: 0 auto 0 auto;">
<div id="tsplayer" style="width: 100%; height: 100%; color: #fff; text-align: center;">
<div style="padding-top: 232px; background-color: #000000;">Подождите, идет загрузка плеера...</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>​
when add these code in this page to my post on wordpress is work good but it is difficult to add all this codes with all new posts
just my changeable with all my new post is this "f47d788d767eaec24320f265e9c0cec5307d94ab"
I want the plugin to use above codes when add [/tv_vid]link[/tv_vid] to my post
for example
[/tv_vid]f47d788d767eaec24320f265e9c0cec5307d94ab[/tv_vid]
Also I want the height and width of player suitable with browsers and mobile devises
I don't know any programming language.
please help me and thank you for all.

My jQuery Won't Work on my Webpage

All of my HTML and CSS code works fine, and my script is properly linked (or so I assume), but I can't get the script to load or do any actions I've coded. Here's my HTML, CSS, and JS code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>
CSS
#title {
background-color: #C02942;
border-radius: 5px;
text-align: center;
font-family: Verdana, Arial, Sans-Serif;
color: #FFFFFF;
width: 200px;
height: 25px;
}
#text {
background-color: #0B486B;
border-radius: 5px;
text-align: center;
font-family: Vivaldi, Cursive;
color: #FFFFFF;
width: 200px;
height: 25px;
opacity: 0.5;
}
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
JS
$(document).ready(function(){
$('#text').mouseenter(function(){
$(this).fadeTo('fast', 1);
});
$('#text').mouseleave(function(){
$(this).fadeTo('fast', 0.5);
});
});
So I don't understand why it's not working. As you can see, the script simply doubles the opacity when the mouse enters the perimeter of #text. So, why is nothing working. I got this from the console:
Uncaught ReferenceError: $ is not defined

Add this to the HTML head (before you include your script):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

You have to add more jQuery
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();

This problem causes doctype Use <!doctype html>

try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>

Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>

Try adding "height:40px;" to the .cycle-pager class.

Categories