slick carousel has a 1px height on server, local environment 100% - javascript

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.

Related

HTML5 Masonry Margin / Gutter Issue when using fixed Sidebar (EDGE & Firefox)

I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine.
This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to correctly calculate the positions. However sadly this is the case and I think it may be related to my sidebar menu.
JSFiddle
Using jQuery(window).load(function(){ does not seem to resolve the issue. Adding the position fixed to the right side container does fix the issue but breaks the scroll and prefer not to use this method if it can be avoided.
I've take the time to add this project to a JSFiddle to help diagnoses this issue.
Dev Site
JsFiddle
Screenshot of Issue
HTML
Unrelated full code can be reviewed on the JsFiddle or my Dev Site.
<div class="amino-wrapper">
<div class="amino-wrapper-left"><!-- SIDE BAR --></div>
<main class="amino-wrapper-right">
<div class="grid">
<div class="grid-sizer"></div>
<img src="#">
<img src="#">
<img src="#">
</div>
</main>
</div>
CSS
Unrelated full code can be reviewed on the JsFiddle or my Dev Site.
img {
max-width: 100%;
height: auto;
}
.amino-wrapper {
height: 100%;
width: 100%;
}
.amino-wrapper-left {
background-color: #1c1c1c;
border-right: 1px solid #eee;
color: #eee;
height: 100%;
left: 0;
padding: 4rem 2rem;
position: fixed;
top: 0;
width: 300px;
}
.amino-wrapper-right {
margin-left: 300px;
overflow-x: hidden;
position: relative;
top: 0;
width: calc(100% - 300px);
}
.amino-wrapper-left header {
left: 0;
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 300px;
text-align: center;
}
.grid-sizer, .grid-item {
width: calc(100% / 3);
width: 33.33%
}
.grid {
overflow: hidden;
}
JavaScript
jQuery(window).load(function() {
jQuery('.grid').masonry({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
gutter: 0,
percentPosition: true
})
});
The following CSS fixed this practical problem for me:
body { overflow-y: scroll; }

Owl Carousel video not responsively resizing

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.

jQuery - Text and Image scrolling effects are not working

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.

How do I launch a Lightbox(Fancybox) from a ToolTip(tooltipsy)?

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.

Javascript only works in Chrome and not Firefox

For some reason, this piece of code work just find in Chrome, but not in Firefox. I have no idea why, so I hope someone can help me.
The div "slideshow" and it's content wont show at all in Firefox. It's like the JS is not even loaded.
HTML
<div id="slideshow">
<div class="slideshow_text">
<p class="txt1">Er du klar?</p>
<p class="txt2">til et <span>NYT</span></p>
<p class="txt3">&</p>
<p class="txt4">BEDRE <span>JEG</span>?</p>
</div>
<img id="slide_1" src="img/ss/large_slide1.jpg" alt="Woman">
<img id="slide_2" src="img/ss/large_slide2.jpg" alt="Woman">
<img id="slide_3" src="img/ss/large_slide3.jpg" alt="Woman">
</div>
JS
$(document).ready(function() {
$("#slide_1").animate({left: 0}, 700);
$(".slideshow_text").slideDown("slow");
$("#slide_1").click(function() {
$("#slide_1").animate({left: "-980px"}, 700);
$("#slide_2").animate({left: 0}, 700);
$("#slide_3").css("left", "980px");
});
$("#slide_2").click(function() {
$("#slide_2").animate({left: "-980px"}, 700);
$("#slide_3").animate({left: 0}, 700);
$("#slide_1").css("left", "980px");
});
$("#slide_3").click(function() {
$("#slide_3").animate({left: "-980px"}, 700);
$("#slide_1").animate({left: 0}, 700);
$("#slide_2").css("left", "980px");
});
});
CSS
#slideshow {
width: 980px;
height: 445px;
margin: 50px auto 25px auto;
position: relative;
overflow: hidden;
}
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
}
.slideshow_text {
display: none;
width: 200px;
background-color: rgba( 255, 255, 255, 0.4);
position: absolute;
top: 100px;
left: 650px;
z-index: 9;
border-radius: 4px;
padding: 15px;
}
.slideshow_text p{
float: left;
width: 100%;
color: #FFFFFF;
}
If you need more details, let me know. Frankly I don't really know what else to write.
Does it help if you put a width and height on your images?
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
height: 445px;
width: auto;
}
What version of jQuery are you using? If you use jQuery 1.9.1 it will work in FireFox, however, with jQuery 2.0.2 it will not [at least checking with an older browser it did not]
Check out this example I created based on your code [no code changed, just using jQuery 1.9.1], does this solve your problem?
Apparently it was my "#wrapper" that collapsed on it self, hiding all the content within.
Adding a height did not do the trick, but adding a border did the trick and the content would show.

Categories

Resources