I would like the volume level element to be expanded from the beginning, without mouse cursor hovering. I am about this element that is hidden by default:
I didn't find any built-in option for it (strange enough). I've been trying to solve it with CSS, but without success.
There is a demo of problem in action that I've created for the question. The code is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Volume Volume Expanded</title>
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet" />
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
</head>
<body>
<video
id="my-player"
class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
>
<source
src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
type="video/x-mpegURL"
/>
</video>
<script>
videojs("my-player", {
muted: true,
autoplay: true,
controls: true,
controlBar: {
children: {
volumePanel: true
}
}
});
</script>
</body>
</html>
You could change the style of volume control
DEMO: https://codesandbox.io/s/videojs-volumelevel-show-forked-6bcc4l
.video-js .vjs-volume-panel .vjs-volume-control {
visibility: visible;
opacity: 100;
width: 5em;
height: 1px;
margin-left: -1px;
}
Another solution. You could add muteToggle and volumeBar to your controlBar.children{}
<script>
videojs("my-player", {
muted: true,
autoplay: true,
controls: true,
controlBar: {
children: {
muteToggle: true,
volumeBar: true
}
}
});
</script>
Related
I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?
With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.
I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!
Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview
I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>
> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">
Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe'
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>',
type: 'inline'
},
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
<script>
</body>
</html>
How can I make a logo float to the right automatically when clicked and make a pop out appear with some info.
Right now I used a button but I want to use a logo..so how can I put in the image instead of the button and also the pop up to appear when clicked on that logo image.
To use an image as the trigger for the pop-up window, it looks like you're using the id "open-popup." You can remove the button and add an image or put an image in the button (I like buttons, but you have to take measure to unstyle it) - so a <a> tag - or whatever you like + add the id of "open-popup."
..button id="open-popup">...
...$('#open-popup').magnificPopup({...
As far as moving the logo on click... you can add a class with jQuery/JavaScript and that class can do the animation.
jQuery
$('.element').on('click', function() {
$(this).addClass('active'); // $(this) refers to the element clicked in this case
});
styles
.element {
transition: .5s; // set speed (look up other options)
}
.element.active {
transform: translate(50%, 0); // random movement example
}
There are many different pop-up / light-boxes. If magnificPopup isn't enjoyable, try another.
This is totally odd.......
Here is my code:
HTML
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>
JAVASCRIPT
$(document).ready(function () {
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
Above examaple doesn't work, the player does not get created in the DOM. But below example does (all I am doing is calling the flowplayer twice).....?!
HTML
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>
JAVASCRIPT
$(document).ready(function () {
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
Why?
Try and remove the Test description of your hyperlink and it should work:
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">**Test**</a>
Try to move the script at the bottom of the page. It's one of the best practices
This is my sample and it works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Set default value</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
</head>
<body>
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px"></a>
<script type="text/javascript">
$(document).ready(function () {
flowplayer('a.video', {
src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
</script>
</body>
</html>
I ran into this issue recently when I had a play icon inside the anchor tag. I ended up emptying the anchor tag HTML on click in order to fix this issue. Sample code below.
HTML:
<a id="videoPlayer" class="videoPlayer" href="[VIDEO_URL]" style="background-image: url(VIDEO_THUMB_URL);">
<img src="/images/icon_video_play.png" width="40" height="40" alt="View video" />
</a>
CSS:
a.videoPlayer {
display: block;
width: 480px;
height: 270px;
text-align: center;
cursor: pointer;
}
a.videoPlayer img {
margin-top: 115px;
border: 0px;
}
Javascript:
$(document).ready(function () {
$("a.videoPlayer").click(function (e) {
// Empty anchor tag to avoid having to click twice
$(this).empty();
flowplayer("videoPlayer", "/flash/video/flowplayer.swf");
e.preventDefault();
});
});