I got the static images to resize but the video doesn't when the browser size is adjusted. This is probably because I've added a width into the script. However, if I just leave videoWidth: true, then the video becomes tiny.
On the website (http://imdarrien.com/work/Kami/kami.html)
https://jsfiddle.net/9NJ2k/6/
Here is the offical demo from the website (http://www.owlcarousel.owlgraphic.com/demos/video.html)
video:true,
videoHeight: 500,
videoWidth: 856,
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(play_button.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
opacity:1;
transition: all 1s;
}
When videoWidth: false
By adding "responsive:true" option and changing video tag width 100%;height:auto you can get video as responsive.
Demo: http://jsfiddle.net/nLz17fcv/5/
script:
$(document).ready(function() {
$("#carousel").owlCarousel({
items:1,
autoPlay : 5500,
stopOnHover : true,
center:true,
navigation:false,
pagination:false,
goToFirstSpeed : 1300,
singleItem : true,
autoHeight : true,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
video:true,
transitionStyle:"fade",
onTranslate: function() {
$('.owl-item').find('video').each(function() {
this.pause();
});
}
});
})
CSS
.owl-carousel {width:90%; margin: 0 auto;}
.owl-carousel img{width:100%;height:auto;}
I completely agree that the addition of "responsive:true" option and changing the video tag
width:100%;height:auto
you are able to get video as responsive.
Related
I'm using the slick carousel. I want the background-url to have a 100% height
here is my carousel
http://jsfiddle.net/84c8gvkt/3/
HTML:
<section>
<div class="carousel-container">
<div class="fill" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
<div class="slide" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
</div>
JS:
$('.carousel-container').slick({
dots: true,
infinite: true,
speed: 3000,
fade: true,
cssEase: 'linear',
autoplay: false,
pauseOnHover: true,
});
CSS
html, body {
width: 100%;
height: 100%;
}
.fill {
padding: 0px;
width:100%;
height:100%;
background-position:center;
background-size:cover;
}
.fill:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
}
I can't figure out where it's going wrong.
Can you help me? Thnx!
The problem appears to be coming from the fact that neither your section or your .carousel-container have 100% height, nor do any of the elements generated by your slick carousel.
The easy fixed would simply be to use viewport units instead of a percentage on the .fill element.
Try making the following change:
.fill {
height: 100vh;
}
The vh unit is pretty well supported across all browsers. Can I use
This may not necessarily be the best way to do it for what you're trying to achieve, but just a suggestion.
http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!
I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});
Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.
the app I am working on right now requires the user to hover over an icon, which launches a tooltip, which the user can click a link inside of to launch a fancybox with the corresponding product. I am running into the problem of the tooltipster not launching the fancybox.
Here is the code I am currently using.
HTML:
<body class="body">
<div class="main-container">
<div class="column">
<div class="anicontainer">
<a id="p1tooltip" class="overlay" href="javascript:void(0)" >
<img src="icon.png"/>
</a>
</div>
</div>
</div>
CSS:
.main-container {
position: absolute;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
z-index: -1;
height: 1080px;
width: 1920px;
background-image: url(../bk.png);
background-size: 1920px 1080px;
background-repeat: no-repeat;
display: inline-table;
border: 1px solid #C0C0C0;
border-radius: 5px;
}
.anicontainer {
z-index: 100;
width: 1530px;
height: 1080px;
margin: 0 0 0 0;
padding 0 0 0 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
display: table-cell;
vertical-align: top;
}
.column {
display: table-row;
z-index: 100;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
}
#p1tooltip {
top: 440px;
left: 290px;
}
.overlay {
display: table-cell;
height: auto;
width:auto;
position:absolute;
z-index: 5;
}
First Code I tried JS:
$('#mst').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
contentAsHTML: 'true',
content: $('<p class="font tt">Title</p><hr><p class="tt font"><a id="p1" href="javascript:void(0)"><img src="icon.png"/></a>Product1</p>')
});
Second Code I tried JS:
$('#p1tooltip').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
content: $('<p class="font tt">Title:</p><hr><p class="tt font"><a class="fancybox" href="javascript:$.fancybox( {href : '
product.html '} );"><img src="icon.png"/></a>Product1</p>')
});
JSFIDDLE
Your problem is that the Fancybox link inside the tooltipster content option doesn't exist in the DOM when the Fancybox trigger initialises everything.
Solution would be to set your tooltipster content option to an element already on the page (a div inside of a hidden div should work fine), or to reinitialise Fancybox inside the tooltipster functionReady callback option.
Javascript is a functional language, you can just pass a new function back through the options.
Example:
$('#p1tooltip').tooltipster({
functionReady: function () {
$("a.fancybox").fancybox();
}
});
first thing I see : do not use $('<p>aaa</p><p>bbb</p>') but $('<div><p>aaa</p><p>bbb</p></div>'). It's important fot Tooltipster to have only one container tag for all your stuff, it makes a difference in some cases.
If that's not enough, please prepare a JSfiddle, it will be easier to debug for everyone.
I found this jQuery slideshow called Skitter. it's awesome! so I implemented it in my latest project.
I am using square effect..
$(document).ready(function(){
$('.box_skitter_small').skitter({show_randomly: true, dots: true, interval:1000, numbers_align: 'center', theme: 'square'});
});
I could not find the function.Please help me
modify Square theme css width and height in skitter.styles.css inside css folder
it has some default setting for every theme
look the first default lines
/* =Square theme
-------------------------------------------------------------- */
.skitter-square .play_pause_button,
.skitter-square .next_button,
.skitter-square .focus_button,
.skitter-square .prev_button
{
display: block;
background: url('../images/sprite-square.png') no-repeat;
}
.skitter-square .play_pause_button {
background-position: -55px -0px;
width: 55px;
height: 55px;
top: 10px !important;
left: 10px !important;
bottom: auto !important;
right: auto !important;
margin-top:0;
}
.skitter-square .play_pause_button.play_button {
background-position: -0px -0px;
width: 55px;
height: 55px;
}
I have a grid of logo's. You can either double click the logo to get rid of it or you can drag it to a specified square where I would like it to reveal some details about that logo.
Here is the tool in question:
Drag or Hide a Logo
I have two questions if you could please assist me:
When I drag a logo to the droppable square, how would you reccommend I collect information about that specific logo and reveal the information next to the droppable area?
When I double click a logo that has been dropped onto the droppable area, that logo will disappear. After it disappears, how can I redefine that droppable area again and use it for other logos?
If you see any other information I may have screwed up please let me know the better way of executing. Thank you so much!
Here's the jQuery:
<script>
$(document).ready(function() {
$('.imageShowing').dblclick (function() {
$(this).stop().animate({
zIndex: '1',
height: '100',
width: '140',
}, 100, function() {
$(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })
$(this).stop().animate({
zIndex: '1',
top: '500',
opacity: '0'
}, 700, function() {
$(this).hide("fast");
// Animation complete.
});
});
});
}); //end document.ready
$(init);
function init(){
$('.imageShowing').draggable( {
containment: '#wrapper',
cursor: 'move',
snap: '#droppable',
stop: cardDropped,
start: objectGrabbed,
revert: true,
});
$('#droppable').droppable( {
drop: handleCardDrop,
hoverClass: 'droppableHover',
accept: '.imageShowing'
});
}
function objectGrabbed(event, ui) {
$(this).stop().animate({
zIndex: '100',
},0,function() {
$(this).stop().animate({
opacity: '.5'
}, 500);
});
}
function cardDropped() {
$(this).stop().animate({
opacity: '1',
zIndex: '12'
}, 500);
}
function handleCardDrop( event, ui ) {
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
</script>
And the CSS if you need it:
#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 536px; margin: auto; background: url(images/gridLine.png) repeat-y top; padding:0; position: relative; z-index: 5;} /* height equals 134 X 4. Each horizontal grid is 134 in height and 950px in width */
#logoWrapper {position: absolute; top: 2px; left: 36px }
#logoWrapper ul {text-decoration: none; list-style-type: none; margin:0; padding:0; }
#logoWrapper ul li {list-style-type: none; float: left; position: relative; padding: 0 6px 6px 0; height: 128px; width: 180px; margin: 0;}
#logoWrapper ul li img { margin:0; position: absolute; z-index: 6;}
#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}
#droppableWrapper {border: dashed 5px #666; width: 180px; margin:0 auto; }
#droppable {height: 128px; width: 180px; background: #CCC;};
.droppableHover {background: #333; }
For your first question.. For me it would depend on:
a) how much info you will be displaying,
b) where is that info being stored (in the html? data attributes of logo? ajax?)
To me, this feels like more a design question than anything, but once i know where the data is and where it's going, I would just create a function for retrieving it, putting it in a template, and displaying it on the page. Then hook into your drop callback.
For your second question... It looks like you just need to 'enable' droppable again. Maybe something like $('#droppable').droppable('enable') after your dblclick animation is done, but I would look at the jquery docs for specifics on that.