I hve the following code for a twitter feed and a flickr feed.
I am having problems implementing it on my site.
The code works no problem on its own, however when I place it on the site it conflicts with the other javascript.
I want to make these two scripts non conflictable, but have no idea how.
Is there a simple way of doing so ?
Code:
<div class="postwitter">
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<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>
<br>
<div class="subContentContainer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> // <![CDATA[
$(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 + ' – 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>
<script type="text/javascript"> // <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>
<script type="text/javascript"> // <![CDATA[
try {
var pageTracker = _gat._getTracker("UA-6537137-1");
pageTracker._trackPageview();
} catch (err) { }
// ]]></script>
Thank you Fang, I did find this thread but have no idea how to implement the no conflict code . I do not know javascript and cannot make sense of any of it.
<div class="postwitter">
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript"> // <![CDATA[
$.noConflict();
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>
<br>
<div class="subContentContainer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> // <![CDATA[
$.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 + ' – 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>
<script type="text/javascript"> // <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>
<script type="text/javascript"> // <![CDATA[
try {
var pageTracker = _gat._getTracker("UA-6537137-1");
pageTracker._trackPageview();
} catch (err) { }
// ]]></script>
</div>
Like so? appologies, you must get the impression I fall into your 98% signature !?
Code:
<div class="postwitter">
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<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>
<br>
<div class="subContentContainer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> // <![CDATA[
$.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 + ' – 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>
<script type="text/javascript"> // <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>
<script type="text/javascript"> // <![CDATA[
try {
var pageTracker = _gat._getTracker("UA-6537137-1");
pageTracker._trackPageview();
} catch (err) { }
// ]]></script>
</div>
Cool, although for some reason the Flickr images are not loading anymore, its as if the code works on the twitter feed but break the flickr one. any ideas ?
html including the divs and javascript, I have moved the CDAT onto the line below and still no luck. This is really frustrating, especially as you have no problem with it.
Maybe somthing to do with the library ?
cheers
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 type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$.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 + ' – 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>
Avoiding conflicts
Reply With Quote
. I do not know javascript and cannot make sense of any of it.
Originally Posted by amean_n
Bookmarks