I have a forum site installed where I added a auto-resize mod which resizes all the images when the page is loaded
<script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
var check = 0;
var str = 'http://sariylakirmizi.net/forum/styles/milky_way_red/imageset/sitelogo_small.png';
im = document.getElementsByTagName('img')[i];
var n =str.match(/sitelogo/gi);
if(n == null)
check = 1;
if (im.width > 600 && im.src !=str )
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title=im.src;
im.alt=check;
}
}
}
}
</script>
Now what I am trying to is exclude my header logo, so that it would not be resized for that I introduced the string comparison and hardcoded my logo URL, I do not understand why that check fails and my logo still got resized; I also tried several other things like introducing a check variable whether the match function is working but obviously it does noet work, could you please help me with that?
window.onload = resizeimg;
function resizeimg() {
if (document.getElementsByTagName) {
var imgs = document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var im = imgs[i];
if (im.width > 600 && !im.src.match(/sitelogo/)) {
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
im.style.cursor = (document.all) ? 'hand' : 'pointer';
im.title = im.src;
}
}
}
}
Related
I have some javascript that I want to convert to jQuery...
How do we change javascript to jquery code?
Do we just change the document.getElementById > $?
Do we change document.querySelectorAll > $ too?
Does the function portion also need to be tweak?
Kindly see my code apprehend below:
// Home Page Gallery
let i = 0; // current slide
let j = 5; // total slides
const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");
function next() {
document.getElementById("content" + (i + 1)).classList.remove("active");
i = (j + i + 1) % j;
document.getElementById("content" + (i + 1)).classList.add("active");
indicator(i + 1);
}
function prev() {
document.getElementById("content" + (i + 1)).classList.remove("active");
i = (j + i - 1) % j;
document.getElementById("content" + (i + 1)).classList.add("active");
indicator(i + 1);
}
function indicator(num) {
dots.forEach(function (dot) {
dot.style.backgroundColor = "transparent";
});
document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#107e31";
}
function dot(index) {
images.forEach(function (image) {
image.classList.remove("active");
});
document.getElementById("content" + index).classList.add("active");
i = index - 1;
indicator(index);
}
// FAQ JS
let toggles = document.getElementsByClassName('toggle');
let contentDiv = document.getElementsByClassName('content');
let icons = document.getElementsByClassName('icon');
for(let i=0; i<toggles.length; i++){
toggles[i].addEventListener('click', ()=>{
if( parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight){
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
icons[i].classList.remove('fa-plus');
icons[i].classList.add('fa-minus');
}
else{
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
icons[i].classList.remove('fa-minus');
icons[i].classList.add('fa-plus');
}
for(let j=0; j<contentDiv.length; j++){
if(j!==i){
contentDiv[j].style.height = "0px";
toggles[j].style.color = "#111130";
icons[j].classList.remove('fa-minus');
icons[j].classList.add('fa-plus');
}
}
});
}
When using $() with selectors, it's very similar to document.querySelectorAll().
So, if you wanted to query for a specific ID, you'd need to use a pound symbol # in front of the ID:
$('#some-id')
Really though, there's no reason I can think of these days to use jQuery. Additionally, you could probably remove the need for any of this JavaScript by simply using anchor fragments/hash and the :target selector. Your URLs could be like somepage.html#slide-1.
I wrote a code in javascript to export the report to excel using html. it works for 1 report but when I run multiple reports at the same place using for loop and try to export it to excel it gives me an SBOX_FATAL_MEMORY_EXCEEDED error.
Please help me with it.
function updateReportHidden(idCount) {
if (idCount > 0) {
var template = "";
for (var a = 0; a <= idCount; a++) {
template[a] = "<html><head><title>Document</title><script>window.chartAnimation = false;<\/script></head><body>" + $("#report" + a).html() + "</body></html>";
}
for (var b = 0; b <= idCount; b++) {
var temp = $(".container div .hide");
temp.remove();
$("table").attr("border", "1");
$(".container div").append(temp);
$('#ReportHidden' + b).val("");
$('#ReportHidden' + b).val(template[b]);
}
} else {
$('#ReportHidden0').val("");
var temp = $(".container div .hide");
temp.remove();
$("table").attr("border", "1");
var template = "<html><head><title>Document</title><script>window.chartAnimation = false;<\/script></head><body>" + $("#report0").html() + "</body></html>";
$('#ReportHidden0').val(template);
$(".container div").append(temp);
}
};
its been a while since I've dug my heals into JS and could use some help. Looking to modify this existing script to include a link for each rotating image... want to link the object called "text" to the same URL for each image. any ideas?
//cur_index = 1;
cur_index = Math.floor(Math.random()*6);
//var randomnumber=Math.floor(Math.random()*11)
num_image = 5;
//alert(cur_index);
interval = 300000; // 5min between rotations
function rotate(){
// if(cur_index > num_image)
// cur_index = 1;
if(cur_index == 0)
cur_index = 1;
var imag,text;
if(document.getElementById){
imag = document.getElementById("faceImage");
text = document.getElementById("faceText");
}else if(document.all) {
imag = document.all["faceImage"];
text = document.all["faceText"];
}else if(document.layers){
imag = document.layers["faceImage"];
text = document.layers["faceText"];
}
var imageUrl = "/path/face" + cur_index + ".jpg";
var textUrl = "/path/face" + cur_index + "_text.gif";
imag.src = imageUrl;
text.src = textUrl;
//cur_index++;
cur_index = Math.floor(Math.random()*6);
setTimeout('rotate()',interval);
}
I am adding a row to a table, and attached an ondblclick event to the cells. The function addrow is working fine, and the dblclick is taking me to seltogg, with the correct parameters. However, the var selbutton = document.getElementById in seltogg is returning a null. When I call seltogg with a dblclick on the original table in the document, it runs fine. All the parameters "selna" have alphabetic values, with no spaces, special characters, etc. Can someone tell me why seltogg is unable to correctly perform the document.getElementById when I pass the id from addrow; also how to fix the problem.
function addrow(jtop, sel4list, ron4list) {
var tablex = document.getElementById('thetable');
var initcount = document.getElementById('numrows').value;
var sel4arr = sel4list.split(",");
var idcount = parseInt(initcount) + 1;
var rowx = tablex.insertRow(1);
var jtop1 = jtop - 1;
for (j = 0; j <= jtop1; j++) {
var cellx = rowx.insertCell(j);
cellx.style.border = "1px solid blue";
var inputx = document.createElement("input");
inputx.type = "text";
inputx.ondblclick = (function() {
var curj = j;
var selna = sel4arr[curj + 2];
var cellj = parseInt(curj) + 3;
inputx.id = "cell_" + idcount + "_" + cellj;
var b = "cell_" + idcount + "_" + cellj;
return function() {
seltogg(selna, b);
}
})();
cellx.appendChild(inputx);
} //end j loop
var rowCount = tablex.rows.length;
document.getElementById('numrows').value = rowCount - 1; //dont count header
} //end function addrow
function seltogg(selna, cellid) {
if (selna == "none") {
return;
}
document.getElementById('x').value = cellid; //setting up for the next function
var selbutton = document.getElementById(selna); //*****this is returning null
if (selbutton.style.display != 'none') { //if it's on
selbutton.style.display = 'none';
} //turn it off
else { //if it's off
selbutton.style.display = '';
} //turn it on
} //end of function seltogg
You try, writing this sentence:
document.getElementById("numrows").value on document.getElementById('numrows').value
This is my part the my code:
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
Look you have to use this " y not '.
TRY!!!!
I have a script running on my page to change the images. I want to repeat it 6 times to use in other places on the same page, but it wont work when I repeat it.
var delay = 2000 //set delay in miliseconds
var curindex = 0
var randomimages = new Array()
randomimages[0] = "hhh200.jpg"
randomimages[1] = "ray200.jpg"
var preload = new Array()
for (n = 0; n < randomimages.length; n++) {
preload[n] = new Image()
preload[n].src = randomimages[n]
}
document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random() * (randomimages.length))] + '">')
function rotateimage() {
if (curindex == (tempindex = Math.floor(Math.random() * (randomimages.length)))) {
curindex = curindex == 0 ? 1 : curindex - 1
} else curindex = tempindex
document.images.defaultimage.src = randomimages[curindex]
}
setInterval("rotateimage()", delay)
Can anyone see why it's not working?
If you are just copying and pasting it somewhere else in the page as is, then you are overriding your variable values, and you are giving both images the same name, so those are 2 problems right there. You should put it all inside on function and call that function in the 2 places you want.
Try this.
function randomImage(randomImages, imageName) {
var delay = 2000 //set delay in miliseconds
var curindex = 0
var preload = new Array()
for (n = 0; n < randomImages.length; n++) {
preload[n] = new Image()
preload[n].src = randomImages[n]
}
document.write('<img name="' + imageName + '" src="' + randomImages[Math.floor(Math.random() * (randomImages.length))] + '">');
function rotateimage() {
var tempindex = Math.floor(Math.random() * (randomImages.length));
if (curindex == tempindex) {
curindex = curindex == 0 ? 1 : curindex - 1
} else curindex = tempindex
document.images[imageName].src = randomImages[curindex];
}
setInterval("rotateimage()", delay);
}
// and then to use it, create your image arrays outside of the function, and call the function.
var images1 = new Array();
images1[0] = "hhh200.jpg";
images1[1] = "ray200.jpg";
var images2 = new Array();
images2[0] = "hhh200.jpg";
images2[1] = "ray200.jpg";
randomImage(images1, 'imageOneName');
randomImage(images2, 'imageTwoName');
I have not tested this code, but this is the general idea you should follow.