Load HTML into a Tabbed Panel?

Can I load another URL Into a tabbed panel's main div? In
other words, I click on a tab and then the Tabbed Panels' Content
area loads up an HTML page into it's div. I know of similar
frameworks that can do it but I haven't seen it done in Spry
yet.

Hi Data,
Check out UpdateContent and see if that will do what you
need:
http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
Thanks,
Don

Similar Messages

Load HTML into TextField or Text Components!

Hi all!
I'm trying to load 4 HTML documents into 4 different TextArea
components (infoTxt1, infoTxt2, infoTx....). In the attached code I
use/load the same HTML document to populate the components just to
simplify the testing.
This loop will not work. Can anyone tell me why or if there
is a better way to load several HTML into components dynamically?
It works IF it only loop once.
Thanks

YEAH!
TRULY AMAZING, KGLAD :)
Sorry for shouting out, but I just love to get this kind of
help. I would never have figured this one out by my self and the
good thing is I actually understand what's going on in your code
and can use that in other cases.
You came through as you you always do, and a million thanks
for taking the time.
Have a wonderful day :)
Answer:
To load several "html" documents into several textarea
components on stage you can use kglads code:
var dataNum:Number;
loadDataF(1);
function loadDataF(n:Number) {
dataNum = n;
this["tabData"+n] = new LoadVars();
this["tabData"+n].onData = function(theText:String):Void {
if (theText != undefined) {
_root["infoTxt"+dataNum].text = theText;
trace(_root["infoTxt"+dataNum]);
if(dataNum<4){
dataNum++
loadDataF(dataNum);
this["tabData"+n].load("artist"+n+".html");

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">

</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...

Inserting HTML/CSS in a Tabbed Panel

I've been having trouble inserting HTML/CSS into a Tabbed Panel widget. In this case, the HTML/CSS is creating a text box with scroll bars (as described in an excellent workaround for getting scroll bars to work).
Has anyone else come across this situation?
Thanks!

I'm not seeing the same problem (the scrolling text box displays fine in the tabbed panel for me).
Does your HTML container fit within the content area of the panel?
Here are screenshots from Muse Design view:
and Preview in Browser (Firefox):
When you say it's not working, what exactly do you mean? What's happening?
Best regards,
Corey
Edited: Adding topic on creating scrolling text box for reference: http://forums.adobe.com/message/4327943#4327943)

Slide show in a Tabbed Panel

I created a moving slide show using Creative DW Image Show Pro (a Dreamweaver extension) and inserted it into a tabbed panel created in Dreamweaver using the Tabbed Panel Widget. It's a three tab panel with an image show, SWF, planned for each tab. The first tab accepted the image show and seems to be working fine. But when I loaded the second show in the second tab, it did not work.
I have read the code a number of times and have found nothing wrong, but my knowledge in that area is limited.
I am working in Mac OS 10.6.2 and in Dreamweaver CS4.
You can find the uncooperative page at
http://dcarchts.com/projects.html
Thanks,
Merle

This can be done in iweb using 'my albims' page, I posted various versions of this (of the same javascript). But here it is (again), add the following to your 'My Albums' pae using HTML Snippet:
<script type='text/javascript'>
function redoMediaGridWidget() {
headerControlsDiv = parent.document.getElementsByClassName('com-apple-iweb-widget-headercontrols')[ 0];
headerControlsWidget = headerControlsDiv.widget;
mediaGridID = headerControlsWidget.p_mediaGridID();
mediaGrid = parent.document.getElementById(mediaGridID);
if (mediaGrid) {
mediaGridCount = mediaGrid.childNodes.length;
for (mgi = 0; mgi<mediaGridCount; mgi++) {
mediaDiv = parent.document.getElementById('gridEntry' + mgi);
mediaDiv.removeAttribute('onclick');
slideDiv = mediaDiv.widget.getElementById('slideshow_placeholder');
mediaDiv.widget.p_startSlideshow(slideDiv);
mediaDiv.addEventListener('mouseover', function(){mediaDiv.widget.p_scrub(slideDiv);});
mediaDiv.addEventListener('mouseout', function(){mediaDiv.widget.p_startSlideshow(slideDiv);});
clearInterval(chkMediaGridWidget);
chkMediaGridWidget = setInterval('redoMediaGridWidget()', 500);
</script>
here is my example: http://widgets.cyclosaurus.com/ImageRotate2/ImageRotate/ImageRotate.html

Embedding more than one google map in a tabbed panel

Hi, I wonder if anyone knows if this is possible. I am building google maps in business catalyst and what I want to do is add multiple maps into my muse site. For example, restaurants on one map, coffee shops on another, local produce on another. Does anyone know if this is possible? Each time I try and enter the snippet of code I get to add to muse from business catalyst it is fine if I just enter on blank page, but when I try and enter the html in the tabbed panel it doesnt work. Does anyone know of a solution ? I would really appreciate any feedback, Michele

Strange to be the first to reply to my own question but here goes, it may help someone with similar woes. I had been following the wiring colour code stringently. That being GREEN=FRONT, BLACK=REAR and ORANGE=SUBWOOF/CENTRE.
After clicking the Universal audio jack button on the realtek sound manager C.P and manually setting the blue port to be rear I took the Jack for my rear channels that had been in the BLACK port, and plugged it to the BLUE. I then tested all the speakers and "VOILA" every speaker channel works.
Im somewhere between NOOB and have to fix all my familys PC problems because they know even less than I do. Not sure what that makes me, a bit of a chancer probably, who gets lucky more than anything, anyway I can only guess that there is a problem with the onboard "BLACK" port. In saying that I have just came from a 2.1 setup for front and built in flat panel srs monitor speakers for rear, all this was setup as quadrophonic and as I recall the Black port worked fine whenever I used it as the rear channel. So anyway its working, Im not sweating too much about the whys and how comes. I am a little concerned about the 6700 reputation for a certain volume controller inner part burning out (TRANSISTOR)? I think is the culprit. Anyway I will deal with that if and when the time arises. Only 2 months left on my warranty and my speakers have been sat doing nothing for over 6 months maybe more so I should get some life out of them, fingers crossed.

Can you split a large PHP form in the tabbed panels?

I have a large PHP customer feedback form that posts to my mySQL server. The customer experience isn't great. Can you split a large form into seperate tabbed panels?

Sure I don't see a reason why not. It's basically using javascript to show/hide active parts of your form. So when you submit your server script would still process the data as though it were one page (ie: all variables are passed even if not on tab).

Load html again...

Hi all,
There are lots of topics in this forum about loading HTML into applet, i tried to find answer from them to solve my problem, but i can't get the expected anwser, can anybody look at my problem, thanks.
I copy the codes from JTree tutorial( http://java.sun.com/docs/books/tutorial/uiswing/components/tree.html ), and try to create a Jar file of it, but the html pages can't be loaded. The codes are:
private class BookInfo {
public String bookName;
public URL bookURL;
public String prefix = "file:"
+ System.getProperty("user.dir")
+ System.getProperty("file.separator");
public BookInfo(String book, String filename) {
bookName = book;
try {
bookURL = new URL(prefix + filename);
} catch (java.net.MalformedURLException exc) {
System.err.println("Attempted to create a BookInfo "
+ "with a bad URL: " + bookURL);
bookURL = null;
private void createNodes(DefaultMutableTreeNode top) {
DefaultMutableTreeNode category = null;
DefaultMutableTreeNode book = null;
book = new DefaultMutableTreeNode(new BookInfo
("Print",
"hf/PrintHelpfile.htm")); //******file can't be loaded
top.add(book);
//Tutorial Continued
I know getClass().getResource("hf/PrintHelpfile.htm") can solve the problem, but i tried several ways to put it into the createNodes method, seems still can't...
Anybody can give me some suggestions, it already take me the whole day...
thanks in advance
dejie

problem sovled

Javascript: loading file into variabele

Hi,
I want to be able to read html from a file into a variabele.
this way i can use the following function to place the html in a <div></div> element.
//load html into div with div id putted in.
function loadhtml(id) {
//here the variabele html should get it's content from the given html file.
var html= ?????????????;
if (document.layers) {
with (document[id].document) {
open();
write(html);
close();
} else {
document.getElementById(id).innerHTML= html;
This way this way i have some kind of floating frame which is tranparent. (and it work on IE as wel as on NS)
If someone knows how to do this please let me know!!!!
Thanks in advance.

Well it is not too difficult to do that with PHP.I learned PHP in a few days. On http://www.phpbuilder.com you can find some examples that could be very useful for you. If you want the PHP tutorial, you can contact me for it... E-mail on [email protected]

Embedding HTML in Tabbed Panels

I created a campaign in Mailchimp and downloaded it as HTML so i could show the newsletter on my Muse site, with working links to emails, subscription and interviews.
I placed the HTML Element inside a Tabbed Panels widget and that caused alot of issues with the other elements on my Muse page.
It seems to be rather random in nature, sometimes moving a subheader, other times changing the color of the header or expanding rectangle elements.
Any suggestions or questions welcomed!

Michael,
We might be experiencing similar issues. I posted this yesterday: HTML inserted into a MUSE accordion widget issue
In Adobe MUSE 2014.3.1.44, I have inserted an HTML snippet into an accordion widget:
<script type=”text/javascript” src=”https://burkeauto.workstiming.com/external/next_available_time.js”></script>
When published all I see is the clock numbers to the top left corner of the page—no other page content and no accordion—just the unformatted clock at the top left corner.
The snippet works fine outside the accordion widget.
When not inside the accordion the HTML frame is normal, but as soon as I insert it into the accordion it adopts the attributes like other widgets, with the round blue icon on the top right corner of the frame and a stripped down context menu.
Adobe chat support has duplicated this on their end and suggested that I post the issue in the forum.
Any thoughts?
I will be watching you post.

Dividing Spry Tabbed Panels content area into columns?

Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div class="col33">
          <h3>Column 1</h3>
        <p>Content 1</p>
        <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
        <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
      </div>
        <div class="col33">
          <h3>Column 2</h3>
        <p>Content 1</p>
        <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
      </div>
        <div class="col33">
          <h3>Column 3</h3>
        <p>Content 1</p>
        <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
        <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
      </div>
    </div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Tabbed Panel using UpdateContent doesn't properly display spry .html page

Quick question. I have a tabbed panel widget with 12 tabs.
I'm using the UpdateContent snippet to pull in .html pages per tab.
when I have straight .html on the pages the content displays
without a problem.
What I need is for each tab to pull in an .html page that
contains a spry table that has an XML data set (think product page
with "next" and "prev" buttons to cycle through the content).
The .html page with the spry table works like a charm...on
it's own. however when I use it in conjunction with the tabbed
panel all I see is the bracketed code (i.e. {imgURL} {productName}
{SKU}) rather than [photo] large T-shirt SKU:1111.
A while ago I did an accordion that had dynamic content per
generated panel -- this utilized the Spry.Data.NestedXMLDataSet
function. A bit of a similar idea although I'm not sure if this
would also work with the tabbed panel.
Any suggestions would be helpful and I can drop the code if
that would also help. Thanks!

well, what I have is:
index page with tabbed panel
|
V
click tab
|
V
content from first option .html page loads. this content has
a dataset repeating table.
The main page already had the SpryData.js and also
UpdateContent, as follows:
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('one','siracusa.html');">Siracusa
Micro Crepe</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('two','peony_georgette.html');">Peony
Printed Silk Georgette</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('three','wool_pucker.html');">Wool
Pucker</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('four','textured_dot.html');">Textured
Dot</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('five','textured_cotton.html');">Textured
Cotton</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('six','crane.html');">Crane
Printed Four Ply Silk</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('seven','tencel_jersey.html');">Tencel
Jersey</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eight','circular_wool.html');">Circular
Stitch Wool</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('nine','silk_burnout.html');">Silk
Burnout</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('ten','organza.html');">Floral
Silk Organza</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eleven','micro_crepe.html');">Micro
Crepe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="one">Siracusa</div>
<div class="TabbedPanelsContent" id="two">Peony
Printed</div>
<div class="TabbedPanelsContent" id="three">Wool
Pucker</div>
<div class="TabbedPanelsContent" id="four">Textured
Dot</div>
<div class="TabbedPanelsContent" id="five">Textured
Cotton</div>
<div class="TabbedPanelsContent" id="six">Crane
Printed Four Ply Silk</div>
<div class="TabbedPanelsContent" id="seven">Tencel
Jersey</div>
<div class="TabbedPanelsContent" id="eight">Circular
Stitch Wool</div>
<div class="TabbedPanelsContent" id="nine">Silk
Burnout</div>
<div class="TabbedPanelsContent" id="ten">Floral Silk
Organza</div>
<div class="TabbedPanelsContent" id="eleven">Micro
Crepe</div>
</div>
</div>
<script type="text/javascript">

</script>
Let's say you clicked on the Siracusa tab. This would call up
siracusa.html, which has
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="../../ed_style.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">

</script>
Sircusa Micro Crepe
<div spry:region="fall08">
<table>
<tr spry:repeatchildren="fall08">
<td colspan="5 "><img
src="imx/{photoURL}"/></td>
</tr>
<tr spry:repeatchildren="fall08">
<td><a href="imx/{lrgphoto}"
target="_blank">enlarge</a></td>
<td>{SKU1}</td>
<td>{SKU2}</td>
<td>{SKU3}</td>
<td>{name}</td>
<td>{desc}</td>
</tr>
</table>
<input type="button" value="Prev"
onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next"
onclick="UpdatePage(pageOffset + pageSize);" />
</div>
siracusa.html works more than fine. pulls in the photo, link,
SKU and info without any problem.
When you're on the base page with the tabbed panel the only
thing that comes up are the bracketed info, i.e. {SKU} {SKU1}
{SKU2}.
What I need help with is actually having the pulled in data
table (in the various tabbed panel content areas) actually then
populate the repeat regions rather than just showing the
code...

Tabbed Panels: load tab content Ajax style

What changes need to be made to load the content of each
panel only when the corresponding tab has been clicked? I want each
panel to contain several images, but don't want to load all of the
images when the page loads.

http://labs.adobe.com/technologies/spry/samples/utils/updateContent_TabbedPanels.html
view the source to get the code ;)

Load html file and dependent files into a movieclip?

So I'm trying to load output from articulate storyline which is a combination of html and swf files. So just having the swf file load didn't pull in the dependent files. I'm viewing my project in a projector file from flash, not a browser. So is it possible to have a button trigger an html file to display in a movieclip (like you can with and swf file and a loader)? I can get a button to trigger the html file to load in a browser tab, but I'd love for the html content to be pulled directly into a movieclip in a frame or loader. is this even possible?

if you use adobe air, you can use the htmlloader class or stagewebview class.
otherwise, you'll need to use javascript and the externalinterface class.

How to load a large amount of HTML into HTML region?

I am trying to display a clickable image map (HTML <map>) in a region. The HTML source for the image map is fairly large and will not fit in the Apex editor (HTTP 400 error when I Apply Changes). I would also rather not manage that much HTML in the Apex web editor. So I stored the code in a file and added it to my applications file storage.
I have tried various methods of getting the HTML to load when the page is rendered. I tried a URL region, but that leads to all kinds of ACL/security issues that we do not want the customner to have to deal with. i also tried some PL/SQL:
DECLARE
l_file_id NUMBER;
BEGIN
SELECT id
INTO l_file_id
FROM APEX_APPLICATION_FILES
WHERE filename = 'myhtml';
APEX_UTIL.GET_FILE(
p_file_id => l_file_id,
p_inline => 'YES');
END;
But that just replaces the entire page, not just the region it's defined in (even when the HTML is without <head> etc).
Various attampes wih #APP_IMAGES#myhtml and &APP_IMAGES.myhtml just give me the translation of the APP_IMAGES variable.
So, how do I load a large chunk of HTML into a region dynamically at run time? I also need this to interact with APEX in the sense that JavaScript will set APEX variables and cause a SUBMIT when the use clicks on the image map.

Hi Andy,
ATD wrote:
Does your HTML define the regions/points on the map using AREA tags?Yes. it is actually generated using MapSefrver from huge tables of SDO_GEOMETRY (Oracle Spatial).
If so, you could define a report template that does this and use this for a report based on a table that has the settings for shape, coords, href etcHmm, the code (HTML map) is auto-generated so if I understand you correctly, this might be difficult. One of the HTML is approximately 180KB of text.
I found a way to do this using dynamic PL/SQL. I created a new table that has a varchar filename and a CLOB for the file data. I then imported the HTML into the table using SQL Developer (copy&paste, nice!). I then created an HTML region and used the following:
declare
html clob;
len number;
st number;
c number;
begin
select length(data)
into len
from FILES
where name = 'state_query.html';
st := 1;
while len > 0
loop
if len > 32000 then
c := 32000;
else
c := len;
end if;
select substr( data,st,c )
into html
from FILES
where name = 'state_query.html';
htp.p( html );
st := st + c;
len := len - c;
end loop;
end;
Edited by: CoyoteTech on May 13, 2009 7:27 AM

Load HTML into a Tabbed Panel?

Similar Messages

Maybe you are looking for