[jQuery] Re: Tabs: page jumps to top when tab changes
I have fixed it. In the end i used the original code:
$(function() {
$("#tabs").tabs({ fx: { opacity: 'toggle' } }).tabs
('rotate', 5000);
});
But turned off the fade between items as that seems to have been the
cause. So now i am using:
$(function() {
$("#tabs").tabs().tabs('rotate', 5000);
});
Thanks
On Aug 2, 1:02 pm, chris_huh wrote:
> duh. thanks.
>
> but i also realise it is missing the auto rotate thing that could be
> set up using the tabs function. Is there not a way to use the tabs
> function with a return false.
>
> On Aug 2, 12:27 pm, waseem sabjee wrote:
>
> > In the code above you are using hide() instead of fadeOut() etc
>
> > On Sun, Aug 2, 2009 at 12:42 PM, chris_huh wrote:
>
> > > I tried that and it didn't work.
>
> > > The second code i pasted above works (doesn't jump to top of page) but
> > > it loses the fading ability.
> > > Where as the first bit of code has the fadign but jumps to the top, i
> > > don't know where to put the return false statement in that bit of code
> > > to prevent it doing that.
>
> > > On Aug 2, 11:26 am, waseem sabjee wrote:
> > > > return false is the standard method and will work no problem :)
>
> > > > there is an alternative as well
>
> > > > $(document).ready(function(e){ // function becomes function(e)
> > > > e.preventDefault(); // prevent default behavior and ensure the click is
> > > > canceled.
> > > > $('#tabs div').hide();
> > > > $('#tabs div:first').show();
> > > > $('#tabs ul li:first').addClass('active');
>
> > > > $('#tabs ul li a').click(function(){
> > > > $('#tabs ul li').removeClass('active');
> > > > $(this).parent().addClass('active');
> > > > var currentTab = $(this).attr('href');
> > > > $('#tabs div').hide();
> > > > $(currentTab).show();
>
> > > > });
> > > > });
>
> > > > just curious through if any expert out there can explain the difference
> > > > between using return false; and e.preventDefault();
>
> > > > On Sun, Aug 2, 2009 at 12:21 PM, chris_huh wrote:
>
> > > > > Thanks. I don't know javascript much. Where would i put the return
> > > > > false
>
> > > > > I have:
> > > > >
> > > > > $(function() {
> > > > > $("#tabs").tabs({ fx: { opacity: 'toggle' }
> > > > > }).tabs('rotate', 5000);
> > > > > });
> > > > >
>
> > > > > And i am not using onclick events. I tried using:
>
> > > > >
> > > > > $(document).ready(function(){
> > > > > $('#tabs div').hide();
> > > > > $('#tabs div:first').show();
> > > > > $('#tabs ul li:first').addClass('active');
>
> > > > > $('#tabs ul li a').click(function(){
> > > > > $('#tabs ul li').removeClass('active');
> > > > > $(this).parent().addClass('active');
> > > > > var currentTab = $(this).attr('href');
> > > > > $('#tabs div').hide();
> > > > > $(currentTab).show();
> > > > > return false;
> > > > > });
> > > > > });
>
> > > > >
>
> > > > > and that works but i lose the fade effect and am not sure where to put
> > > > > it back in.
>
> > > > > On Jul 30, 7:33 pm, kalyan Chatterjee
> > > > > wrote:
> > > > > > Just try to write return false on tab click event.
>
> > > > > > On Jul 29, 6:53 pm, chris_huh wrote:
>
> > > > > > > Thanks but I can't find jquery.history_remote.pack.js. I am using
> > > > > > > jquery 1.7.1 and the tabs thing that comes with JQuery UI.
>
> > > > > > > On Jul 29, 2:25 pm, rupak mandal wrote:
>
> > > > > > > > Hi, if you remove the "jquery.history_remote.pack.js" then I
> > > think it
> > > > > works
> > > > > > > > properly.
>
> > > > > > > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh
> > > > > wrote:
>
> > > > > > > > > At the moment my page will jump to the top (because of the #)
> > > > > whenever
> > > > > > > > > a new tab is clicked or when it automatically rotates to one.
>
> > > > > > > > > Is there a way to stop this, maybe using an onclick event
> > > instead
> > > > > of
> > > > > > > > > relying on the #tabs links?
[jQuery] Re: Tabs: page jumps to top when tab changes
duh. thanks.
but i also realise it is missing the auto rotate thing that could be
set up using the tabs function. Is there not a way to use the tabs
function with a return false.
On Aug 2, 12:27 pm, waseem sabjee wrote:
> In the code above you are using hide() instead of fadeOut() etc
>
> On Sun, Aug 2, 2009 at 12:42 PM, chris_huh wrote:
>
> > I tried that and it didn't work.
>
> > The second code i pasted above works (doesn't jump to top of page) but
> > it loses the fading ability.
> > Where as the first bit of code has the fadign but jumps to the top, i
> > don't know where to put the return false statement in that bit of code
> > to prevent it doing that.
>
> > On Aug 2, 11:26 am, waseem sabjee wrote:
> > > return false is the standard method and will work no problem :)
>
> > > there is an alternative as well
>
> > > $(document).ready(function(e){ // function becomes function(e)
> > > e.preventDefault(); // prevent default behavior and ensure the click is
> > > canceled.
> > > $('#tabs div').hide();
> > > $('#tabs div:first').show();
> > > $('#tabs ul li:first').addClass('active');
>
> > > $('#tabs ul li a').click(function(){
> > > $('#tabs ul li').removeClass('active');
> > > $(this).parent().addClass('active');
> > > var currentTab = $(this).attr('href');
> > > $('#tabs div').hide();
> > > $(currentTab).show();
>
> > > });
> > > });
>
> > > just curious through if any expert out there can explain the difference
> > > between using return false; and e.preventDefault();
>
> > > On Sun, Aug 2, 2009 at 12:21 PM, chris_huh wrote:
>
> > > > Thanks. I don't know javascript much. Where would i put the return
> > > > false
>
> > > > I have:
> > > >
> > > > $(function() {
> > > > $("#tabs").tabs({ fx: { opacity: 'toggle' }
> > > > }).tabs('rotate', 5000);
> > > > });
> > > >
>
> > > > And i am not using onclick events. I tried using:
>
> > > >
> > > > $(document).ready(function(){
> > > > $('#tabs div').hide();
> > > > $('#tabs div:first').show();
> > > > $('#tabs ul li:first').addClass('active');
>
> > > > $('#tabs ul li a').click(function(){
> > > > $('#tabs ul li').removeClass('active');
> > > > $(this).parent().addClass('active');
> > > > var currentTab = $(this).attr('href');
> > > > $('#tabs div').hide();
> > > > $(currentTab).show();
> > > > return false;
> > > > });
> > > > });
>
> > > >
>
> > > > and that works but i lose the fade effect and am not sure where to put
> > > > it back in.
>
> > > > On Jul 30, 7:33 pm, kalyan Chatterjee
> > > > wrote:
> > > > > Just try to write return false on tab click event.
>
> > > > > On Jul 29, 6:53 pm, chris_huh wrote:
>
> > > > > > Thanks but I can't find jquery.history_remote.pack.js. I am using
> > > > > > jquery 1.7.1 and the tabs thing that comes with JQuery UI.
>
> > > > > > On Jul 29, 2:25 pm, rupak mandal wrote:
>
> > > > > > > Hi, if you remove the "jquery.history_remote.pack.js" then I
> > think it
> > > > works
> > > > > > > properly.
>
> > > > > > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh
> > > > wrote:
>
> > > > > > > > At the moment my page will jump to the top (because of the #)
> > > > whenever
> > > > > > > > a new tab is clicked or when it automatically rotates to one.
>
> > > > > > > > Is there a way to stop this, maybe using an onclick event
> > instead
> > > > of
> > > > > > > > relying on the #tabs links?
[jQuery] Re: Tabs: page jumps to top when tab changes
I tried that and it didn't work.
The second code i pasted above works (doesn't jump to top of page) but
it loses the fading ability.
Where as the first bit of code has the fadign but jumps to the top, i
don't know where to put the return false statement in that bit of code
to prevent it doing that.
On Aug 2, 11:26 am, waseem sabjee wrote:
> return false is the standard method and will work no problem :)
>
> there is an alternative as well
>
> $(document).ready(function(e){ // function becomes function(e)
> e.preventDefault(); // prevent default behavior and ensure the click is
> canceled.
> $('#tabs div').hide();
> $('#tabs div:first').show();
> $('#tabs ul li:first').addClass('active');
>
> $('#tabs ul li a').click(function(){
> $('#tabs ul li').removeClass('active');
> $(this).parent().addClass('active');
> var currentTab = $(this).attr('href');
> $('#tabs div').hide();
> $(currentTab).show();
>
> });
> });
>
> just curious through if any expert out there can explain the difference
> between using return false; and e.preventDefault();
>
> On Sun, Aug 2, 2009 at 12:21 PM, chris_huh wrote:
>
> > Thanks. I don't know javascript much. Where would i put the return
> > false
>
> > I have:
> >
> > $(function() {
> > $("#tabs").tabs({ fx: { opacity: 'toggle' }
> > }).tabs('rotate', 5000);
> > });
> >
>
> > And i am not using onclick events. I tried using:
>
> >
> > $(document).ready(function(){
> > $('#tabs div').hide();
> > $('#tabs div:first').show();
> > $('#tabs ul li:first').addClass('active');
>
> > $('#tabs ul li a').click(function(){
> > $('#tabs ul li').removeClass('active');
> > $(this).parent().addClass('active');
> > var currentTab = $(this).attr('href');
> > $('#tabs div').hide();
> > $(currentTab).show();
> > return false;
> > });
> > });
>
> >
>
> > and that works but i lose the fade effect and am not sure where to put
> > it back in.
>
> > On Jul 30, 7:33 pm, kalyan Chatterjee
> > wrote:
> > > Just try to write return false on tab click event.
>
> > > On Jul 29, 6:53 pm, chris_huh wrote:
>
> > > > Thanks but I can't find jquery.history_remote.pack.js. I am using
> > > > jquery 1.7.1 and the tabs thing that comes with JQuery UI.
>
> > > > On Jul 29, 2:25 pm, rupak mandal wrote:
>
> > > > > Hi, if you remove the "jquery.history_remote.pack.js" then I think it
> > works
> > > > > properly.
>
> > > > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh
> > wrote:
>
> > > > > > At the moment my page will jump to the top (because of the #)
> > whenever
> > > > > > a new tab is clicked or when it automatically rotates to one.
>
> > > > > > Is there a way to stop this, maybe using an onclick event instead
> > of
> > > > > > relying on the #tabs links?
[jQuery] Re: Tabs: page jumps to top when tab changes
Thanks. I don't know javascript much. Where would i put the return
false
I have:
$(function() {
$("#tabs").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate',
5000);
});
And i am not using onclick events. I tried using:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
and that works but i lose the fade effect and am not sure where to put
it back in.
On Jul 30, 7:33 pm, kalyan Chatterjee
wrote:
> Just try to write return false on tab click event.
>
> On Jul 29, 6:53 pm, chris_huh wrote:
>
> > Thanks but I can't find jquery.history_remote.pack.js. I am using
> > jquery 1.7.1 and the tabs thing that comes with JQuery UI.
>
> > On Jul 29, 2:25 pm, rupak mandal wrote:
>
> > > Hi, if you remove the "jquery.history_remote.pack.js" then I think it
> > > works
> > > properly.
>
> > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh wrote:
>
> > > > At the moment my page will jump to the top (because of the #) whenever
> > > > a new tab is clicked or when it automatically rotates to one.
>
> > > > Is there a way to stop this, maybe using an onclick event instead of
> > > > relying on the #tabs links?
[jQuery] Re: Tabs: page jumps to top when tab changes
Thanks but I can't find jquery.history_remote.pack.js. I am using jquery 1.7.1 and the tabs thing that comes with JQuery UI. On Jul 29, 2:25 pm, rupak mandal wrote: > Hi, if you remove the "jquery.history_remote.pack.js" then I think it works > properly. > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh wrote: > > > At the moment my page will jump to the top (because of the #) whenever > > a new tab is clicked or when it automatically rotates to one. > > > Is there a way to stop this, maybe using an onclick event instead of > > relying on the #tabs links?
[jQuery] Re: Tabs: page jumps to top when tab changes
Thanks but I can't find jquery.history_remote.pack.js. I am using jquery 1.7.1 and the tabs thing that comes with JQuery UI. On Jul 29, 2:25 pm, rupak mandal wrote: > Hi, if you remove the "jquery.history_remote.pack.js" then I think it works > properly. > > On Wed, Jul 29, 2009 at 5:50 PM, chris_huh wrote: > > > At the moment my page will jump to the top (because of the #) whenever > > a new tab is clicked or when it automatically rotates to one. > > > Is there a way to stop this, maybe using an onclick event instead of > > relying on the #tabs links?
[jQuery] Tabs: page jumps to top when tab changes
At the moment my page will jump to the top (because of the #) whenever a new tab is clicked or when it automatically rotates to one. Is there a way to stop this, maybe using an onclick event instead of relying on the #tabs links?
