I'm using FullCalendar and I just integrated tippyJs for popover. It is having layout issues related to what seems to be zIndex. I have attached the Screenshot of my problem. You can see that popover is hiding behind the event wrapper. plus it is also not clickable. I can use some help in showing complete popover box above anything. Your help is greatly appreciated. Thanks
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
theme: 'light',
zIndex: 9999,
});
tippy v6.x has prop appendTo read here
so you can try appendTo: () => document.body
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
appendTo: () => document.body,
theme: 'light',
zIndex: 9999,
I don't know if you found a solution about it but I had the same problem. The library (CSS) was badly imported for tippy.js and popper.
So I just had to add the cdn file in the index.html and all worked fine.
I had these files in index.html
<!-- Development -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5"></script>
<!-- Production -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5/dist/tippy-bundle.iife.js">
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,
});
Remove the interactive params, it should normaly works :)
Related
I am trying to change the CSS on specific elements inside the page (since I need them to be different on specific pages) Trying to do this to no avail.
<script>
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
$(document).find('.screen-nav li a').css({
'color': '#fff'
});
$(document).find('.screen-nav li a:after').css({
'background-color': '#fff'
});
</script>
However you are trying to find the html element from document which runs before DOM is ready. Therefore you need to bind you find function after DOM is ready and jquery script should be with in document.ready function and try to change css property from jQuery like this:
HTML
<nav class="screen-nav">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</nav>
JQUERY
$(document).ready(function(){
$('.screen-nav li a').css({
"background-color": "yellow",
"font-size": "200%",
"color":"#000"
});
});
Working demo here
Its better to execute these CSS changes after the document has completed loading.
$(document).ready(function(){
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
});
You can also reduce the code above to simply query the objects from the class. Since your parent object is the document, you can directly use JQuery selectors on the CSS classes
$(document).ready(function(){
$('#nav-icon span').css({
'background-color': '#333'
});
});
I have an owl carousel,
The navigation on it looks like this:
I want to make only two navigation buttons that look like this:
I tried to do addinf this line :
$(".owl-carousel").owlCarousel({
navigation: true,
navigationText: ["<img src='resources/img/arrow-left.png'>","<img src='resources/img/arrow-right.png'>"]
});
But it doesn't work. Is there a way that I can delete one of the dots and make the other two apear like in the picture.
Add this
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.owl-carousel').owlCarousel({
loop:true,
dots:false,
nav:true,
});
});
</script>
Another Solution is just remove *= require owl.theme this css
and keep only navigation: true
$(".owl-carousel").owlCarousel({
navigation: true
});
Every time JWPlayer finished playing a video it fades to black. I'd rather it just showed the last frame of the video. Is there any way to do that?
<script type="text/javascript" src="jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").remove();
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
jwplayer('video').load();
jwplayer('video').play();
}
</script>
</head>
<div id="video"></div>
<body>
<script type="text/javascript">
jwplayer("video").setup({
file: "vid.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
</script>
<p>Vid2</p>
It won't show the last frame of the video, but you can just supply a poster image, which it will show before playing and after playing. Better than a blank screen.
You can use our JavaScript API to stop a second before the end of the video.
I actually wrote a small plugin for this.
Demo - http://www.pluginsbyethan.com/github/stopatend.html
Plugin - https://github.com/emaxsaun/stopatend
Hope this helps you!
Edit:
For your changeVideo function, use this instead:
function changeVideo(filename) {
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
}
By calling setup you are basically removing already, and you can't just do a load() by itself, and doing load() is the same as autostart = true, try that.
Here is a full HTML page of how to do this.
I could not add the full stop at end script here because it was too long for the answer, but I've tested this and it works.
<!DOCTYPE html>
<html>
<head>
<title>Change Video</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript" language="javascript">
jwplayer("player").setup({
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
//PUT ENTIRE STOP AT END SCRIPT HERE
function changeVideo(filename) {
jwplayer("player").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
//PUT ENTIRE STOP AT END SCRIPT HERE
}
</script>
<p><a href="#" onclick='changeVideo("http://vjs.zencdn.net/v/oceans.mp4");'>Vid2</a></p>
</body>
</html>
There is a much easier way to show the image at the end of the video. Just include this code:
playerInstance.onComplete(function() {
playerInstance.stop();
});
This works in jwplayer version 7. If you use version 6 you want to upgrade to 7 to get rid of the logo. You need a key for 7, but it is free for personal use.
I use this function with multiple videos in a custom playlist. The entire Javascript code looks like this:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "fileA.mp4",
image: "fileA.jpg",
width: 996,
height: 560,
captions: {
fontSize: 12,
backgroundOpacity: 50
},
tracks: [{
file: "fileA.srt",
"default": true
}]
});
playerInstance.onComplete(function() {
playerInstance.stop();
});
function playVideo(video,img,cc) {
playerInstance.load([{
file: video,
image: img,
tracks: [{
file: cc,
"default": true
}]
}]);
playerInstance.play();
};
</script>
A click in your custom playlist should result in a call to playVideo. If you don't use captions you can omit cc and the captions and tracks blocks. Every video will show its corresponding image when playing is complete.
I need my images to appear with its original ratio on my tumblr posts, but for some reason they lose a little bit of their bottom when stacked with multiple images. I'm no programmer, my limited knowledge allowed me to find where the code for that might be but I don't know how to program it to fix this issue.
Here's an image demonstrating the problem: http://i.stack.imgur.com/Ta0Tm.jpg
Where I think the code might be:
</script>
<script src="http://static.tumblr.com/wofln30/2XXmyt1i0/jquery.colorbox.js"></script>
<script src="http://static.tumblr.com/wofln30/lFrmyt0d1/jquery.photoset-grid.min.js"></script>
<script>
$('.photoset').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '5px',
onComplete: function(){
$('.photoset-grid-lightbox').attr('style');
$('.photoset-grid-lightbox a.photoset-cell').colorbox({
transition: "none",
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
Thanks in advance and sorry for eventual "noobiness", feel free to call me out on that.
In my facebook page tab app I have a couple of different pages that are of different height. As title says, the page pushes the height up when necessary, but the window height doesn't return to shortest possible when I go back to a page that doesn't require much height. This is how it looks:
http://www.facebook.com/EasterIslandTraveling/app_167418876720611
The "Basics" page is the tall page I'm referring to.
After FB.init i use FB.Canvas.setAutoGrow(); which should do the trick, right? What am I doing wrong?
When using FB.init(), first fb js library must be initialized. So you have to include FB.init() function inside window.fbAsyncInit event like as follows:
window.fbAsyncInit = function() {
FB.init({ appId: 'FB APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 700 });
}
You can think as you are writing a javascript inside document ready event...
$(document).ready(function(){ /* Js Code */ })
You can decrease the height by using this given below code
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 600 }); // You can set height here..
}
</script>
This is working perfectly for me. Let me know if it doesn't work!!