• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 545
  • Last Modified:

Jquery Tab Position problem

I have web page on which I want to display information in tabs. I am using jquery. The problem that I am facing is to set all the tab position to the top.  

The first tab the contents are big so covers the whole block and displays on the top.
The second and third contents are very small and so its vertically centered in the "tabPanel" div.

I want a jquery solution to set the position on top when a user clicks the tab.

The whole code is given below. Can someone help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

      <link href="jquery-ui-1.8.12.custom/development-bundle/themes/base/jquery.ui.all.css"
        rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.8.12.custom/css/ui-lightness/jquery-ui-1.8.12.custom.css"
        rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.8.12.custom/development-bundle/demos/demos.css" rel="stylesheet"
        type="text/css" />

    <script src="jquery-ui-1.8.12.custom/js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.12.custom/js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
</head>
<body>
  <table width="1043" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="741px">
                <script type="text/javascript">
                    $(function () {
                        //debugger;
                        $("#tabs").tabs();



                        $("#tabPanel").height("100%");
                        $("#tabPanel").width("656px");
                        $("#tabPanel").css("position", relative);
                        $("tabPanel").css("left", 27);
                        $("tabPanel").css("top", 207);


                        //                       var pos = $("#tabPanel").offset();

                        //                       alert(pos.left);
                        //                       alert(pos.top);


                        //                       var pos = $("#tabPanel").offset();
                        //                       var left = (pos.left) + "px";
                        //                       var top = 3 + pos.top + "px";

                        // alert(left);
                        //  alert(top);
                        //$("#tabPanel").css({ position: 'relative', zIndex: 5000, left: 0, top: 0 });






                    });

               
                 
                </script>
                <%-- style="position:absolute; left:57px; top:207px;"
                --%>
                <div class="demo" id="tabPanel">
                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">Nunc tincidunt</a></li>
                            <li><a href="#tabs-2">Proin dolor</a></li>
                            <li><a href="#tabs-3">Aenean lacinia</a></li>
                        </ul>
                        <div id="tabs-1">
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                            <p>
                                Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                                arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                                Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                                leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                                tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                                pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                                Nunc tristique tempus lectus.</p>
                        </div>
                        <div id="tabs-2">
                            <p>
                                Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
                                massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
                                luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
                                aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
                                in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
                                nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
                                convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
                                felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
                        </div>
                        <div id="tabs-3">
                            <p>
                                Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
                                pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
                                Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
                                nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
                                pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
                                enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                            <p>
                                Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
                                ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
                                velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
                                faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
                                sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
                                ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
                                commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
                                hendrerit.</p>
                        </div>
                    </div>
                </div>
            </td>
            <td width="5px" rowspan="5" class="redStripV">
                &nbsp;
            </td>
            <%--<td width="1px" style="background-color:#6A7F87;">&nbsp;</td>--%>
            <td width="297px" valign="top">
                <iframe src="Product3.htm" name="text" width="297" marginwidth="2" height="259" marginheight="2"
                    align="top" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
                <iframe src="Product2.htm" name="text" width="297" marginwidth="2" height="259" marginheight="2"
                    align="top" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
                <iframe src="Product1.htm" name="text" width="297" marginwidth="2" height="259" marginheight="2"
                    align="top" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
            </td>
        </tr>
    </table>
</body>
</html>
0
MadhuMenong
Asked:
MadhuMenong
  • 7
  • 5
1 Solution
 
BardobraveCommented:
I think this could be more a CSS problem than a Jquery/Javascript one.

If you assign a class to your tabs divs and use the same position styles for every element on this class, all divs should be at the same place (but depending on the active tab one should be visible while the rest are hided).

Maybe a screenshot of the outcoming problem could help us going further into a solution.
0
 
MadhuMenongAuthor Commented:
Hi Bardobrave,

Thanks for ur response.

If i add the below style
style="position:absolute; left:57px; top:207px;"
 to  <div class="demo" id="tabPanel"  then it works perfectly.

But what I wanted is assuming I dont give the above style and want to control the position using jQuery bind() to fire a javascript with will set the position as above. how do I achieve that?
Irrespective on the content size the tap should always be on the top and not in the center.

 
0
 
MadhuMenongAuthor Commented:
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
MadhuMenongAuthor Commented:
Sorry about the mess.

I have attached screen shots of how the screen displays.
0
 
BardobraveCommented:
I'm not sure of understand what's your real problem. You say:

"But what I wanted is assuming I dont give the above style and want to control the position using jQuery bind() to fire a javascript with will set the position as above. how do I achieve that?"

As far as I know... bind() is a JQuery method that attachs an event handler to an object, so when you interact with this object the function you provided as handler is fired. It has nothing to do with positioning, unless you fire a function that specifically alters the position of a given element (wich I think is not the case, as what you want is to bind the click event of the tabs to the showing of the data divs).

I've not worked with JQuery tabs before, but I supose that it works as a list of div elements that shows and hide depending on click events fired from tab buttons, so what you need is to position those divs in the required place of the page and then, show and hide them at will.

Your screenshots make me think that your overall container is probaly centering the text in height, this way when your text divs have a small amount of content, they are pushed down to the center position.

To fix that you can change the vertical-align on parent container to top
0
 
MadhuMenongAuthor Commented:
Exactly to the point. The last 2 statement is what I want to do.

As you can see from the screen shots the contents gets vertically centered when the size of content is less leaving a lot of blank space between the menu and tab. How do I control this? I want the contents (tabs) to be always on top, like setting the vertical-align:top or text-top with position: relative. This I want to achieve and set when the tab is changed (should be a click event).

Thank you.
0
 
BardobraveCommented:
mmmmm.... seeing at your code, in your js part you make:

$("#tabPanel").css("position", relative);
$("tabPanel").css("left", 27);
$("tabPanel").css("top", 207);

This will push your tab 207 pixels below the TD where they are included.

But you say that with style="position:absolute; left:57px; top:207px;"  all is ok.

Have you tried to change $("#tabPanel").css("position", relative); to $("#tabPanel").css("position", absolute); ?
0
 
MadhuMenongAuthor Commented:

Sorry its not relative but absolute. I hardcoded it from the 0,0 position. Was experimenting with different ways and forgot to change the "relative" to absolute".
0
 
BardobraveCommented:
So if you do it in the CSS style directly all is well rendered but if you force it through js it's faulty?
0
 
MadhuMenongAuthor Commented:

Yes. I am trying to achieve the same with jquery. I am using tabs and on change of tab I should be able to call a jquery event (may be click event) and set the css for vertical-align and position. I am not an expert in jquery but learning in process, spend the whole day and covered a lot from www.jquery.com and www.w3schools.com. I feel more confident on the topic and may be if I spend a few more days I can have better control.

Thanks a lot for your efforts, appreciate a lot.
0
 
BardobraveCommented:
Well... better than using JQuery to directly modify the css styles why don't you define a css class with the attributes you need for your tabs and assign this class throught JQuery with .addClass and .removeClass?

This way you can have a class for active tabs and another for inactive ones, switching between both classes on click events.
0
 
MadhuMenongAuthor Commented:
Thank a lot
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now