Databases
StackOverflow2013
Postsdbo
POExpand/Collapse Content on a Webpage [ also load content on click ]
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExpand/Collapse Content on a Webpage [ also load content on click ]
    primarykey
    data
    text
    <p>I'm making a site that has different panoramas on one page</p> <p>made with pano2vr gardengnomesoftware.com/pano2vr.php</p> <p>The problem is that I want to hide each panorama in an expandable section. so the user can scroll down and then open up the one they want.</p> <p>I've been trying different expand/collapse codes, such as this one</p> <p><a href="http://www.adipalaz.com/experiments/jquery/expand.html" rel="nofollow">http://www.adipalaz.com/experiments/jquery/expand.html</a></p> <p>and this</p> <p><a href="http://webcloud.se/code/jQuery-Collapse/" rel="nofollow">http://webcloud.se/code/jQuery-Collapse/</a></p> <p>(the reason i've chose these is that they have smooth opening animations, a graphic that changes to show if its open or closed and you can have more than one open at a time [non-accordion style])</p> <p>However the first issue is the panoramas don't load if they are in a collapsed section. (if I use the 2nd script it has cookies and remembers if a section was open, if I open the section with the panorama in and refresh the page then it will load in)</p> <p>also I don't want them (the panoramas/content inside the expandable sections)to load in when you open the page, as each one can be 5mb+, so I need some way of loading the content in the section when you expand it. (unfortunately the panoramas both flash and html5 autoload)</p> <p>This is the code I use to load a panorama on a page:</p> <pre><code>&lt;script type="text/javascript"&gt; // hide URL field on the iPhone/iPod touch function hideUrlBar() { if (window.pageYOffset==0) { window.scrollTo(0, 1); // repeat every second for slow rendering pages setTimeout(function() { hideUrlBar(); }, 3000); } } &lt;/script&gt; </code></pre> <p>and</p> <pre><code> &lt;script type="text/javascript" src="pano2vr_player.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="skin.js"&gt; &lt;/script&gt; &lt;div id="container" style="width:960px;height:540px;"&gt; This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher. &lt;/div&gt; &lt;script type="text/javascript"&gt; // create the panorama player with the container pano=new pano2vrPlayer("container"); // add the skin object skin=new pano2vrSkin(pano); // load the configuration pano.readConfigUrl("some_panorama_name.xml"); // hide the URL bar on the iPhone hideUrlBar(); &lt;/script&gt; </code></pre> <p>I've seen some stuff with ajax but I'm unsure how to tie it all into jQuery to make this work.</p> <p>I did also think that I could just have an image in the hidden sections which would say, click here to load panorama, then use some code to swap out the image for the panorama, but I don't know how I'd do that? ajax? iframe?</p> <p>Thanks for reading this far! I wanted to make sure I covered everything before posting.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USrussian box
    1. USrussian box
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POExpand/Collapse Content on a Webpage [ also load content on click ]
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POExpand/Collapse Content on a Webpage [ also load content on click ]
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI have tried putting the content into an iframe and having an image saying click here to load panorama, however when it loads the panorama the fullscreen option doesn't work as it tries to fullscreen within its own iframe, and not the browser window. Silly html5
      singulars
      1. POExpand/Collapse Content on a Webpage [ also load content on click ]
      1. USrussian box
    2. COThink i might of found a solution: http://www.raymondcamden.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile
      singulars
      1. POExpand/Collapse Content on a Webpage [ also load content on click ]
      1. USrussian box
    3. COthe above didn't work as expected
      singulars
      1. POExpand/Collapse Content on a Webpage [ also load content on click ]
      1. USrussian box
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload