Databases
StackOverflow2013
Postsdbo
POChange div contents on link click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange div contents on link click
    primarykey
    data
    text
    <p>I'm trying to get a web page to change a divs <code>#portfolioWork</code> content upon clicking a link, I have tried a script that has been previously posted on here, however no such luck, even after switching around the id's to be called.</p> <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $('#GFXWork').click(function(){ $('#portfolioWork').load('portfolioContent.html #motionGraphics'); } &lt;/script&gt; &lt;nav id="portfolioNav"&gt; &lt;ul&gt; &lt;li id="portfolio-compositing"&gt;&lt;a href="#"&gt;Compositing&lt;/a&gt;&lt;/li&gt; &lt;li id="portfolio-animation"&gt;&lt;a href="#"&gt;Animation&lt;/a&gt;&lt;/li&gt; &lt;li id="portfolio-motionGfx"&gt;&lt;a id="GFXWork" href="#"&gt;Motion Graphics&lt;/a&gt;&lt;/li&gt; &lt;li id="portfolio-3D"&gt;&lt;a href="#"&gt;3D&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="portfolioWork"&gt; &lt;div id='Portfolio3D'&gt; &lt;a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk"&gt; &lt;figcaption id="BikeRender"&gt; &lt;div class="captiontitle"&gt;3D Ident to Music&lt;/div&gt; &lt;p class="maincaption"&gt;Apply attractive visuals to a short soundtrack to create an ident. Explore 3D particle systems and other simulation techniques to work towards the final outcome.&lt;/p&gt; &lt;p class="captionFooter"&gt;Autodesk Maya and Adobe Photoshop were used.&lt;/p&gt; &lt;/figcaption&gt; &lt;img src="Images/ident2Small.png"/&gt;&lt;/a&gt; &lt;a class="fancyYoutube" href="Images/3DBikeLarge.png"&gt; &lt;figcaption id="BikeRender"&gt; &lt;div class="captiontitle"&gt;Rendering Techniques&lt;/div&gt; &lt;p class="maincaption"&gt;Use reference materials to accurately texture a 3D bicycle model and light it to products standards. Composite the render outcomes to achieve quality images.&lt;/p&gt; &lt;p class="captionFooter"&gt;Autodesk Maya and Adobe Photoshop were used.&lt;/p&gt; &lt;/figcaption&gt; &lt;img src="Images/3DBikeSmall.png"/&gt;&lt;/a&gt; &lt;a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png"&gt; &lt;figcaption id="ChurchRender"&gt; &lt;div class="captiontitle"&gt;Realistic Modelling&lt;/div&gt; &lt;p class="maincaption"&gt;Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.&lt;/p&gt; &lt;p class="captionFooterChurch"&gt;Autodesk Maya and Adobe Photoshop were used.&lt;/p&gt; &lt;/figcaption&gt; &lt;img src="Images/3DChurchSmall.png"/&gt; &lt;a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png"&gt; &lt;/a&gt; &lt;/div&gt; &lt;!-- End of 3DWork --&gt; &lt;/div&gt; &lt;!-- End of PortfolioWork </code></pre> <p>I should be linking to a html file called portfolioContent.html which is located in the root folder alongside the portfolio.html page.</p> <p>portfolioContent.html:</p> <pre><code>&lt;div id="motionGraphics"&gt; &lt;a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk"&gt; &lt;figcaption id="BikeRender"&gt; &lt;div class="captiontitle"&gt;3D Ident to Music&lt;/div&gt; &lt;/figcaption&gt; &lt;img src="Images/ident2Small.png"/&gt;&lt;/a&gt; &lt;a class="fancyYoutube" href="Images/3DBikeLarge.png"&gt; &lt;figcaption id="BikeRender"&gt; &lt;div class="captiontitle"&gt;Rendering Techniques&lt;/div&gt; &lt;p&gt;BLAAAAAAAAAAAH&lt;/p&gt; &lt;/figcaption&gt; &lt;img src="Images/3DBikeSmall.png"/&gt;&lt;/a&gt; &lt;a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png"&gt; &lt;figcaption id="ChurchRender"&gt; &lt;div class="captiontitle"&gt;Realistic Modelling&lt;/div&gt; &lt;p class="maincaption"&gt;Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.&lt;/p&gt; &lt;p class="captionFooterChurch"&gt;Autodesk Maya and Adobe Photoshop were used.&lt;/p&gt; &lt;/figcaption&gt; &lt;img src="Images/3DChurchSmall.png"/&gt; &lt;a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png"&gt; &lt;/a&gt; &lt;/div&gt; &lt;!-- End of motionGraphcs --&gt; </code></pre> <p>Any such help would be greatly appreciated as I'm now completely lost as to what the issue may be!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMatt Meadows
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COMove your script to the bottom of the page, or at least after #GFXWork is created.
      singulars
      1. POChange div contents on link click
      1. USic3b3rg
 

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