Is it possible to have fixed elements (Text here) between just the slides?
The only way i could achieve this was by putting the text element outside of the slides div.
<div class="section" id="section1">
<div class="intro">
<h1>URL get updated (#)</h1>
<p>
Easy to bookmark and share
</p>
</div>
<div class="slide" id="slide1">
</div>
<div class="slide" id="slide2">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
</div>
</div>
Am not sure whether this is the right way, please correct me if am wrong.
Here's my fiddle
Yeah, that's ok.
There's a bug in Chrome with fixed positioned elements and the css3 translate3d property, although it seems it can be solved when using z-index as you can see here.
.intro {
position: fixed;
-webkit-perspective: 1000;
z-index:1;
}
In any case, I believe its better to go for your option. We don't know if Chrome will change its behavior in a future regarding this trick.
Related
I am so stuck, and wondering if I should continue relying on translate3d for scrolling.
I'm building my own custom slider/carousel that can show multiple posters at a time depending on screen size. But when I scroll using my mouse, I get mixed results, if I don't use the buttons, it scrolls using the mouse all the way back and forth just fine, but as soon as I click any of the left/right buttons, the mouse will stop scrolling.
I have a left and right button (absolute.) On each scroll, they scroll a set of items (3 - 5 items) using translate3d(), and they work perfectly fine and as expected.
<div class="container" style="display:flex; position:relative">
<!---- Slider ---->
<div class="slider" style="display:flex;>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<!--- more slides -->
</div>
<!--- buttons on opposite ends of the slider, scrolls using translate3d() --->
<div class="left" style="position:absolute;"></div>
<div class="right" style="position:absolute;"></div>
</div>
The solutions that I have tried to make translate3d work are below.
Force browser to create a new layer by adding Translate3D() to the slider and all of its children,
Reverse container, then reverse slider to undo container's reversal. For this, I tried both transform scale, and flex-direction, but none of them worked 100% of the time. Very mixed results.
Will-change, was happy when I saw this but it didn't work.
A few more hacky methods. But none really worked for me.
My gut is telling me to just go with scrollLeft, or scroll into view, and call it a day. But I heard the performance of translateX is far superior, has this been absolutely confirmed? And are there any fairly recent, adopted alternatives out there that also perform well?
Thanks
I have the following HTML code generated dynamically. I need to set the height of the div that has the height as 34px to 0px. Since this div does not have a class or an id, I am unable use any of the DOM manipulation options like .getElementById(), .getElementByClassName, or .getElementByTag(). I need to set the height of this div to 0 using JavaScript.
EDIT
I apologize, I should have asked the question in a better manner, and I should have anticipated, and understood the need in advance before asking the question. This is what I truly need:
<div class="fht-cell">
<div class="filterControl">
<!-- This should stay as it is. -->
</div>
</div>
<div class="fht-cell">
<div style="height: 34px;">
<!-- This height should become 0px. -->
</div>
</div>
<div class="fht-cell">
<div class="filterControl">
<!-- This should stay as it is. -->
</div>
</div>
<div class="fht-cell">
<div style="height: 34px;">
<!-- This height should become 0px. -->
</div>
</div>
Your answer helped me, but since all the parent divs had the class fht-cell, and since we had mentioned child [0] the height for only the first div became 0.
You can use document.getElementsByClassName('fht-cell')[0].children[0] or similar.
first-child selector should do the trick.
https://www.w3schools.com/cssref/sel_firstchild.asp
Found one example that is exactly what I would like to have.
Please resize your window to 700px less and url is http://www.subway.com.au
thanks for reading this.
My layout is as the following:
<div id="left">
<div id="left-container" style="display:none;">Content foo
</div>
</div>
<div id="right">
<div id="right-container" style="display:none;">Content bar
</div>
</div>
<div class="overlay"></div>
Basically, when click either #left or #right, relatively the #left-container or #right-container will slideUp or slideDown, and at the same time .overlay will be showed or hidden. Of course, when containers are slideUp, clicking all screen rather than itself will slideDown and removeClass .overlay.
I know this question has been brought over a lot of times. However it seems still not working for me. Thanks for your time.
I would use a little different HTML for that -
<div id="left" class="header">
A
<div class="container">Content foo
</div>
</div>
<div id="right" class="header">
B
<div class="container">Content bar
</div>
</div>
<div class="overlay"></div>
and with the JS -
$(function(){
$(".header").on("click", function(){
if($(this).find(".container").is(":visible")){
$(".header").find(".container").each(function(){
$(this).slideDown();
});
$(this).find(".container").slideUp();
$(".overlay").show();
}else{
$(this).find(".container").slideDown();
$(".overlay").hide();
}
});
});
Here is the fiddle - http://jsfiddle.net/n8ykqLuy/1/
NOTE: At first I thought your requirement was custom. But I think what you are looking for is an accordion.
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?