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.
Related
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.
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/
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">
I'm trying to use the piroBox (http://www.pirolab.it/pirobox/index.php) jQuery plug-in to make a gallery. I'm also using <!DOCTYPE html>. With this DOCTYPE, the images that are supposed to appear in a modal dialog appear at the bottom of the page. Removing the DOCTYPE makes it perform as expected.
Is there any way to make the plug-in and the doctype play nice without changing the DOCTYPE?
What browser are you using? I tested <!DOCTYPE HTML> with the examples from piroBox, and it worked in Safari. If you're using IE, you might need to install an HTML5 compatibility script: http://remysharp.com/2009/01/07/html5-enabling-script/
The page in question
Please open the page in whatever browser you normally use and confirm that the menu bar immediately precedes the map. Next, open the page in IE8 and see that it inserts whitespace (roughly the height of the menu bar). Even if you use IE7, the whitespace doesn't appear. This has been bothering me for a while and I haven't been able to find an adequate solution.
Thanks.
And you want us to debug obfuscated javascript? :-)
All I can tell you is that
1) You're not using the (Google Maps v2) recommended DOCTYPE with a Strict DTD:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ref: Google Maps API V2 Doc.
That will switch IE into "Standards Compliant Mode" (According to Microsoft, anyway)
2) Try using the IE7 compatibility tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
That must be the first META tag and before any CSS.
Even MS' own Bing maps use it. :-)
U wanna try the IE compatibility view?
I have no issue after using that.
I tested w/o compatibility view and saw the space
You have not explicitly set margins for header tags but you are using them in some of the supposedly hidden elements up there near your header. This should fix your issue:
h2 { margin: 0; }