Adding Adative Javascript file to my website

Home Forums Using Thematic Child Themes Build Your Own Custom Child Themes Adding Adative Javascript file to my website

This topic is: resolved

This topic contains 15 replies, has 2 voices, and was last updated by  proto 4 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2224

    proto
    Participant

    Hello All,

    I’m trying to integrate and adative.js file to my child theme designed on the 960.gs system. All fine so far. I just want to make sure I’m adding the javascript files in the right way.

    First, I’m adding the code that loads the adaptive javascript – I think there’s an error here but not 100% sure where:

    
    function pixelwoo_adaptive(){ ?>
    
    <script type="text/javascript">
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
    // Where is your CSS?
    path: ‘assets/css/’,
    
    // false = Only run once, when page first loads.
    // true = Change on window resize and page tilt.
    dynamic: true,
    
    // Optional callback… myCallback(i, width)
    callback: myCallback,
    
    // First range entry is the minimum.
    // Last range entry is the maximum.
    // Separate ranges by "to" keyword.
    range: [
    ‘0px to 760px = mobile.css’,
    ‘760px to 980px = 720.css’,
    ‘980px to 1280px = 960.css’,
    ‘1280px to 1600px = 1200.css’,
    ‘1600px to 1920px = 1560.css’,
    ‘1940px to 2540px = 1920.css’,
    ‘2540px = 2520.css’
    ]
    };
    </script>
    }
    <?php
    add_action(‘wp_head’, ‘pixelwoo_adaptive’);
    
    

    I then add the minified Javascript file itself like so:

    
    function pixelwoo_adaptive_file() { ?>
    
    <script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’) ?>/assets/js/adapt.min.js"</scrip>
    <?php }
    
    add_action(‘wp_head’, ‘pixelwoo_adaptive_file’);
    
    

    It’s not quite working and when I have this code in dremweaver it seems to indicate an error somewhere in my coding for the function pixelwoo_adaptive code. Any help greatly appreciated!

    #2225

    proto
    Participant

    Here’s the code where I think the error is happening:

    
    function pixelwoo_adaptive(){ ?>
    
    <script type="text/javascript">
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
    // Where is your CSS?
    path: 'assets/css/',
    
    // false = Only run once, when page first loads.
    // true = Change on window resize and page tilt.
    dynamic: true,
    
    // Optional callback... myCallback(i, width)
    callback: myCallback,
    
    // First range entry is the minimum.
    // Last range entry is the maximum.
    // Separate ranges by  "to"  keyword.
    range: [
    '0px to 760px = mobile.css',
    '760px to 980px = 720.css',
    '980px to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px = 2520.css'
    ]
    };
    </script>
    }
    <?php
    add_action('wp_head', 'pixelwoo_adaptive');
    
    
    #2227

    Scott Nix
    Moderator
    
    }
    <?php
    add_action('wp_head', 'pixelwoo_adaptive');
    
    

    should be

    <?php }
    add_action('wp_head', 'pixelwoo_adaptive');
    
    

    As far as are you loading JS correctly, no. I couldn't find information on whether the first JS snippet should be included in the head, so I would just leave it how you have it, although you could load in in like a head-custom.js file.

    However the second JS file (the minifyed one) will work, but that is considered the rookie way of doing it, you would be much better off getting in the habit of using wp_enqueue to do so.  There is an article by WP Candy on using enqueue the correct way.

    I kind of have a template I use on all themes which is where I deal with all script loading in one place, you can find an example on my Thematic Snippets page and since it is so big (I haven’t organized it), do a search for ” Script Manager ” to get there quickly.

    #2233

    proto
    Participant

    Scott,

    Thanks so much for your assistance. I’m still having trouble adding the javascript to my head file. I tried going with your kind suggestion of adding in the closing bracket just after the <?php section like you suggested but Dreamweaver is saying I’m still making an error.

    I have a screenshot where you can see that Dreamweaver is saying I’m making an error and it’s driving me loopy!

    http://pixelwoo.org/pitstyle/wp-content/themes/pixelwoo/images/PHP%20Error.png

    Any help or assistance greatly appreciated!

    Here’s the code in raw form:

     

    
    function pixelwoo_adaptive() { ?>
    
    <script type="text/javascript">
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
    // Where is your CSS?
    path: 'assets/css/',
    
    // false = Only run once, when page first loads.
    // true = Change on window resize and page tilt.
    dynamic: true,
    
    // Optional callback... myCallback(i, width)
    callback: myCallback,
    
    // First range entry is the minimum.
    // Last range entry is the maximum.
    // Separate ranges by  "to" keyword.
    range: [
    '0px to 760px = mobile.css',
    '760px to 980px = 720.css',
    '980px to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px = 2520.css'
    ]
    };
    </script>
    
    <?php }
    add_action('wp_head', 'pixelwoo_adaptive');
    
    
    #2235

    proto
    Participant

    To help try and solve this I’ve put up a live site, so you can see the code I’m using. The tutorial for implementing the responsive website is here, which is really short: http://adapt.960.gs/.

    Here’s my live website which appears to be failing to pick up the responsive CSS: http://www.pixelwoo.org/someltop/

    1: I think that I’m successfully calling the adapt.js file (when I “View Source” then click on the link it takes me to the Adapt.js code which appars).

    Code here (I know I should enqueue but just want to get ti working and then will worry about that:

    function pixelwoo_adaptive_file() { ?>
    
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/assets/js/adapt.js"></script>
    <?php }
    
    add_action('wp_head', 'pixelwoo_adaptive_file');

    2: I have put the recommended files (what I think - could be wrong) in the right path. Namely within my child theme directory I have files called: /assets/css/(then lots of css variations here).

    3: I've also called the javascript code to initiate the CSS depending on the screen size. (When I right click and "View Source" I can see the recommended code in head section of my website, not sure if I've made an error here or not.

    Code here:

    
    function pixelwoo_adaptive() {
    
    echo("
    
    <script type=\"text/javascript\&#038;q">
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
    // Where is your CSS?
    path: &#8216;assets/css/&#8217;,
    
    // false = Only run once, when page first loads.
    // true = Change on window resize and page tilt.
    dynamic: true,
    
    // Optional callback&#8230; myCallback(i, width)
    callback: myCallback,
    
    // First range entry is the minimum.
    // Last range entry is the maximum.
    // Separate ranges by \&#8221;to\&#8221; keyword.
    range: [
    &#8216;0px to 760px = mobile.css&#8217;,
    &#8216;760px to 980px = 720.css&#8217;,
    &#8216;980px to 1280px = 960.css&#8217;,
    &#8216;1280px to 1600px = 1200.css&#8217;,
    &#8216;1600px to 1920px = 1560.css&#8217;,
    &#8216;1940px to 2540px = 1920.css&#8217;,
    &#8216;2540px = 2520.css&#8217;
    ]
    };
    </script>&#8220;);}
    add_action(&#8216;wp_head&#8217;, &#8216;pixelwoo_adaptive&#8217;);
    

    I think I’m really close but probably missing some annoying detail, I can’t see the proverbial wood for the trees! Any help greatly appreciated indeed!.

    #2244

    Scott Nix
    Moderator

    I wouldn’t trust Dreamweaver on error reporting of code, although I don’t use it so I don’t know how accurate it is, but the snippet should be working fine and is outputting correctly.

    I don’t really get why it isn’t working however and without going through the process of setting it up (which I have no desire to do since I think this is the wrong way to do media queries) I can’t really tell why it isn’t working, all the scripts are loading (files are in correct places).

    The only thing I can see off the bat is the “path: ‘assets/css/’,” shouldn’t need the full url. If it isn’t that just send me the files to scott@scottnix.com and I will check on a dev server, I just don’t want to set it up which will be a big ole waste of time since CSS loading like this through JS is lame (IMO). 😛

    #2248

    proto
    Participant

    Scott,

    Thanks so much for your offer of assistance. I’ve tried your kind suggestion of various alterations to the path to my CSS files but unfortunately still no success. I’ve emailed you the files, thanks again for all your assistance, much appreciated!

     

    #2251

    Scott Nix
    Moderator

    In the “path” part, you just need your full url.

    path: 'http://www.pixelwoo.org/someltop/wp-content/themes/pixelwoo/assets/css/'

    The whole way you are going about doing media queries is overly complicated, using SASS/Compass you can easily incorporate grid frameworks without needing to add unnecessarily classes.

    http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/ is an example of 960 (the only reason i picked this link). Otherwise there are probably better tutorials out there for teaching people to use grid frameworks without needing to add classes.

    Also turn on your wp-config.php debug to true for a bunch of errors.  😛

    What are you making anyway? Just like the example of using a grid framework without adding classes, you have a bunch of other areas where it seems you are making things more complicated than they have to be.

    #2271

    proto
    Participant

    Scott,

    Thanks so much for this. Your help is truly appreciated. I tried giving the full path as per your kind help, but I think it’s still not pulling through on the live demo site here:

    http://www.pixelwoo.org/someltop/

    If you right click and view source you’ll see that I’m using the full path but something isn’t quite pulling through? Any thoughts if you have them would be great!

    Thanks again!

    #2278

    Scott Nix
    Moderator

    Hmm, try commenting out “callback: myCallback,” since you most likely aren’t using it.

    Also, when I was testing and had it working, I added body:before { content: “some text” } to the css files in the assets/css folders so when it was working, it was obvious. Since it is added dynamically, the only way to see if it is working is by a visual queue (like the body:before above) or by using firebug to look in the rendered link in the head, it will not show up if you view source to check it.

    The key is the path part, everything else was already fine.

    #2331

    proto
    Participant

    Scott,

    Thanks so much.. That seemed to work great when I commented out “callback: myCallback”. Is there any disadvantage from not using this callback? Since I’ve commented that out it seems to work fine! Thank you!

    Sorry to ask a follow up question but can I filter thematic’s inbuilt markup to add classes. The reason I ask is because I need branding to have a class of grid_12 it will then adapt. Currently it’s static at 960 pixels.

    Thanks so much for your help Scott – it really is much appreciated!

    #2332

    proto
    Participant

    It nearly works. If you see the live demo site the adaptive appears to be working fine except the mobile.css’ version (when the screen is resized to less than 760px).

    Any thoughts why it’s not working?

    http://www.pixelwoo.org/someltop/

    #2348

    Scott Nix
    Moderator

    It is two different things causing it not to work.

    The CSS on the body, specifically the min-width set to 960px, there are multiple ones, so find them all.

    Second is the CSS on the .menu class, which sets it at 940px in the #access menu.

    #2722

    proto
    Participant

    Scott,

    Can I just say thank you for your assistance. It’s really appreciated. I’ve got the adaptive site working in desktop browsers fine (well there’s a lot of sorting out to be done yet) but essentially it adapts to an alternating screen size.

    http://www.pixelwoo.org/pixelwoo2013/

    I’m using the viewport to ensure that there’s no default zoom used by mobiles with the following code:

    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0″/> <!–320–>

    The issue I’m facing now is that when I test my site in mobile browsers, specifcially using the Galaxy Note 2 Google Chrome my website is not centered. I’m using the CSS on website container

    margin: 0 auto;

     

    Here’s a screenshot of the browser on android, Google Chrome: http://www.pixelwoo.org/pixelwoo2013/?attachment_id=958

    Any thoughts on how to center it?

    #2723

    Scott Nix
    Moderator

    There are quite a few CSS errors, I would suggest running the CSS through a validator or use CSSlint.net to locate them.

    There is also a fixed width 0f 960px the #footer div.

    You mentioned you were sorting things out, but some of the CSS you have is unnecessarily complicated. You may want to look into the idea to stop using ID’s in your CSS, people have made good arguments for not using ID’s ever again for CSS styling, granted Thematic forces you to, but anything you add (custom code) should primarily be using classes.

Viewing 15 posts - 1 through 15 (of 16 total)

The topic ‘Adding Adative Javascript file to my website’ is closed to new replies.