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
Related
I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.
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've a very complete site in ASP.NET which uses iframes. I'm working to change an old control we'd been using to show dialogs to use jQuery UI dialogs. I'm also making sure everything works well in IE9.
The fact is: the script I've in the pages shown in iframes is not working in IE9. Why? Because Object, Array and String are undefined. There may be some others issues, I've seen only this ones.
There is no chance (because a lot of reasons) to stop using iframes on some dialogs. And I'd rather not to use the meta tag to force IE8 Compatibility. Does anyone know any way to fix this ugly bug in IE9?
jQuery code for the iframe in a plugin I've made to config jQuery UI dialog:
options.content = $("<iframe>")
.attr("src", options.intSrcIframe)
.attr("frameborder", 0)
.attr("scrolling", options.intIframeScrolling)
.css("background-color", options.intBgColorIframe)
.attr("height", "100%")
.attr("width", "100%");
_this.html(options.content);
Note: here there is some documentation from IE9 that may help to understand. Thanks to #Ben Amada for sharing it.
After almost a week of going crazy day after day I found it out.
The problem with IE9 is no specifically with the javascript code in the iframes. Not even with the javascript in iframes added by javascript or any library (I have lots of js libraries and plugins that could be screwing IE9).
The problem is when you move the iframe or one ancestor through the DOM. IE9 will excecute the code in the page loaded in the iframe as many times as moves you make. Each time (but the last one) will have Object, String, Array and others undefined (and other bugs too).
Example:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("body");
$("#myIframe").appendTo("form:eq(0)");
The javascript code in "www.example.com" will be executed once with the error described above and then once with no errors.
With the following code the code will be excecuted just once and correctly:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("form:eq(0)");
I hope this helps someone to avoid this pain in the ass,
Diego
There is a similar way of achieving this using an existing iframe if you aren't creating a new element.
$(function () {
var iframeSrc = $("#iframeid").attr("src"); // capture target URI
$("#iframeid").attr("src", "about:blank"); // delay loading until we reposition in the DOM
$("#iframeid").appendTo("#newparent").attr("src", iframeSrc); // reposition, load iframe by setting src
});
IE9 or jquery framework needs to fix this issue.
I'm having a similar issue, however the iframe is added to the page rather than removed from it. It still appears to have the same problems.
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.