I am using some JS code to find all internal links on a page and add a subfolder to them. This code is used on translated pages so internal links to other translated pages are correct.
I want to have this code update all internal links, unless they have a class attribute.
If the class attribute exists, I want the link to be ignored by the JavaScript function.
<a class="noTranslateLink" href="domain.com"
<script>
function replace_url(elem, attr) {
var elems = document.getElementsByTagName(elem);
for (var i = 0; i < elems.length; i++)
elems[i][attr] = elems[i][attr].replace('<?php echo $_SERVER['HTTP_HOST'] ?>', '<?php echo $_SERVER['HTTP_HOST'] ?>/ru');
}
window.onload = function() {
replace_url('a', 'href');
}
</script>
I have not tested, But this must work:
function replace_url(elem, attr) {
var elems = document.getElementsByTagName(elem);
for (var i = 0; i < elems.length; i++) {
if (elems[i].getAttribute('class') != "noTranslateLink")
elems[i].setAttribute(attr,elems[i].setAttribute(attr).replace('',''));
}
}
To select all anchor elements with no class attribute:
var elems = document.querySelectorAll(elem + ':not([class])');
The opposite is:
var elems = document.querySelectorAll(elem + '[class]');
Related
I'm working in apps script right now and want to show an array in my html select dropdown. I've tried connecting it but the dropdown shows up blank when I do. Here's what I have:
EDIT
I've realised that the issue is that the GmailApp function does not work in the html file, and can't figure out how to run it.
<div class ="custom-select"><td class="standard"><select id="select"></select> </td></div>
<script>
// get drafts
var drafts = GmailApp.getDrafts();
var drafty = [];
for(var i = 0; i < drafts.length; i++)
{
drafty.push(drafts[i].getMessage().getSubject());
}
var select = document.getElementById("select"),
arr = drafty
for(var i = 0; i < arr.length; i++)
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value",arr[i]);
select.insertBefore(option,select.lastChild);
}
</script>
Are you getting the right value here?
txt = document.createTextNode(arr[i]);
Try with something like this
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.innerHTML.appendChild(txt);
option.value(arr[i]);
select.insertBefore(option,select.lastChild);
How about this?
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.setAttribute("value", arr[i]);
option.appendChild(txt);
document.getElementById("select").appendChild(option);
GmailApp is an Apps Script class that must be called serverside
There are several ways to do it, I recommend in your case:
If you have a code.gs and an html filed in your WebApp, you can call from within the <script> ... </script> part from the html part the code.gs part with the method google.script.run.
Sample:
code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile('index');
}
function getDrafts(){
var drafts = GmailApp.getDrafts();
var drafty = [];
for(var i = 0; i < drafts.length; i++)
{
drafty.push(drafts[i].getMessage().getSubject());
}
return drafty;
}
index.html
...
<script>
...
google.script.run.withSuccessHandler(onSuccess).getDrafts();
function onSuccess(drafty) {
var select = document.getElementById("select"),
arr = drafty;
for(var i = 0; i < arr.length; i++)
{
...
}
...
</script>
...
Alternatively, you could also use scriptlets to call Apps Script functions inside your HTML code.
just try to run this code in two ways:
1) run this code below;
2) enable for loop then run it
<html>
<head>
<script>
function toggle(){
//console.log('hi');
var samplediv = document.getElementById('samplediv');
samplediv.innerHTML = '';
var i = 1;
//for(var i = 0; i < 3; ++i){
samplediv.innerHTML +=
"<div id=\'jh"+ i + "\'>Hi This is "+i+"</div>" +
"<div id=\'edit" + i + "\' style=\'display:none\'>Edit "+i+"</div>" ;
document.getElementById('jh'+i).addEventListener("click", function(){document.getElementById('edit'+i).style.display="block";});
/*
(function(i){
//console.clear();
var key = i;
i += "";
document.getElementById('jh0').addEventListener("click", function(){document.getElementById('edit0').style.display="block";});
//document.getElementById('jh'+key).addEventListener("click", function(){document.getElementById('edit'+key).style.display="none";}, true);
//console.log(i, key);
}(i));
*/
//}
}
</script>
</head>
<body>
<div id="samplediv" >over here</div>
<script>toggle();</script>
</body>
</html>
I'm trying to add addEventLister on every divs using for. I'm sure this is kind of call by reference error. I know there are ways to add events such as on attribute method. Also adding a number of similar listeners is inefficient but I have to make them as you can see.
I've made a IIFE to make key be a value but failed. Do you have any idea to solve this problem?(No jQuery please)
JSFiddle
You will change method which You use to adding new elements.
I replaced innerHTML += to document.createElement for each new item.
var jh = document.createElement('div');
jh.id = 'jh'+i;
jh.innerText = 'Hi This is '+i;
var edit = document.createElement('div');
edit.id = 'edit'+i;
edit.style.display = 'none';
edit.innerText = 'Edit '+i;
samplediv.appendChild(jh).appendChild(edit);
Variable i on click event is visible with last value, so You must get index from other source (from id for example).
document.getElementById('jh'+i).addEventListener("click", function(){
var jhIndex = this.id.split('jh')[1];
document.getElementById('edit'+jhIndex).style.display= 'block';
});
So I have set up two javascript arrays to pull information from some php. One array gets the name of the category to be clicked on, while the other array stores the class and id tag for the category. The class and id tags are the same other than there css type, but the array needs to output them into document elements and then, when clicked, affect the relevant areas of the document. I also need to remove duplicates from the arrays, which doesn't seem to work under my current code:
<script type="text/javascript">
var BookSeries = [];
var BookClass = [];
var i=0;
</script>
then variables for the array are pulled from php and output this way:
<script type="text/javascript">
var uniqueSeries = BookSeries.filter(function(elem, pos) {
return BookSeries.indexOf(elem) == pos;
});
var uniqueClass = BookClass.filter(function(elem, pos) {
return BookClass.indexOf(elem) == pos;
});
while (uniqueSeries[i]) {
document.write( "<span id='"+uniqueClass[i]+"'>"+uniqueSeries[i]+"</span>" );
i++;
}
for(var i = 0; i < uniqueClass.length; i++) {
$np("#"+uniqueClass[i]).click(function(){
$np(".postitem").fadeOut(200);
$np("."+uniqueClass[i]).fadeIn(200);
});
}
</script>
You are using jquery so you can do the following for appending the elements to the DOM:
var htmlString = "";
for (var i = 0; i < uniqueSeries.length; i++) {
htmlString += "<span id='"+uniqueClass[i]+"'>"+uniqueSeries[i]+"</span>";
}
$("#myContainer").html(htmlString);
Not sure what is $np so I'll assume you meant jquery's $.
for(var i = 0; i < uniqueClass.length; i++) {
var uClass = uniqueClass[i];
$("#" + uClass).click(function(){
$(".postitem").fadeOut(200);
$("." + uClass).fadeIn(200);
});
}
Edit:
"#myContainer" refers to the id of the dom element you want to append the html to. if you just want to append it to document you can do:
$(document).appendTo(htmlString);
Also see I updated the code above to reflect your comments about the uniqueClass array.
I'm trying to create a dropdown using javascript/jquery. Here is the code I'm using:
var trucks = response.trucks; //response from ajax request, value is 4 truck objects
var rt = $("#route_"+response.route_id);
rt.append("<select class=\"email_route_dd\" name=\"timeslot\">")
for(var ii = 0; ii <trucks.length; ii++){
var t = trucks[ii]; //truck object
if(ii+1 == trucks.length){
console.log("Last");
rt.append("<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>");
}else{
rt.append("<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>");
}
};
rt.append("</select>");
This code is outputing the following code:
The above image is what I get when I inspect the element with Chrome.
The output is not displaying the dropdown content after the request. The dropbox is there, but none of the content is in it.
You append a <select> to the element. Then instead of appending <option> tags to the <select> you also append those to the same element
Try:
rt.find('select')append("<option name...
Try this way instead:
var rt = $("#route_"+response.route_id),
$select = $("<select>", {'class' : 'email_route_dd', 'name':'timeslot'}); //Create select as a temp element and append options to this.
for(var ii = 0; ii <trucks.length; ii++){
var t = trucks[ii]; //truck object
option = "<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>";
$select.append(option);
};
rt.append($select);
Or this way, using data-* attributes and array.map and more readeable.
var rt = $('body'),
$select = $("<select>", {
'class': 'email_route_dd',
'name': 'timeslot'
}); //Create select as a temp element and append options to this.
$select.append($.map(trucks, function (t) {
return $('<option>', {
'class': 'driver',
'value': t.truck_id,
'data-email': t.driver_email,
'text': t.driver
});
}));
rt.append($select);
With this you append to the DOM in the end only rather than on the loop.
Demo
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