Response title
This is preview!
- Screen name: tedbyers
tedbyers's Profile
6 Posts
9 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 25-Jan-2013 02:33 PM
- Forum: Using jQuery UI
I am increasingly asked about making our web application adapt easily to the size of the display device. I found a guy that has done this well using CSS, and he claims he can do this without affecting either the JavaScript the programmeer writes or the server side code (and he gave me the URL fo a page where he is doing precisely that, as well as a online store where he had been contracted to do it (and just successfully finished the contract). When I asked him about this, and how it is done, he pointed me to his favourite web resources dealing with the topic, and one of the resources he pointed out was jQuery Mobile. However, when I looked at jQuery Mobile, I saw none of the jQuery UI controls (tab control, accordina, &c.) that I use regularly.
I guess, before the real meat of the question, the first question ought to be, does the CSS in jQuery UI allow a web page that uses a tab control or accordian to instantly and correctly adapt to the display device size, whether that is a 41 inch HDTV screen connenected, as a monitor, to a desktop computer, or a one inch square pseudo-smart ;-) phonescreen? (Call me a luddite, but I never saw anything truly smart in these so-called smart phone.) If not, what would need to be done so that it could?
I will appreciate any insights and pointers to web resources that provide useful information on the question.
Thanks
Ted
The next question is, can a web page use jQuery UI and jQuery Mobile at the same time?- 31-May-2012 03:21 PM
- Forum: Using jQuery UI
I believe I found the right part of the css provided by the theme CSS I'd downloaded. In it I see the following:- * http://docs.jquery.com/UI/Tabs#theming
*/
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
What I don't see here is what is affecting the size of the navigation tabs. When I look at the example of using the ab control that you provide, the tabs are about half the size of the tabs on my page. Part of the problem may be that I don't know CSS very well. If I am at all close to understanding this, it is the ui-tabs-nav li classes hat are relevant, but I don't see a height item there, and the tabs look to me to be about three times the height of the font used for the text in the tab.
I don't really understand what much of this CSS data is doing, so I am reluctant to mess with it much, lest I break something affecting other parts of the UI I have built. I guess this reduces to three questions.
1) What does the css code relating to tabs, that I have found so far, actually do to control the size of the tab 'button'?
2) What are my options for making the tab 'buttons' a more rational size?
3) Can I obtain the effect I require without changing the CSS files significantly from those provided when I downloaded the theme? I ask this in part because I may not be the only one that has to use these files and I don't want to mangle their usage of it, and also because I may want to change the thems and don't really want to have to redo any edits I need to make.
any insight would be appreciated.
Thanks
Ted- 01-Mar-2012 03:06 PM
- Forum: Using jQuery UI
Using the jQuery UI buttons was easy:- $(function() {
$( "input:submit, a, button, input:reset" ).button();
});
Having done that, "<a href="http://www.google.ca\>Visit Google</a>" produces a button just wide enough to display "Visit Google". The buttons look great, but if I added another, such as "<a href="http://finance.yahoo.ca">Visit Yahoo's finance pages</a>", the latter button will be much wider than the first, and I want to force the two buttons to be the same width, ideally the width of the column in which I put them, even if word wrapping is needed.I have done a search on sizing buttons, but everything I found so far talks about using CSS files to over-ride the styles applied by the jQuery UI CSS, and I don't see how that helps when I am looking at only a very small number of controls, with different widths.It seems that these buttons adjust their size according to the width of the text they are to display. I have one pair that are submit and rest buttons, and the reset button is less than half the width of the submit button on any given form. I want to make those two buttons the same width (they are already the same height). I am content to let the submit button take whatever width would be determined when using the jQuery UI css, as so far the reset button is always half the width. I just want to make that the same width as the submit button is.I also have a set of buttons made from hyperlink anchors, in a cell in a table, and I want to make them all the same width as the column in which they reside. Now, the width of the anchor buttons in the column seems to me to be a bit harder since the column width changes when the broswer window changes size.I guess, the anchors problem is a bit more problematic or complicated because now the column itself needs to be contrained so that it never takes a width thinner than the widest anchor button (whatever that width would be given the jQuery UI css says that button should have - or can these buttons support word wrapping).I guess, if it comes to it, I could use something like 'style="width:15%"' in each of the controls, if they all support it, and if that would be respected by the CSS (I guess I need to find out what takes precedence; inline css directives or the css), but do hyperlinks support the style property?Always eager to learnThanksTed- 23-Jan-2012 05:38 PM
- Forum: Using jQuery UI
Actually, I have two problems regarding the size of rows in a table. Go to https://204.51.115.36:443/login.html, and log in using Ted/ted. NB: this is a test setup, so I used a self signed certificate that your browser may complain about.Once you go there, you will find a very nice virtual terminal, if I do say so myself. And you will see I used the tab control from jQuery UI. To see the problem, switch back and forth from one tab to the other, and watch the top.You will see that the size of the top row changes height. What I want to do is make it constant regardless of which tabe is selected (I sized that top based ont he size of the logo, and with the first tab displayed).The second problem is like the first, except it involves the gray area on the left. Within Firefox, it is fine, but in MS IE, it disappears when the second tab is selected.I suspect, in both cases, that it has to do with the size fo the content in the two tab pages, but the question is, how do I fix it? I would prefer is both the gray and on the left and the top row with the logo remained constant in size, if that is at all possible (or the top a fixed number of pixels, bt the left a fixed percentage of the available space with the tab control taking the rest of the space). But how can I do that?Any suggestions would be appreciated.ThanksTed- 29-Dec-2011 03:59 PM
- Forum: Getting Started
I have a tab control finally behaving the way I want, with one exception. The second tab page contains a search form that returns data to be used in the first form on that page. The cgi program returns the results of the searh fine. The problem is that it when it returns the data, the tab control displays with the first page visible rather than the second.NB: I have not yet figured out how to add AJAX to the mix, but for now I just need a simple way for the search cgi program to tell the borwser that when it opens the page it produces, it should open with the second page visible Rather than the first.How do I do this?ThanksTed- I thought I'd try to begin with the accordion and tab, but I have had no success yet. I must be missing something simple. Here is the first test page:<!DOCTYPE HTML>
<html>
<head>
<link href="css/themes/redmond/jquery-ui.theme.css" rel="stylesheet" type="text/css"/>
<link href="css/themes/redmond/jquery-ui.tabs.css" rel="stylesheet" type="text/css"/>
<link href="css/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
jQuery.Tabs.initialize("vtTabView","1000px","1000px",['Sales and Authorizations','Refunds, Captures, and Voids'],['vt','cvr']);
});
</script>
</head>
<body>
<div id="vtTabView" style="height:1000px;width:1000px">
<div id="vt"><iframe src="https://localhost:443/cgi-bin/vt.pl"></iframe></div>
<div id="cvr"><iframe src="https://localhost:443/cgi-bin/cvr.pl"></iframe></div>
</div>
</body>
</html>Instead of getting tabs, I get my pages (generated by cgi perl scripts) displayed in tiny little scrollboxes at the top left.Equally bad, Firefox is telling me, in the error console, that jQuery.Tabs is undefined. BTW: FireFox doesn't like the filter and zoom properties in your style sheet.So, then, what do I need to do to get the tabs to work in the first instance. And then, how do I modify it to use an Accordion to display the same material. Are there any issues I need to be aware of when I start having my perl scripts (using predominantly the Perl packages CGI and CGI::Session) create these pages?NB: As far as possible, I am trying to keep this all valid HTML5, so that I can eventually make this interface mobile device friendly.ThanksTed- «Prev
- Next »
Moderate user : tedbyers
© 2012 jQuery Foundation
Sponsored by 
and others.
