www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 21 of 21

Thread: Avoiding conflicts

  1. #16
    Join Date
    Aug 2010
    Posts
    34
    one more question, If I want the doc ready function script to go in where would this go ? I would like the javascript librry to load after the page has.

    I have done it like this, is that correct ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="twitter_flickr.css" />
        <title>Javascript Problems</title>
        
       
        
        
        
    </head>
    <body>
        <div class="postwitter">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
            <script type="text/javascript">
            // <![CDATA[
    
    $(document).ready(function() {
    
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]>
    
    
            });
                
            </script>
            
            
            
    
        </div>
        <br>
        <br>
        <br>
        <br>    
        <div class="subContentContainer">
    
             <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
            <script type="text/javascript">
                // <![CDATA[
            
            
            $(document).ready(function() {
    
    
                $.noConflict();
    
                $(function() {
    
    
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
            // ]]>
    
            });
            
            </script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
        </div>
    </body>
    </html>

  2. #17
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Only on the jQuery
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="twitter_flickr.css" />
        <title>Javascript Problems</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="postwitter">
    
            <script type="text/javascript">
            // <![CDATA[
    
    
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]>
            </script>
    
        </div>
        <br>
        <br>
        <br>
        <br>    
        <div class="subContentContainer">
    
    
            <script type="text/javascript">
            // <![CDATA[
    
    
                $.noConflict();
    
                $(document).ready(function() {
    
    
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
            // ]]>
            </script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
        </div>
    </body>
    </html>

  3. #18
    Join Date
    Aug 2010
    Posts
    34
    Again, thank you very much. You have been a massive help !

    Apparently I need to replace all the $ signs in my code (jqueries) so that it doesnt conflict further.

    I have loaded this code up into the CMS and it doesnt like it

    hartelijk dank !

  4. #19
    Join Date
    Aug 2010
    Posts
    34
    I have found this , but again due to my begginer skill at javascript have no clue

    Referencing Magic - Shortcuts for jQuery

    If you don't like typing the full "jQuery" all the time, there are some alternative shortcuts:

    * Reassign jQuery to another shortcut
    o var $j = jQuery;
    o (This might be the best approach if you wish to use different libraries)
    * Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:
    o (function($) { /* some code that uses $ */ })(jQuery)
    o Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype's $, so you're making a choice to use only jQuery in that block.
    * Use the argument to the jQuery(document).ready(function($) {})

    DOM ready event:

    *
    o jQuery(function($) { /* some code that uses $ */ });
    o Note: Again, inside that block you can't use Prototype methods.
    http://docs.jquery.com/Using_jQuery_...ther_Libraries

  5. #20
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change this:
    Code:
            <script type="text/javascript">
            // <![CDATA[
    
                jQuery.noConflict();
    
                jQuery(document).ready(function($){
    
                    var $j = jQuery('#a-link').remove();

  6. #21
    Join Date
    Aug 2010
    Posts
    34
    Thanks,

    what I did in the end was change each $ to the following:

    and it works a charm !

    Thank you you for your help ! - hartelijk dank !


    Code:
    <script type="text/javascript">
                // <![CDATA[
    
    
                jQuery.noConflict();
    
                jQuery(document).ready(function() {
    
    
                    jQuery('#a-link').remove();
    
                    jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    jQuery.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                    jQuery.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            jQuery.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                                jQuery.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        jQuery.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    jQuery(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    jQuery('.image-container').live('mouseover', function() {
                    jQuery(this).children('div').attr('class', 'image-info-active');
                    });
                    jQuery('.image-container').live('mouseout', function() {
                    jQuery(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
                // ]]>
            </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles