Does somebody know, how we can add the rel="nofollow" attribute to all links in the comments plugin from facebook.
<div id ="comments" style="margin-left: 510px; width: 550px" >
<div class="fb-comments" data-href="http://my.net/" data-width="550" data-numposts="5" data-colorscheme="light"></div>
</div>
</div>
window.addEventListener("load", func, false);
function func() {
var div = document.getElementById("comments");
var elements = div.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++)
{
if (elements [i].tagName == "a") {
elements[i].rel = "nofollow";
}
}
}
Array elements do not contain all tags that facebook adds in my .
if (elements[i].tagName.toLowerCase() == "a")
{
elements[i].setAttribute('rel', 'nofollow');
}
And you must paste your code after FB init, not on window.load.
Related
I need to print preview data using javascript and jQuery click, parents and find like this:
HTML:
print
<div class="filter-data">
<div class="product-table">
<div class="table-product">
title 1
</div>
<div class="table-product">
title 2
</div>
<div class="table-product">
title 3
</div>
<div class="table-product">
title 4
</div>
</div>
</div>
JS:
$("body").on("click", ".print-table", function(e) {
e.preventDefault();
let parent = $(this)
.parents(".filter-data")
.find(".product-table");
printElem(parent.find(".table-product"));
});
function printElem(elem) {
var element = [];
var mywindow = window.open("", "PRINT", "height=400,width=600");
var obj = elem.clone();
for (i = 0; i < obj.length; i++) {
$(obj[i]).find(".exclude-export").remove();
}
for (const element of obj) {
mywindow.document.write(element.outerHTML);
}
mywindow.document.close();
mywindow.focus();
setTimeout(function() {
mywindow.print();
mywindow.close();
}, 1000);
return !0;
}
but in action I can see data in print preview.
How do can I fix this error?
Demo HERE
I searched everywhere on here on an alternative on printing to HTML from a JavaScript function to HTML without using document.write() but document.getElementById() doesn't seem to work and I'm really not sure how to go about doing this.
I have this so far
JavaScript
function trials() {
while (num_trials > 0) {
for (var i = 0; i < random.length; i++) {
document.write(random[i]);
}
}
}
Where "random" is an array of letters
HTML
<div id ="container">
<center>
<i>**TRIALS HERE**</i><br><br>
<font size="8">
<script>trials();</script><br><br>
</font>
</center>
</div>
I'm also looking for a way to hide each letter after each iteration of the for-loop so that it doesn't just print as a long string of letters.
Basic idea is to use an interval to loop through the array so there is a delay. You want to set the text with innerHTML or textContent.
(function() {
var outputElem = document.getElementById("outputSpot"), //where to output the letter on the screen
current = 0, //start index in the array
randomChars = ["W","E","L","C","O","M","E","!"], //characters to show
timer = window.setInterval( //this is how we will loop with an interval
function () {
var letter = randomChars[current]; //get next letter
if (letter) { //if there is no letter, it will be undefined and we will be done
outputElem.innerHTML = letter; //show the letter to the user
current++; //update the index
} else {
window.clearInterval(timer); //cancel the timer since we ran out of things to display
}
}
,1000); //number of seconds to wait between iterations
}());
<span id="outputSpot">Hello!</span>
Javascript
I would try setting the div to a variable:
var div = $('#container');
function trials() {
while (num_trials > 0) {
for (var i = 0; i < random.length; i++) {
div.appendTo(random[i]);
}
}
HTML
Then maybe hiding the container div (style='display:none;') would prevent the numbers printing out, but still accessible:
<div>
<center>
<i>**TRIALS HERE**</i><br><br>
<font size="8">
<script>trials();</script>
<div id="container" style="display:none;"></div><br><br>
</font>
</center>
</div>
It may be very useful for you to use JQuery.
function trials() {
while (num_trials > 0) {
for (var i = 0; i < random.length; i++) {
$('#iToWrite').html( $('#iToWrite').html() + random[i]);
}
}
}
<div id ="container">
<center>
<i id='iToWrite'>**TRIALS HERE**</i><br><br>
<font size="8">
<script>trials();</script><br><br>
</font>
</center>
</div>
HTML is like this:
<div class="header">
<ul>
<li>
<a class="abc" id="abc" href="www.testing.com">testing</a>
</li>
</ul>
</div>
My javascript is like this:
<script language="javascript" type="text/javascript">
var links = document.getElementById("abc");
var a = links.getElementsByTagName("a");
var thisLocationHref = window.location.href;
for(var i=0;i<a.length;i++)
{
var tempLink = a[i];
if(thisLocationHref === tempLink.href)
{
tempLink.style.backgroundColor="red";
}
else
{
tempLink.style.backgroundColor="blue";
}
}
I cannot remove ID in the a tag because it relates another page.
I know there is something wrong in the code, but cannot figure out where.
Any help is welcome!
Thanks!
Give the id="abc" to the ul and remove it from the a tag, and your code will work.
Demo: http://jsfiddle.net/BgbjD/
From MDN:
element.getElementsByTagName
Returns a list of elements with the given tag name. The subtree
underneath the specified element is searched, excluding the element
itself.
So you have to search the ul node.
<div class="header">
<ul id="abc">
<li> <a class="abc">testing</a>
</li>
</ul>
</div>
Your JavaScript doesn't need any changes.
Not style.background, style.backgroundColor:
var links = document.getElementById("abc");
var a = links.getElementsByTagName("a");
var thisLocationHref = window.location.href;
for (var i = 0; i < a.length; i++) {
var tempLink = a[i];
if (thisLocationHref === tempLink.href) {
tempLink.style.backgroundColor = "red";
} else {
tempLink.style.backgroundColor = "blue";
}
}
I have this bit of code that is working in FF, Chrome, Safari, and even IE9. Naturally, it doesn't work in IE8. It's a show/hide on two divs using Javascript. I'm not terribly proficient with JS so any help would be appreciated.
Javascript function :
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].getAttribute("class");
if (name == 'subscriberinfo') {
if (subscriberinfo[x].id == thechosenone) {
subscriberinfo[x].style.display = 'block';
} else {
subscriberinfo[x].style.display = 'none';
}
}
}
}
HTML code :
<ul class="options">
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo1');" >Account</a>
</div>
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo2');" >Subscriber Options</a>
</div>
</ul>
<!-- options -->
<div class="subscriberinfo" id="subscriberinfo1">Div #1</div>
<!-- subscriberinfo1 -->
<div class="subscriberinfo" id="subscriberinfo2" style="display: none;">Div #2</div>
Instead of getAttribute("class") have you tried className?
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].className; // <-- Here is the change
if (name == 'subscriberinfo') {
subscriberinfo[x].style.display =
(subscriberinfo[x].id == thechosenone) ? 'block' : 'none';
}
}
}
I am not an experienced javascript, css coder so I would appreciate as much help as possible. I've read some other posts for more understanding; they mentioned jquery but I'm not sure how to go about that either.
I have a code that was generated for me with a program. I need to change about 7 image buttons (not links) href rollovers into td onclick. Thanks so much in advance. Here is my current code:
Within the head -
<script type="text/javascript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
info_savantgenius_com_over = newImage("images/info#savantgenius.com-over.gif");
About_over = newImage("images/About-over.gif");
Artist_over = newImage("images/Artist-over.gif");
Portfolio_over = newImage("images/Portfolio-over.gif");
Pricing_over = newImage("images/Pricing-over.gif");
Order_over = newImage("images/Order-over.gif");
Contact_over = newImage("images/Contact-over.gif");
About_over033 = newImage("images/About-over-33.gif");
Artist_over035 = newImage("images/Artist-over-35.gif");
Portfolio_over037 = newImage("images/Portfolio-over-37.gif");
Pricing_over039 = newImage("images/Pricing-over-39.gif");
Order_over041 = newImage("images/Order-over-41.gif");
Contact_over043 = newImage("images/Contact-over-43.gif");
preloadFlag = true;}
}
Within the body -
<td colspan="2">
<a href="mailto:info#savantgenius.com"
onmouseover="changeImages('info_savantgenius_com', 'images/info#savantgenius.com-over.gif'); return true;"
onmouseout="changeImages('info_savantgenius_com', 'images/info#savantgenius.com.gif'); return true;"
onmousedown="changeImages('info_savantgenius_com', 'images/info#savantgenius.com-over.gif'); return true;"
onmouseup="changeImages('info_savantgenius_com', 'images/info#savantgenius.com-over.gif'); return true;">
<img name="info_savantgenius_com" src="images/info#savantgenius.com.gif" width="220" height="49" border="0" alt=""></a></td>
You can simply use document.getElementById() instead of document[changeImages.arguments[i]]
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i < arguments.length; i+=2) {
document.getElementById(arguments[i]).src = arguments[i+1];
}
}
}
You could use this :
http://api.jquery.com/hover/
So it would give you something like that :
$("#mytd1").hover(function(){$(this).css("background-image", [PUT THE NEW IMAGE PATH HERE])});
[PUT THE NEW IMAGE PATH HERE] something like that "url('image.jpg')"
And you need to include the jquery library