I have created a Flipping div (transitions and 3d transforms) based on http://css3.bradshawenterprises.com Flipping content Demo 1.
It works great on all browsers, but IE 9 does not support transitions and 3D transforms. I don't need the div to FLIP for IE9, but i would like the .face.front side of the image to show, instead the .face.back side appears. I would like to write a JavaScript to say if IE9 or lower, then display .face.front
http://jsfiddle.net/RC7WH/
I solved my own problem. Since IE9 does not support 3D transform, it moved from the face front div to the face back side. i wanted that faceback side to be ignored, so that i would show the facefront side. this is the DIV:
<div class="perspective">
<div id="f1_container">
<div class="f1_card shadow">
<div class="front face">
<img src="images/rocks01.jpg" width="448px" height="276px" alt="rocks talk"/>
</div>
<div class="back face center">
<img src="images/rocks11.jpg" width="448px" height="276px" alt="rocks talk"/>
</div>
</div>
</div>
</div>
I created an IE condtion which i placed within the html and now the front side is visible. WHich is all I wanted.
<!--[if IE 9]><html>
<style type="text/css">
.face.back{
visibility:hidden;
}
</style>
<![endif]-->
This is all I wanted. I have embedded my design in a scroll-parallax horizontal code. Thank you Paul Irish for the HTML5 tag idea. See this in: http://jsfiddle.net/eJnns/113/ Thank you http://jsfiddle.net/Q7YU3/ for the perspective / parent /child that helped me use 3d Transform in Firefox 14.
if you put the front div second then it will stay on the front in IE9
<div class="front face">
<p> front side</p>
</div>
<div class="back face center">
<p> back side</p>
</div>
change it to this ...
<div class="back face center">
<p> back side</p>
</div>
<div class="front face">
<p> front side</p>
</div>
see sample in IE9 here http://jsfiddle.net/eiu165/vdrXZ/1/
Related
Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.
first see my fiddle code,
On hover any div, it will flip, after fliping back side text and style not showing on IE 11
Please check on chrome or Firefox its working fine
Apply rotation not to the parent but to the front and back panels themselves. For this create a front panel, you have only a back one at the moment:
<div id="one">
<div class="front face">
<h3 class="text">Developer</h3>
<span class="glyphicon glyphicon-eye-open"></span>
</div>
<div class="back face center">
<p>one Back Side</p>
</div>
</div>
Each panel has backface-visibility:hidden
Demo
P.S. didn't understand why you need preserve-3d...
So I've been working on a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:
<section id="intro">
<div class="info">
<div class="container">
<div class="row">
<div class="col-full"><h1>My Name</h1></div>
</div>
<div class="row"><div class="col-1-4 centered line"></div></div>
<div class="row">
<div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
</div>
</div>
</div>
<nav id="nav">
<!-- The content between <span> </span> tags will be hidden on mobile version -->
<ul class="clearfix">
<li>Pro<span>file</span></li>
<li>Ski<span>lls</span></li>
<li>Exp<span>erience</span></li>
<li>Edu<span>cation</span></li>
<li>Por<span>tfolio</span></li>
<li>Con<span>tact</span></li>
</ul>
</nav>
</section>
Originally, I wanted to set the background of the entire section using
dataUrl = canvas.toDataURL();
document.getElementById("intro")[0].style.background='url('+dataUrl+')'
but that didn't work, so I ended up going with
dataUrl = canvas.toDataURL();
document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'
which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.
My first thought was to simply add
document.getElementById("nav")[0].style.background='url('+dataUrl+')'
but that didn't work. I had some success with
document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'
but only the area immediately surrounding the text used the animated background; the rest was still blue.
So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.
Anyone have any thoughts?
I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.
So do document.getElementById("intro").style.background='url('+dataUrl+')'
I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>
I have a div inside which I have placed images of many languages. The total size of the div goes above the page size in a browser. So I want the images to keep moving from bottom to top like animation slider. Image size is not what I am looking to change. I just want the images to keep moving from bottom to top. At the end of this website http://www.veepal.com/ there is a div that has images of different programming languages which keep sliding. I want similar functionality. Is it possible??
<div id="languagesRow" style="position: absolute;top:5px;">
<div id="l1"><img class="messagesOne" src="images/languages/English.png"></div>
<div id="l2"><img class="messagesOne" src="images/languages/French.png"></div>
<div id="l3"><img class="messagesOne" src="images/languages/Russian.png"></div>
<div id="l4"><img class="messagesOne" src="images/languages/Chinese.png"></div>
<div id="l5"><img class="messagesOne" src="images/languages/Korean.png"></div>
<div id="l6"><img class="messagesOne" src="images/languages/Hindi.png"></div>
</div>
I dont know what can be used more optimally to achieve this kind of animation so I am tagging jquery, javascript and css in this post.
Well you can use marquee for this:
http://jsfiddle.net/ZB2Fc/
<div class='flags'>
<MARQUEE BEHAVIOR='SCROLL' HEIGHT='25' WIDTH='300' BGColor='yellow' scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<div id="l1">English</div>
<div id="l2">French </div>
<div id="l3">Russian </div>
<div id="l4">Chinese </div>
</MARQUEE>
</div>
CSS Marquee is one option : http://jsfiddle.net/FbKW9/
<marquee behavior="scroll" direction="up" >//item</marquee>