I'm trying to create a simple button to open/close a collapsible part of my website implemented in twitter bootstrap. I'd like to use the collapsible javascript plugin, but it doesn't seem to work just right: The folding animation happens "on close", but "on open" it's instantaneous.
Here's a jsFiddle demostrating the issue.
http://jsfiddle.net/whUvL/2/
On my navigator (Chrome 22.0.1229.94 on mac) the first time the button is clicked, the h2 "pops in" instantaneously. Clicking the button again "folds" the h2 with a nice animation. Clicking again "shows it" very quickly.
How can I have the animation work "when opening" as well as "when closing"? Should I add more html/css, or maybe change some js?
Also, I've noticed that this happens with jquery 1.8.2 and the latest twitter boostrap. With jquery 1.7.2 and bootstrap 2.0.2 it seems to work just fine. I'd like to use the latest of both if possible.
Ok I have found the problem. It's right there in the docs:
Requires the Transitions plugin to be included.
In my defense, I must say that that part was grayed out and was not very evident as a requirement.
Once I included the transitions module, the animations started working again:
http://jsfiddle.net/whUvL/4/
Kudos to #funzionpro, who put me on the right track - once I knew that including the complete set of javascripts it worked, the rest was easy to deduce.
(I will mark this answer as correct in two days, until then I must leave it open because SO's policies regarding auto-responses)
it seems to work fine if you add bootstrap.js of 2.1.1
working fiddle: http://jsfiddle.net/whUvL/3/
Related
I'm playing around with Barba.js and Swup.js transition libraries in very stripped back form.
I have the transitions working fine, but the hard-coded "is-active" class to highlight the menu buttons in the menu is now not working - I assume because of the way that Swup caches pages? The mobile version of the same page is experiencing issues as well - the hamburger and slide out menu work fine, but the links have stopped working.
I've tried adding the class="transition-fade" to each button as per the documentation, and I'm surprised that the transitions are working without being added to any buttons! Am I missing something here...?
I've created a Stackblitz here - https://stackblitz.com/edit/web-platform-geo8vq?file=index.html
Any help with getting my head around getting this working along with any best practices would be greatly appreciated!
Andy
When accessing the bootstrap v 4.3.1 documentation in firefox v 65.0.1, I noticed that the javascript is not working properly, for example, the carousel component is not following its normal flow, which is to move to the next slide with the its transition animation, other components have the same problem. I noticed that in version 4.0.0 of bootstrap this problem does not occur. I recorded a video with the carousel example, follow the link:
https://youtu.be/ksT7KgZZXhY
I have a site with this version of bootstrap, which is not working because of this problem, and in other browsers it works normally and in the console does not present any problem, I do not know exactly if the problem is in firefox or javascript bootstrap, I tested in other machines with old versions of firefox and worked normally, but after updating firefox gave this problem again.
I've been able to solve the problem. What happens is that in the performance settings of my computer the "Animate controls and elements in Windows" option was cleared, I do not know if this is a bug, as this is the first time I see a windows customization setting influencing loading of a website, anyway I left the link of the video with the solution.
https://youtu.be/9NhlpJpKpuQ
I'm using eonasdan's bootstrap datetimepicker plugin for my website. My website is running in ASP.NET MVC 5, it has jQuery 1.10.2, bootstrap 3.3.6, requirejs and several other plugins. The problem I'm having is that the datetimepicker is not working properly in Safari (iphone, ipad). When I click the textbox the calendar will appear but when I click on a date it will close the calendar and won't select the date or enter it in the textbox. Its as if the area is not clickable by the touch event. I tried running the plugin in a separate application and its running fine, but for some reason it doesn't work in this website. I tried upgrading to jQuery 2 and got the same result. It doesn't throw any error or logs anything either so i have no clue whats going on. Can someone please give me some advice on how to fix this.
Here is a screenshot of the calendar:
Ok I finally figured out what was the issue. The project was referencing fastclick.js and attaching it to the DOM. This was causing erratic behavior in touch events. As soon as I got rid of fastclick everything started working nicely. So be careful when using fastclick.js since it's not very reliable.
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/