Develop Reference

bootstrap/jQuery fade opacity transition not working

I am hoping someone can help!
I am trying to add bootstrap support to an existing jQuery/CSS site. Aside from realizing bootstrap changes a bunch of formatting that I have to fix - it seems to be affecting a popup transition I have, and can't seem to figure out. I hope you can help, thanks!
With regular jQuery/CSS (not UI), I am creating a modal dialog box that I popup.
BEFORE bootstrap - it would "fade" in the popup box (i.e., the opacity/alpha). However, AFTER adding the bootstrap .css/.js - now it just
makes the background grey and totally opaque.
How do I fix it?
This is the code that works with just css/jQuery
<div class=sample-dialog>
<div class=modal-overlay>
<div class=modal-content>
<div class=modal-body>
random content
</div>
</div>
</div>
</div>
then the jQuery popup code that I call
function showModal() {
var m = $('.sample-dialog');
var o = m.find('.modal-overlay');
var c = m.find('.modal-content');
var b = c.find('.modal-body');
m.css('display','block');
o.animate({'opacity':.8},350);
b.animate({'opacity':1,'margin-top':0},350,function() {
c.css('overflow-y','auto');
});
}
This "works" with just the jQuery/css.
HOWEVER, as soon as I add the bootstrap .js/.css file in my header, the exact same transition now shows no opacity (just a grayed out background).
Any idea on how to fix?
As a second thing - I also notice with the bootstrap files added, the transition seems to be 'choppy' as opposed to the nice 'smooth' one I had. If you have insight for that too, that would be great!
Thanks very much!

It may be that the rules of bootstrap transitions are creating conflict, I remember working with version 4.0.0-alpha.6 it was impossible to modify the transition of the height in a model.
These would be the default values ​​of the modal transition (
with the .fade class)
_transitions.scss
.fade.show {
opacity: 1;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
transition-property: opacity;
transition-duration: 0.15s;
transition-timing-function: linear;
transition-delay: initial;
}
This I think could help you;
Enables predefined transitions on various components
$enable-transitions: true (default) or false
Documentation bootstrap#4.0.0-alpha.6 /Customizing variables
Sorry if the bootstrap version does not help, but it's the only version I've worked with.

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael

You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?

It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.

You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}

Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

Animations in AngularJS 1.2 - How To

I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much

Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview

Best approach for "Fade in/fadeout" menu bar on mouse over

First off, my apologies for a lengthy post. I am trying to use CSS, HTML and JavaScript, so please don't recommend using std. libraries.
1)I have found people using different approaches in CSS,HTML and JavaScript to achieve the "fade in/ fade out effect" on navigation bars, some of the approaches using CSS and JavaScript are:
a) Use property "left" to get the submenu outside the screen. Default left :-500px ;onmouseover- left:-10px
b) Use property "visibility". Default visibility: "hidden" and onmouseover-
visibility: visbile
c)use property "display". Default display:none and onmouseover- display:block
My question is which one is the best approach and why?
2)I have used the method a) in this jsfiddle: http://jsfiddle.net/A7TND/.
CSS
.teal-box{
left:-10px;
}
HTML
<div class="level1" onmouseover="showSubs("+")">
Javascript
switch (vwFlg){
case "+" :
elmt.style.left = "-10px";
...
}
In the example, I am not sure whether the function gets called over and over when I am moving between the main item(favorite) and subitems(jsfiddle, google), my questions are:
a) does it get called over and over during the mouse movement between main items(favorites) and sub-items(google and jsfiddle)?
b) how does that(calling javascript function over and over) affect the responsiveness of the page?
3.The approach I did for having multiple images(see the jsfiddle link) separated by , is have multiple divs - where top has different values, is that the best approach? This would mean , I would have to write a div for each image, is there a some spiffy way of using "position" properties absolute and relative to achieve that without creating as many divs as images?
I want to have a table ,how do I get that "button popping out of the page" look ? I tried to debug a commercial web app, it seems they seem to repeat a background image, which I tried, but that did not work.
CSS
.sel-row {
border-style:solid;
border-width:1px;
background-image:url("\lb_sel.gif");
background-repeat:repeat-x-y;
background-color:#CDD2D7 ;
border-color:#8B96A2 ;
height:20px;
}

My approach for something like this, is to have the hidden element be a child of the hover element, then use absolute positioning + display for the hide/show
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li:hover span {
display:block;
}
li span {
position:absolute;
top:25px;
left:0;
display:none;
}
Are you animating the opacity as well?
Use javascript to add a class to the element, CSS3 to animate but understand the browsers that don't use CSS3. Also, don't use display anymore.
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li.show span {
opacity:0;
}
li span {
position:absolute;
top:25px;
left:0;
opacity:1;
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
transition: all .8s ease-in;
}
With a browser that doesn't support css3, I use Modernizr + jQuery for the fallback. You'd have to turn this into a toggle.
if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
$('li span').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
$('li').addClass('show');
}