TitanicThemes » Topic: Load Container Content http://titanicthemes.com/forum/forums/topic/load-container-content/feed/ Wed, 24 Feb 2016 13:38:34 +0000 http://bbpress.org/?v=2.5.8-5815 en-US http://titanicthemes.com/forum/forums/topic/load-container-content/#post-168 <![CDATA[Load Container Content]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-168 Fri, 06 Sep 2013 16:28:34 +0000 Nicola Mihaita leloureiro
Hi again… The page “themes.html” has a sub-navigation: “joomla templates”, “wordpress themes” and etc … Clicking, the gallery is “filtered”.

But I would like to use this navigation to load another HTML within a div. I’ve tried using the “jload”, but could not make it work.

What do I need to do is this link: http://css-tricks.com/examples/AJAXReplaceSamePart/

TitanicThemes
<a href="#" onClick='document.getElementById("ifr").src="page1.html";'>load 1</a>
<a href="#" onClick='document.getElementById("ifr").src="page1.html";'>load 2</a>

<iframe id='ifr' frameborder="0" scrolling="yes" width="550" height="400"></iframe>

Sample page
http://demo.titanicthemes.com/flexbox/dark/_iframe.html

leloureiro
Worked! But I need the “Load1″ now appear without having to click. How to do it?

TitanicThemes
Ad src to iframe like this
<iframe src="page1.html" id='ifr' frameborder="0" scrolling="yes" width="550" height="400"></iframe>

leloureiro
Thank you! It worked, but I need the height auto-adjustable. I studied the iframe and that seemed to make it work, only using javascript. I do not know programming in javascript … There’s another way to do this?

TitanicThemes
With php include or ajax.
http://stackoverflow.com/questions/6519325/how-to-change-php-files-in-div-without-reloading-all-page

Or manually make a page for each of your projects without iframe. Use include only for content that is repeating on each page.
Take this page for example http://titanicthemes.com/clients/titanicwhite/themes-sports.php
The purpose is to have the right column on all pages. I don’t want to include the left pictures because they are different from page to page.

So if i have a menu on the right that changes the left content what i want to do is use
< ?php include "menu.php"?>
By doing this when you have to change a link you change it once from menu.php, not on every page.

You can do this for the header or footer or the menu..

leloureiro
Hi ! Tks again… The link http://titanicthemes.com/clients/titanicwhite/themes-sports.php has no menu on the right… Or I did not understand what you wanted to explain…

I’m trying to do the entire site in HTML and then yes, switch to PHP. Initially it will only work on HTML.

I will test your suggestion … But a new problem appeared: when you click the menu iframe, the site automatically rises, going to the top of the browser.

Looks like a automatic link anchor … But that has nothing in CSS! I’m days trying to find a solution, but I can not solve. Have you any idea what might be causing this?

]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-184 <![CDATA[Reply To: Load Container Content]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-184 Tue, 10 Sep 2013 13:17:14 +0000 lloureiro Very good the new forum. I apologize for still need help, but could not solve the propblem the menu link in the iframe … When I click, the page goes to the top!! I appreciate any hint …

]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-185 <![CDATA[Reply To: Load Container Content]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-185 Tue, 10 Sep 2013 14:08:02 +0000 Nicola Mihaita Here is what i came up with.

Example
http://demo.titanicthemes.com/flexbox/dark/_iframe.html

<a href="#" onClick='document.getElementById("ifr").src="error404.html"; document.getElementById("ifr").height="700";'>load 1</a>
<a href="#" onClick='document.getElementById("ifr").src="faq.html"; document.getElementById("ifr").height="300";'>load 2</a>

<iframe id='ifr' src="error404.html" frameborder="0" scrolling="yes" width="550" height="400"></iframe>

But you must set the height manually

]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-186 <![CDATA[Reply To: Load Container Content]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-186 Tue, 10 Sep 2013 17:40:47 +0000 lloureiro This is my original code:

<div class=”themetitle2″>
<div class=”themetitlewrapper”>
<div class=”titanictitle”>PRODUTOS – MERCHANDISING / PDV</div>
<div class=”right menuint”>
<span>CARACTERÍSTICAS</span>
<span>DIFERENCIAIS</span>
<span>PROJETOS ESPECIAIS</span>
<span>VISITA TÉCNICA</span>
</div>
</div>
</div>

<br/><br/>

<!–<div id=”tamanho”>–>
<center><iframe src=”caracteristicas.html” id=’ifr’ class=”ifradjust” frameborder=”0″ scrolling=”auto” width=”100%” height=”580″></iframe></center>

I’ll add what you’re suggesting …

]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-187 <![CDATA[Reply To: Load Container Content]]> http://titanicthemes.com/forum/forums/topic/load-container-content/#post-187 Thu, 12 Sep 2013 18:26:03 +0000 lloureiro Problem solved. It was enough to add “return false” in OnClik. eg:

onClick=’document.getElementById(“ifr”).src=”page1.html”; return false‘

Tks again for your attention!

]]>