Photoshop Question posted in
The official user guide can be found here.

how to $(".class").load part of external html div along with css/js – Photoshop

I have a div loadContent in my main html, loading successfully with my external html, instead of loading the whole html i decided to load just 1 part of the div, but if i just load that one part, it won’t link with my external css anymore.

my external HTML

<html>  
<head>                
    <!-- CSS
    ================================================== -->   
    <link rel="stylesheet" href="main.css"/>  

    <!-- JS
    ================================================== -->
    <script type="text/javascript" src="portfolioAjax.js"></script>
</head>

<body>    
    <!-- Primary Page Layout
    ================================================== -->
    <div id="content">
        <div class="sixteen full columns alpha omega">   
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="http://i.imgur.com/5bGrqhU.jpg" alt="logo" img-title="Dog So Cute" img-desc="A bunch of cute dog lol" author-name="Andrew" author-special="IAT" author-about="just a normal guy" author-skills="photoshop and stuffs" author-email="[email protected]" author-web="yahoo.com.sg" author-img="images/andrew.jpg">
                <h2 class="caption">des<br />GAD Portfolio1</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic2.jpg" alt="logo" img-title="2 cute human" img-desc="err, 2 human." author-name="Daniel" author-special="IAT" author-about="mr simple" author-skills="know it all" author-email="[email protected]" author-web="wikipedia.com" author-img="images/daniel.jpg">
                <h2 class="caption">bee<br />GAD Portfolio2</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic3.jpg" alt="logo" img-title="i am scared" img-desc="please don't bite me">
                <h2 class="caption">tee<br />GAD Portfolio3</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic4.jpg" alt="logo" img-title="look at my eyes" img-desc="i'm so cute">
                <h2 class="caption">fee<br />GAD Portfolio4</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic5.jpg" alt="logo" img-title="well..." img-desc="i don't know what is this">
                <h2 class="caption">foon<br />GAD Portfolio5</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic6.jpg" alt="logo" img-title="hi" img-desc="some candid shyt">
                <h2 class="caption">yea<br />GAD Portfolio6</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic7.jpg" alt="logo" img-title="Sup friend" img-desc="ok can">
                <h2 class="caption">ded<br />GAD Portfolio7</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic8.jpg" alt="logo" img-title="oh my god" img-desc="i forgot my clothes." author-name="Jassalyn" author-special="IAT" author-about="DUX Pro" author-skills="Everything" author-email="[email protected]" author-web="dux.com.sg" author-img="images/jessalyn.jpg">
                <h2 class="caption">bef<br />GAD Portfolio8</h2>    
            </div>
        </div>       
    </div>                      
</body>

if i just load the above file as a whole it works, but if i just load #content, the .js and .css will disappear. Any solution for it?

my Jquery

$(function() {
    $("#tab_gad").click(function() {
        $('.loadContent').load('portfolio_gad.html #content'); // js and css file gone
        $('.loadContent').load('portfolio_gad.html'); // works fine since i import everything include heading
    });     
});

Please advise if u have a easier way that i should approach towards.

Summary to what i want to achieve.
main html load a div of external html(with js & css intact)

my approach: i duplicated the main css and js to let my external html link towards it since my main html and external html are almost the same, just different content. Not sure if i am doing this the right way please advise

Tags:

2

Answers


  1. 0

    That is because the code you’re executing (appended #content) would only load the HTML of the element with the ID set to content.

    Since other elements don’t have that ID they will be ignored while being downloaded. You can, however try to load the whole HTML page without the content element. Scripts and style techniques must be downloaded in order for them to work, but that code would never bother downloading any script or css file since you’re not asking for it. You’re just asking it to download the #content part.

    You can somehow change your HTML to look like this,

    <!-- HTML -->
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="link/toStylesheet.css" />
  </head>
  <body>
    <div class="loadContent">
      <!-- leave it empty initially -->
    </div>
  </body>
  <script>
    // Place your scripts here -->
    // Load the content now -->
    $(document).ready(function () {
       $('.loadContent').load('portfolio_gad.html #content');
    });

  </script>
</html>

    Now when you will download the HTML, the scripts and CSS will already be there. So you won’t have to face the issue again.

    Login or Signup to reply.
  2. 0

    You can load your content and use the callback function to load your JS and css. Something like this:

    $(function() {

   function loadJS( scrpt, fn ) {
    var el = document.createElement('script'),
    body = document.body;

    el.type = 'text/javascript';
    el.src = scrpt;
    if ( typeof fn === 'function' ) {
      el.onload = fn();
    }
    body.appendChild(el);
  }

  function loadCSS( scrpt, fn ) {
    var el = document.createElement('link'),
    body = document.head;
    el.type = 'text/css';
    el.media = 'all';
    el.rel = 'stylesheet';
    el.href = scrpt;
    if ( typeof fn === 'function' ) {
      el.onload = fn();
    }
    body.appendChild(el);
  }

  $("#tab_gad").click(function() {
    $('.loadContent').load('portfolio_gad.html #content', function() {
      loadJS('/path/to/whatever.js');
      loadCSS('/path/to/whatever.css');
    });
  });     
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search