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;
Related
I have a clickable span that works perfectly on Android and desktop etc, but it does not work on iphones.
$('#spanname').on("click", function() {
/* do something */
});
I have tried touchstart, touchend and added hover pointers as per some other suggestions for this weird behaviour after researching, but nothing works.
Any ideas? If not, I guess I'll have to do away with the span and use a div.
(the reason I'm using a span is because I am using a large ยป instead of an arrow image).
Try to add an empty onclick attribute to the span or apply cursor: pointer to the element in the style sheet. ;)
More information here
The answer is check the silly and obvious things first. The device I was checking my updates on was actually pulling down an older iteration of the site and therefore wasn't showing my updates. The procedures did work, but only when I made sure I was actually looking at the correct version.
Apologies to anyone that took the time to look and also thank you.
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"/>
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 am trying to add css dropdowns to the navigation menu. But it is not working. I would like to know what is causing the problem. Your help is highly appreciated. Here is the link:
Drop downs to navigation bar
The error that I get is that ddlevelsmenu is not defined... is there some sort of initialization you have to do for the library you're using?
EDIT: Ahhh, there's the problem. I looked up this library: you need to be including ddlevelsfiles/ddlevelsmenu.js, but you are not. Include that, and re-read
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm
to make sure you got everything in there you need, then you should be set!
Ahh! You never closed the tag. Change to and I bet you it will work. Those little typos can be the nastiest =
I am using JCarousel to display some ads.
Everything works fine, except when there is no ads, ie JCarousel has zero content.
This will cause the Next Button to be active, as if there where unlimited items inside the carousel. I haven't altered any code at all, just the css for the colors and attributes.
Does anybody know what I am talking about, or anyone who can help me fixing it...?
Otherwise I will replace it with some other Jquery Carousel plugin!
Thanks
you will need to detect the presence of the adds and then disable the button if there are none. You can do all this from the API. I would probably pass this functionalit in as part of the init callback.
eaxmple:
$('#ad-continer').jcarousel({initCallback:
function(carousel, state){
if($(carousel.list).length < 1){
// set next and previous to disabled.
}
}
});
Youll need to look at the source for jcarousel to see what the other methods are you can call i know there is a way to disable the controls independently though. and there are actually a lot of options you can pass in not just 2... http://sorgalla.com/projects/jcarousel/#Configuration