I'm putting some documentation together using Bootstrap and running into an issue with the Scrollspy plugin in Firefox. Essentially, the "active" class is getting appended to the last list item in my sidebar nav and won't change, even upon scrolling through the page.
I have compared my example with Bootstrap's version and cannot determine any discrepancies between the two. The script works in all other browsers, including IE8+.
I've hosted my working example of it here for anyone to take a look at if you have the time (the page source is very simple, so it's probably just easier looking at it here in Firefox than in a jsFiddle or something): http://dev.themusicake.com/
Documentation on Scrollspy can be found here: http://twitter.github.com/bootstrap/javascript.html#scrollspy
I am using the data attributes on the <body> element as is suggested:
<body data-spy="scroll" data-target=".nav-affix-container">
There aren't any errors being thrown in the console either, adding to the troubles of figuring out the issue. If anyone has had any issues with this particular problem in the past, any assistance would be greatly appreciated!
Please let me know if you need anything else!
Remove height: 100% from body.
For me the problem was that i used float:left on the content div, which results in an height = 0 on the content itself. Therefor the scrollspy won't be able to identify the height(i guess?)
I simply used clear both below the content div to fix the problem.
<br style="clear: both"/>
Related
We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?
Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');
UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.
I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.
I've got these anchor elements in my page with href to some contents on the same page. I myself can't believe how many methods I'v tried since yesterday to set a simple active class. But non of them worked in IE7+ and even IE10. I checked markups, css and scripts But just no success and That is so so confusing.
I tried 2 scripts like addClassthat() and removeClass() in one simple script and worked in all browsers except ie7+ and in other method I tried siblings() which worked too except in ie7+.
I even tried the scripts that are already working [in dynamic navigation] in other projects. But for this static absolute URL I'm getting no result in IE7+.
I'm just tired to try more in this and in fact very curious to know what the wrong is.
By the way, the extra usage of nested html elements is just for designing purpose and nothing else.
Here you can see one of the method tried.
Help Plz
Edit: After 2 days trying and trying I suddenly found the solution.
Setting class "x" for all anchor elements and writing the script below would solve the problem.
$('.x > a').click(function (e)
{
e.preventDefault();
});
However, I appreciate that if anyone could explain the main logic behind using the script above.
Remove the target="_top" attribute from your links. That will cause the page to load in a new window or tab, effectively killing any jQuery that you're applying.
jsFiddle example
I created a page using Dreamweaver and fireworks that uses one AP Div as a button to show and hide two other AP Divs using JavaScript. However, the AP divs are relatively places. It all works fine in google chrome and safari but it doesn't work at all in IE 9. I suspect it's an issue with the JavaScript and IE9. I am new to this, and I know my site is built in a weird way. All help is appreciated.
I also tried using this tutorial:
http://webdesign.about.com/od/dhtml/a/aa101507.htm (Shows and Hides divs with a link)
where the a div is a link, to make it work, but it didn't fix it.
Thanks in Advance
Right, I've scrapped your code, not because it's bad but because I dont understand it :P, I've used something different, this may mean that you have to re-write some code on your page. What my code does it replaces the content with-in the div instead of hiding/showing between 2 divs... Below is a link to a jsfiddle, try running it in IE9 and see if that works.
http://jsfiddle.net/hSMk3/
If it doesn't work tell me in the comment section thingy below :)
I'm working on a Joomla 1.7 site and I'm having a strange problem in IE8. When trying to select an option from a select box, the options appear for a second and then when you try to select one they disappear. It only happens on a specific page - I've disabled every other module on the page to count out any conflicts (thought for sure it was a conflict with the slideshow, but no luck). If anybody can shed some light on this I'd really appreciate it! Below are some examples - click on the 'Quicksearch' select dropdowns.
This page works fine:
//link removed - solution below
This page doesn't:
//link removed - solution below
Thanks!
Solution -- Thank you both for your input. I figured it out after pulling my hair out for a couple hours! The template was calling IE specific css behavior 'behavior: url(/css/PIE.htc);' for the module wrapper divs. I just forced the select box styles in the template html IE8 specific css and it works now. Nothing like a waste of time with IE! Thanks again.
Seems like some outer div has a MouseOut event. Please Check this out and maybe you will find your answer.
Try adding
position:relative;
z-index: 0;
Ok here's the problem. I have a page that works in FF3 and Safari4 no problem. It's IE8 that's causing the issue, go figure. I remember in the Netscape days when it was the opposite.
Anyways,
So i'm building a website for a friend - i have three pages. the first two work fine on their own, but when they are combined in a frameset in the third (main.html) in IE8 all hell breaks loose. here are the pages:
www.wither.org/Karoline/navigation.html
www.wither.org/Karoline/portfolio.html
http://www.wither.org/Karoline/main.html
& my CSS if you want it: www.wither.org/Karoline/css/styles.css
if anyone can figure out how to fix this, i'd be eternally grateful. It's completely baffling to me and i've tried all kinds of options. i upgraded jquery to the latest version but then my scroller didn't work and i can't dive too much into the javascript code right now.
Please if you could help out, it would mean a lot to me. this has to go live sometime tomorrow.
There is a JS error when executing the following line of code document.getElementById("loading").style.display = 'none';
in the portfolio page.
Apparently, the element with id 'loading' is not being found. However, if I continue execution of the JavaScript on the page (from within the debugger), there are no issues, and the behavior is the same as in Firefox. This is indicative of a concurrency issue - the element 'loading' is not present in the DOM yet, but the script is attempting to change the element's style.
In order to fix this issue, you will have to ensure that the 'loading' element is present in the DOM before its style is being changed. In fact, you could delay the execution of the onload event handler (using window.setTimeout), until a point where the element is present in the DOM.
What's the actual javascript error?
And IE does have an issue in regards to invalid/broken markup inside of frames, I would try
a) commenting out each script and see which causes the js error
b) if commenting out all the js did nothing it might be related to the invalid markup inside of a frame issue, in which case I'd ditch frames alltogether.
yeah....
so thanks so much for your help. problem solved and i figured the other CSS error. should have picked up on that one earlier.
so site is working and if you want to see what happened with your help,
http://www.wither.org/Karoline
it works perfectly cross platform. made the deadline with hours to spare. thanks SO much. can't believe how well this worked.