Currently I am using CKPlayer for my video in the website.
But in the source code, it showed all the video url.
Is there a method to hide them?
Thank you
<div class="title">Video Title</div>
<div class="playbox">
<div id="playbox" style="background-color: rgb(0, 0, 0); width:
962px; height: 400px;"><video controls=""
src="http://www.example.com/video/firstvideo.m3u8" id="ckplayer_a1"
width="100%" height="400" autoplay="autoplay"></video></div>
<script type="text/javascript">
var flashvars={
f:'http://www.example.com/video/ckplayer/firstvideo.swf',
a:'http://www.example.com/video/firstvideo.m3u8',
c:0,
s:4,
h:3,
p:1,
i:'',//
};
var video=['http://www.example.com/video/firstvideo.m3u8'];
if(navigator.userAgent.indexOf('Mobile')>0||navigator.userAgent.indexOf('Pad')>0){
var html5first = true;
}else{
var html5first = false;
}
CKobject.embed('http://www.example.com/statics/building/js/video/ckplayer/ckplayer.s
wf','playbox','ckplayer_a1','100%','400',html5first,flashvars,video)
</script>
</div>
Related
I would like to use apache2 and php for my raspberry pi webserver since I already have many php files that I can use.
Everything is installed and working, but now I have to do an asynchronous request to my raspberry:
When I move a slider on my website, without refreshing the page, I want to send the new value to a php/python script.
the structure is inside:
/var/www/html/SCRIPTS (php/python scripts)
/var/www/html/WEB (web interface)
/var/www/html (an index that redirects inside WEB folder)
My index file contains the following code. I have a CSS to create three sliders. When 'oninput' I would like to call the script that sends a string to the server. The script contains the function edited();
<title>JMT Botler 1: admin panel</title>
<style type="text/css">
.slidecontainer {
width: 100%; /* Width of the outside container */
}
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
</style>
<script type="text/javascript">
function edited(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open('GET', '/var/www/html/SCRIPTS/test_rec.php?v=' + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div align="center">
<p>STEERING</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" onchange="edited(this.value)" id="myRange" width="500">
</div>
<div align="center">
<p>Value: <span id="steering">-1</span></p>
</div>
<div align="center">
<p>THROTTLE</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" id="myRange2" width="500">
</div>
<div align="center">
<p>Value: <span id="throttle">90</span></p>
</div>
<div align="center">
<p>STER OPT</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" id="myRange3" width="500">
</div>
<div align="center">
<p>Value: <span id="steropt">90</span></p>
</div>
<div align="center">
<p>Value: <span id="demo"></span></p>
</div>
<script type="text/javascript">
var slider = document.getElementById('myRange');
var output = document.getElementById('steering');
var slider2 = document.getElementById('myRange2');
var output2 = document.getElementById('throttle');
var slider3 = document.getElementById('myRange3');
var output3 = document.getElementById('steropt');
var vs = slider.value;
var vt = slider2.value;
var so = slider3.value;
output.innerHTML = slider.value;
output2.innerHTML = slider2.value;
output3.innerHTML = slider3.value;
slider.oninput = function() {
steering.innerHTML = slider.value - 90;
edited("OPT");
}
slider2.oninput = function() {
throttle.innerHTML = slider2.value - 90;
edited("OPT");
}
slider3.oninput = function() {
steropt.innerHTML = slider3.value - 90;
edited("OPT");
}
</script>
</body></html>
Finally the php script that receives the string should write it on a document.
Obviously it does not work. It is my first time building something like that. How much off course am I?
<?php
$ric=$_GET['v'];
$my_file = 'log.txt';
$handle = fopen($my_file, 'a+');
$data = 'NUOVO DATO RICEVUTO';
fwrite($handle, $data);
$new_data = "\n".$ric;
fwrite($handle, $new_data);
?>
Thanks in advance!
I think that the problem resides in this line:
xmlhttp.open('GET', '/var/www/html/SCRIPTS/test_rec.php?v=' + str, true);
Are you sure that this request is correct?
Usually, /var/www/html is outside the document root of the VirtualHost.
Try changing it with:
xmlhttp.open('GET', '/SCRIPTS/test_rec.php?v=' + str, true);
Also, the third parameter of open is deprecated.
i want to close the iframe box as soon as i hit esc or i click outside the iframe area at the moment i have to click back on hideshow icon to hide the iframe again is there a method that i can use to close the iframe with esc or clicking outside the iframe area
index.php
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message" >
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
hide-show.js
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
});
mycss.css
#message
{
display:none;
position: absolute;
z-index: 1;
}
the question how can i press esc key or click outside the msg_pic_link div to close message
Try using $(window).on("click keydown") , .is()
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
$(window).focus()
});
$(window).on("click keydown", function(e) {
//e.preventDefault()
if (e.keyCode === 27 || !$(e.target).is(function() {
return $("#message, #hideshow")
})) {
$("#message").hide()
}
}).focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message">
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
jsfiddle http://jsfiddle.net/pb47m0om/2/
I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.
here is my code, i'm not posting the css here
HTML :
<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>
</div>
JQUERY :
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked
var rating = $(this).data('rating');
alert(rating);
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element
});
Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.
So instead of this
$(this).addClass('selected');
you use this, similar to how you have previously.
$(this).prevAll().andSelf().addClass('selected');
But I would also remove the hover class so that it's obvious to the user on click
$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');
Demo
<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html>
<head>
<title>Rating System jQuery Plug by Aldanis Vigo</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style type='text/css' language='css'>
.record{
opacity: .50;
}
#value-display{
position: relative;
top: -5px;
margin-left: 10px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<span value='0' id='ratingbar'>
<img class='record' number='1'/>
<img class='record' number='2'/>
<img class='record' number='3'/>
<img class='record' number='4'/>
<img class='record' number='5'/>
<span id='value-display'>0 / 5</span>
</span>
</body>
<script>
//Change these variables to your liking!!
var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
var iconwidth = '20px';
var iconheight = '20px';
var value = $('#ratingbar').attr('value');
$('#ratingbar img').each(function(){
//Set the icon for each
$(this).attr('src', iconsrc);
$(this).attr('width', iconwidth);
$(this).attr('height', iconheight);
$(this).hover( function(){
$(this).css('opacity','1');
$(this).prevAll().css('opacity','1');
});
$(this).click( function(){
//Clear all of them
$(this).parent().attr('value',$(this).attr('number'));
$(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}else{
$(this).css('opacity','.50');
}
});
});
$(this).mouseout( function(){
$(this).css('opacity','.50');
$(this).prevAll().css('opacity','.50');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}
});
});
});
</script>
</html>
Using the code at the bottom, the a href part does show the relevant link where my mouse is at, but when I click it it just redirects to .../index.php#.
I need some coding help - so it redirects me to the actual url - which is held in var totalService3 = data.getValue(e.row, 4); and as I said, is being shown in the tooltip div.
regards
Peter
google.visualization.events.addListener(tree, 'onmouseover', function (e) {
var provider = data.getValue(e.row, 0);
var totalService = data.getValue(e.row, 2);
var totalService2 = data.getValue(e.row, 3);
var totalService3 = data.getValue(e.row, 4);
// populate the tooltip with data
$('#tooltipTopLine').html(provider);
$('#tooltipMiddleLine').html(totalService);
$('#tooltipBottomLine').html(totalService2);
$('#tooltipHyperlink').html(totalService3);
// show the tooltip
$('#tooltip').show();
});
google.setOnLoadCallback(drawVisualization);
// make the tooltip div follow the mouse
$(function () {
$('#visualization').mousemove(function (e) {
$('#tooltip').css({
left: e.pageX,
top: e.pageY - 40
});
});
});
}
<div id="container" style="width:400px; height: 1200px;padding-top: 20px;">
<div id="visualization" style="width: 400px; height: 400px;"></div>
<div id="tooltip" style="padding-bottom:10px;"> <span id="tooltipTopLine"></span>
<br />Price 1 <span id="tooltipMiddleLine"></span>
<br />Price 2 <span id="tooltipBottomLine"></span>
<br />Link
</div>
Not tested:
google.visualization.events.addListener(tree, 'onmouseover', function (e) {
// your code
$('#tooltip a').attr('href', totalService3);
// show the tooltip
$('#tooltip').show();
});
or
google.visualization.events.addListener(tree, 'onmouseover', function (e) {
//your code
$('#tooltipHyperlink').attr('href', totalService3);
// show the tooltip
$('#tooltip').show();
});
i have grid and print icon..if i click print icon i should print the grid.but grid lines are not showing in the printout.
What should i do?
Here is my code
<div style="float: right" id="hide_div"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div class="clear10"></div>
<div class="pnlMainHeader" id="pnlMainHeader" style="display: none; ">
//some xyz code
</div>
<div class="clear10"></div>
<div id="div_print">
//grid code
<?=$this->TemplateRoles?>
</div>
and onclick printPage code in .js file
function printPage(printpage1, printpage2)
{
var hideDiv = document.getElementById('hide_div')
hideDiv.style.display = 'none';
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr1 = document.getElementById(printpage1).innerHTML;
var newstr2 = document.getElementById(printpage2).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr1+newstr2+footstr;
window.print();
document.body.innerHTML = oldstr;
location.reload();
return false;
}
please help me..
What if you were to add another css file to the header that will force the borders to print? Something like this...
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Then inside the file, you can use that class or selector with something like this:
.gridClass /*(or "td" or whatever it is called)*/ { border:1px solid #000;}
Whatever is named in the print.css will only appear when printed because you specify the medium. I hope that helps.