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.
Related
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
</style>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
I've been trying to do a somewhat of a converter but i dont know how to submit variables through button and process them.
I tried 'attaching' to , after which is pressed, the code outputs an equivalent of meters in floors of a building for demonstration, but the log says that "calculus() is not defined", though it is cleadly in the and named accordingly. What am i doing wrong?
There are some errors on your code.
Firstly, your script is inside the style tag, but it shoud be outside.
Secondly, to define the function calculus you should use the function keyword function calculus() {}.
Thirdly, if you want to write the text into the output element, yous can not use the console.log function.
Finally, you should use getElementById instead of getAttributeById to fetch the element and then get the value.
The final code should be the next one:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
function calculus() {
floor_height = 0
height_input_code = document.getElementById("height_input").value
floor_height = height_input_code / 2.7
document.getElementById("output").textContent = 'This height is approximately ' + floor_height + ' floors of a regular living building'
}
</script>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
Make your style and your script tags separate
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
2 function compute needs to be defined as
function compute(e) {
3 You can't use console.log to send your log to an html element. Here's how to do it
document.getElementById("output").textContent = floor_height;
I am learning HTML, CSS and Javascript, I started 3 days ago so don't expect an expert here. I have the following MWE:
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$f(x) = 5x^2$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See equation <a class="cross-reference-link" href="#my first equation" onmouseover="popup(my_first_equation)">(1)</a>.</p>
</body>
</html>
and as you can see in the text inside the <p> tag I created a clickable reference to the equation which is fine. Now I would like that the referenced equation is displayed in a small box when the mouse hovers over the reference, something like this:
I have been reading many tutorials and instructions on how to do similar things, but all of them only show a simple popup text. Here I want to display a "more complicated object" that is already rendered in the page. I think this is similar to what Wikipedia has for the references.
How can I do this?
Finally I managed to solve this problem following this question and this tutorial. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
</style>
<style>
.popup_cross_reference {position:relative; }
.popup_cross_reference span {display: none;}
.popup_cross_reference_hover {position:relative;}
.popup_cross_reference_hover span {
display: block;
position: absolute;
background-color: White;
z-index:1000;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
background-color: #444;
color: #fff;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See
<span class="popup_cross_reference" onMouseOver="javascript:this.className='popup_cross_reference_hover'" onMouseOut="javascript:this.className='popup_cross_reference'">
<a class="cross-reference-link" href="#my first equation">(1)</a>
<span>
$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$
</span>
</span>. This is doing exactly what I wanted to do. I would have prefered not to have to copy the equation, but whatever... I took this solution from here.
</p>
</body>
</html>
I don't know why it does not work fine here on SO but outside it works beautifully.
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
.tip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tip .pop {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-style: solid;
border-color: black;
border-radius: 10px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tip:hover .pop {
visibility: visible;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$f(x) = 5x^2$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See equation<div class="tip">(1)
<span class="pop">
<equation id="my first equation"
class="equation__content">
$$f(x) = 5x^2$$
</equation>
</span>
.</p>
</div>
</body>
</html>
Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
fiddle:
http://jsfiddle.net/fgPL6/1/
i have a simple toolbar with two buttons:
<!DOCTYPE html>
<html>
<head>
<title>oxxy task</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="jsFile.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$(function() {
$("#toolbar").draggable();
});
</script>
<script type="text/javascript" src="cP_v0.91/colorPicker.js"></script>
</head>
<body>
<div id="toolbar">
<p>Toolbar</p>
<button class="buttons" id="buttonOne" type="button" onclick="appendButton();">createButton</button>
<button class="buttons" id="buttonTwo" type="button" onclick="appendText();">createText</button>
</div>
</body>
</html>
Here is my css code:
#toolbar {
width: 300px;
background-color: gray;
border-radius: 5px;
padding-bottom:10px;
padding-top:10px;
}
button{
margin-left: 35px;
}
.ButtonClass{
width: 120px;
background-color: lightblue;
border: solid;
margin-top: 10px;
margin-right: 10px;
float: left;
text-align:center;
border-radius: 5px;
border-width:2px;
}
.textClass{
width: 120px;
background-color: white;
border: solid;
margin-top: 10px;
margin-right: 10px;
float: left;
background-color: lightgreen;
text-align:center;
border-radius: 5px;
border-width:2px;
}
p{
text-align:center;
color: lightblue;
margin-top:0px;
}
And finally my javascript functions:
function appendButton() {
var popUpButton = document.createElement('div');
popUpButton.className = 'ButtonClass';
var message = document.createElement('a');
message.innerHTML = 'Link';
message.href = 'http://google.com';
popUpButton.appendChild(message);
document.body.appendChild(popUpButton);
$(function() {
$(".ButtonClass").draggable();
});
}
function appendText() {
var popUpButton = document.createElement('div');
popUpButton.className = 'textClass';
var message = document.createElement('div');
message.innerHTML = "someText";
popUpButton.appendChild(message);
document.body.appendChild(popUpButton);
$(".buttons").draggable();
$(function() {
$(".textClass").draggable();
$(".textClass").dblclick(function() {
});
});
}
I am dynamically creating div elements when clicking on the toolbar buttons. My goal is when those elements are created when i double click them a color picker to be called that changes the elements background. I am using colorPicker 0.91 plugin but unfortunetly i can not make the plugin work. I would appreciate if someone can help me. Thank you
Fiddle:
http://jsfiddle.net/fgPL6/3/
Try this:
$(function() {
$("#toolbar" ).draggable();
$("body").on("dblclick",".ButtonClass",function(e){
e.preventDefault();
colorPicker(e);
});
$("body").on("dblclick",".textClass",function(e){
e.preventDefault();
colorPicker(e);
})
});
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>