vertical tabs in facebox
46 views
Skip to first unread message
Simon
May 16, 2010, 3:29:35 PM5/16/10
to facebox
Hello,
I'm trying to achieve vertical tabs inside a facebox popup. I am able
to get it almost working with jquery-ui-1.8.1 but the problem is that
once the popup has loaded and the tabs are displayed, i cannot click
on them to change the content and tabs. I have also been reading about
facebox + ui tabs from jquery i believe but I've been having some
issues implementing that. If someone could please provide a simple
example where I could click on a link, facebox would popup and there
would be some clickable vertical tabs in it with content changing on
click, that would be super great. Or maybe someone could take a look
at what I've got so far please. The UI file is here: http://jqueryui.com/download
my code is as follows:
<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery-ui-1.8.1.custom.min.js"></
script>
<script language="javascript" src="facebox.js"></script>
<link type="text/css" href="jquery-ui-1.8.1.custom.css"
rel="stylesheet" />
<link rel="stylesheet" href="facebox.css" media="screen" />
<link href="facebox.css" media="screen" rel="stylesheet" type="text/
css" />
<style>
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
margin-top: 50px;
}
</style>
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em;
float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-
bottom-width: 1px !important; border-right-width: 0 !important;
margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
0; padding-right: .1em; border-right-width: 1px; border-right-width:
1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right;
width: 40em;}
</style>
<script language="javascript">
$(document).bind('reveal.facebox', function(){
$('#facebox').draggable();
})
</script>
<script language="javascript">
$(document).ready(function(){
$('#drag').hide();
$('a[rel*=facebox]').facebox();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-
left');
});
</script>
</head>
<body>
<a href="#drag" rel="facebox">Click</a>
<a href="#drag2" rel="facebox">Click</a>
<div id="drag2">something here</div>
<div id="drag">
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna,
blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque
sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
</div>
</div>
</body>
Thanks so much!!!
--
You received this message because you are subscribed to the Google Groups "facebox" group.
To post to this group, send email to fac...@googlegroups.com.
To unsubscribe from this group, send email to facebox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/facebox?hl=en.
I'm trying to achieve vertical tabs inside a facebox popup. I am able
to get it almost working with jquery-ui-1.8.1 but the problem is that
once the popup has loaded and the tabs are displayed, i cannot click
on them to change the content and tabs. I have also been reading about
facebox + ui tabs from jquery i believe but I've been having some
issues implementing that. If someone could please provide a simple
example where I could click on a link, facebox would popup and there
would be some clickable vertical tabs in it with content changing on
click, that would be super great. Or maybe someone could take a look
at what I've got so far please. The UI file is here: http://jqueryui.com/download
my code is as follows:
<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery-ui-1.8.1.custom.min.js"></
script>
<script language="javascript" src="facebox.js"></script>
<link type="text/css" href="jquery-ui-1.8.1.custom.css"
rel="stylesheet" />
<link rel="stylesheet" href="facebox.css" media="screen" />
<link href="facebox.css" media="screen" rel="stylesheet" type="text/
css" />
<style>
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
margin-top: 50px;
}
</style>
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em;
float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-
bottom-width: 1px !important; border-right-width: 0 !important;
margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
0; padding-right: .1em; border-right-width: 1px; border-right-width:
1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right;
width: 40em;}
</style>
<script language="javascript">
$(document).bind('reveal.facebox', function(){
$('#facebox').draggable();
})
</script>
<script language="javascript">
$(document).ready(function(){
$('#drag').hide();
$('a[rel*=facebox]').facebox();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-
left');
});
</script>
</head>
<body>
<a href="#drag" rel="facebox">Click</a>
<a href="#drag2" rel="facebox">Click</a>
<div id="drag2">something here</div>
<div id="drag">
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna,
blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque
sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
</div>
</div>
</body>
Thanks so much!!!
--
You received this message because you are subscribed to the Google Groups "facebox" group.
To post to this group, send email to fac...@googlegroups.com.
To unsubscribe from this group, send email to facebox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/facebox?hl=en.
Greg Milby
May 16, 2010, 3:45:19 PM5/16/10
to fac...@googlegroups.com
hi, i went and downloaded teh jquery ui files, but i got an entire zip file - not just a custom.js file.
i mapped the files, and i do not get anything to work. some of the files are linked twice in the head - is this intentional?
this paste is your paste, with the ui mappings.
-----------------------
Visit My Sites!
http://1-4-u.info | Don't send insanely long links!
www.superantispyware.com/superantispyware.html?rid=3971 Remove All The Spyware - Not Just The Easy Ones!
-----------------------
Visit My Sites!
http://1-4-u.info | Don't send insanely long links!
www.superantispyware.com/superantispyware.html?rid=3971 Remove All The Spyware - Not Just The Easy Ones!
Simon
May 16, 2010, 4:04:47 PM5/16/10
to facebox
Sorry about the double linking, I've cleaned that up.
I've put all the files in http://paste2.org/p/832231 .
If you can get vertical tabs working inside facebox (in any way) that
would be cool. You don't have to use my code. I've been looking online
and fighting with this for hours but no luck =/ . Thanks for your
quick reply!
On May 16, 3:45 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, i went and downloaded teh jquery ui files, but i got an entire zip file
> - not just a custom.js file.*
> *i mapped the files, and i do not get anything to work. some of the files
> are linked twice in the head - is this intentional?*
> *
> *
> *http://paste2.org/p/832210*
> *
> *
> * <http://paste2.org/p/832210>this paste is your paste, with the ui
> mappings.
> *-----------------------
> Visit My Sites!http://1-4-u.info| Don't send insanely long links!www.superantispyware.com/superantispyware.html?rid=3971Remove All The
> > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > .
I've put all the files in http://paste2.org/p/832231 .
If you can get vertical tabs working inside facebox (in any way) that
would be cool. You don't have to use my code. I've been looking online
and fighting with this for hours but no luck =/ . Thanks for your
quick reply!
On May 16, 3:45 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, i went and downloaded teh jquery ui files, but i got an entire zip file
> - not just a custom.js file.*
> *i mapped the files, and i do not get anything to work. some of the files
> are linked twice in the head - is this intentional?*
> *
> *
> *http://paste2.org/p/832210*
> *
> *
> * <http://paste2.org/p/832210>this paste is your paste, with the ui
> mappings.
> *-----------------------
> Visit My Sites!http://1-4-u.info| Don't send insanely long links!www.superantispyware.com/superantispyware.html?rid=3971Remove All The
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/facebox?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups "facebox" group.
> To post to this group, send email to fac...@googlegroups.com.
> To unsubscribe from this group, send email to facebox+u...@googlegroups.com.
> For more options, visit this group athttp://groups.google.com/group/facebox?hl=en.
> >http://groups.google.com/group/facebox?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups "facebox" group.
> To post to this group, send email to fac...@googlegroups.com.
> To unsubscribe from this group, send email to facebox+u...@googlegroups.com.
Simon
May 16, 2010, 4:28:12 PM5/16/10
to facebox
By the way, in case you are wondering, what I'm trying to achieve is a
popup like on ebay ->
http://motors.shop.ebay.ca/BMW-/6006/i.html?Model=6%252DSeries&_catref=1&_dmpt=US_Cars_Trucks&_fln=1&_ssov=1&_trksid=p3286.c0.m282
if you click on "choose more" you will see a popup with tabs and
different content on each.
Or the same as on Kijiji -> http://montreal.kijiji.ca/f-cars-vehicles-cars-Owner-W0QQAQ5fForSaleByZownrQQCatIdZ174
. if you click on "view more options", you will see tabs with
different content.
On May 16, 4:04 pm, Simon <ken...@gmail.com> wrote:
> Sorry about the double linking, I've cleaned that up.
> I've put all the files inhttp://paste2.org/p/832231.
> If you can get vertical tabs working inside facebox (in any way) that
> would be cool. You don't have to use my code. I've been looking online
> and fighting with this for hours but no luck =/ . Thanks for your
> quick reply!
>
> On May 16, 3:45 pm, Greg Milby <gmi...@gmail.com> wrote:
>
>
>
> > *hi, i went and downloaded teh jquery ui files, but i got an entire zip file
> > - not just a custom.js file.*
> > *i mapped the files, and i do not get anything to work. some of the files
> > are linked twice in the head - is this intentional?*
> > *
> > *
> > *http://paste2.org/p/832210*
> > *
> > *
> > * <http://paste2.org/p/832210>this paste is your paste, with the ui
> > mappings.
> > *-----------------------
> > Visit My Sites!http://1-4-u.info|Don't send insanely long links!www.superantispyware.com/superantispyware.html?rid=3971RemoveAll The
popup like on ebay ->
http://motors.shop.ebay.ca/BMW-/6006/i.html?Model=6%252DSeries&_catref=1&_dmpt=US_Cars_Trucks&_fln=1&_ssov=1&_trksid=p3286.c0.m282
if you click on "choose more" you will see a popup with tabs and
different content on each.
Or the same as on Kijiji -> http://montreal.kijiji.ca/f-cars-vehicles-cars-Owner-W0QQAQ5fForSaleByZownrQQCatIdZ174
. if you click on "view more options", you will see tabs with
different content.
On May 16, 4:04 pm, Simon <ken...@gmail.com> wrote:
> Sorry about the double linking, I've cleaned that up.
> I've put all the files inhttp://paste2.org/p/832231.
> If you can get vertical tabs working inside facebox (in any way) that
> would be cool. You don't have to use my code. I've been looking online
> and fighting with this for hours but no luck =/ . Thanks for your
> quick reply!
>
> On May 16, 3:45 pm, Greg Milby <gmi...@gmail.com> wrote:
>
>
>
> > *hi, i went and downloaded teh jquery ui files, but i got an entire zip file
> > - not just a custom.js file.*
> > *i mapped the files, and i do not get anything to work. some of the files
> > are linked twice in the head - is this intentional?*
> > *
> > *
> > *http://paste2.org/p/832210*
> > *
> > *
> > * <http://paste2.org/p/832210>this paste is your paste, with the ui
> > mappings.
> > *-----------------------
Greg Milby
May 16, 2010, 7:55:19 PM5/16/10
to fac...@googlegroups.com
hi, this was as close as i got with it. the popup is working but i cannot make the nested tabs work inside the popup:
let me know if you make any progress, i'll work on it some more when i get some time.
Simon
May 16, 2010, 8:51:43 PM5/16/10
to facebox
I will try more and will let you know. Did you try my code? I have the
tabs properly positioned but they are just non-clickable. Thanks so
much!!
On May 16, 7:55 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, this was as close as i got with it. the popup is working but i cannot
> make the nested tabs work inside the popup:*
> *
> *
> *http://milby.no-ip.org/facebox/M/simon1.html*
> *
> *
> *let me know if you make any progress, i'll work on it some more when i get
> some time.
> *
> > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
tabs properly positioned but they are just non-clickable. Thanks so
much!!
On May 16, 7:55 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, this was as close as i got with it. the popup is working but i cannot
> make the nested tabs work inside the popup:*
> *
> *
> *http://milby.no-ip.org/facebox/M/simon1.html*
> *
> *
> *let me know if you make any progress, i'll work on it some more when i get
> some time.
> *
Greg Milby
May 16, 2010, 8:59:51 PM5/16/10
to fac...@googlegroups.com
hi, i wasn't able to make your code work. i had a facebox example that worked, so i just tried to ad ui tabs into that.
i know jquery has nested ui tabs, so i'm sure it's possible somehow... just not sure how. :)
Simon
May 16, 2010, 9:34:13 PM5/16/10
to facebox
I've zipped everything and put it here: http://www.mediafire.com/download.php?z4yizvtak2c
it should work (except the tabs dont change :) ) maybe you can figure
that part out :)
On May 16, 8:59 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, i wasn't able to make your code work. i had a facebox example that
> worked, so i just tried to ad ui tabs into that.*
> *
> *
> *i know jquery has nested ui tabs, so i'm sure it's possible somehow... just
> not sure how. :)
> > > > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
> > <facebox%252Buns...@googlegroups.com<facebox%25252Bun...@googlegroups.com>
>
> read more »
it should work (except the tabs dont change :) ) maybe you can figure
that part out :)
On May 16, 8:59 pm, Greg Milby <gmi...@gmail.com> wrote:
> *hi, i wasn't able to make your code work. i had a facebox example that
> worked, so i just tried to ad ui tabs into that.*
> *
> *
> *i know jquery has nested ui tabs, so i'm sure it's possible somehow... just
> not sure how. :)
> > <facebox%252Buns...@googlegroups.com<facebox%25252Bun...@googlegroups.com>
>
> > > > > > .
> > > > > > For more options, visit this group at
> > > > > >http://groups.google.com/group/facebox?hl=en.
>
> > > > > --
> > > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "facebox" group.
> > > > > To post to this group, send email to fac...@googlegroups.com.
> > > > > To unsubscribe from this group, send email to
> > > > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
>
> > > > .
> > > > > > .
> > > > > > For more options, visit this group at
> > > > > >http://groups.google.com/group/facebox?hl=en.
>
> > > > > --
> > > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "facebox" group.
> > > > > To post to this group, send email to fac...@googlegroups.com.
> > > > > To unsubscribe from this group, send email to
> > > > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
>
> > > > .
> > > > > For more options, visit this group athttp://
> > > > groups.google.com/group/facebox?hl=en.
>
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "facebox" group.
> > > > To post to this group, send email to fac...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/facebox?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "facebox" group.
> > > To post to this group, send email to fac...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/facebox?hl=en.
>
> > --
> > You received this message because you
>
> ...
> > > > groups.google.com/group/facebox?hl=en.
>
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "facebox" group.
> > > > To post to this group, send email to fac...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > <facebox%2Bunsu...@googlegroups.com<facebox%252Buns...@googlegroups.com>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/facebox?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "facebox" group.
> > > To post to this group, send email to fac...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > facebox+u...@googlegroups.com<facebox%2Bunsu...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/facebox?hl=en.
>
> > --
> > You received this message because you
>
>
> read more »
Reply all
Reply to author
Forward
0 new messages