|
JavaScript - Search Engine 1000 Image Resize Onclick. Urgent!
hello i'm building a search engine and one of the options i'm implementing is this: the user is able to control the scale of the thumbnail, small, medium and large the problem is that when i have 1000 pictures inside a div when i hit resize i get like a 5 sec delay for them to resize here is the javascript code:
Code: Code: var factor;
function fillImg(imgPath, imgElement){
imageObj = new Image(32,32);
imageObj.src = imgPath;
if(imgElement.src != imgPath ){
imgElement.src = imgPath;
}
}
function errHandler(err){
alert("Error occured!");
}
function resizeImgList(scale){
if(scale == "s"){
factor = 50;
}else if(scale == "m"){
factor = 100;
}else{
factor = 150;
}
var lists = document.getElementById("rs_ls").getElementsByTagName("li");
for(var li_index = 0; li_index < lists.length; li_index++){
var canvas = lists[li_index].getElementsByTagName("span");
for(var c_index = 0; c_index < canvas.length; c_index++){
var link = canvas[c_index].getElementsByTagName("a");
for(var a_index = 0; a_index < link.length; a_index++){
var image = link[a_index].getElementsByTagName("img");
for(var i_index = 0; i_index < image.length; i_index++){
var w = $(image[i_index]).attr("width");
var h = $(image[i_index]).attr("height");
var results = resizeItem(w,h,factor,factor);
var w = results[0];
var h = results[1];
var m = results[2];
$(image[i_index]).attr("width",w);
$(image[i_index]).attr("height",h);
$(image[i_index]).attr("style","width:"+w+"px;height:"+h+"px;");
}
wa = w+12;
ha = h+12;
$(link[a_index]).attr("style","width:"+wa+"px;height:"+ha+"px;");
}
wc = w+12;
hc = h+12;
$(canvas[c_index]).attr("style","width:"+wc+"px;height:"+hc+"px;margin-left:"+m+"px;margin-right:"+m+"px;");
}
wli = w + 12 + m * 2;
hli = h + 12;
$(lists[li_index]).attr("style","width:"+wli+"px;height:"+hli+"px;");
}
}
function resizeItem(eWidth, eHeight, tWidth, tHeight) {
percentage = (tHeight / eHeight);
newHeight = parseInt(eHeight * percentage);
newWidth = parseInt(eWidth * percentage);
if (newWidth > tWidth) {
percentage = (tWidth / newWidth);
newHeight = parseInt(newHeight * percentage);
newWidth = parseInt(newWidth * percentage);
}
margin = (tWidth - newWidth + 12) / 2;
results = [newWidth, newHeight, margin];
return results;
}
each result set of 50 images has this structu HTML Code: Code: <span> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> . . . <li>...</li> <!-- 50 <li> --> </ul> </span> so 50 results are contained inside a span each <li> has this structure inside: HTML Code: Code: <li> <span> <a href...> <img> </a> </span> </li> I altered the resizeImgList function with 1 for loop but even then it didnt seem to improve. i was thinking that i could resize only the results the user is currently seeing inside the div, the current <span> of results but i'm anaware of how to accomplish this please if anyone has any idea I would be gratefull. Thank you. Peter. PS. results (spans) are fetched via AJAX on scrolldown inside the a div (which is the result container). Similar TutorialsI am new to Javascript and I downloaded JSE internal search engine v 1.0a from CodingForums. It works fine in all browsers other than ie6 and ie7. Have confirmed that other javascripts are working in these browsers so it is not my browser settings. Can anyone help?
Hi everyone, I have a very simple question. I found some answers on the web but nothing quite concluding. I am hearing Search Engine can only be build with server-side programming or through google (which means your site must be connected to the internet. Is it possible to build a simple yet effective search engine for an in-house site (not connected to the net, only network) with JavaScript? My understanding is that, using arrays, once a user enter a word in a fied, the program would need to index all the pages containing the word. Then the program would need to target each seperate paragraph containing the word. Also what if the results must lead you to a document which must open in an iframe? Possible? How? Cheers I have an iframe on my page which begins at 300x250. Onclick from an outside control (button), I have it resizing to 720x405. What I need it to do on that same click is change position on the page as well as resize (top, left.) Any way I can do this? Here's my resize script and the accoutrements with it... <!---Begin head section here---> <head> <!---Begin Style Section Here---> <style> .fauxButton { background: buttonface; font: menu; border: 1px outset white; cursor: default; padding-left: 6; padding-right: 6; padding-top: 2; padding-bottom: 1; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; height: 20px; } </style> <!---End Style Section Here---> <script language="JavaScript"> function resizeIframe(iframeId, iframeHeight, iframeWidth) { if (iframeWidth>0) { document.getElementById(iframeId).style.width=iframeWidth; } if (iframeHeight>0) { document.getElementById(iframeId).style.height=iframeHeight; } } </script> </head> <!---End head section here---> <body> <iframe name=video_iframe id=video_iframe frameborder="0" src="player.asp" scrolling=no allowtransparency="true" style="position:absolute; width:300px; height:250px; top:361px; left:720px;align:top; align:left; border:0px solid #FF0000; background-color:#FFFFFF; padding:0px 0 0; z-index:3;"> </iframe> <a id="widenButton" class=fauxButton onclick="resizeIframe('video_iframe', 420, 720);document.getElementById('widenButton').style.display='none';document.getElementById('narrowButt on').style.display='inline';" style="display:inline;">Wide -></a> <a id="narrowButton" class=fauxButton onclick="resizeIframe('video_iframe', 250, 300);document.getElementById('narrowButton').style.display='none';document.getElementById('widenButt on').style.display='inline';" style="display:none;"><- Narrow</a> </body> Thanks in advance, Miz Parker I have been playing with this for a week and think I may need to move on but thought I would try you guys. I need a java script search engine for my site that I can manually enter keywords and direct the results to certain url locations. I thought I found one called JSE Search Engine and it works great in my adobe golive preview but when i upload the files the results dont show up. Very frustrating. Thought maybe someone might be familiar with it or at this point have a script to do what I need that is less of a headache. Thanks in advance for any help.
How would you create a text field that allows users to select different search engines, and then search their keyword. Essentially what I'm looking for is a something similar to the default multiple search field that you see in Firefox and Safari. At this point in time I have the multiple search feature implemented. But all I really have is a <select> next to a <input>. What I want is something that combines the two. Basically I want the look and feel of Firefox/Safari default multiple search field. Any help would be appreciated. Thanks, Hey guys, While I know you cannot use javascript for SEO, I need something similar. What I need is something like a search and replace program or something that does this: it takes aspects of the filename and incorparates it into the meta tags. For example, if a file was named "1x9.html" I would want it to edit the meta tag Season 1 Episode 9 I was just wondering if you guys know if such a thing exists. Like I would write a script or something in the program, saying for it to search and replace meta tags in file names, and it would 1. Analyze the filename (for this example it will be "1x9.html" 2. Input " Season 1 Episode 9 " into the meta tags (analyzing the first character in "1x9" as [Season] [First Character] , analyzing the "x" in 1x9 as [Episode] and analyzing the last character in "1x9" as [Last Character] I need to do this for like 80 thousand files, and I cannot do it 1 by 1. All of the elements that need to be in the meta tags already exist in the webpage contents or webpage filename. I was wondering if you guys know the best way for me to go about this? Can anyone get me a simple script for a search engine for my website? i cant find a decent 1 anywhere. thanks
Hi guys, i've been the last few days around a script that i can't make it work, i'm a beginner in javascript so if you guys could help me i'd appreciated. This script is a search engine, when you look for something say the word "titanic" , he shows you a list of results with numbers, being the first link with the higher number (kinda like a score), and then after u click the link you want he goes to the respective page. Now i want him to skip the results page, and directly open the first link that he founds on the page. The Script __________________________ <!-- Begin var item = new Array(); // Just enter as many additional pages that you want to search, then fill in he // additional listings for each page. // "Page Name","path","Page Title","Many,Key,Words","Descriptive Comments" c=0; item[c]=new Array("centerif.htm","","titanic","index,main,start,home,front","Demonstration search engine data about an imagined but probable internet site."); c++; item[c]=new Array("indexg.htm","","About Me","about,author,contact,email,who","Contact details and general information about the creator of the site and what the site is about."); c++; item[c]=new Array("links.htm","","Links page","links,more,where,similar,friends","Links to my favourite sites which I find interesting. Other friends sites which have similar interests to my own."); c++; item[c]=new Array("main.htm","main/","Main Page","content,main,focus","The main part of my site which contains what you have come to see. Lots of stuff like that and more great things. All in a sub directory."); c++; item[c]=new Array("logo.jpg","main/images/","Link Logo","link,image,logo,graphic","The logo.jpg is just a small image which you can place on your site as a link to me. It's in a second level subdirectory."); page="<html><head><title>Search Results</title></head><body bgcolor='white'><center><table border=0 cellspacing=10 width=80%>"; function search(frm) { win = window.open("","","scrollbars"); win.document.write(page); txt = frm.srchval.value.split(" "); fnd = new Array(); total=0; for (i = 0; i < item.length; i++) { fnd[i] = 0; order = new Array(0, 4, 2, 3); for (j = 0; j < order.length; j++) for (k = 0; k < txt.length; k++) if (item[i][order[j]].toLowerCase().indexOf(txt[k]) > -1 && txt[k] != "") fnd[i] += (j+1); } for (i = 0; i < fnd.length; i++) { n = 0; w = -1; for (j = 0;j < fnd.length; j++) if (fnd[j] > n) { n = fnd[j]; w = j; }; if (w > -1) total += show(w, win, n); fnd[w] = 0; } win.document.write("</table><br>Total found: "+total+"<br></body></html>"); win.document.close(); } function show(which,wind,num) { link = item[which][1] + item[which][0]; line = "<tr><td><a href='"+link+"'>"+item[which][2]+"</a> Sco "+num+"<br>"; line += item[which][4] + "<br>"+link+"</td></tr>"; wind.document.write(line); return 1; } // End --> </script> __________________________________________ Once again thanks guys, it's appreciated !! Well, this is only beginning and kinda beta, but this is just awesome! This is 100% secured, but yet unfinished. This is huuuuuge! I've created temporal apache server on my computer to show how it works: http://80.222.127.106/downloads.php I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website? We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window. If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript. http://www.louisvuitton.com/ Thanks all Chris Can someone tell me how to veiw this eval's out put? PHP Code: function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } PHP Code: <?php // to change the image size within the web page function imageResize($width, $height, $target) { //takes the larger size of the width and height and applies the formula accordingly... //this is so this script will work dynamically with any size image if ($width > $height) { $percentage = ($target / $width); } else { $percentage = ($target / $height); } //gets the new value and applies the percentage, then rounds the value $width = round($width * $percentage); $height = round($height * $percentage); //returns the new sizes in html image tag format... //this is so you can plug this function inside an image tag and just get the return "width='$width' height='$height'"; } ?> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Ronnie T. Moore, Editor --> <!-- Web Site: The JavaScript Source --> <!-- Begin var photo_1 = new Image(); var photo_2 = new Image(); var photo_3 = new Image(); photo_1.src = "uploads/harkly_1.jpg"; photo_2.src = "uploads/harkly_2.jpg"; photo_3.src = "uploads/harkly_3.jpg"; function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } // End --> </script> </HEAD> <?php //get the image size of the picture and load it into an array $photo_1="uploads/harkly_1.jpg"; $photo_2="uploads/harkly_2.jpg"; $photo_3="uploads/harkly_3.jpg"; $myImg1 = getimagesize($photo_1); $myImg2 = getimagesize($photo_2); $myImg3 = getimagesize($photo_3); echo " <BODY> <center> <table border=1> <tr><td> <p> <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p> <td width=440 height=300> <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> </tr> </table> </center> "; ?> Hi, I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome). Thanks, akrylic Hello Everyone! I hope someone can help me with fixing this javascript code About the Code So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum. What does the code do? The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images. There are different resize image options: 1. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do. 2. [rimg=Width,Height]IMG_SRC[/rimg ] // with this option, you can change the width and height of the image. 3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image 4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted 5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead. 6. [rimg=x]IMG_SRC[/rimg] //x will be both the height and width (so it'll be a square...) Here is a test thread I made to test the "rimg code", so you can see how the code works: http://s1.zetaboards.com/Piano2/topic/2874654/1/ What are the problems with the Code? - the Images are not resized correctly - sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong. - or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again - In the Search View (when using the search) the images are too big and almost take the whole screen... - the first option "[rimg][rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled And finally this is the Javascript Code: PHP Code: <script type="text/javascript"> // Rimg by RedBldSandman of ZBCode.com $(function() { if (location.href.match("topic")||location.href.match("single")) { $(".c_post").each(function() { parse_rimg(this); }); } else if (location.href.match("search")) { $(".search_results").each(function() { parse_rimg($(this).children("div:eq(0)")); }); } else if (location.href.match("post")) { var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />"; $("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>"); $("button[name=rimg]").mouseover(function() { $("input[name=helpbox]").val("Insert Image (with resize options)"); }).click(function(e) { if (e.preventDefault) e.preventDefault(); e.returnValue = false; var u_p = prompt("Enter the Image Location","http://"); if (u_p==null) return; var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image"); if (u_w==null) return; u_w = u_w.replace(/s/gi,"").toLowerCase(); if (u_w=="") { ZetaInsert("[rimg]"+u_p+"[/rimg]"); return; } else if (u_w.match("%")) { ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]"); return; } else if (u_w=="h") { var u_h = prompt("Enter Resize Height"); if (u_h==null) return; ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (u_w=="w") { var u_h = prompt("Enter Resize Width"); if (u_h==null) return; ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (parseInt(u_w)) { var u_h = prompt("Enter Chosen Height"); if (u_h==null) return; ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]"); } }); $("#topic_review tbody tr").each(function() { parse_rimg($(this).children("td:eq(1)")); }); } }); function parse_rimg(z) { $(z).html($(z).html().replace(/[rimg(?:=s*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) { if (y.match("%")) { y = y.replace(/[^d.]/gi,""); return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />"; } else if (y.match(/D/i)) { y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0]; y = (y!="h"&&y!="w")?null:y; if (y) { return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />"; } else { return x; } } else if (!a) { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />"; } else { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />"; } })); $(".Rimg_single").not("div.spoiler .Rimg_single").each(function() { Rimg_single(this); }); $(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() { Rimg_percent(this); }); $(z).find("div.spoiler_toggle").click(function() { $(this).next().toggle(); $(this).next().find(".Rimg_single").each(function() { Rimg_single(this); }); $(this).next().find(".Rimg_percent").each(function() { Rimg_percent(this); }); }); } function Rimg_single(x) { var oldH = $(x).height(); var oldW = $(x).width(); var newD = $(x).attr("alt").replace(/[^d.]/gi,""); if ($(x).hasClass("Rimg_h")) { $(x).height(newD).width((newD/oldH)*oldW); } else if ($(x).hasClass("Rimg_w")) { $(x).width(newD).height((newD/oldW)*oldH); } $(x).attr("alt","Posted Image").removeAttr("class"); } function Rimg_percent(x) { var NewD = $(x).attr("alt").replace(/[^d.]/gi,"")/100; $(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class"); } function Preview() { var prevQuote; if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) { if (!$("#c_post-preview").length) { $("#c_post").prepend("<div id='c_post-preview'></div>"); } if ($("#txt_quote").length && $("#txt_quote").val()) { prevQuote = "[quote]" + $("#txt_quote").val() + "[/quote]"; } else { prevQuote = ""; } $.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) { $("#c_post-preview").html(s); if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview")); parse_rimg($("#c_post-preview")); }); } return false; } </script> Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE? Thanks for your answers and help! hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can. This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob hi, i'm trying to keep a copy of a variable at 4 digits.. this is what i came up with.. it's working but i'm only a noob, so i would very like to know is there any other simpler and/or elegant way to do this.. also i would appreciate it if you could point out any bad syntax or something.. Code:
page = 100
function makeit4digits(){
page4digit = page
if (page<10)
{
page4digit = "000"+ page
}
else if (page<100)
{
page4digit = "00"+ page
}
else if (page<1000)
{
page4digit = "0"+ page
}
}
Please help I am a newbie and need some assistant. I'm trying to get a full date. In this script I want the user to be able to enter a date and get a 1000 day result a full (date) mm/dd/yyy. So far this give me the year only. I've tried so many ways. <script language="javascript"> var reply = prompt("Please enter the date you and your love begin dating (mm/dd/yyyy)", " "); var newstring = new String(reply); var arrTemp = new Array(); arrTemp = newstring.split("/"); var year = parseInt(arrTemp[arrTemp.length-1]); year += 3; alert("You begin dating your love in " + parseInt(arrTemp[arrTemp.length-1]) + "\nYou should be married before or in the year of " + year); </script> Hi, well I have like 1000 images on the same page, unfortunately I can't use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 http requests, so it takes lots of time for the images to load plus it's not good experience for the visitors. I have seen one of the scripts named as Lazy Load, but I was thinking if there is more SMARTER WAY of loading images (good regarding SEO, loads images faster and is good for user experience). So, I was wondering if there is a way out to loading images in a better way? |
|||||||