i want to display some source code on ajax loaded page via Facebox plugin.
But if i try to add script tag
<script src="src/prettify.js"></script>
Facebox remove all script tags in loaded page.
So i need pure CSS based solution for syntax highlighting or solve removing of script tags by facebox.
Thx for any help.
Browsers don't execute script tags pulled in via AJAX: Inline jQuery script not working within AJAX call
The CSS only solution would be to manually wrap your code in spans and set all the coloring in CSS, which is definitely not ideal.
The best solution here would be to include <script src="src/prettify.js"></script> on the main page doing the Facebox ajax calls and just making sure that prettify is triggered on the AJAXed content after it's pulled in like so:
$(document).bind('beforeReveal.facebox', function() {
prettyPrint();
});
Related
I have placed some custom HTML, CSS, and jQuery inside an HTML box in my google site. but as the page loads, the unformatted content shows for several seconds until the loading is complete. attempts to add the following:
html { visibility: hidden; }
and then turning it back on later in jQuery do not appear to work inside a Google site.
Does anyone have another suggestion?
I don't know if this works on a google site or not, but using
<body style='display:none;'>
and then in the jQuery document ready function place
$("body").show(); has worked for me.
For some reason using style on the body statement works faster than the CSS file even if the CSS file appears in the head section.
I am trying to insert
onclick="countCheckboxes()"
within the input tag. Is there any way to do this in CSS? I tried the following, but didn't work:
input[type=checkbox]:after {
content: "onclick="countCheckboxes()"";}
So that it would eventually output this
<input type="checkbox" onclick="countCheckboxes()">
This is for a Wordpress form. Maybe I could add something in the functions.php template to enable me to do this?
You cannot generate Javascript in css. Please refer to this for more information: Using Javascript in CSS
I am guessing that you want to keep your markup clean of JS? If so, the best thing would be to abstract the JS from your markup in a separate js file. There you can navigate the dom and append functions whichever way you require. You can do this with either vanilla Javascript or a JS framework(like Jquery) which simplifes the process a lot.
I'm happy to set up a demo if you wish to learn how.
I added the JQuery list package to meteor and it recognizes it. But when I write JQuery code inline in <script></script> tags in the apps main html file it does not recognize it ( but I don't get an error). When I write JQuery code in my meteor app .js file I get an error. So I am confused as to how one is suppose to write with javascript or added library packages (like JQuery) once they are added. Thank you.
You need to put general javascript in a container to include it in a specific Meteor template.
For general onLoad scripts that you might be used to, you can encapsulate that code inside a function once the template is rendered
Example:
Template.*templatename*.rendered = function()
{
//do this only on template load
if(!this._rendered) {this._rendered = true;console.log('Template onLoad');}
//everything outside if is done every time the template is re-drawn (meteor sends an update)
}
I have one jQuery plugin (colorbox) that loads a modal popup window (with an external html file). <-- works perfectly by itself. I have another jQuery plugin (jScrollPane) that loads custom scroll bars for divs. <-- it too works perfectly by itself. Both have a JS component and a CSS component.
My process thus far:
I tried to load and initialize the scroll bar jQuery and CSS from the eternal html (popup) and my div disappeared.
Then I tried to load the scroll bar jQuery in the parent window and initialize it in the colorbox callback...this time my div didn't disappear but the scroll bar and arrows (even OS standard arrows) did disappear.
Finally, I put the scroll bar CSS in <style> tags and shoved it inside the eternal html file's <body> tags. That works on all major browsers, however, now you can't exit the popup window. Arg!
So I think my question is: how do you get jQuery plugins and their CSS files to initialize on dynamically loaded content? What goes where (incl. the jQuery library itself)?
Thanks!
If you are using the "window.open" type of popup, then I would say make it a little simpler and bring it into your page as a JQueryUI Dialog box that pulls in your external html file are the content, loading it in the DIV and accessible within the general page context, inheriting the JQuery and CSS as well. The simple form of this should be like:
$("#id").load(url).dialog();
Where #id is the DIV that is hidden and will contain your dialog data, and URL is the external url to the html file in your popup.
Found the solution....
My question was specifically on integrating colorbox (a jQuery lightbox plugin) with jScrollPane (a jQuery custom scrollbar plugin). My ajax call to load content with the colorbox worked, however, the jScrollPane could not initiate because the required wasn't loaded (because the ajax call didn't pull any info from the head tags).
If other Stack Overflowers stumble across a similar issue this is what I did to solve it: used iframes instead of an ajax call. Ooops. duh.
I don't know if colorbox is the only plugin that pulls info only from body tags and not the head but I imagine many plugins work this way when working with external files. If this is your problem, use iframes to ensure that the data in your head tag is pulled.
Thanks Stack Overflow anyhoo! I still love you.
Friends, I am willing to follow the rules of the W3C where it is recommended that javascript and CSS files should be in individual files and not within the page.
Good, following this rule, and not wanting to overload the master page, I would like to embed the dependencies dynamically. So how could I insert the libraries dynamically? I think the bigger problem is the Ajax requests.
Example:
<script type="text/javascript" src="http://sstatic.net/so/js/master.js?v=6523"></script>
I tried using the JavascriptResult, but he writes the content on the page, and do not run as "Stream."
Any help is welcome. Thanks
If I understand correctly the problem, you want to add script files dynamically to the page.
You can try jQuery load function, that can parse for you the result in very intuitive way.