Multi tab - tabbed panel
Hi All,
I have divided the jspx page onto 2 parts vertically.
Top section has 2 tabs(panel tab) to show customer listing on tab1 and vendor listing on tab2.
Bottom section has 2 tabs(pannel tab).
Tab1 is corresponding to tab1 on the TOP section displays specific customer details chosen in tab1(top tab1) .
Tab2 is corresponding to tab2 on the TOP section displays specific vendor details chosen in tab2(top tab2).
The problem is Tab1 on the top section does not hooked up to Tab1 on the bottom section. Same problem with tab2.
Any thoughts on this please?
Thanks
As John suggested, you could have a single panel tab having showdetailitem showing the information.
If you still need the way you have designed, you can achieve the same with programmatic approach.
Take a look at this thread which has a sample based on your use-case:
Re: adf - tab - navigation
Thanks,
Navaneeth
Similar Messages
-
Multi page recordset output from ASP page on Spry Tabbed Panel Widget
I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=two class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=one class="TabbedPanelsContent">Content 1</div>
<div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Can I use Spry Tabbed Panels to create a multi page form?
I'm trying to setup a multi page form and have been unsuccessful using PHP Sessions.
Would it be possible to use the Spry Tabbed Panels in DW CS3 and divide the different sections of the form in the panels? My thought is to have the Form Element around the main Tab Div and the submit button at the end of the form. Would this work?
If so, is there a way to have a "Next" button that will activate the next Tab so that the user can easily tab through each form field and easily go to the next tab to help with usability?Beth, thank you! I was able to get the tabs to advance using your suggested
on the right: "Next Panel"
<a href="#" onclick="TabbedPanels1.showPanel(2); return false;">Next Panel</a>
In order to make it more graphical, I added a Next Button as suggested in the "Open Tabs Programatically" info at http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
<button onclick="TabbedPanels1.showPanel(0)" >open first panel</button>
<button onclick="TabbedPanels1.showPanel('tabID')">open panel</button>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
When I add the above code, when I clicked on the Next Button, it would submit the form. After looking at the Text Code, I noticed the Button Code did not have the ;return false; in the code so once I added that, the buttons now work as I want them to.
Take a look at http://www.soleproductions.com/oakley/tabform.php
Now that I have the basic setup, I can begin to setup the actual Online Application.
Thanks again for everyone's help. I guess I was looking for the WISIWIG way to do it since I'm not very good at hand coding. -
PHP dynamic content for form list field on tabbed panel
I have been trying to use PHP dynamic content to populate a
form list field. Works fine on a regular page, but doesn't seem to
work (or works very erratically) if the form is on a tab of a Spry
tabbed panel. Erratically means (as I've observed) the values will
appear if the list field is the second on a tab but not the first.
Haven't tried three on a tab... Anyone know if this is supposed to
work?Thank You !!! to both of you above.
Shant,
The scheme youv'e proposed makes sense and I had thought of the same before posting the question. I already did a little POC on it but then realised this works if I can use complete list of values of 1st Field to decide the value of 2nd and so forth. But I rather need to know which one among those was clicked. Moreover, my right side list is usually not null when page loads for the first time (bcoz Field name is a path exp).
Also, the real problem here is that, when I click on different values on the right side of multi-select(already selected values) of 1st Field, allowedValues and Derivation of 2nd should change. That GUI event is not capturable from whatever I've been able to read (onClick is not applicable for MultiSelect, and onChange doesn't serve my purpose, coz I need to know what value was clicked on).
The solution I thought and implemented was to take the right side of multi-select, into an extra (read redundant), single-select Field. And then have the 2nd multi-select depend on it via Derivation and allowedValues.
Having two redundant single-selects, isn't the most elegant solution but I can't think of anything better. Any thoughts ???
If I'm not really overlooking something MultiSelect class should have an extra Property exposed....
- AndyDev
Edited by: AndyDev on Nov 6, 2007 2:04 PM -
SubVI with while loop + event structure not working in multi tab VI
Hello Everyone,
I am developing an interface for the control of a prober using Labview 2012, and I am stuck with some issue.
To start with I provide you with a simplified version of my control interface VI, and with the sub-VI used to build and manage the wafer maps.
The VI consists of several tabs: Prober Initialization, Wafer Handling, Wafer Map, Status, Error.
The sub-VI can:
1/ initialize the grid to display the map (sub VI Init Grid not provided here)
2/ import XY coordinates from a txt file (sub VI Wafer Map Import)
3/ display the coordinates and index of the die below the cursor
4/ and when a die position is double clicked, and the boolean "Edit Wafer Map" is true, then the user can change the state (color) of the die between On-wafer die and Selected Die
My issue:
If I use the sub-VI by itself, it works fine. However when I use it as a sub-VI in the tab "Wafer Map", the map does not build up and I can no further use the embedded functionalities in the sub-VI.
I suspect the while loop + event structure of the sub-VI to be the bottleneck here.
However I don't know which way to go, that's why I'd be glad to have some advice and help here.
Thank you.
Florian
Solved!
Go to Solution.
Attachments:
Control Interface.zip 61 KBHi NitzZ,
Thank you for your reply.
I tried to save the VIs in LV10, please tell me if you can open them now.
Inside he event structure there is quite some code, and since I don't want to make the main vi too bulky, I would like to keep it as a sub-VI.
As you can see from the sub-VI, the event structure is used for extracting cursor position and tracking the double click action. These events are linked, through a property node, to the image "Wafer Map" which is passed to the main vi through connector pane.
All values are passed this way as well (through connector pane). Is there another way?
Maybe "refnum", but I don't really understand how to use them...
If I use the event structure in the main vi, the wafer map is still not working. I tried it earlier.
To implement the multi tab front panel, I used a tab control, and a for loop + case structure. For each element of the case structure, there is a corresponding action.
For the case where I put the code (element=2) for Wafer Map, I also control the execution of the code with a case structure activated by the button "REFRESH". Otherwise I end up with a freezing of the panel right after the start.
I hope these comments help you understand better.
Regards,
Florian
Attachments:
Control Interface.zip 104 KB -
ANN: Tab Panel Magic 2 Released
http://www.projectseven.com/products/tools/tpm2/
From simply elegant to utterly dramatic, TPM2 can be skinned like a classic movie star or a modern day rock star. Leveraging the power of CSS3, you have at your disposal a treasure chest of rounded corners, linear gradients, drop shadows, inner shadows, and glass effects—all done without using a single image. It's pure CSS3 and purely remarkable. CSS3 is supported in all modern browsers, including IE9. Older browsers will display perfectly lovely tabs, minus the shadows and curves.
Major Features:
Cross-browser support
Automated GUI inside Dreamweaver
Automatic TPM1 to TPM2 Conversion Utility
Search engine friendly
Accessible
iPhone, iPod, and iPad support
3 optional animation methods
12 customizable CSS-based skins
CSS3 Shadow, Curves, and Gradients
Support for multi-state images
Trigger actions: Click or MouseOver
Auto Play and Random Panel Options
Help system, plus PDF user guide
Free technical support
Optional Tabs Scroller provides scroll controls when there are more tabs than will fit your space
Programmed by PVII for a completely dedicated, efficient, and powerful solution.
Upgrade pricing available for TPM1 users.Al
The product looks great, however you might want to redo the
sound on the
video. Even with mu speakers and its setting cranked up it
was difficult to
hear.
Paul Whitham
Certified Dreamweaver MX2004 Professional
Adobe Community Expert - Dreamweaver
Valleybiz Internet Design
www.valleybiz.net
"Al Sparber- PVII" <[email protected]> wrote in message
news:e78nid$1g$[email protected]..
>
http://www.projectseven.com/products/tools/tabpanel/demo/
>
> Tab Panel Magic automates the process of building tabbed
user interfaces
> (UIs) - web page elements that allow you to display
multiple panels of
> content with access to each panel controlled by
CSS-styled tabs. Tab
> Panels can be inserted into CSS layouts or table
layouts. Panels can be
> tucked snugly into sidebars or can span an entire page.
>
> $60
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> Popup Menus | Image Galleries | CSS Tutorials &
Templates
>
> Newsgroup: news://forums.projectseven.com/pviiwebdev/
> CSS Newsgroup: news://forums.projectseven.com/css/
> DW Newsgroup:
news://forums.projectseven.com/dreamweaver/
>
>
>
>
>
> -
Contact form with Spry 'Tabbed Panels' and 'Validation TextField'
Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you!Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you! -
On a tabbed panel, I am trying to create a form, but...
On a tabbed panel I am trying to create a form, but I am having a couple of issues.
The coding on my form is yellow - I can't figure out what is wrong. Also, I can't see the tab on the browser, only in live view. I haven't loaded it to my site as I haven't finished it yet. I don't want to go any further, until I solve the issues I have now. Any ideas?
thanks,
deb
<form id="registrationForm" name="registrationform" method="post" action="">
<fieldset>
<legend>Contact Information</legend>
<span id="sprytextfield1">
<label>Name <span class="inforequired">*</span><br />
<input type="text" name="name" id="name" />
<br />
</label>
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
<label for="businessname">(Business or Organization) Name<br />
</label>
<input type="text" name="businessname" id="businessname" />
<br />
<span class="textfieldRequiredMsg">value is required.</span></span> <span id="sprytextfield3">
<label for="address">Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="address" id="address" />
<br />
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield4">
<label for="email">City</label>
<span class="inforequired">*</span><br />
<input type="text" name="city id="city="city"" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield5">
<label for="province">Province</label>
<span class="inforequired">*</span><br />
<input type="text" name="province" id="province" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield6">
<label for="postalcode">Postal Code</label>
<span class="inforequired">*</span><br />
<input type="text" name="postalcode" id="postalcode" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield7">
<label for="phone">Phone Number (including area code) <span class="inforequired">*</span><br />
</label>
<input type="text" name="phone" id="phone" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield8">
<label for="fax">Fax Number</label>
(including area code) <br />
<input type="text" name="fax" id="fax" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield9">
<label for="email">Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="spryconfirm1">
<label for="emailconfirm"><br />
Re-enter Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="emailconfirm" id="emailconfirm" />
<span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
<p> My Interest in the Ability Axis Employment Expo is as a </p>
<p><span id="spryradio1">
<label>
<input type="radio" name="RadioGroup1" value="business" id="RadioGroup1_0" />
Business/Employer</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="nonprofit" id="RadioGroup1_1" />
Non-Profit/Service Organizatin</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="jobseeker" id="RadioGroup1_2" />
Job Seeker</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="other)" id="RadioGroup1_3" />
Other (please specify below)</label>
<br />
</span><br />
<span id="sprytextarea1">
<label for="contactcomments"> Comments or other information</label>
<br />
<textarea name="contactcomments" id="contactcomments" cols="45" rows="5"></textarea>
</span> </p>
</fieldset>
<p></p>
<fieldset>
<legend>Booth Options</legend>
<span id="spryselect1">
<label for="premierearlybird">Premiere (10 X 10) until April 21 $375</label>
<span class="earlybirdpricing">Early Bird Pricing</span><br />
<select name="premierearlybird" id="premierearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">lease select an item.</span></span> <span id="spryselect2">
<label for="premierereg">Premiere (10 x 10) after April 21 $425</label>
<br />
<select name="premierereg" id="premierereg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect3">
<label for="premierenpearlybird">Premiere Non-Profit (10 X 10) until April 21 $325 <span class="earlybirdpricing">Early Bird Pricing</span><br />
</label>
<select name="premierenpearlybird" id="premierenpearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect4">
<label for="premierenp">Premiere Non-Profit (10 X 10) after April 21 $375</label>
<br />
<select name="premierenp" id="premierenp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect5">
<label for="standardregearlybird">Standard (8 X 10) until April 21 $250 <span class="earlybirdpricing">Early Bird Pricing</span><br />
</label>
<select name="standardregearlybird" id="standardregearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect6">
<label for="standardreg">Standard (8 X 10) after April 21 $300</label>
<br />
<select name="standardreg" id="standardreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect7">
<label for="standardnpearlybird">Standard Non-Profit (8 X 10) until April 21 $200</label>
<span class="earlybirdpricing">Early Bird Pricing</span><br />
<select name="standardnpearlybird" id="standardnpearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect8">
<label for="standardnp">Standard Non-Profit (8 X 10) after April 21 $250<br />
</label>
<select name="standardnp" id="standardnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</fieldset>
<br />
<fieldset>
<legend>Breakfast Tickets</legend>
<span id="spryselect10">
<label for="breakfast1-5">Breakfast Tickets $40 each (up to 5 tickets)</label>
<br />
<select name="breakfast1-5" id="breakfast1-5">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect11">
<label for="breakfast+5">Breakfast Tickets $35.00 each (more than 5 tickets)</label>
<br />
<select name="breakfast+5" id="breakfast+5">
<option value="0" selected="selected">Please Choose</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10 (please comment below)</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect12">
<label for="breakfasttable">Breakfast Tickets $400 each (table of 8 plus two event hosts)<br />
</label>
<select name="breakfasttable" id="breakfasttable">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="sprytextarea2">
<label for="breakfastticketscomment">Additional Information about Breakfast Tickets</label>
<span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
<br />
<fieldset>
<legend>Seminar Tickets</legend>
<p>Shayn Anderson, author of Taking Pride in That Which Sets US Apart, will host a one hour seminar at 11:00 am. </p>
<p>
<label for="shayn11amreg">Shayn Anderson Seminar tickets $40 each</label>
<br />
<select name="shayn11amreg" id="shayn11amreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>
<label for="shayn11amnp">Shayn Anderson Seminar tickets (Non-Profit) $30 each</label>
<br />
<select name="shayn11amnp" id="shayn11amnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>Denise Bissonnette will do a seminar presentation at 1:00 pm on the topic Being True to the Dream of Diversity. Denise's presentation will run approximately 1.5 hours. </p>
<p>
<label for="denise1pmreg">Denise Bissonnette Seminar tickets $50</label>
each <br />
<select name="denise1pmreg" id="denise1pmreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>
<label for="denise1pmnp">Denise Bissonnette Seminar tickets (Non-Profit) $40 each<br />
</label>
<select name="denise1pmnp" id="denise1pmnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p><span id="sprytextarea3">
<label for="seminarcomments">Other Information About Seminar Tickets</label>
<textarea name="seminarcomments" id="seminarcomments" cols="45" rows="5"></textarea>
</span></p>
</fieldset>
<br />
<fieldset>
<legend>Processing Information</legend>
<span id="spryradio2">
<label>
<input type="radio" name="RadioGroup2" value="invoice" id="RadioGroup2_0" />
Please invoice me</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="printmail" id="RadioGroup2_1" />
I will print and mail my form with my payment</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="emailcreditcard" id="RadioGroup2_2" />
I will submit my information and provide my credit card information</label>
in the box below <br />
<label>
<input type="radio" name="RadioGroup2" value="other" id="RadioGroup2_3" />
Other - I will provide full details below<br />
</label>
</span><span id="sprytextarea4"><span id="sprytextarea5">
<label for="processingcomments"><br />
Further Information for Processing Registration</label>
<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></span> <span id="sprytextarea6"> <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
<p>
<input name="submit" type="submit" class="buttons" id="submit" value="Submit Information" />
<input name="reset" type="reset" class="buttons" id="reset" value="Reset Form" />
</p>
</form>Gramps, you are always coming to my rescue.
Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
<form id="registrationForm" name="registrationForm1" method="post" action="">
<fieldset>
<legend>Contact Information</legend>
<span id="sprytextfield1">
<label>Name <span class="inforequired">*</span><br />
<input type="text" name="name" id="name" />
<br />
</label>
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
<label for="businessname">(Business or Organization) Name<br />
</label>
<input type="text" name="businessname" id="businessname" />
It basically goes all the way through the form.
Any advice?
thanks,
deb -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry
Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">
<table class="Button" >
<tr>
<td style="padding-right:0px" title ="Home">
<a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
</td>
</tr>
</table>
</li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function FadeAndUpdateContent(ele, url)
try {
Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
}catch(e){ alert(e); }
-->
</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works... -
XML Publisher Multi tab Report: Help needed
Hi,
I have a requirement like below--
Need to develop master detail XML Report in R12. O/P will be in excel.
Excel output having two Work sheet.
Some columns data must be non editable in excel output ,whereas some columns will be editable.
User must not be able to add any line manually in the report.
Can anyone pls help me out to find a way to build this?????????
Thanks
TitasHi Titas,
Any luck with this? Were you able to create a multi-tab report using XML Publisher? Any help on this will be greatly appreciated.
Thanks. -
More than one spry tabbed panels
Hi,
On my index page I have a tabbed panel with it own css (size,
color, etc.)
I would like to insert another tabbed panel on another page
(tabbed panel2). I would like this to have its own css style
(different size, color scheme, etc.)
When I insert a spry tabbed panel in dreamweaver it
automatically takes on the css of my original tab panel design! How
can I let the second tabbed panel take on its own life, completely
independent of the first one?
Thank you."chris.cavage" <[email protected]> wrote in
message
news:gnuk7l$hoj$[email protected]..
> How can I let the second tabbed panel
> take on its own life, completely independent of the
first one?
Create a second set of CSS rules for it. The easiest way is
to make a
copy of SpryTabbedPanels.css, and call it
SpryTabbedPanels2.css. Link
SpryTabbedPanels.css to the original page, and
SpryTabbedPanels2.css
to the page that you want to look different.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com -
Is there a way to use css media="print" to print all Spry tabbed panels
By setting up a special style sheet and calling that with media="print" I can control all other content that I want to appear in the printed webpage but since the tabbed panels display="none" or display="block" are controlled by the SpryTabbedPanels.js I haven't found a way to force all panels to be display="block" in the print style sheet.
The requirement is for a seminar timetable where each day is on a separate tab but if you want hard copy then printing all days in one go is best.
Any suggestions would be most welcome.Yeah! I found the answer in another forum topic - See
http://forums.adobe.com/message/636534#636534
Use
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style> -
How can I add a shadow to a tabbed panel?
Trying to put a shadow on the active state of a tabbed panel so the tab and the content areas share one continuous shadow. Want the active panel to look like it's sitting above the other, inactive panels - the way a stack of file folders would look: shadows on all the tabs, but the folder on the top of the stack would have a shadow around the tab and the rest of the folder.
I can get the shadows to work on the tabs - where the active tab has a larger shadow than the normal (inactive) tabs and they look like they're sitting behind it - but when I try to add a shadow to the content panel it makes the panel appear to sit above the tab that goes with it. I tried arranging the tab on top ("Bring to front") but it still sits behind the content panel. Also tried pulling all the tabs to the front, but the content panel still sits in front and any shadow on the active panel is still over the active tab.
I know I can get an effect that's kinda-sorta what I'm going for with flat color (lighter for active, etc.) but would love to add some truer-looking depth to the active tabbed panel.
Any suggestions?you can control the dropshadow's angle property dynamically. and, yes the dropshadowfilter has an alpha and strength properties you can use.
use the help files to see all the properties you can use. -
I can't view multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6)
I can't set up multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6). Has anyone had this problem with CC and if so do they know the fix?
I just discovered something really weird. If I open the images in
photoshop (and the tabs are not showing) and then open another window on
top of photoshop (for example word or safari) , then the images and tabs
show in the photoshop window. But if I move Pshop to the front screen then
the tabs disappear!
Maybe you are looking for
-
Using an open mobil phone in europe
Traveling from usa to germany, czech republic, hungary. Can I use my open mobil phone, with skype number for cell to cell?
-
i am struggling to editnd delete text how am I able to do this
-
Hello, I have an update clause, like: update persc set nume = decode(r.id_tipperscon, 11, pnume), ...That 'pnume' comes from a parameter. I want include this column('nume = ...') in the update clause only if pnume parameter is not
-
White area that appears on screen while opening apps.
I had my original iPhone 4 replaced in December due to cracks in the screen, I am now on the 5th replacement and the last two have had this identical problem. Sometimes when opening an app, there is an area on the top left side of the screen that sh
-
Hi! As I try to install Flash Player, the Adobe Download Manager installs properly but when it launches itself, its empty. The only option is to close the download manager. I have uninstalled and reinstalled it but still does not work. This problem i