Internet Explorer Javascript Slideshow - javascript

I have a very strange issue going on here. It's only occurring on Internet Explorer (what a surprise).
Basically I'm trying to fix a site that was given to me after some third-rate developers finished it and obviously did not test on IE.
They've setup a javascript slideshow, now on the pages with the slideshow active, the whole enclosing "body_section" div is being pushed all the way to the left. Have a look for yourselves:
http://sapaconstruction.com.au/sapa/
That's the homepage which floats everything to the left. Now on this page:
http://sapaconstruction.com.au/sapa/?page_id=4
Everything looks normal, so it must have something to do with the javascript slideshow. Here's what the javascript they've written looks like (it's embed on the page).
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/compressed.js"></script>
<script type="text/javascript">
$('homeslideshow').style.display='none';
$('wrapper').style.display='block';
var homeslideshow=new TINY.slideshow("homeslideshow");
window.onload=function(){
homeslideshow.auto=true;
homeslideshow.speed=5;
homeslideshow.init("homeslideshow","image","imgprev","imgnext","imglink");
}
</script>
Any help with this issue would be amazing, I've wracked my brain for hours trying hacks and margin fixes and things like that.

Well, I can tell you this. This site has way more problems than just that. In looking at the source, there is a div that comes before the html node. I would first of all fix that, as even in firefox, this is causing some strange things to happen. As a matter of fact, I think this "ieonly" div is what is causing the issue, as in IE this div becomes the wrapper in the body. Whoever built this site was not very familiar with cross browser design, and tried to bake in way too many IE hacks.
EDIT:
The problem was IE was in quirks mode due to the lack of a doctype. The following doctype should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Related

Html inside html etc causes quirks mode to kick in?

We are trying to add a cookie policy to an old website, made a long time ago. The cookie policy (javascript) works fine in chrome, ff etc, but IE kicks into quirks.
I inspected the generated html and.. oh my.
It looks something like:
html
head
/head
html
body
head
/head
/html
/body
html
You get the picture, its ugly. When it was built they included separate .shtml files, all which come inclusive with their own html, head etc.
There is nothing above the doctype so I have erased that as the problem. The doctype is:
<!doctype HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN">
jsfiddle with html from the index page, not there for presentation, its there if you want to look at the demons that be (code).
So, the question I am asking, is what could be causing quirks mode to kick in? Is there a 'hack' to prevent it?
When I display it explicitly as ie7+ its fine, so as a cheat can we just set it to not go to quirks?
Thanks.
Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.

Slimbox centering on whole page, not the window

I was trying to integrate Slimbox into my web page, but couldn't get it to work properly. For some reason, the popup is centered on the whole page, not just its visible part. Here's an example of the situation: here.
I tested it in Firefox and Chrome on Linux and Slimboxes on other web pages look fine. Any idea how to get it working?
Also remember about <!DOCTYPE html> in HTML5 documents.
In my case, this turned out to be important in Slimbox 2.05!
So I change the doctype from HTML 4.0 Transitional to XHTML 1.0 Transitional and it works like magic. Does anybody know why? There's something about having a XHTML doctype in Slimbox 1 readme, but they don't mention it in the readme to version 2.

Having issues with jquery on internet explorer

I am having issues getting some jquery to work on internet explorer...sometimes it seems to work, and sometimes it doesn't seem to work. Having no issues with chrome/firefox though, i don't understand what can be the cause of these issues.
I am not including the jquery source from the file, but rather putting the file inline the file. I have split it up into a few lines like they do in the actual jquery.min.js though, so that shouldn't be causing any issues.
The rest of the HTML is all on one line though, could the length of this line be causing issues? When clicking some of the links on the page and the listners should activate on the click() function it just opens up the windows explorer tool instead of catching it and having e.preventDefault() activating.
I could show you guys the source for the JS, but I know that is working properly, as I said its fine on chrome/firefox, so I feel there is some hidden issue I don't know about for internet explorer. I have listed all of the possible details and causes of this issue....help please? Thanks to any information and I can answer any questions to get this working :)
EDIT:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="application/octet-stream" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- JQUERY 1.7.2 HERE --></head><body><!-- HTML IS HERE WITH LOTS OF DIVS --><!-- JQUERY CODE HERE --></body></html>
Had the same issues with javascript, that was running perfectly under Chrome and Firefox and seemed to totally not load on IE, and I was amazed to find out that Internet explorer is not executing your javascript if you have console.log in your code, used for debugging (or other purposes), and thanks to stackoverflow I understood about this.
So if everything in IE seems to work fine with Dev. tools open (F12) then after removing console.log from your scripts everything will be ok.
If you have any console.log statements, take them out. If developer tools are enabled (F12), IE will work. Otherwise, it will stop executing code with console.log.
The best way to test this is open the developer tools, and then see if the code works in IE. If it does, then removing the statements should fix the problem.

Trying to incorperate a really simple light box. How do I stay centered on scroll?

Working on tarting up a very old site as a new site is being built elsewhere and wanting to incorperate a super simple lightbox type display but not sure how to make it work.
Here is the page as it stands:
http://www.onboardtraining.co.uk/johnboyce
When clicking on the 3 rows of cars on the right it calls a javascript function built around code from this page :
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
Only thing is the dark background layer doesnt fully expand out to 100% even though it says this inside the CSS code and both the background layer and container layer dont stay fixed on screen, if the visitor has scrolled down a bit then clicked the thumbnail the layers appear further up the page and only partially cover the screen, same if the user tries to scroll.
Lastly although the demo code works ok (bar the above) in IE, FF and Chrome, on the iPhone the lightbox appears shoved over to the left.
Sorry for the massive question with many branches, just learning my way around things CSS at the moment and coming out of the dark ages :)
Thanks,
Rik
Edit - I dont want to use any external jquery plug ins thanks :)
This is the easiest method:
.black_overlay {
position: fixed;
_position: absolute;
}
position: fixed is supported in every browser except IE6 - support for which is no longer relevant to most websites. _position: absolute is applied in only IE6, and stops the page breaking in that browser.
You should leave the white box as it is (don't make it position: fixed), because it does not size itself intelligently to the dimensions of the window.
No idea about the iPhone part of your question.
Firstly, you should update your doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
That is no good, because it causes Quirks Mode. In Internet Explorer especially, many things simply do not work or are otherwise entirely broken in Quirks Mode. Update your doctype to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Use this jquery lightbox plugin:
http://leandrovieira.com/projects/jquery/lightbox/

Handling browser native click before dom:loaded

I have an issue with Cross-Browser native events vs CallBack events.
I have an HTML link "Click Me" with a given href="". On dom:loaded I attach a function to this link (to do Ajax Stuff).
JavaScript code is loaded at the end of the page to follow YSlow Recommandation.
Issue:
If you load this page really quickly (pressing F5) then click on link then
the alert() is not called
the link is followed (reloading the page)
It happens when the server lags. In fact the page has not finished loading and the browser execute the code.
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Click Me
<!-- According to YSlow Recommandation load at the bottom -->
<script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
<script>
/* <![CDATA[ */
document.observe('dom:loaded', function() {
$('action').observe('click', function(event){ alert("click"); Event.stop(event); });
});
/* ]]> */
</script>
</body>
</html>
Turn Around:
A turn around is to add onClick="return false;":
Click Me
It works for lags but not for quick click. And I don't like this kind of turn around because my goal is to remove the onclick on all <a href="">
You could look into this:
JQuery has a handy little function that
launches your javascript as soon as
the Document Object Model is ready…
which happens before the page has
finished loading.
$(document).ready(function(){ //
Your code here...
});
via
You could also put a big disabled div in front of everything while the page is loading to forbid clicking, but I wouldn't recommend it.
Not sure if I got your question right, let me know if I didn't
We have done many many test on our CMS on many browsers.
Sorted by speed:
JavaScript can't execute before a really fast click
onclick="return false" works fine in most case
JavaScript doing 2.) onLoad is too slow but could be enought
DIV using as shield brings other issues and is not a good choice
It seems like you have things pretty well in hand, and all you're looking to do is create some links which do nothing in areas where graceful degradation is not possible.
In these cases I suggest a link with the following format:
Linktext
This link should functionally do absolutely nothing with javascript enabled or disabled.
Important Notes
The number zero in the void is absolutely necessary. Internet Explorer will complain otherwise.
The use of "javascript:void(0);" is strongly discouraged by Microsoft because odd things can happen. To avoid the majority of the bugs, do not wrap anything but text in your void(0) links.
Before you make a decision make sure to carefully consider if adding "javascript:void(0);" is really a better solution than adding an onclick which returns false.
On removing the href attribute:
Removing the href attribute from a link is valid XHTML. Despite being valid XHTML, your link will lose its automatic link styling. No more underline, no more colors, no more hover, and no more automatic color change if the link is visited.
You can't fix the lack of styles with CSS either due to the spotty support of :hover in Internet Explorer.

Categories