PDA

View Full Version : Resolved [jQuery] ajaxtabs loads SLB into an iframe - display SLB on top of the whole page?



ldd3081
10-14-2010, 02:01 PM
Mornin'

Got myself a problem i'm unable to resolve, to be honest. As i'm not even close to a JS amateur, one thing seems impossible to me at the time being, namely:

Got some content loaded on demand via ajaxtabs into a DIV container, using rel="#iframe". One of the subpages (jQuery's Spotlight gallery (http://www.queness.com/post/3470/simplest-jquery-spotlight-effect-tutorial)) containes links that open via Sexy Lightbox (http://www.coders.me//lang/en/web-html-js-css/javascript/sexy-lightbox-2). Is it even possible to force SLB to open it's "popup" on top of the main page (which never reloads, of course) instead of inside the DIV it was loaded into?

jscheuer1
10-14-2010, 02:10 PM
Are you using an iframe? That would explain it. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

ldd3081
10-14-2010, 02:25 PM
Erm... right, my bad, here's the testing site: http://ldd3081.comoj.com/2.html


Are you using an iframe? That would explain it.When i'm using the "ajax" loading, Spotlight stops working after re-demanding the same subpage twice in a row, so i'm affraid i'm stuck with the #iframe mode at the time being...

jscheuer1
10-14-2010, 03:21 PM
There are two basic choices here:


Get SLB to display on the top page.


Use AJAX and get Spotlight and possibly SLB to reinit after each AJAX importation.


Either would be at least a little complex. Due to limitations of iframe going forward (it's probably being deprecated, eventually dropped), AJAX would be the way to go in my opinion. If using that method though, iframe would still be required to open off site pages in the target area, AJAX cannot do that.

When I get a bit more time (perhaps soon) I'll work up code to do this with AJAX. I'll probably have to rely on you to test it live for me where I can see it if there are problems due to the same restriction mentioned - AJAX cannot open off site links. So to test it locally I would have to mock up at least two of your pages and probably the images as well.

jscheuer1
10-14-2010, 03:28 PM
Oh yeah, does SLB work after AJAX importation?

ldd3081
10-14-2010, 06:04 PM
(...) iframe would still be required to open off site pages in the target area, AJAX cannot do that.Yes, i'm aware of the most basic AJAX limitations - the subpages i'm currently loading are for test purposes only, had to get the whole menu operable to check if the active link highlighting works properly, so few of my bookmarked sites got "involved". If there would be any option to use ajaxtabs' AJAX query though, with the whole Spotlight+SLB working, i'd gladly switch - a preloader for the dynamic content is a huge improvement towards the usabillity - if it's 'bout the end user.

'Bout:
(...) Use AJAX and get Spotlight and possibly SLB to reinit after each AJAX importation.- i wouldn't even know where to start with writing such a script, even with RTFM, i'm just a perfect example of PEBCAK errors when it's about object programming :]

Basicly, the whole page is one-domain intended, as it's "just someones another regular portfolio"; if there will be any external linking, it'll be done as a regular _blank.

Already went through more than a few htmlToDiv loading scripts, stopped at Ajaxtabs due to its comfort; skipped through countless jQ galerries to become pleased with Spotlight, however i need just this one bloody thing to work, the damn SLB makes me slowly but surely go bold, to be honest...



Oh yeah, does SLB work after AJAX importation?Yes, after i switch to AJAX type it does work as intended (but only if it's the default subpage loaded at the very start), indeed, although both Spotlight and SLB stop responding after any load action taken, doesn't matter if i click the menu item twice or go to another subpage and then come back...

jscheuer1
10-15-2010, 10:13 AM
OK, replace this on the top page:


// Courtessy of jQuery.com
/*<![CDATA[*/

$(document).ready(function () {

//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title','');
});

$('#items .item').hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.1'});

//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');

//show the caption
$(this).children('.caption').show();
},
function () {
//hide the caption
$(this).children('.caption').hide();
}
);

$('#items').mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});

});

/*]]>*/

with:


// Courtessy of jQuery.com
/*<![CDATA[*/

$(document).ready(function () {
var title;
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title','');
});

$('#items .item').live('hover', function (e) {
if(e.type === 'mouseover'){
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.1'});

//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');

//show the caption
$(this).children('.caption').show();
} else {
//hide the caption
$(this).children('.caption').hide();
}
});

$('#items').live('mouseleave', function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});

});

/*]]>*/

Then where you have (also on the top page, add the highlighted):


// Courtessy of DynamicDrive.com

/***********************************************
* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var mainmenu=new ddajaxtabs("menuholder", "contentholder")
mainmenu.setpersist(true)
mainmenu.setselectedClassTarget("link") //"link" or "linkparent"
mainmenu.init()
mainmenu.onajaxpageload=function(pageurl){
SexyLightbox.refresh();
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
var title;
$('#items .item').each(function(){
if(title = $(this).attr('title')){
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title', '');
}
});
};

That's it! Now you may use the AJAX method of importation and both the SLB and the Spotlight gallery should work.

ldd3081
10-15-2010, 10:59 AM
Thank you very much, John, NOW (http://ldd3081.comoj.com/2.html) it works flawlesly!

jscheuer1
10-15-2010, 05:12 PM
Great! I had (as mentioned) thought there might have to be a bit of back and forth to tweak the code, looks like it's working fine.

Now, I didn't want to confuse things with this until I saw if it was working or not, but you have two versions of jQuery on the ldd3081.comoj.com/2.html page and appear to only need one. Back up what you have and remove:


<script type="text/javascript" src="scripts/jquery.js"></script>

As far as I can tell, it's being overwritten anyway and not used before that.

Also, all those scripts and the stylesheet link on ldd3081.comoj.com/page/home.html are not rquired unless you want that page to work if navigated to on its own.

ldd3081
10-15-2010, 06:50 PM
That was only uploaded as a "quickie" to the first hoster i've found at the very moment; just to test out both jQ and AjaxTabs working together, to be honest; next thing is tweaking the overall html code and cutting out all the redundant crappy leftovers, obviously...
Thanks a million for the care, though :]

Also, got the 1.4.2 version of jQ, so i think i'll stay with it, as it works properly now (well, not really in Chrome and Konqueror, but - since it's not even close to a noticeable percentage of all potential guests of this particular website - it's a completely acceptable loss).

jscheuer1
10-16-2010, 01:38 AM
Also, got the 1.4.2 version of jQ, so i think i'll stay with it, as it works properly now (well, not really in Chrome and Konqueror, but - since it's not even close to a noticeable percentage of all potential guests of this particular website - it's a completely acceptable loss).

That in theory shouldn't be because the 1.3.2 version should have been overwritten by the 1.4.2 version before the 1.3.2 version was ever used.

In other words, if it was working in Chrome and Konq before eliminating 1.3.2, it should work after eliminating 1.3.2. I suspect that it wasn't. If it was though, the code that uses jQuery could possibly be tweaked to take care of that. And/or possibly a bug report should be sent to the jQuery folks about the issue(s).

Just what was the problem in Chrome and Konq, and are you sure it wasn't a problem when using both jQuery versions?

As a side note, if there are problems in Chrome and Konq, there are probably problems in Safari as well, are there? They're all webkit based, and I would be concerned about it once you throw in Safari because you would now be talking pretty much about all Mac and 'nix based systems. And even if there was a problem before, I may still be able to help fix it.

ldd3081
10-16-2010, 11:05 AM
Well, Chrome gives me

XMLHttpRequest cannot load file:///D:/morh/-=%20Pofo%20V2%20=-/!%20-=%20public%20=-%20!/lang-pl/page/home.html?1287225666267. Cross origin requests are only supported for HTTP.
/D:/morh/-=%20Pofo%20V2%20=-/!%20-=%20public%20=-%20!/scripts/ajaxtabs.js:46Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101, doesn't matter which jQ version is loaded.

When it's 'bout Konqueror - well, here the fun begins for real, as it's - i know, it's blasphemy - Konqueror on Winblows; the only thing i'm getting back from the debug console are particular lines where the browser found errors, which aren't explained nowhere, of course:

page_request.send(null),
ddajaxtabs.connect(tabref.getAttribute("href"), this),
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){,
mainmenu.init(). It might simply be the fact that it's KDE4 beta for Winblows instead of KDE working in a stable, native and efficient environment. Can't really check it completely, as my ext2 disk burned.

In addition, both Chrome and Konqueror load the requested subpage when all error messages are OK'd, however both load the subpage as a standard http request instead of loading it dynamically to the main page's container.

Safari (Winblows version, obviously) works flawlesly: loads the first menu item by default, loads the chosen subpage when ordered to and runs smoothly with both Spotlight ans SLB.


As i already said, the expected percentage of potential visitors using Konqueror and Chrome is quite insignificant, as it varies from 1% to 3%, i'm currently more troubled with turning off stylsheets for IE6 users completely without having to use JS/PHP/etc.

Obviously, if you'd be able to pinpoint the source of the Chrome/Konqueror issue, i'd be more than grateful, though i'm aware of the fact that i already owe you a lot.

jscheuer1
10-16-2010, 02:41 PM
In Chrome, if you're testing locally and all of the files aren't in the same folder, perhaps even if they are, there will be problems using AJAX (cross scripting iframe or frames also). This is no problem once the page is live, as long as all the files are on the same domain and appear that way to the browser. These limitations on live AJAX apply to all browsers, though some may be more persnickety than others as to what they see as "on the same domain". The main problem with that though is loading non-www. prefixed content into www. prefixed pages and visa versa. This is a problem in any browser and can be easily avoided by using all relative and/or network paths.

With Konq it may be similar, hard to tell from those cryptic errors. I've not run Konq in quite some time. When I did it was under Win XP, using cigWin. I mostly used it for checking layouts, simple scripts. I don't know if I would have relied upon it (for the reason you state) for something this complex.

What you need for IE 6 are conditional comments. It would be tricky though to exclude stylesheets, but it can be done with a combination of what are know as down level and up level comments. Up level comments are the more common ones and the 'up' has nothing to do with IE version(s) targeted, like (goes in the head after your other styles/stylesheet links):


<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6andless.css" type="text/css">
<![endif]-->

Up level comment content is only seen by IE and may be further refined as to IE version or range of versions. A down level comment excludes IE from seeing the content and may be further refined as to IE version or range of versions excluded. If of the down level revealed type, other browsers (all non-IE) will also see the content inside. See:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

for more info on conditional comments.

To make a long story short though, most folks can get by with an up level comment like the one above. In that stylesheet you put styles to negate and/or supplement those in other stylesheets linked to earlier in the head.

The best part is that these are all just HTML, so don't rely upon the server or javascript to work. Unfortunately, last I checked there were problems validating the down level revealed comments, but they still worked. The up level ones are fully valid in all cases, and of course work well for what they do.

ldd3081
10-16-2010, 03:16 PM
That's what i'm getting for laziness: haven't even tried to check the "live" test page i've uploaded, i simply assumed that - since FF, Opera and Safari play nice with local files - Chrome will not see the difference, thank you for clearing this one out, "live" version works in both browsers, seems i've started whining for absolutely no reason... again...
Well, it's still some progress, another quite important thing i've learned since y-day.

I'm aware of the conditional comments for Internet Destroyer, was just hoping it'll be possible to disable the whole styling without having to write a completely new stylesheet. I'm completely against "writing a completely new, custom code that literally has to use hacks for the website to be properly displayed in a retarded parody of a web browser."

Anyway: back to the drawing board then.

jscheuer1
10-16-2010, 05:37 PM
I'm aware of the conditional comments for Internet Destroyer, was just hoping it'll be possible to disable the whole styling without having to write a completely new stylesheet. I'm completely against "writing a completely new, custom code that literally has to use hacks for the website to be properly displayed in a retarded parody of a web browser."

I understand the sentiment. For better or for worse though, we're stuck with IE 6 for the foreseeable future.

It's a bit like IE 5 Mac, which refused to die for many years after both MS and Apple stopped supporting it. I'm knocking wood, but I think we can finally put that one to bed some 10 years or more after its official demise. The thing is that these browsers, though horrible now, were when first released legitimate contenders for 'best browser'. Add to that the fact that in the case of IE 5 Mac, some systems that ran it have no good alternatives. Not so with IE 6? I wouldn't be too sure. If you are talking about a machine running Windows 95 or 98, considering the OS and the likely limitations on hardware resources of a machine sold with those OS's (more so if they had been upgraded from Windows 3.x), IE 6 could still be a very attractive browser. Versions of Mozilla based browsers that could run on those platforms might actually be inferior to it. Oddly Chrome might be a good alternative. It strikes me as lightweight and fast, but that doesn't mean it would work on those machines.

Anyways, if you want to stick to your guns, you can use the down level revealed comments to kill the stylesheet(s) for IE 6 and less.

ldd3081
10-16-2010, 06:56 PM
Just to clear one thing out, my reasoning:

Year 2011 is nearly here.
The internet became much more than just plain-text forum boards viewed with Mosaic.
HTML5 is already here, so is CSS3.
Web Standards are something more than just bull**** statements.
Broken software, added to an OS as a freebie doesn't mean it's good
People running the worst possible (IMHO) browser by choice should be severly punished.
A company that releases a faulty piece of software should be punished at least as severly as it's users.
There's plenty of free software that's at least as good as the paid one (yeah, yeah, M$IE is free, right... nerves cost nothing?)


I mean, c'mon, M$IE is the most buggy, most incompatible and most primitive browser that exists at the time being. I had easier time running Lynx, to be honest. Disrespect for web standards and it's supporters, no proper technical support, absolutely no legal responsibility for damage IE caused with its leaks/security gaps to countless PCs, marking valid JS as unsafe "ActiveX" crap and many, many more make me wanna puke on the very thought 'bout that bull-excrement browser-ish piece of (...). Not a single version of this... thing... was neither easy to use nor user-friendly. It's just like you'd want to write a book for called "How to write a malicious code your user wouldn't be able to get rid of."

And it's not just that; M$IE, being quite popular with beginners ("Internet? Is it this blue "E" letter on that TV, sire?"), made people sweat figuring out how to display something properly on a broken piece of shee/it - quite unduly in my personal opinion. If something's broken - either get a bigger hammer or burn it down to the ground. If the developer isn't interested in having his product work as it should, why should we?

Those would be reasons for me to display all "my" websites in IE without stylesheets at all. The potential visitor is able to see the whole content, but only after he has seen the M$IE Welcome Page:

Dear visitor,
You're using Internet Explorer, a browser that's neither compatbile with web standards, nor safe for your Operating System. I've put lot of time to create this website and i'd like it to look as it was designed instead of having to wonder how your browser will display it.
If you'd like to see the website, please install one of the browsers compatible with web standards: /links
If you'd like to continue and explore this website WITHOUT styling (nothing but text, basicly), please continue using THIS link.


I know i'm nothing more than one lad that tries to sink a leaky ship, but if my "welcome message" gets at least one person to switch to FF/Opera/Safari/Chrome/anything - i'll be happy, since it'll mean that there's one more person i've forced to think about the issue today's web is facing...

/edit/
Just referring to your statement about Win95/98 - There are newer OSes (both paid and free), PC parts are quite cheap these days and computers sold as sets in markets are available for nearly a "penny". I simply don't see any point at all in supporting something that clearly does not work.

jscheuer1
10-17-2010, 01:22 AM
Just referring to your statement about Win95/98 - There are newer OSes (both paid and free), PC parts are quite cheap these days and computers sold as sets in markets are available for nearly a "penny". I simply don't see any point at all in supporting something that clearly does not work.

First off, do whatever you like. I'm not telling you what to do. Nor am I defending or accusing any software, hardware or any of the people who use any of it. I'm just relating to you the facts as I know them. You may do whatever you deem fit in response to those facts, and feel free to dispute them. I'm not omniscient.

I never said it was financial considerations alone. But for those in the third world, they're lucky to have access to any computer, often a castoff from someone willing to sink 'pennies' into a new OS and components.

Call it inertia, whatever. Aside from actual poverty, many people just can't be bothered with upgrading if what they have does what they want. Institutions like schools and small businesses often maintain out of date equipment and software because it's cost effectiveness system wide outstrips the costs of investment in time, in software and in hardware in upgrading the entire network. Their network may not be all that secure, but they've plugged most of the holes over the years. Often better the devil you know than the devil you don't. The longer they keep their antiquated setup, the more secure they can make it. Plus it begins to gain a sort of security through obscurity over time.

I certainly don't mean to defend IE 6 as state of the art, though when first released, as I've mentioned, many considered it so. IE 8 is refreshing and 9 promises to be even more so. MS is getting up to date, the sooner the better for both of us I'm sure. That doesn't change what's out there now and what will continue to be out there for quite some time.

ldd3081
10-17-2010, 10:51 AM
I'm affraid you understood my statement not the way i intended to :]
I know you're stating your opinion, that you're not telling me what to do; same do i - it's simply an opinion with arguments supporting it. It may look as if it were kind of offensive, it isn't though.

And: yes, i agree, not everyone has the comfort to upgrade. However, my personal reluctance towards IE made me took this huge step; i'm simply tired of PNG hacks and all the rest of this semi-usable (...). In my humble opinion: if it validates, if it works as intended - work's done properly. I've already changed my attitutde towards IE overall - i've used to cut IE out completely wherever i could; now i'm just cutting out stylesheets for IE6>. I don't deprive users from the content - they still have full access to it, i'm even informing them kindly what they can actually do to experience the web fully.

Just one more thing, since i'm not self-motivated enough to leave it alone: i surely hope IE will be either completely discontinued or made from scratch to fit the current market ASAP; this might be wishfull thinking only, though...

jscheuer1
10-17-2010, 12:17 PM
I don't think I expressed an opinion. If I did, it was that the decision as to whether or not to support IE 6 is up to you. But that's just another fact. You're the one with the opinion(s). Good luck with that. I mean it.

Let me put it another way. I recently had a consult on a fairly large site for real money. Among other things I did for them, I worked with their designer to make the site IE 6 friendly. However, before we ever went down that particular road I asked if they even wanted to bother. Then as now, I have no opinion of my own in the matter. If you have a particular sort of site with a particular sort of target audience, that could help you make the decision. There can be any number of other facts to consider as well. It depends upon the site. The site owner's opinions are also valid, it's their site.

So, as I say, do whatever you like.

ldd3081
10-17-2010, 12:27 PM
But sure, the targeted user group defines - unfortunately - the way a particular project is treated. I simply deplore the fact that noone has the abillity to force M$ to fix their mistakes and/or provide decent support, ie.: by providing a working alternative to their product.
Fortunately, my current "client", The Mrs, has the exact same view on the whole IE fuss.

jscheuer1
10-17-2010, 04:21 PM
I simply deplore the fact that noone has the abillity to force M$ to fix their mistakes and/or provide decent support, ie.: by providing a working alternative to their product.

I think it's happening. With the introduction of Firefox, then later of Safari Win and Chrome, the continual improvement of Opera, MS is being forced to make more frequent updates and better updates or else face the continuing decline in prominence of their browser.

That's the key. Though the browsers (all those mentioned here) are free, they're like a giant conduit to ad revenue. There are restrictions on this practice. But it's like a shell game. There's always a new way to exploit browser dominance.