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.
Related
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
}
I've built an app where I browse instagram API and fetch photos. After that is done I use Handlebars to make a template with undordered list and images inside. I'm trying to get images to slowly fade in as soon as the template is loaded, but to no avail. So far it looks like this
In my template I add class hidden that sets the opacity to 0, so then I can just remove the class to show the image.
<template id="image-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>
<img class="hidden" src="{{url}}">
</li>
{{/each}}
</ul>
</template>
After setting everything in JS
var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )
At this point I should have the images in the container, so I should be able to use
$('img').removeClass('hidden')
and have images slowly fade in, however thats not happening.
After a bit of investigating I realised that those images aren't quite available for me, so I set up a pub/sub after adding template to html
$('#container').html(html)
$.publish('insta/photoTransition')
I was sure that calling another function after this would work, but still no result. After that just out of ideas I setTimeout before publishing, and what do you know, my assumptions were true and with a delay it finally worked. However I don't want to wait a set amount of time to show the photos, I would like to show them as soon as possible. Before I try to figure out how deferreds work to try my last idea, are there any better ways to solve my problem?
Just use css transitions.
#image-template img{
opacity: 1;
transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#image-template img.hidden{
opacity: 0;
}
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>>
I'm just getting started with CSS animations controlled via Javascript, and I'm stuck with a problem that I'm sure it's quite simple...
What am I trying to achieve?
I want to have a kind of image zone where some images are displayed with an increasing opacity effect: I want each new image to appear upon the other when the user clicks on the image.
How am I trying to achieve it?
I have a "div" which contains two "img" tags, and I'm simply trying to just animate the upper "img" and then swap the image "src" when the new image has to be shown. Let me explain it:
"img1" is the image at the bottom, which is showing "My first photo".
"img2" is the image at the top, which starts with an opacity of 0.
When the user clicks the image, "My second photo" is associated with the "img2", and "img2" starts and animation to fade in.
When the user touches again, "img1" changes its "src" to show "My second photo", "img2" changes its alpha to 0, changes its source to "My third photo" and starts the fade in animation again.
And so on, making the effect that the new image is always appearing upon the current one.
The bizarre part: the code
As I'm still quite green on CSS animations and Javascript, I'm trying to do it as follows:
index.html:
<div style="position:absolute; top:50%; left:50%; margin-left:-114px; margin-top:-203px;" onClick="canviaImatge();">
<img id="img_1" class="pantalla" src="" style="position:absolute;" />
<img id="img_2" class="pantalla" src="" style="position:relative; left:50px" />
</div>
<script>
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
document.getElementById("img_2").style.opacity = 0;
</script>
index.html (Javascript)
function canviaImatge()
{
document.getElementById("img_2").style.opacity = 0;
document.getElementById("img_2").classList.remove('horizTranslateApareix');
if(currentPantalla == 1)
{
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
}else{
document.getElementById("img_1").src = arrImatges[1];
document.getElementById("img_2").src = arrImatges[0];
}
document.getElementById("img_2").classList.add('horizTranslateApareix');
}
style.css
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
opacity: 1 !important;
}
I know I'm doing it the dirty way, but it's like I'm just there and it seems that I'm just missing a line, a tag or something... Any clue about it?
Thanks in advance for your time and effort! :)
When you bind event handler on div as well as on images inside the div, it will be called twice as there is no e.preventBubble() in event handler. You can avoid this by using it only on the div.
Second issue is that after first click inside the div, the transition is in final state and you don't move it to initial state. I would achieve required behavior by using 2 classes. One for transition and one for initial state, final state is implicit here, opacity:1 is default value.
.pantalla.invisible {
opacity: 0;
}
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
Main part is in JS. We start by removing the transition, otherwise it would took 1s to hide the image as well. Then we hide the image and return the transition, do image swapping and finally show the image again, starting the transition.
function canviaImatge()
{
img2.classList.remove('horizTranslateApareix');
img2.classList.add('invisible');
img2.offsetHeight; // <-- force repaint, otherwise browser optimize and nothing changes
img2.classList.add('horizTranslateApareix');
// image swapping
img2.classList.remove('invisible');
}
This would be the ideal case, but browsers optimize, so we can't use it as simply as that. Browsers do as much as possible without repainting the page, so they merge several opearions to one and we loose our functionality. That's where magic comes in place. We enforce repaint asking for img2.offsetHeight, which has to recalculate positions and repaint the relevant part of page (possibly whole page). Other ways to achieve it, is to move code to setTimeout function, which can't be optimized either.
setTimeout(function() {
img2.classList.add('horizTranslateApareix');
img2.classList.remove('invisible');
}, 1)
Demo at http://jsfiddle.net/Gobie/e4m3R/2/
if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?
It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");
You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>
I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.