bootstrap affix not working properly with firefox - javascript

I am trying to have a left sidebar in my rails application that uses bootstrap affix. I have set up this bootply to share my approach:
http://www.bootply.com/mwg1ZEM8zh
It works just like wanted with Chrome, but with Firefox affix stops working everytime I follow a link (the sidebar is in every page of my app). If I refresh the page affix starts working again. I have used data attributes to add the affix behavior, no javascript at all. Should I use javascript? Am I doing something else wrong?
I am using bootstrap 2.3.2.

I ended up using javascript as well and now it works with Firefox as well.
<script>
$('.sidebar').affix();
</script>

Related

Strange CSS issue on Android Chrome CSS not applying when using jquery load

i have created a website using bootstrap css framework, it works as it should be in desktop chrome, firefox, IE browsers. Mobile stock browser works fine too.
but issue is only with Mobile Chrome browser.
On contents page, there are comments, which gets loaded after page loads, something like this in javascript.
$(document).ready(function (){if ($('#loadComments').length ) {reloadComments();}});
function reloadComments(id) {
$('#loadComments').load('/load_comments.php?id='+ id);
}
everything else is working great, but the content which is loaded using .load jquery function , doesnt follow CSS rules.
and only those looks bigger than normal page. even though all other page contents are smaller in size, the loaded contents are very bigger.
how can i fix this ?
update:::
its not just for jquery .load ,
its happening for bootstrap nav nav-tabs
e.g.
http://jsfiddle.net/4g9pw5mo/
if i try to click other nav tabs and then come back to original tabs the font size gets increased,
but its not replicating the issue on jsfiddle.net and mobile chrome.,
so i guess, its have something to do with my CSS.

jQuery conflicts using Content Carousel with Bootstrap 3 and Fancy Box

I am working on a site that is using the Circular Content Carousel from Tympanus in conjunction with FancyBox on a site built with Bootstrap 3. I've noticed however, that the collapsible mobile menu that is part of Bootstrap is not working on this page. I realized that Content Carousel is using jQuery 1.6.2 while Bootstrap uses 1.9 or higher. When I remove the link to jQuery-1.6.2 the mobile menu works but the Carousel breaks, and when I remove jQuery-1.11.1, the carousel works but the mobile menu is broken. Linking both results in the carousel working but the mobile menu not working. I've tried using the jQuery.conflict script to no avail (whoever built the site had already begun to implement this unsuccessfully).
I've tried changing lines 217 and 227 of the contentcarousel.js file from .live to .on as per the stack overflow link here and removing the older jquery file. Now everything almost works except when you click on the + sign to enter the lightbox and then exit out of the lightbox, the content carousel no longer works. I've also noticed that after this change, when you hover over the dropdown menu, it stays in an active 'mouseover' state.
The site is here http://smmcnyc.com/work/bnc/history.html with history2.html being the version with the modified contentcarousel.js file.
Suggestions? Advice? Please help!

Zurb Foundation 5.1.1 Javascript bug

I wanted to design a basic website or basically edit one of zurb foundation's templates. So I download the zurb foundation package and edit the code. Everything seems to be working fine but when I refresh the page . Some Jquery elements don't seem to work.
Eg : I had a carousel implemented and upon refresh , the indicators are not showing and it resizes automatically .
However , everything jumps back to normal like it should when
I open up the Inspector
I resize the browser and back again.
This is quite a bizzare experience. I have used bootstrap before and never seen it . Any leads to how this can be solved or is this a bug in the foundation docs ?
This sounds like a known issue with 5.1.1.
See https://github.com/zurb/foundation/issues/4466
I had a similar problem - this only occured when using the non-minified scripts.
To fix the problem I manually incorporated the changes made in this commit:
https://github.com/zurb/foundation/pull/4436/files

Mobile collapse bootstrap not working in Chrome

I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!

Loading time of Wijmo Menu Scripts

I am using this menus http://wijmo.com/widgets/wijmo-open/menu/ , its working ok but i have this problem:
Takes some time to load the js files and the menu show up like a tree and after some seconds the menu is ok.
How can i speed up the loading or do something to dont show the tree?
I tested the online demo using the latest version 2.3.7 available at the below link:
http://wijmo.com/demo/explore/?widget=Menu&sample=Overview
and the menu did show up without any delay. Could you kindly check the same ?
If the issue persists then let me know the browser details and the version which you are using.
Regards

Categories

Resources