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
Related
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.
Hi I found a cool animation on this website:
On the middle of the page (right side) there is a review section that the texts are shown in a cool manner. I want to add that kind of effect on my project I am building now but I am not familiar with the effect type and the algorithm itself. Does anyone knows it and how to code such thing?
Thank you.
You just have two divs with different speed of animation, like this:
HTML
<div class="one"></div>
<div class="two"></div>
jQUERY
$('.one').animate({top:100}, 500);
$('.two').animate({top:200}, 1000);
That's it, you need to set the proper top of course based on the height of the divs (get that dynamically).
Im creating a background animation and i'm having issue when for some reason there is a link anchor in the site content. The animation still works but it cuts the site header section and it wont allow you to scroll back to the top of the site.
Not sure I explained this properly but it is much easier to see it working here:
Example of the animation working ok on the index page
Example of the animation causing the header to be cut off
How can i fix this behavior? (I have absolutely no idea)
EDIT. FIXED IT BY ADDING position FIXED. Thx all.
Ok I found it is due to container-fluid class applied to the div having animation-container id.
please replace following statement :
<div id="animation-container" class="container-fluid">
by
<div id="animation-container" class="">
In your viewtopic.php page.
Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.
Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>
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