here's my html code:
echo "<div>";
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo "</div>";
here's my js code:
<script>
var videou = $( "video" ).attr("width", "150") + $( "video" ).attr("height", "80");
$( "video" ).click(function()
{
$(this).attr("width","500");
$(this).attr("height","500");
var open = true;
});
</script>
i want to go back to the original attributes. But i already tried everything. Should i use divs?
Expansion is a transitional event. Do you mean changing the width/height?
Here are expansion methods. As I had mention, check out jQuery's .slideDown() feature. Is this what you were looking for?
Simply replace the code for the .videocontainer with a video frame.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.slideDown('fast', function() { state = true; btn.html('Close Video'); });
} else {
video.slideUp('fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
display: none;
width: 500px;
height: 380px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also to expand the frame look into jQuery's .animate() function.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.animate({width: '500px', height: '500px'}, 'fast', function() { state = true; btn.html('Close Video'); });
} else {
video.animate({width: '100px', height: '80px'}, 'fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
width: 100px;
height: 80px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your question is hard to understand, but based on your js code, maybe is this what you want
<script>
var open = false;
$( "video" ).attr("width", "150");
$( "video" ).attr("height", "80");
$( "video" ).click(function()
{
if(open){
$(this).attr("width","150");
$(this).attr("height","80");
open = false;
}else{
$(this).attr("width","500");
$(this).attr("height","500");
open = true;
}
}
);
</script>
I'm not sure exactly what you are trying to achieve, as your description seems rather vague... If you are wanting a video to be displayed on the click of another element...
echo '<div id="divVideo" style="display: none;">';
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo '</div>';
echo 'Show Video';
<script>
$(document).ready(function() {
$('#aVideo').click(function(e) {
e.preventDefault();
$('#divVideo').show();
}
});
</script>
If that is not what you are trying to do, then please more descriptive and I'll try to help the best I can.
Related
i am trying to create divs that are boxes and do the following on them
1) change the background color
2) make them look like a circle
3) create more boxes(divs)
each has a individual button to fire the events but the boxes wont show and the only the second button works,with the console.log and the console doesnt show any errors at all
here is the html code and style
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" >
</script>
<script src="Query_script.js"></script>
<div class= "packages">
<div></div>
<div></div>
</div>
<button id = "change">Turn Colors on/off</button><br>
<button id = "R-border">Rounded Corners on/off</button><br>
<button id = "create">Add an extra box </button> <br>
<style>
.packages{
border-color: black;
border-width: 5px;
height: 75 px;
width: 75 px;
}
</style>
</body>
</html>
and here is the js and query
let pack=document.getElementById("packages");
let rad= document.getElementById("R-border");
let Adder=document.getElementById("create");
let checker=true;
$(document).ready(function() {
$("#changer").click(function(){
console.log("clicked1");
if (checker==true){
$('.pack').css('background-color','red');
checker=false;
}
else{
$('.packa>div').css('background-color','white');
checker=true;
}
});
});
$(document).ready(function() {
$("#R-border").click(function(){
if(checker==true){
console.log("clicked2");
$('.pack').css("border-radius","50%");
checker=false;
}
else{
$('.pack').css("border-radius");
}
});
});
$(document).ready(function() {
$("#Adder").click(function(){
console.log("clicked3");
$('.pack').append("<div>");
});
});
Maintain CSS selector names properly
I have done some modifications to HTML and javascript. Try this... It's working properly.
let pack = document.getElementById("packages");
let rad = document.getElementById("R-border");
let Adder = document.getElementById("create");
let checker = true;
$(document).ready(function () {
$("#change").click(function () {
console.log("clicked1");
if (checker == true) {
$('.packages').css('background-color', 'red');
checker = false;
} else {
$('.packages > div').css('background-color', 'white');
checker = true;
}
});
});
$(document).ready(function () {
$("#R-border").click(function () {
console.log("clicked2");
if (checker == true) {
$('.packages').css("border-radius", "50%");
checker = false;
} else {
$('.packages').css("border-radius");
}
});
});
$(document).ready(function () {
$("#create").click(function () {
console.log("clicked3");
$('.packages').append("<div>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Query_script.js"></script>
<div class="packages">
<div></div>
<div></div>
</div>
<button id="change">Turn Colors on/off</button>
<br>
<button id="R-border">Rounded Corners on/off</button>
<br>
<button id="create">Add an extra box</button>
<br>
<style>
.packages {
border-color: black;
border-width: 5px;
height: 75px;
width: 75px;
}
</style>
I am trying to show or start count when I click on a youtube embed Iframe .
Here is my code
<iframe id="startcount" width="900" height="400" src="https://www.youtube.com/embed/qAM8wEHPccU" frameborder="0" allowfullscreen></iframe>
<span align="center" style="color:#0091bf; font-weight:bold; font-size:24px;">You will be redirected in
<span id="counter">30</span> second(s) for credit verification. </span>
<script type="text/javascript">
$(document).ready(
function() {
$("#startcount").click(function() {
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
//location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
});
});
</script>
Click on youtube embeded video iframe
start counting
help me I am new in jquery .
Thanks to All
If you are counting down then you should check if the value is greater than 0, not less than 0.
The following code should work:
$(document).ready(function() {
$("#startcount").click(function() {
function countdown() {
var i = $("#counter");
var value = parseInt(i.html());
var interval;
if (value >= 0) { // I think you want "greater equal" (>=) instead of "less equal" (<=)
//location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>';
}
else {
clearInterval(interval); // stop interval if counted to -1
}
i.html(value - 1);
}
setInterval(countdown, 1000);
});
});
I am using another method to complete this task.
Html :
<button id="play-button" class="btn mobile-full" style="padding:10px;"> Play </button>
<iframe id="video" src="//www.youtube.com/embed/NV16WtEXP6E?autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=0&showinfo=1&rel=0" frameborder="0" allowfullscreen></iframe>
<div align="center">
<span align="center" style="color:#0091bf; font-weight:bold; font-size:24px;">You will be redirected in
<span id="counter"><?php echo $vid_duration; ?></span> second(s) for credit verification. </span>
</div>
Css :
.button {
width: 48px;
height: 48px;
cursor: pointer;
&:hover {
fill: white;
}
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 300px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
JavaScript :
<script>
// https://developers.google.com/youtube/iframe_api_reference
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
});
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
This is the only way to play youtube video on mobile and same time start the time counter .
Thanks to all .
I have this code, but I do not know how to hide the video when clicking outside.
Here is my code:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
I tried everything but clearly I am doing something wrong.
Thank you in advance.
This example shows the video when clicking on the image and hides when you click anywhere else:
$(".popup").click(function (e) {
e.stopPropagation();
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
$(document).click(function() {
$("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
The trick is to add a hidden layer on all the screen. When the user clicks on that layer, you will hide the movie.
keep attention to the z-index, it's important.
Like this:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
$('.overlay').show();
});
$('.overlay').click(function(){
$(this).hide();
$('#video-view').html('');
});
#video-view {
z-index: 2;
position:relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index:1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
I have a div containing imgs. I've made two arrows(prev, next) inside a large div using as background url the src of one of the imgs from the first div. I'm trying to make the next arrow, when pressed, to change the large image by using the src from the next one. And start from the beginning afterwards(loop).
JQuery:
jQuery('#next-arrow').click(function() {
var yacht_images = jQuery('#yacht-images img');
var imageUrl = jQuery(yacht_images).nextAll('.yacht-image').attr('src');
jQuery('#yacht-post-image').fadeTo('slow', 0.1, function(){
jQuery(this).fadeTo('slow', 1).fadeIn('slow').css('background-image', 'url(' + imageUrl + ')');
});
});
PHP:
<div id="yacht-post-image" style="background-image:url('<?php echo $post_thumbnail_url; ?>')">
<div id="prev-arrow"></div>
<div id="next-arrow"></div>
</div>
<?php }
global $post;
$images = get_post_meta($post->ID, 'yachts_photo', false);
if ( $images ) {
echo '<div id="yacht-images">';
foreach ($images as $image) {
if ( $image ) {
$image_url = wp_get_attachment_url($image);
echo '<img class="yacht-image" src="' . $image_url . '"/>';
}
}
echo '</div>';
}
I'm sure someone more jQuery-adept could do this better:
Demo: https://jsfiddle.net/9LeLws40/
<style>
#yacht-images img {
display: none;
}
#yacht-images,
.newimg {
height: 300px;
width: 400px;
display: inline-block;
border: 1px solid #000;
background-size: cover;
}
.newimg {
position: absolute;
display: none;
z-index: 1;
}
</style>
<div id="yacht-post-image">
<div id="prev-arrow">PREV</div>
<div id="next-arrow">NEXT</div>
<div id="curr">1</div>
</div>
<div id="yacht-images">
<img class="yacht-image" src="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg"/>
<img class="yacht-image" src="http://dc.itamaraty.gov.br/imagens-e-textos/imagens-do-brasil/fauna/alta-fauna15.jpg/image_preview"/>
<img class="yacht-image" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG"/>
<img class="yacht-image" src="http://map.gsfc.nasa.gov/media/060915/060915_CMB_Timeline300nt.jpg"/>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var yacht_cont = $('#yacht-images');
var yacht_images = yacht_cont.children();
var curr_img = 0;
yacht_cont.css({"background-image":"url("+yacht_images[curr_img].src+")"});
$('#next-arrow').click(function() {
curr_img += 1;
var ThisImg;
if(yacht_images[curr_img] == undefined) {
curr_img = 0;
ThisImg = yacht_images[curr_img].src
$(".newimg").remove();
}
else
ThisImg = yacht_images[curr_img].src;
$("#curr").html(curr_img+1);
$('#yacht-images').append("<div class=\"newimg\" style=\" background-image: url("+ThisImg+");\"></div>");
$(".newimg").fadeIn();
});
});
</script>
I've made it work using this:
function change_main_img()
{
jQuery('#yacht-images img').click(function() {
var imageUrl = jQuery(this).attr('src');
jQuery('#yacht-post-image').fadeTo('slow', 0.1, function(){
jQuery(this).fadeTo('slow', 1).fadeIn('slow').css('background-image', 'url(' + imageUrl + ')');
});
});
}