I am trying to add animation to my dropdown-menu ... It is working perfectly on large screens but on small phones and tablets (when toggle navigation appears) there is a problem: when it should slide up the drop-down list disappears without sliding up properly as you can see in my
DEMO . Please try to open in it in small browser size and click on "services" to slide down and up .
I have tried another solution using jquery:
$(function () {
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function (e) {
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
});
});
});
But as you can see in this Bootply DEMO (resize your browser to a phone screen size), when sliding down, at the end there is a gray space that appears then disappears directly.
What I really need is a normal working slide animation down and up. Any suggestions of how can I adjust at least one of both methods?
I find the solution , you should remove the scrollbar from the navbar.
so add this simple code to your css file :
.navbar-collapse {
overflow: hidden;
}
you can take a look at the Demo here : https://jsfiddle.net/u9pvtLpw/2/
Related
When modal is shown I add a class with overflow: hodden to body tag. So content behind the modal is not scrolling. Everything is good.
BUT
If the original page is big enough to have a scrollbar, then I can see ugly shift of the page to the right, when I open the modal. I find out the reason of such behavior. Overflow: hidden causes scrollbar to dissapear, so that's why it is ~10px shift to the right.
My question is how to fix this. In fact, I need to apply overflow:hidden but still have scrollbar shown.
(function() {
let _scrollPosition;
function preventScroll(e) {
e.preventDefault();
window.scroll(..._scrollPosition);
}
function lock() {
_scrollPosition = [window.pageXOffset, window.pageYOffset];
$(window).on('scroll touchmove', preventScroll);
}
function unlock() {
$(window).off('scroll touchmove', preventScroll);
}
return {
lock,
unlock
};
})();
You can just lock the scrolling position as soon as you open the modal with this code.
I have a tooltip on an HTML page implemented using AngularJS uib-tooltip-html:
<div>
<i uib-tooltip-html="myTooltip='my tooltip HTML'"
class="fa fa-exclamation-triangle"></i>
</div>
It shows well on desktop browsers when I hover the icon with the mouse and disappears when the mouse is out of the icon area.
When I activate the tooltip on iPad, it doesn't disappear if I tap in other screen areas.
How to dismiss the uib-tooltip-html tooltip on iPad?
I faced a similar issue and found a solution. Hope this helps some one else looking for an answer. Add the following code to your website:
$('[data-toggle="popover"]').popover(); // close on body click
// iOS doesnt recognise 'body' click so using :not
$(':not(#anything)').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
All credits to stelco at this URL
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/
I have added the facebook like button <fb:like href="http://mysite.com" class="myFacebook" layout="button_count" ></fb:like>.
When my page loads in any ie there is a noticeable white background before the like button appears, is there any way of removing this?
This is the iframe loading its content.
You could set visibility: hidden on the iframe, and then show it once it has loaded to avoid this.
Simply hide the container with CSS and then display it once the iframe has loaded, this can be done two ways:
<style>#fblike { visibility:hidden; }</style> /* Hide container */
<script>
FB.XFBML.parse(document, function(){
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
});
</script>
If you are not using this FB.XFBML.parse() function then you can subscribe an event when everything has rendered instead:
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
xfbml: true
});
FB.Event.subscribe('xfbml.render',
function () {
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
}
);
};
Took me a while to find this all out! Here is a link to where I found my solution: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
You should set allowtransparency="true" in iFrame.
I had to do like this to make it work
.fb_iframe_widget_fluid{
background:none !important;
//If you want no padding and no margin
padding:0 !important;
margin:0 !important;
}