I have some jquery report in which I am creating some dynamic html content (nested divs,span,label) using json.
Its using jquery,mCustomScrollbar,commons,jqueryui.
I have one <div>...//some static code </div> in this case everything works fine.
but when I create some code between this <div> // dynamic code using ajax </div>. Its scrollbar not appearing.
but If I minimize,maximize browser window or 'firebug' the scrollbar appearing.
Is it because of dynamice css style generating?
I am new to jquery css help
If the scrollbars you refer to are from the mCustomScrollbar plugin you will need to use its update method once the ajax content is inserted in the DOM.
$(selector).mCustomScrollbar("update");
See the docs at http://manos.malihu.gr/jquery-custom-content-scroller/#methods-section
I have the same problem and I solved it with a work around by using destroy method which is also provided by mCustomScrollbar
when I add the new content to the selector I destroy the mCustomScrollbar
$(selector).mCustomScrollbar("destroy");
then I rebuild it again; you can check destroy and rebuild in this demo
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/disable_destroy_example.html
BTW update method didn't work with me because as it's mentioned that updateOnContentResize by default is true which calls update method, I really don't know what is problem.
Related
The new facebook page plugin has the minimum width at 280px (inserted by a data-width:280px).
However when I inspect the element created by the script with firebug i see an element with id="u_0_0" with the width at 280 but i can modify it from console to be as i need (227px).
I've tried to modify it with a little script made with jquery (i can only work with jquery 1.2...an old version of it...) but it doesent seams to work since the element is inserted dinamicaly into the DOM.
I also tried an method finded by google but also it doesn't work:
jQuery(document).ready(function(){
jQuery('#u_0_0').live('DOMNodeInserted', function(){
alert(jQuery('#u_0_0').html());
});
});
The above method doesn't work and if i dont use live it alerts me with undefined...
So, how can i get the element so i can modify it's css ? Maybe jquery 1.2.1 is too old but maybe i can get and modify it with clasic javascript...
The plugin renders in an iframe which is a separate DOM from yours.
Because of that reason, its not possible to run scripts on the plugin from your website
In your script:
jQuery('#u_0_0') is not able to find the div, since that doesn't exist on your DOM.
I think you can't use javascript or css on an object inside a iframe.
If you look upside on code you will see the iframe.
You can do that only if the location of the iframe target is cross-domain but i'm not sure.
I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.
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.