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...
Related
I am working on a bootstrap page (3.0). I have several small panels across the top of the page that are visible. Below these panels I have larger panels that contain much more detail of the small panels across the top that are hidden by default. When a user clicks on one of the small panels across the top, it hides the small panel and displays hidden larger stacked vertical panels below it with the additional info.
I need to make it so that whichever hidden panel is selected to open, that it will always show 1st (above all other visible divs). The problem I am having is they are showing in the order the divs are hard coded in the HTML, however users will not see the new div load unless they scroll down to see it visible on the page. I need all newly clicked panels to load 1st, so users will always see it load above all other now visible divs.
I am still learning jQuery/js.
So, for my top (small) panels, I have a link in the panel-footer that opens the associated larger panels when clicked. It hides the small panel when clicked, then shows the hidden panel (adds a zommIn animation as well). Then when a user closes the larger panel, it hides it again, then adds the small panel back to the top panels.
It is all working great, I just need to prepend the hidden divs to ALWAYS display as 1st (above the other visible divs).
Here is an example of the jQuery I am using to show the larger panels and hide the associated small top panels...
//Device Panel
$("#openDashDevices").click(function(){
$("#dashDevice").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashDevice").removeClass("zoomIn");
}, 1000);
$("#dashDevice").removeClass("hide");
$("#topPanelDevice").addClass("hide");
$("#topPanelDevice").removeClass("show-inline zoomIn");
});
And here is the jQuery I am using that closes/hides the larger panels and re-shows the hidden small panel across the top...
//Device Panel
$("#closeDevicePanel").click(function(){
$("#dashDevice").addClass("hide");
$("#dashDevice").removeClass("show zoomIn");
$("#topPanelDevice").addClass("show-inline zoomIn");
window.setTimeout( function(){
$("#topPanelDevice").removeClass("zoomIn");
}, 1000);
$("#topPanelDevice").removeClass("hide");
});
HTML of ONE of the top panels:
<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns sortable">
<div id="topPanelDevice" class="dashboardDevices dashboardPanels show-inline animated">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
<div class="row">
<div class="col-xs-3 dashIcon">
<i class="icon-device"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">1344</div>
<div class="dashSubText">Computers</div>
</div>
</div>
</div>
<a id="openDashDevices" class="dashPanelFooter" href="javascript:void(0);">
<div class="panel-footer">
<span class="pull-left">View Devices</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
And here is the html of ONE of the larger panels (hidden by default)...
<!--Opened Dashboard Panels-->
<div class="openedDashboardPanelsGroup sortable">
<div id="dashDevice" class="dashboardDevices dashboardPanelsOpen col-sm-12 animated hide">
<div id="panelDevices" class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelBottom"><i class="fa fa-arrows"></i></div>
<div class="pull-right"><button id="closeDevicePanel" type="button" class="close" title="" rel="tooltip" data-original-title="Close Panel">×</button></div>
<div class="row">
<div class="openDashTitle">
<div class=""><i class="dashIcon fa fa-bar-chart"></i>Devices</div>
</div>
</div>
</div>
<div class="panelDashboardContent">
<div id="maintStatsContent" class="maintenanceStats" type="maintenanceStats">
Maint Stats goes here
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing my top panels and a couple of the larger panels opened...
Instead of hard coding the html I would create it dynamically with jquery. That way you can just prepend it to the container.
$("#closeDevicePanel").click(function() {
$('.containerclass').prepend('yourhtml');
}
I got it to work. I just needed to use prependTo. For example, to open the Alerts panel...
//Alerts Panel
$("#openDashAlerts").click(function(){
$("#dashAlerts").prependTo(".openedDashboardPanelsGroup");
$("#dashAlerts").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashAlerts").removeClass("zoomIn");
}, 1000);
$("#dashAlerts").removeClass("hide");
$("#topPanelAlerts").addClass("hide");
$("#topPanelAlerts").removeClass("show-inline zoomIn");
});
This now loads with my animation just like I need, and always prepends it as the 1st child of the parent div.
I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV
I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?
The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it
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 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/