I am using color box, its really fun, but i am really stucked out by a problem that:
my form is opening in colorbox
i am using jquery for validation in that form
for which i am including validate.js in that page
the problem is that i am not able to see the js file, when i open the page in window it is ok but when that page is opened in colorbox the javascript in not available.
please help me
From the Colorbox Home Page:
JavaScript/jQuery is not working inside of ColorBox.
This is often due
to trying to access an element before
it has been loaded into the document
and can be resolved by moving the
JavaScript into ColorBox's onComplete
callback.
//Example (using jQuery Forms plugin):
$('#login_window').colorbox({onComplete:function(){
$('form#login').ajaxForm();
}});
It looks like you might just need to make use of the "onComplete" callback of the plugin.
Related
The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?
To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.
1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P
I have a bootstrap modal that is loaded via data-remote. In the modal body, I include a jquery library (for example timepicker), followed by a tag that calls functions from the library.
The problem is, the modal doesn't launch on the first click (with firebug error that a function from the library was not available). But the moal launches on the second or later clicks.
What's the best way to fix this?
Thank you
I am using this jQuery plugin http://jacklmoore.com/colorbox/ to show a popup window. There is a link in the content of the first popup clicking on which triggers another small popup window. I'd like to have this second popup without closing the first one. Is it possible to achieve this without changing much in the plugin?
There would be no way to do that without significantly altering the plugin. Sorry.
Assuming you have the chops, consider using ColorBox with the html parameter for the first popup window. In the HTML, develop your own window, eventing and handler (with Jquery). Just a thought.
I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.
I have a photo gallery that use modal window to display photos. During modal windows initialisation I'm inserting rest of photo functionality (share button, comment, tags, etc). Everything works well except facebook share button. From documentation you have to include following html code:
<a name="fb_share">share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
It works perfectly for static pages, but not with the pages that created on the fly.
Here is example of my javascript code (using jQuery)
//Insert share button
$.gallery.facebookLike.insertAfter($('#cboxContent #cboxLoadedContent'));
//Insert script element after share button
$('<script />', {
src : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
type: 'text/javascript'
}).insertAfter($.gallery.facebookLike);
As result button inserted but script element is not initialised, after inspection in firebug this script appears in loaded script tab but not present on HTML tab. However if you click on the share link it sends you to facebook page and when you click BACK button in your browser the script gets initialised.
What am I doing wrong and what can be done about it?
I'm just taking a guess here, but I believe the script has a function running on window onload event. Since the window is already loaded, the script isn't running.
Edit: Yes, it seems that the function FB.Share.stopScan is being run on window load. You should try manually calling that function.