[jQuery] Re: JQuery Tabs not loading on first click
Thanks Klaus - worked perfectly.
On Nov 23, 9:34 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
On 23 Nov., 12:39,sukhminder[EMAIL PROTECTED] wrote:
Tabs are not loading on the first click. I have a link which is like:
li class=newsa href=javascript:loadTabs('news')Headlines/a/
li
when user clicks on this it calls the following function:
script
function loadTabs(filename) {
$('head').append('link type=text/css href='+ webroot + 'css/
ui.tabs.css rel=stylesheet /');
$.getScript(webroot + script/ui.tabs.js);
$.get(webroot + html/+filename+.htm, function(data){
$(#cbody).html(+data+);
$(#newscontainer ul).tabs({ remote: true, fxSlide: true,
fxFade:
true, fxSpeed: 'normal' });
});}
/script
this function loads the required css and javascript tabs file to
display tabs; but when I click on it it gives me the following error:
$(#newscontainer ul).tabs is not a function
[Break on this error] $(#newscontainer ul).tabs({ remote: true,
fxSlide: true, fxFade: true, fxSpe...
However, it does work when I click on the link again. Any idea why
this is happening? This wasn't happening on my dev server. Here is the
link to the actual site:http://www.ranglapunjab.net/
Thanks in advance.
My guess is this is due to asynchronous loading. When clicking first
time ui.tabs.js gets loaded but when executing the tabs() method on
the next line the browser is still loading the file. Second time you
click it has been loaded, thus no error any longer.
Try to call tabs in the callback of the getScript method:
$.getScript(webroot + script/ui.tabs.js, function() {
$(#newscontainer ul).tabs({ remote: true, fxSlide: true, fxFade:
true, fxSpeed: 'normal' });
});
--Klaus- Hide quoted text -
- Show quoted text -
[jQuery] Re: jCarousel: No width/height set for items.
Hi Jan,
Yes i have included the core css file. You can see the live site at:
http://www.ranglapunjab.net/
Thanks for the reply.
On Nov 24, 10:23 am, Jan Sorgalla [EMAIL PROTECTED] wrote:
Hi,
On 23 Nov., 13:36, sukhminder [EMAIL PROTECTED] wrote:
I haveimplementedjCarouseldynamicallyloadingimageswithAJAX. It
runs fine until I click some other link on the page and it shows me
the following error: jCarousel: No width/height set for items. This
will cause an infinite loop. Aborting...
Below is the part of the code what I am using:
function gallery() {
$('#cbody').html('div id=mycarousel class=jcarousel-skin-
tangoul/ul/divdiv style=padding:10px;align:center
id=dspPic/div');
$('#mycarousel').jcarousel({
scroll: 6,
itemLoadCallback: mycarousel_itemLoadCallback
});
};
function mycarousel_getItemHTML(url)
{
var url_m = url.replace(/small/g, '');
return 'a href=javascript:showPic(' + ' + url_m + '
+')img src=' + url + ' width=75 height=75 border=0//a';
};
function showPic(picurl) {
$('#dspPic').html(img src=' + picurl + ' border='0' /
).animate({height: 'show',opacity: 'show'}, 'slow');
}
Thanks!
did you included the core css file (jquery.jcarousel.css)?
Jan- Hide quoted text -
- Show quoted text -
[jQuery] JQuery Tabs not loading on first click
Tabs are not loading on the first click. I have a link which is like:
li class=newsa href=javascript:loadTabs('news')Headlines/a/
li
when user clicks on this it calls the following function:
script
function loadTabs(filename) {
$('head').append('link type=text/css href='+ webroot + 'css/
ui.tabs.css rel=stylesheet /');
$.getScript(webroot + script/ui.tabs.js);
$.get(webroot + html/+filename+.htm, function(data){
$(#cbody).html(+data+);
$(#newscontainer ul).tabs({ remote: true, fxSlide: true,
fxFade:
true, fxSpeed: 'normal' });
});
}
/script
this function loads the required css and javascript tabs file to
display tabs; but when I click on it it gives me the following error:
$(#newscontainer ul).tabs is not a function
[Break on this error] $(#newscontainer ul).tabs({ remote: true,
fxSlide: true, fxFade: true, fxSpe...
However, it does work when I click on the link again. Any idea why
this is happening? This wasn't happening on my dev server. Here is the
link to the actual site: http://www.ranglapunjab.net/
Thanks in advance.
[jQuery] jCarousel: No width/height set for items.
I have implemented jCarousel dynamically loading images with AJAX. It
runs fine until I click some other link on the page and it shows me
the following error: jCarousel: No width/height set for items. This
will cause an infinite loop. Aborting...
Below is the part of the code what I am using:
function gallery() {
$('#cbody').html('div id=mycarousel class=jcarousel-skin-
tangoul/ul/divdiv style=padding:10px;align:center
id=dspPic/div');
$('#mycarousel').jcarousel({
scroll: 6,
itemLoadCallback: mycarousel_itemLoadCallback
});
};
function mycarousel_getItemHTML(url)
{
var url_m = url.replace(/small/g, '');
return 'a href=javascript:showPic(' + ' + url_m + '
+')img src=' + url + ' width=75 height=75 border=0//a';
};
function showPic(picurl) {
$('#dspPic').html(img src=' + picurl + ' border='0' /
).animate({height: 'show',opacity: 'show'}, 'slow');
}
Thanks!
[jQuery] Re: How to apply tabs to content loaded by ajax
Below is the code I am using and the file contents:
Menu from where file is being loaded on being clicked:
div class=menu_ra href=javascript:loadContent('html/
batala.htm') title=BatalaBatala/a/div
Include file and javascript:
link href=css/tabs.css rel=stylesheet type=text/css /
!--[if lte IE 7]
link rel=stylesheet href=css/tabs-ie.css type=text/css
media=projection, screen
![endif]--
script src=script/jquery-1.2.1.min.js type=text/javascript /
script
script src=script/tabs.js type=text/javascript /script
script type=text/javascript
function loadContent(filename) {
$(#contentbox).load(+filename+);
$(#contentbox #citytabs ul).tabs();
}
/script
Content place holder:
div id=contentbox/div
Dynamically called file contents:
div id=citytabs
ul
lia href=#IntroductionspanIntroduction/span/
a/li
lia href=#historyspanhistory/span/a/li
lia href=#locationspanlocation/span/a/li
lia
href=#festivalsspanfestivals/span/a/li
lia
href=#personalitiesspanpersonalities/span/a/li
lia
href=#tourismspantourism/span/a/li
/ul
DIV id=IntroductionH2Introduction/H2
POne of the oldest towns in the province of...
and so on... rest of the file.
Does this makes any sense?
Thanks Guys.
On Oct 12, 8:23 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
On 12 Okt., 14:47, sukhminder [EMAIL PROTECTED] wrote:
Hi All,
I am loading an .html file using ajax and then trying to do: $
('#tabholder ul').tabs();
to apply tabbing but am unable to do it.
I am loading content is the div like: div id=showcontent/div
and my .html file looks somewhat like:
div id=citytabs class=flora
ul
lia href=tabcontent.htm title=Tab
onespanOne/span/a/li
lia href=tabcontent2.htm title=Tab
twospanTwo/span/a/li
lia href=ahah_3.htmlspanThree/span/a/li
/ul
/div
How to get hold of the dynamic content and apply tab style ? ... any
help!!!
Thanks
Sukhminder
Looks like you're using the wrong id to set up tabs: tabholder !=
citytabs
--Klaus- Hide quoted text -
- Show quoted text -
[jQuery] How to apply tabs to content loaded by ajax
Hi All,
I am loading an .html file using ajax and then trying to do: $
('#tabholder ul').tabs();
to apply tabbing but am unable to do it.
I am loading content is the div like: div id=showcontent/div
and my .html file looks somewhat like:
div id=citytabs class=flora
ul
lia href=tabcontent.htm title=Tab
onespanOne/span/a/li
lia href=tabcontent2.htm title=Tab
twospanTwo/span/a/li
lia href=ahah_3.htmlspanThree/span/a/li
/ul
/div
How to get hold of the dynamic content and apply tab style ? ... any
help!!!
Thanks
Sukhminder
