#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2014
    Posts
    30
    Rep Power
    5

    Page works locally and on JSFiddle, but not on server.


    Hi All,

    I've been trying to work out why my page works locally and on JSFiddle, but not on server. I am not missing any sources.

    Page Online: Bitly
    jsfiddle: Bitly

    Any ideas??
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    134
    Hi there 8745321311,

    Your problem is the result of having the whole code on one line.

    The javascript contains "//" comments which, of course, nullifies all the code on the line.

    So if you want to put the code on one line then use this "/* */" comment instead.

    Here is the code on multiple lines...

    Code:
    
    <!DOCTYPE html>
    <html>        
    <head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>untitled document</title> 
    <link href="css/magnific-popup.css" rel="stylesheet" />        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>        
    <script src="js/modal.magnific-popup.min.js" type="text/javascript"></script>            
    <script type="text/javascript">            
    $(document).ready(function() {                
    $('#modal1,#modal2,#modal3,#modal4,#modal5').magnificPopup({                    
    delegate: 'a',                    
    removalDelay: 0, 
         /* delay removal by X to allow out-animation */                   
    callbacks: {                        
    beforeOpen: function() {                            
         /* just a hack that adds mfp-anim class to markup  */                            
    this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');                            
    this.st.mainClass = this.st.el.attr('data-effect');
    }
    },                    
    closeOnContentClick: true,
    midClick: true 
         /* allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source. */
    });
    });
    </script> 
    <script type="text/javascript">
         /* ADD GOOGLE SEARCHS HERE */
         /* 01 */            
    $.getJSON("https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=Sony+MDR+XD100&rsz=1&callback=?", {                
    unescapedUrl: "any"            
    }, function(b) {                
    $.each(b.responseData.results, function(d, a) {                    
    $("<img/>").attr("src", a.unescapedUrl).attr("id", "img" + d).appendTo("#images3");                    
    $("#img" + d).wrap($("<a/>").attr("href", a.unescapedUrl));                    
    if (d == 1) {                        
    $("#images3").append("");                    
    }                
    });                
    return false;            
    });            
         /* 02 */            
    $.getJSON("https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=Sennheiser+CX+980&rsz=1&callback=?", {                
    unescapedUrl: "any"            
    }, function(b) {                
    $.each(b.responseData.results, function(d, a) {                    
    $("<img/>").attr("src", a.unescapedUrl).attr("id", "img" + d).appendTo("#images4");                    
    $("#img" + d).wrap($("<a/>").attr("href", a.unescapedUrl));                    
    if (d == 1) {                        
    $("#images4").append("");                    
    }               
    });               
    return false;            
    });
         /* 03 */            
    $.getJSON("https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=Sennheiser+CX+980+i&rsz=1&callback=?", {                
    unescapedUrl: "any"            
    }, function(b) {                
    $.each(b.responseData.results, function(d, a) {                    
    $("<img/>").attr("src", a.unescapedUrl).attr("id", "img" + d).appendTo("#images5");                    
    $("#img" + d).wrap($("<a/>").attr("href", a.unescapedUrl));                    
    if (d == 1) {                        
    $("#images5").append("");                    
    }                
    });                
    return false;            
    });        
    </script>    
    
    </head>        
    <body>        
    <div id="modal1"><a href="#test-popup1" data-effect="mfp-move-horizontal">1</a></div>        
    <div id="modal2"><a href="#test-popup2" data-effect="mfp-move-horizontal">2</a></div>        
    <div id="modal3"><a href="#test-popup3" data-effect="mfp-move-horizontal">3</a></div>        
    <div id="modal4"><a href="#test-popup4" data-effect="mfp-move-horizontal">4</a></div>        
    <div id="modal5"><a href="#test-popup5" data-effect="mfp-move-horizontal">5</a></div>
    <div id="test-popup1" class="white-popup mfp-with-anim mfp-hide">Test</div>        
    <div id="test-popup2" class="white-popup mfp-with-anim mfp-hide">Test</div>        
    <div id="test-popup3" class="white-popup mfp-with-anim mfp-hide">            
    <div id="images3"></div>        
    </div>        
    <div id="test-popup4" class="white-popup mfp-with-anim mfp-hide">            
    <div id="images4"></div>        
    </div>        
    <div id="test-popup5" class="white-popup mfp-with-anim mfp-hide">            
    <div id="images5"></div>       
    </div>    
    </body>
    </html>

    coothead

    Comments on this post

    • 8745321311 agrees
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2014
    Posts
    30
    Rep Power
    5
    AHHHH great! problem solved.

    For some reason my notepad++ was putting all of the code on 1 line.
    FYI to change this: Open up the file in Notepad++, choose Edit -> EOL Conversion -> Windows.

    thanks
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    134

    No problem, you're very welcome.

    coothead

    Comments on this post

    • 8745321311 agrees
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo