Fancybox won't load inline content - javascript

To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.

Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.

I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});

Related

Need to add rel attribute to url output by essential grid plugin for WordPress

So, after many hours of trying to get this working (and being tempted to just give up and light myself on fire) I've decided the best thing to do is ask the mega minds that hang here on stackoverflow.
Now, here's what I've been trying to accomplish. I need to append/inject the rel attribute to the links in the Essential Grid plugin for WordPress. I've opened a ticket with ThemePunch (the plugin author) and their response was to copy (and edit accordingly) the snippet of code below which, if done correctly, would append the tags with the (in my case) rel="m_PageScroll2id". I've tried all sorts or selectors (classes, #'s, etc) and no matter what I do, I never see the rel="m_PageScroll2id" being added to anything anywhere in Firebug or Chrome Inspector. So, anyhoo, I've pasted my lastest jQuery failure below as well as a link to the page containing the Essential Grid.
The instance of Essential Grid is directly below the homepage slider and contains 6 grid items. Also, just so you guys can see what I need to make happen, I also set up an item in the site's main nav called 'TEST'. If you inspect that link, you'll see the rel="m_PageScroll2id" that I need to happen on links in Essential Grid.
I'm adding the code in the Custom JS panel in Ess Grid.
`$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});`
And here's a link to the page in question: http://wclatlanta.wpengine.com/
I watch on your site, dev-console said $ is not a function. But jQuery - is a function in the same place. Replace
$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});
with
jQuery(function() {
jQuery('.welcome a').attr('rel', 'm_PageScroll2id');
});

Colorbox code working outside of Umbraco, but not within

We are new to Umbraco and coding within it, so I thank you in advance for your patience and assistance.
In short, we created a 'test' page utilizing a colorbox pop-up to display a form. It works perfectly in the test page.
When trying to integrate the code into Umbraco, when the "Request Info" button is clicked, the form opens in a full page, and the colorbox does not display.
I would appreciate any assistance that you could provide.
Test link (working):
http://online.saintleo.edu/Colorbox/Untitled-1.html
Example of a page where the "Request Info" button (yellow on right) opens full page, and NOT colorbox:
http://online.saintleo.edu/academics/masters-programs/master-of-accounting-(macc).aspx
I've spent the entire weekend trying to find the solution, hoping to get this resolved ASAP.
Thank you in advance, I appreciate your time and assistance.
This looks like a problem with how you have implemented your script in Umbraco. Just looking through Chrome's browser inspector, I can see that your script is failing to find the colorbox objects which means that something is prevent the library from being available. This is usually because a dependent javascript library has failed.
Looking at your source code, you are loading all your jQuery libraries at the bottom of your page. This is good practice, but you have placed your a second jQuery file reference, your colorbox file references and the custom colorbox code in the head of the page.
There are several things you will need to do:
Remove the jQuery reference from the head of the page;
Move the colorbox file references to the bottom of the page, after all the other javascript file references. You can leave the colorbox CSS file reference in the head.
Move the custom colorbox code to after all the other javascript file references. I usually place this kind of code in a separate file.
Depending on your Umbraco implementation:
If you are using masterpages, use a ContentPlaceholder to allow templates to drop javascript file references into the bottom of the page;
If you are using MVC views, use a footer section to do the same

is there anyway to open href links in message box?

i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me
I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.
Take a look at jQuery's fancybox -> Fancy Box
well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/

Resize shadowbox after it loads html

im new to javascript and jQuery in general,
I have a html openened in Shadowbox with something like
Argentina
Inside that html i have a link to another html that i want to display in the same shadowbox, but it's size is bigger.
How could i resize the shadowbox so that the second html it's not cutted off?
I've read something about
function openSB(path,width,height){
but i dont know how to make it work
Thanks
http://www.victorstanciu.ro/dynamically-resizing-the-shadowbox-js-modal-window/
"The reason you might want to manually resize the modal window is in case the content inside changes, for example in the case of IFrames. Fortunately, implementing such a method is quite easy."
You don't say what version you're using, but a comment on that page offers a solution for version 3 also: http://codestory.a-chantioux.fr/dynamic-resize-with-shadowbox-js/

jQuery Thickbox Issue

I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?
in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){
Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.
Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this
I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.

Categories