I need display youtube videos when click an image, it displays youtube videos as new popup.
Here is my code:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"> </script>
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("a.youtube").YouTubePopup({ autoplay: 0 });
});
</script>
</head>
<body>
<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>
when click an image it didn't change anything.
Can anyone help me?
Thank you!!!
Try this
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"> </script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("img.youtube").YouTubePopup({ idAttribute: 'id' ,'clickOutsideClose': true,});
});
</script>
</head>
<body>
<img id="4eYSpIz2FjU" class="youtube" title="..." src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg">
</body>
</html>
DEMO
Related
I have this weird bug. If I add box2dweb to my list of javascripts. My bootstrap tooltip will no longer accept HTML. I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn-sm btn-primary col" id="btn-test" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<font size='30'>Tooltip</font> <u>with</u> <b>HTML</b>">Test</button>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
It doesn't render the HTML in the tooltip as HTML. But if I remove the script line which is embeding box2dweb it will work.
Is there a way to fix this?
Box2DWeb: Github
Make sure that you include
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
in <head> tag
and
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
outside <body> tag.
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
Trying to create Backbone model and got error. I have added jquery, underscore and backbone but there is still error.
var Alco = Backbone.Model.extend({
defaults: {
price: 100,
name: "Vodka",
description: "I don't know",
img: "http://xo.kz/media/images/products/2016/02/i1g1_small_13.png"
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/mainstyle.css">
<script src="js/main.js" type="text/javascript"></script>
<title> AlcoWiki </title>
</head>
<body>
<script src="js/jquery-1.12.2.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</body>
</html>
if all referenced files are there, and loading, then this should work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/mainstyle.css">
<title> AlcoWiki </title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="js/backbone.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
I've changed the layout file in yii and now the problem with identifying the select2 function.
I've checked the source code - seems identical in both cases. In both of them the select2.js is present: <script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
Source code of one where the problem appears:
<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 rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>tarex. Page3</title>
some css files are here...
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="assets/35648952/jquery.yii.js"></script>
<script type="text/javascript">
jQuery(function($) {
jQuery('body').on('change','#_lang',function(){jQuery.yii.submitForm(this,'',{});return false;});
jQuery('body').on('change','#Cityes_Name',function(){jQuery.yii.submitForm(this,'',{});return false;});
});
</script>
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
</head>
The source code where there is no problem:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="language" content="en" />
<link rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
<!-- blueprint CSS framework -->
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>Главное меню</title>
</head>
What might be the problem in?
You are applying jQuery few times. Load jQuery only once with Yii::app()->clientScript->registerCoreScript('jQuery')
Hello friends i am making a coming soon
HTML template and using countdown timer ,
i want to make time
refresh automatically after 1 sec
i want to make the javascript execute atumatically
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until: new Date(2014, 5 - 1, 1)});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>
Can not find your script jquery.countdown.pack.js. But you can try https://github.com/hilios/jQuery.countdown
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/hilios/jQuery.countdown/master/dist/jquery.countdown.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown("2014/14/04",function(event){
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>