I'm new here and I'm also not much of a programmer but I hope you guys could help me with Javascript.
You see, I have this 3rd-party script that enables bloggers blogging on Blogger to add some kind of a list of related posts on their pages. Here is the script:
<script type='text/javascript'>
//<![CDATA[
// takes a json feed and creates an HTML-formatted list of the elements
function RelatedPostEntries(json) {
// change the next three variables as required
var homeUrl = 'http://whatever.blogspot.com/';
var maxNumberOfPostsPerLabel = 7;
var TargetElement = 'relatedcontent-list';
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i=0; i<maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l=0; l<json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl.length+13) + ':';
var txt = document.createTextNode(label);
var h = document.createElement('b');
var div = document.createElement('div');
div.appendChild(h);
div.appendChild(ul);
document.getElementById(TargetElement).appendChild(div);
}
}
}
function CodeHook(url, label, callback) {
var script = document.createElement('script');
script.setAttribute('src', url + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=' + callback);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
//]]>
</script>
The script works fine but the problem is the original programmer has forgotten to add rel='bookmark' to his codings thus leaving us bloggers with a huge headache when it comes to SEO.
Can you guys show me where and how to add that rel attribute?
Thanks.
Try putting a.rel = 'bookmark' after when the element is declared, around here:
...
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
a.rel = 'bookmark';
...
I think this will work.
var a = document.createElement('a');
a.href = alturl;
a.rel = "bookmark";
Related
I have the following JavaScript which creates link dynamically based on a SharePoint list that is grouped by a column "Report Category". The code is working however, if there is a empty group but has data then it should create all the links and a link called "Others". I wonder why it's creating 2 links that are "Others" along with all the other links it should create. html uploaded here https://jsfiddle.net/ea8dyvyq/5/
<div class="nav-report-category">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("table.ms-listviewtable td[class=’ms-gb’]").each(function() {
//$("table.ms-listviewtable td[class^='ms-gb']").each(function(){
$(".ms-listviewtable td[class^='ms-gb']").each(function(){
$(".ms-listviewtable td[class^='ms-gb']").length;
//$("table.ms-listviewtable td.ms-gb").each(function(){
//$("ms-gb.td").each(function(){
//Hide all Counts for Groups
//$(this).find("span:last").remove();
//alert('loop is working');
var mydiv = document.getElementsByClassName("nav-report-category")[0];
//var liTag = document.createElement('li');
//var aTag = document.createElement('a');
//aTag.setAttribute("href","yourlink.htm");
var str = $(this).text();
str = str.substring(str.indexOf(":") +1); //remove everything before :
str = str.substring(0, str.indexOf("(")); //remove counts
//str = str.substring(str.indexOf(":") + 1);
//$(this).find("span:last").remove();
//var RptCat = $(".ms-listviewtable td.ms-gb:first a:eq(1)").text();
//var grNameRaw = $(this).text().replace(RptCat+' :','');
//var grName = grNameRaw.substring(0,grNameRaw.indexOf('(')-1).replace(/s|xA0/g,'');
//aTag.innerHTML = $(this).text();
//aTag.innerHTML = str.trim();
//aTag.setAttribute('target', '_blank');
if (!str.trim() || str.trim() == null)
{
var liTag = document.createElement('li');
var aTag = document.createElement('a');
aTag.innerHTML = "Other";
}
else
{
var liTag = document.createElement('li');
var aTag = document.createElement('a');
aTag.innerHTML = str.trim();
}
aTag.setAttribute('target', '_blank');
//var href = $(this).attr('href');
var link = window.location.href + "&RC=" + str.trim();
aTag.setAttribute("href",link);
liTag.appendChild(aTag);
mydiv.appendChild(liTag);
//mydiv.appendChild(aTag);
//mydiv.appendChild(document.createElement ("span"));
//mydiv.appendChild(document.createTextNode (" "));
});
//alert('test');
});
</script>
For an assignment i need to create a website which outputs mobile phone contracts based on the users preferences. I am currently stuck at the DOM part of the assignment.
I would like to output the results into a list, which i have managed to do, though i'm sure there's a better way to do it using less code.
This is what i have so far: https://jsfiddle.net/fn2ewtck/
The code i am trying to improve is this:
function search() {
var userBrandCtrl = document.getElementById("userBrand");
var userBrand = userBrandCtrl.value;
var userModelCtrl = document.getElementById("userModel");
var userModel = userModelCtrl.value;
var userNetworkCtrl = document.getElementById("userNetwork");
var userNetwork = userNetworkCtrl.value;
for (var i = 0; cont.length; i++) {
if (userBrand === cont[i].brand && userModel === cont[i].model && userNetwork === cont[i].network) {
var body = document.body;
var ulCont = document.createElement("ul");
var liBrand = document.createElement("li");
var liModel = document.createElement("li");
var liNetwork = document.createElement("li");
var liMins = document.createElement("li");
var liTexts = document.createElement("li");
var liData = document.createElement("li");
var liUpfront = document.createElement("li");
var liMonthly = document.createElement("li");
var liLength = document.createElement("li");
var textBrand = document.createTextNode("Brand: " + cont[i].brand);
var textModel = document.createTextNode("Model: " + cont[i].model);
var textNetwork = document.createTextNode("Network " + cont[i].network);
var textMins = document.createTextNode("Mins: " + cont[i].mins);
var textTexts = document.createTextNode("Texts: " + cont[i].texts);
var textData = document.createTextNode("Data: " + cont[i].data);
var textUpfront = document.createTextNode("Upfront: " + cont[i].upfront);
var textMonthly = document.createTextNode("Monthly: " + cont[i].monthly);
var textLength = document.createTextNode("Length: " + cont[i].length);
liBrand.appendChild(textBrand);
liModel.appendChild(textModel);
liNetwork.appendChild(textNetwork);
liMins.appendChild(textMins);
liTexts.appendChild(textTexts);
liData.appendChild(textData);
liUpfront.appendChild(textUpfront);
liMonthly.appendChild(textMonthly);
liLength.appendChild(textLength);
ulCont.appendChild(liBrand);
ulCont.appendChild(liModel);
ulCont.appendChild(liNetwork);
ulCont.appendChild(liMins);
ulCont.appendChild(liTexts);
ulCont.appendChild(liData);
ulCont.appendChild(liUpfront);
ulCont.appendChild(liMonthly);
ulCont.appendChild(liLength);
body.appendChild(ulCont);
}
}
};
How could i do this better?
Thanks.
You could create an array of the properties you want to display from the object and loop over them like this:
var arr = ['brand', 'model', 'network', 'mins']
for (i = 0; i < arr.length; i++) {
//Upercase first letter
var label = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
//create html elements
var li = document.createElement("li"),
text = document.createTextNode(label + ": " + cont[i][arr[i]]);
li.appendChild(text);
ulCont.appendChild(li);
}
//append to body after loop
body.appendChild(ulCont);
You should look at Backbone and Dust. They'll help you templatize the HTML you're trying to write.
I have to create 'a' tags dynamically when the function (lect) get called! And on the onclick() event of this tag, i need to know the id of it. Here is the code that is explaning problem more clearly
function lect(j) {
var mydiv = document.getElementById("cd" + j);
var count = 3;
for (var k = 1; k <= 3; k++) {
var aTag = document.createElement('a');
var inn = "analysis" + k;
var id = "link" + k;
var hr = "#";
aTag.setAttribute('id', id);
aTag.setAttribute('href', hr);
aTag.innerHTML = inn;
aTag.onclick = function (e)
{ // here i want to get the id of tag, so that it could be passed to
// the second html page
location.href = 'gallery-2.html?lectName=' + //name of id// ;
};
mydiv.appendChild(aTag);
}
}
Please help me how should i do it!
You can do:
aTag.onclick = function (e)
{
location.href = 'gallery-2.html?lectName=' + this.id;
};
Within your onclick event, this will refer to the aTag object.
I am working on phonegap and I am new to it. I want to draw a line using hr under the menu items which are displayed. but unfortunately I am unable to do so.
if somebody can help in this regard. Thanks in advance.
here is the code snippet
{
success:function(res,code) {
entries = [];
var xml = $(res);
var items = xml.find("item");
$.each(items, function(i, v) {
category1.push($(v).find("category").text());
/* $("#status").append("menu_type <b>"+menu_type+"</b><br/>"); */
console.log( "PRICE" + ": " + $(v).find("menu_type").text() );
});
var category = category1.unique();
var select = document.getElementById("selectNumber");
for(var i = 0; i < category.length; i++) {
var el1 = document.createElement("li");
var opt = category[i];
var el = document.createElement("a");
el.textContent = opt;
el.value = opt;
el1.appendChild(el);
select.appendChild(el1);
}
}
Try adding something like this
document.getElementById("ElementBelowWhichHRShouldCome").appendChild(document.createElement('hr'));
Try innerHTML. Here is an example:
http://jsfiddle.net/Wxv6n/
var doc = document;
var get = function(id){return doc.getElementById(id);};
get("foo").innerHTML = '<hr/>';
..and don't forget to cache your references to document
After Every Menu Item,you can use this.Its pretty simple.
$("#menu_item").after('<hr/>');
after() in jquery
DEMO FIDDLE
How can I random elements order (link), so that they appear every case in other order? here is my js code:
$(document).ready(function(){
if ($.browser.msie && jQuery.browser.version.substr(0,1)<='6' && readCookie('already_submit')!=1) {
var iemessage = document.createElement("div");
$(iemessage).addClass("ie-message");
$('body').append(iemessage);
var frame = document.createElement("iframe");
$(frame).addClass("nsframe");
$(iemessage).append(frame);
var alerterror = document.createElement("div");
$(alerterror).addClass("alert error");
$(iemessage).append(alerterror);
var close = document.createElement("div");
$(close).addClass("close-text");
$(alerterror).append(close);
var textclose = document.createElement("div");
$(textclose).addClass("text-img");
$(textclose).text("close");
$(close).append(textclose);
var h2 = document.createElement("h2");
$(h2).text("Sorry, your web-browser is outdated...");
$(alerterror).append(h2);
var h3 = document.createElement("h3");
$(h3).text("Our site could be displayed not correctly in your browser.");
$(alerterror).append(h3);
var p = document.createElement("p");
$(p).text("We recommend you install new version of web-browser:");
$(alerterror).append(p);
var browserslist = document.createElement("div");
$(browserslist).addClass("browsers-list");
$(iemessage).append(browserslist);
var achrome = document.createElement("a");
$(achrome).attr("href", "http://www.google.com/chrome");
$(browserslist).append(achrome);
var spanchrome = document.createElement("span");
$(spanchrome).addClass("browser-button chrome");
$(spanchrome).text("Google Chrome");
$(achrome).append(spanchrome);
var afirefox = document.createElement("a");
$(afirefox).attr("href", "http://www.mozilla.com/firefox/");
$(browserslist).append(afirefox);
var spanfirefox = document.createElement("span");
$(spanfirefox).addClass("browser-button firefox");
$(spanfirefox).text("Mozilla Firefox");
//$(afirefox).append(spanfirefox);
var aopera = document.createElement("a");
$(aopera).attr("href", "http://www.opera.com/download/");
$(browserslist).append(aopera);
var spanopera = document.createElement("span");
$(spanopera).addClass("browser-button opera");
$(spanopera).text("Opera");
//$(aopera).append(spanopera);
var asafari = document.createElement("a");
$(asafari).attr("href", "http://www.apple.com/safari/download/");
$(browserslist).append(asafari);
var spansafari = document.createElement("span");
$(spansafari).addClass("browser-button safari");
$(spansafari).text("Apple Safari");
$(asafari).append(spansafari);
var aexplorer = document.createElement("a");
$(aexplorer).attr("href", "http://www.microsoft.com/windows/Internet-explorer/default.aspx");
$(browserslist).append(aexplorer);
var spanexplorer = document.createElement("span");
$(spanexplorer).addClass("browser-button ie");
$(spanexplorer).text("Internet Explorer");
$(aexplorer).append(spanexplorer);
$(iemessage).toggle();
$('.close-text').mouseover(function() {
$('.close-text').css({"border-bottom":"1px solid #000"});
$('.close-text').css({"color":"#959595"});
$('.close-text').css({"background":"url(/assets/browsers/button-close-hover.png) 100% 100% no-repeat"});
});
$('.close-text').mouseleave(function() {
$('.close-text').css({"border-bottom":"none"});
$('.close-text').css({"color":"#4e4e4e"});
$('.close-text').css({"background":"url(/assets/browsers/button-close.png) 100% 100% no-repeat"});
});
$('.close-text').click(function() {
$('.ie-message').hide();
createCookie('already_submit', 1, 0);
});
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
});
How can I random elements order (link), so that they appear every case.
As you see I need to random this lines:
$(afirefox).append(spanfirefox);
$(aopera).append(spanopera);
and so other. How can I do this, using my code style?
Function to shuffle an array in place:
function shuffle(array) {
var i = array.length;
if(i > 1)
while(--i) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
Add your afirefox, aopera and so on to an array:
var links = [afirefox, ..., aopera];
Append the shuffled list:
var $browserslist = $(browserslist);
$browserslist.append.apply(browserslist, shuffle(links));
EDIT: I removed my bad solution and instead suggest Fisher-Yates. See this interesting post on the matter - it seems to be exactly the same thing which you are doing.