I have a strange problem it seems to be a simple one but I am unable to find the solution.
I have 3 divs that are generated by the drupal->views and every div contains a button on the bottom and I need to flip the div on button click. Basically, if div #1 is currently displayed and button is pressed the second div is shown with flip effect and same with the third div.
Here is the arrangement:
<div class="views-row views-row-1 views-row-odd views-row-first">
<div id="careers_excerpt_88" class="careers_excerpt">
<div id="careers_description_88" class="careers_description">
<div id="careers_form_88" class="careers_form">
</div>
And the content is within the above three divs.
Now the problem is that I can show and hide these divs but the flip is not working. I have tried many JavaScript plug-ins, some work for two divs.
I just need help on this issue (or perhaps suggest me some good plug-ins).
Check out this tutorial.
No need of a JS lib.
Simply use CSS, and don't forget to properly set these properties on the right elements: transform-style, transition, perspective, backface-visibility and transform.
Beware of the vendor prefixes!
And also of Internet Explorer. [You can find some hacks for it.][3]
I do not know what exactly is your functionality/Intention of the flip divs you are looking for, but here is a plugin which can be moderated to achieve what you want.
Here is the: Demo and Plugin
And Github Link
Hope this helps.
Related
I'm new to web design, but have been tasked with making the website for an organization I'm in.
I've been googling with various keywords but my coding knowledge is only just starting on Javascript and CSS animations.
I'm trying to make a simple pair of buttons to scroll to the next and previous in a series of elements on a page.
A button that takes you to the previous section and a button that takes you to the next section, which is all on the same page.
Everything I've found so far is about having a list of the sections to click to, not two buttons that scrolls between them or it pertains to an image slideshow.
Any help here would be appreciated, Javascript or CSS.
I get the general Idea, I have to give each div a particular ID, set up an event to monitor what's currently in the viewport, and have the buttons set up to onclick to the previous or next sections, but I'm not familiar enough with CSS or Java to code either.
Jumping to the next or previous div is plain HTML, e.g. your markup looks like:
<div id="first">First content</div>
<div id="second">Second content</div>
<div id="third">Third content</div>
Then you can use simple anchors to jump to the different parts, e.g.:
Got to second <!-- Jump to second part -->
Now if you want animated scrolling and not just jumping, you can use a suitable Javascript library, e.g. JQuery. CSS-Tricks has a quite simple example of doing smooth scrolling.
Posted a question yesterday regarding BootStrap and panel collapsables being very dodgy in the fact graph sizes were messing up. It got locked due to there being no code. I have created a code snippet for you guys which demonstrates the exact problem I'm having: http://jsfiddle.net/oeq980ts/1/
<p>the code is on jfiddle :) </p>
For reference this is my post from yesterday https://stackoverflow.com/questions/36109483/collapse-in-bootstrap-issue
put the problem is pretty clear form running the jsfiddle: compare collapse 2 to collapse 1.
Yesterdays post:
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
I was playing around with collapse via Bootstrap and came across a strange interaction with .collapse(Hides the content) and .collapse-in (Shows the content).
By default I set collapse1 as .collapse-in meaning the contents inside it would show: the insides contained a graph (min-width:310px; height: 400px). Fit perfectly, I opened up the collapse2 and to my dismay the same graph was shown very undersized with the width being almost half the size. After playing around with it - the graphs will only show in its proper size when the class collapse is used, otherwise if the class is just panel-collapse collapse, and you click on the collapse to show the contents it will show a completely disproportionate size.
Oh and I should add if .collapse-in is set then the user can collapse/uncollapse and the graph set with collapse in will still display. Bit unfortunate for those who don't want the contents being showed by default.
Probably not going to use this anyway, however I was just really interested in the reasoning behind it.
You can do something like this:
Steps:
Make them all shown up at first load (I mean add in class in collapse div) - This will make them fix by their own, Fitted to it's container as you wish. So collapses will be something like this:
<div id="collapse2" class="panel-collapse collapse in">
Then hide them using jQuery( remove class in to all div that you want to be hidden )
$(document).ready(function(){
$('.collapse').not(':eq(0)').removeClass('in');
});
In here, I just imitate what you did in your fiddle, I hid the first collapse.
Check your jsFiddle again.
I have a div which has two text's that is Text1 and Text2. When the site loads Text1 should fade out and Text2 should be shown. something like modal popup with auto close.
<div class="WelcomeText">
<h1> Welome to my site</h1>
<h1>Company Name</h1>
</div>
I have google for 3 hours can anybody suggest me how to implement or any plugin is available to achieve this ? I am using bootstrap. Also I need to make it work upto IE 7
Update : i have come with a small solution http://codepen.io/anon/pen/RNdYqbm once he issue is fixed will will be adding css animation to it. I need a help where once first text disappears second text should stay? Could any body fix this.
if you want animation based on css3, there are a lot of frameworks, but in my opinion, you can see animate.css in here for references.
Unfortunately, I don't think animation based on css3 can work in IE7
I'm making windows javascript emulation. Right now, I'm creating program windows. They have code like this:
<div class="program" draggable="true">
...more imgs
<img src="./res/img/closeButton.png" title="Close">
<iframe src="./programs/fileExplorer" width="900px" height="500px" class="programBorder"></iframe>
</div>
I need to make whole div draggable (on top bar) and resizable (side and bottom bars full, top only small part). It would be really cool to get it done without javascript (css only), but it is OK to do it with javascript/JQuery
Use jQueryUI instead, http://jqueryui.com/dialog/ it has both draggable and re-sizable options readily available, else you can go through the library and implement the same logic.
Draggable elements
It is currently impossible to make draggable elements without using css+html only. What you could do is just use jQuery to solve this. Alternatively, you could see this answer to another question that explains how to make draggable elements without jQuery.
Resizable elements
This one is indeed possible to do with CSS only, and it's quite simple. Just use resize:both on the element. This table shows the browser support for CSS-only resize, so you should probably consider that when making your site. You could also use jQuery as a fallback for IE.
Here is a demo for the different types of resizing there are.
on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover