473,320 Members | 1,707 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Pages Not rendering In Mozilla Help?

77
The following 3 pages which are popups on my site are not rendering in mozilla firefox. Source is visible instead. Any idea why?

http://herproom.5.forumer.com/index....e=post&id=9948

http://herproom.5.forumer.com/index....e=post&id=7101

http://herproom.5.forumer.com/index....e=post&id=9817
Nov 14 '07 #1
27 2543
drhowarddrfine
7,435 Expert 4TB
For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.
Nov 15 '07 #2
Inny
77
For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.
did I write the page incorrectly? I dont quite understand, it displays perfectly in IE
Nov 15 '07 #3
drhowarddrfine
7,435 Expert 4TB
It doesn't matter how you wrote the page or that it works in IE. Your server is serving it as text/plain, at least to Firefox browsers it is. Some servers can be set up to serve different browsers differently. Most likely there is a setting somewhere causing this, unless your pages are dynamically created and you are doing this yourself.
Nov 16 '07 #4
Inny
77
No these particular pages were not created dynamically. It gets stranger, A freind looked at them on his desktop pc with moz FF and they rendered as intended, but as text/plain on his laptop.
Nov 17 '07 #5
drhowarddrfine
7,435 Expert 4TB
Well, that doesn't make much sense. I don't recall if it's possible or easy to change what Firefox identifies itself as to the server. Opera, for example, can id itself as Opera or IE or other browsers. In any case, only the server determines how the page is served.
Nov 18 '07 #6
Inny
77
I am using the following script to auto-resize and make clickable thumbnails
of large Images. Im using a custom window to display the enlarged images by using A place_holder image which is switched to the images src.

This works perfectly In IE but I have just discovered, It refuses To work in Firefox. I have absolutely no idea why, but im thinking firefox dosent like something about the code? No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.

I used this page as the display page
http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!


can somebody who knows how to code well get this working in firefox aswell?

Expand|Select|Wrap|Line Numbers
  1. <body  onload=function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value; >
  2.  
  3. <script>
  4. function ResizeThem() {
  5. maxheight=250;
  6. maxwidth= 250;
  7. imgs=document.getElementsByTagName("img");
  8. for (p=0; p<imgs.length; p++) {
  9. if (imgs[p].getAttribute("alt")=="user posted image") {
  10. w=parseInt(imgs[p].width);
  11. h=parseInt(imgs[p].height);
  12. if (parseInt(imgs[p].width)>maxwidth) {
  13. imgs[p].style.cursor="pointer";
  14. imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
  15. imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  16. imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
  17. imgs[p].width=maxwidth;
  18. }
  19. if (parseInt(imgs[p].height)>maxheight) {
  20. imgs[p].style.cursor="pointer";
  21. imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  22. imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
  23. imgs[p].height=maxheight;
  24. }
  25. }
  26. }
  27. }
  28. ResizeThem();
  29. </script>
  30.  
  31.  
  32. <input type="hidden" id="imgurl">
Display page src

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <meta name="description" content="Image Viewer">
  7. <meta name="keywords"
  8. content="Reptiles">
  9. <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
  10.  
  11. <title> Image Viewer</title>
  12. <STYLE>
  13.  
  14.  
  15. body {background-image:url(http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg);
  16.  
  17. scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;}
  18.  
  19. </STYLE>
  20. </head>
  21.  
  22. <body oncontextmenu="return false">
  23. <script language="JavaScript1.2">window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;}
  24. </script>
  25. <center><img src="http://i14.photobucket.com/albums/a345/Instar/please_do_not_hotlink.gif" id="place_holder"></center>
  26.  
  27.  
  28.  
  29. </body>
  30. </html>
  31.  
  32.  
Apr 16 '08 #7
pronerd
392 Expert 256MB
It refuses To work in Firefox.
Meaning what exactly? What does or does not happen? Is there an error? What debugging have you done? Have you stepped though it with Firebug?



No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.
Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.



I used this page as the display page
http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!
I see the same picture of a snake in IE6.0 and FF 2.0


It looks like one of the problems is this line. I am not sure what is being tried here, but this is not legal according to any of the DOM references I could find.
Expand|Select|Wrap|Line Numbers
  1. window.opener.document.getElementById("imgurl").value;
  2.  
I am assuming that all you should need is this.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("imgurl").value;
  2.  
Apr 16 '08 #8
Inny
77
Exactly as I said, In firefox Its rendering as plain text, I think its a server Issue,
since external pages dont do it, however I cannot swap the image with the place holder accross domains.

Id like to try a new Approach, If you could assist, Im sure This is much more Doable. Instead Of opening the enlarged image in a new Page, I want to alter the code to expand the Image in the same page instead.

see example here http://www.webreference.com/programming/javascript/gr/column8/ImageView.htm

The js Of the example
Expand|Select|Wrap|Line Numbers
  1. function ImageExpander(oThumb, sImgSrc)
  2. {
  3.     // store thumbnail image and overwrite its onclick handler.
  4.     this.oThumb = oThumb;
  5.     this.oThumb.expander = this;
  6.     this.oThumb.onclick = function() { this.expander.expand(); }
  7.  
  8.     // record original size
  9.     this.smallWidth = oThumb.offsetWidth;
  10.     this.smallHeight = oThumb.offsetHeight;    
  11.  
  12.     this.bExpand = true;
  13.     this.bTicks = false;
  14.  
  15.     // self organized list
  16.     if ( !window.aImageExpanders )
  17.     {
  18.         window.aImageExpanders = new Array();
  19.     }
  20.     window.aImageExpanders.push(this);
  21.  
  22.     // create the full sized image.
  23.     this.oImg = new Image();
  24.     this.oImg.expander = this;
  25.     this.oImg.onload = function(){this.expander.onload();}
  26.     this.oImg.src = sImgSrc;
  27. }
  28.  
  29. ImageExpander.prototype.onload = function()
  30. {
  31.     this.oDiv = document.createElement("div");
  32.     document.body.appendChild(this.oDiv);
  33.     this.oDiv.appendChild(this.oImg);
  34.     this.oDiv.style.position = "absolute";
  35.     this.oDiv.expander = this;
  36.     this.oDiv.onclick = function() {this.expander.toggle();};
  37.     this.oImg.title = "Click to reduce.";
  38.     this.bigWidth = this.oImg.width;
  39.     this.bigHeight = this.oImg.height;
  40.  
  41.     if ( this.bExpand )
  42.     {
  43.         this.expand();
  44.     }
  45.     else
  46.     {
  47.         this.oDiv.style.visibility = "hidden";
  48.         this.oImg.style.visibility = "hidden";
  49.     }
  50. }
  51. ImageExpander.prototype.toggle = function()
  52. {
  53.     this.bExpand = !this.bExpand;
  54.     if ( this.bExpand )
  55.     {
  56.         for ( var i in window.aImageExpanders )
  57.             if ( window.aImageExpanders[i] !== this )
  58.                 window.aImageExpanders[i].reduce();
  59.     }
  60. }
  61. ImageExpander.prototype.expand = function()
  62. {
  63.     // set direction of expansion.
  64.     this.bExpand = true;
  65.  
  66.     // set all other images to reduce
  67.     for ( var i in window.aImageExpanders )
  68.         if ( window.aImageExpanders[i] !== this )
  69.             window.aImageExpanders[i].reduce();
  70.  
  71.     // if not loaded, don't continue just yet
  72.     if ( !this.oDiv ) return;
  73.  
  74.     // hide the thumbnail
  75.     this.oThumb.style.visibility = "hidden";
  76.  
  77.     // calculate initial dimensions
  78.     this.x = this.oThumb.offsetLeft;
  79.     this.y = this.oThumb.offsetTop;
  80.     this.w = this.oThumb.clientWidth;
  81.     this.h = this.oThumb.clientHeight;
  82.  
  83.     this.oDiv.style.left = this.x + "px";
  84.     this.oDiv.style.top = this.y + "px";
  85.     this.oImg.style.width = this.w + "px";
  86.     this.oImg.style.height = this.h + "px";
  87.     this.oDiv.style.visibility = "visible";
  88.     this.oImg.style.visibility = "visible";
  89.  
  90.     // start the animation engine.
  91.     if ( !this.bTicks )
  92.     {
  93.         this.bTicks = true;
  94.         var pThis = this;
  95.         window.setTimeout(function(){pThis.tick();},25);    
  96.     }
  97. }
  98. ImageExpander.prototype.reduce = function()
  99. {
  100.     // set direction of expansion.
  101.     this.bExpand = false;
  102. }
  103. ImageExpander.prototype.tick = function()
  104. {
  105.     // calculate screen dimensions
  106.     var cw = document.body.clientWidth;
  107.     var ch = document.body.clientHeight;
  108.     var cx = document.body.scrollLeft + cw / 2;
  109.     var cy = document.body.scrollTop + ch / 2;
  110.  
  111.     // calculate target
  112.     var tw,th,tx,ty;
  113.     if ( this.bExpand )
  114.     {
  115.         tw = this.bigWidth;
  116.         th = this.bigHeight;
  117.         if ( tw > cw )
  118.         {
  119.             th *= cw / tw;
  120.             tw = cw;
  121.         }    
  122.         if ( th > ch )
  123.         {
  124.             tw *= ch / th;
  125.             th = ch;
  126.         }
  127.         tx = cx - tw / 2;
  128.         ty = cy - th / 2; 
  129.     }
  130.     else
  131.     {
  132.         tw = this.smallWidth;
  133.         th = this.smallHeight;
  134.         tx = this.oThumb.offsetLeft;
  135.         ty = this.oThumb.offsetTop;
  136.     }    
  137.     // move 5% closer to target
  138.     var nHit = 0;
  139.     var fMove = function(n,tn) 
  140.     {
  141.         var dn = tn - n;
  142.         if ( Math.abs(dn) < 3 )
  143.         {
  144.             nHit++;
  145.             return tn;
  146.         }
  147.         else
  148.         {
  149.             return n + dn / 10;
  150.         }
  151.     }
  152.     this.x = fMove(this.x, tx);
  153.     this.y = fMove(this.y, ty);
  154.     this.w = fMove(this.w, tw);
  155.     this.h = fMove(this.h, th);
  156.  
  157.     this.oDiv.style.left = this.x + "px";
  158.     this.oDiv.style.top = this.y + "px";
  159.     this.oImg.style.width = this.w + "px";
  160.     this.oImg.style.height = this.h + "px";
  161.  
  162.     // if reducing and size/position is a match, stop the tick    
  163.     if ( !this.bExpand && (nHit == 4) )
  164.     {
  165.         this.oImg.style.visibility = "hidden";
  166.         this.oDiv.style.visibility = "hidden";
  167.         this.oThumb.style.visibility = "visible";
  168.  
  169.         this.bTicks = false;
  170.     }
  171.  
  172.     if ( this.bTicks )
  173.     {
  174.         var pThis = this;
  175.         window.setTimeout(function(){pThis.tick();},25);
  176.     }
  177. }
  178.  
And You would write your thumbnail like so

Expand|Select|Wrap|Line Numbers
  1. <a href="spike.jpg" onclick="this.href = 'javascript:void(0);';">
  2.         <img src="spike_thumb.jpg" title="click to expand." style="float:right;" onclick="new ImageExpander(this, 'spike.jpg');">
  3.     </a>
Can I alter The code Below to expand in this way onclick after it resizes the images?

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. <!--
  3. function ResizeThem(){
  4. maxheight=250;
  5. maxwidth= 250;
  6. imgs=document.getElementsByTagName("img");
  7. for (p=0; p<imgs.length; p++) {
  8. if (imgs[p].getAttribute("alt")=="user posted image") {
  9. w=parseInt(imgs[p].width);
  10. h=parseInt(imgs[p].height);
  11. if (parseInt(imgs[p].width)>maxwidth) {
  12. imgs[p].style.cursor="pointer";
  13. imgs[p].setAttribute('title','Reduced Image - Click to see full size');
  14. imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  15. imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
  16. imgs[p].width=maxwidth;}
  17. if (parseInt(imgs[p].height)>maxheight) {
  18. imgs[p].style.cursor="pointer";
  19. imgs[p].onclick=new
  20. Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  21. imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
  22. imgs[p].height=maxheight;}}}}
  23. ResizeThem()
  24. //-->
  25. </script>
  26.  
  27.  
I have tried for several hours but just cannot get it to work, I know I have to replace this line both times in the script but I dont know how to write it correctly.

Expand|Select|Wrap|Line Numbers
  1. imgs[p].onclick=new
  2. Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
Apr 17 '08 #9
drhowarddrfine
7,435 Expert 4TB
Here is the corrected HTML from the first post.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Image Viewer">
<meta name="keywords"
content="Reptiles">

<title> Image Viewer</title>
<style type="text/css">
body {background-image:url(http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg);
scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ;
scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:white;}
</style>
</head>
<body oncontextmenu="return false">
<script type="text/javascript">window.onload = function(){document.getElementById("place_holder") .src = window.opener.document.getElementById("imgurl").va lue;}
</script>
<center><img src="http://i14.photobucket.com/albums/a345/Instar/please_do_not_hotlink.gif" id="place_holder"></center>



</body>
</html>[/html]

"oncontextmenu" is a HTML5 event and I don't know who supports that yet, if anyone, since HTML5 is still in draft stage.
All that scrollbar styling only works in IE and is non-standard.
Your doctype is incorrect.
There is no such thing as "language=
You should replace <center> with CSS styling.
Apr 17 '08 #10
pronerd
392 Expert 256MB
Exactly as I said, In firefox Its rendering as plain text
That does not answer the question. What SPECIFICALLY is happening or not happening? You did not answer any of the questions I asked. Please answer these questions.

Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.


Id like to try a new Approach, If you could assist
How can I assist you when you continue to refuse to state the problem, and will not answer any of the questions asked?



I want to alter the code to expand the Image in the same page instead.
One thing to consider here would be depending on the size of the image this could make it very grainy looking.



I have tried for several hours but just cannot get it to work,
Meaning what? Just saying it does not work does not tell us anything. What is or is not happening? Are there errors happening, if so what do they say?
Apr 17 '08 #11
Inny
77
Sorry We seem to have a miscommunication issue.

Yes Im seeing plain text under firefox, just the page source, of the display page. Does that make it clearer? I beleive this is an issue with how my server
is configured for displaying attached files (html) in various browsers.
I think this because the display page renders as it should (text/html) under firefox, if I host it on an external server, however the code will not function because I get access denied error accross domains. (the code loads the src image to a placeholder and replaces the placeholder with the src img in the display page, but not firefox) The display page must be on the same domain. I have abandoned the original idea because I do not have access to my server.
see here with firefox (i see the page src)
http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?

About the second Idea, (expanding in the page) they will not be grainy, because they are only expanding to full size, not larger than the image actually is. Only reduced images will be effected, e.g a small 100x100px will not expand to 400x400, it wont be effected at all.

The second Idea Will Avoid the problem explained above, I just dont know how to assign the 'Expander' attribute to the reduced image instead of opening it in a new page.
Apr 18 '08 #12
acoder
16,027 Expert Mod 8TB
Threads merged - same problem.

Problem: http://www.howtocreate.co.uk/wrongWi...A+text%2Fplain
Apr 18 '08 #13
drhowarddrfine
7,435 Expert 4TB
fwiw, your server is misconfigured and serving the page as text/plain.
Apr 21 '08 #14
pronerd
392 Expert 256MB
see here with firefox (i see the page src)
http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?
Yes. As already stated the server is setting the MIME type of that page to "text/plain". The server needs to be corrected to that pages are being servered as text/html. This needs to be done before any other issues can be fixed, since none of your JavaScript will be run if the page is being rendered as plain text.



I just dont know how to assign the 'Expander' attribute
The first problem here would be that there is not an "Expander" attribute in mozilla's DOM reference. So you can create that attribute, but it will not do anything. If you want to adjust the images dimensions, it is is just a matter of changing the width and height attributes of the image element.





reduced image instead of opening it in a new page
You have not made the syntax correction I suggested above. As long as you are still calling window.opener it is going to open a new window in IE only. Pop-up blocking will stop this call in Firefox.
Apr 21 '08 #15
Inny
77
Ok, now were up to date. Lets forget the expander code ok.
back to original issue.
I dont have access to my server, hence im going to use a page on another domain instead. How can I parse the img url as the query string to the new page
so I can do that.
I dont know how to configure the new page, or reconfigure the code on my server.

Incidently the new page DID popup just fine in firefox, but as I said, due my server config it rendered as text/plain.
Apr 21 '08 #16
Plater
7,872 Expert 4TB
I am going to say it's a PHP not being configured/setup correctly on the server.

It's not sending the content correctly, have a look at the byte stream:
Expand|Select|Wrap|Line Numbers
  1. HTTP/1.1 200 OK
  2. Date: Mon, 21 Apr 2008 17:50:32 GMT
  3. Server: Apache/2.0.52 (CentOS)
  4. Set-Cookie: ForumSetCookie=herproom; expires=Tue, 21-Apr-2009 17:50:32 GMT
  5. Content-Disposition: inline; filename="bestyet.html"
  6. Content-Length: 25899
  7. Connection: close
  8. Content-Type: text/plain; charset=UTF-8
  9.  
The content type is tagged as text/plain, and for some reason it tries to use a Content-Disposition, which is used to trigger the "would you like to download or open this file" type boxes for the browser.

The byte stream is also the same regardless of me using FF or IE.
Apr 21 '08 #17
Inny
77
Yes exactly, Thanks. I dont have access to my server to reconfigure it though, so I want to send the enlarged image to a page on another server. Thats what I need help with. document.opener wont work accross domains.
Apr 22 '08 #18
Inny
77
Bump! does anyone know how to do this?
Apr 23 '08 #19
Plater
7,872 Expert 4TB
You want to force a new window to open and go to a certain webpage on a different server? Seems like a popup blocker would reject that, but you could try.
Apr 23 '08 #20
Inny
77
I want to send the url of a enlarged image to a new window on another server and display it there.

You want to force a new window to open and go to a certain webpage on a different server? Seems like a popup blocker would reject that, but you could try.
Apr 23 '08 #21
Plater
7,872 Expert 4TB
So open a new window and give the url for the remote server in it?
Apr 23 '08 #22
Inny
77
I want to rewrite the code to display an enlarged image (from clickable thumbnail on my site) in a window on another site! (the url in the code below will be to a page on another site, different domain/server.

Expand|Select|Wrap|Line Numbers
  1. <body  onload=function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value; >
  2.  
  3. <script>
  4. function ResizeThem() {
  5. maxheight=250;
  6. maxwidth= 250;
  7. imgs=document.getElementsByTagName("img");
  8. for (p=0; p<imgs.length; p++) {
  9. if (imgs[p].getAttribute("alt")=="user posted image") {
  10. w=parseInt(imgs[p].width);
  11. h=parseInt(imgs[p].height);
  12. if (parseInt(imgs[p].width)>maxwidth) {
  13. imgs[p].style.cursor="pointer";
  14. imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
  15. imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1')  ;iw.focus()");
  16. imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
  17. imgs[p].width=maxwidth;
  18. }
  19. if (parseInt(imgs[p].height)>maxheight) {
  20. imgs[p].style.cursor="pointer";
  21. imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1')  ;iw.focus()");
  22. imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
  23. imgs[p].height=maxheight;
  24. }
  25. }
  26. }
  27. }
  28. ResizeThem();
  29. </script>
  30.  
  31.  
  32. <input type="hidden" id="imgurl">
  33.  
Apr 24 '08 #23
Inny
77
can I re-do the above code to open the enlarged image in a floating layer div instead?
Apr 25 '08 #24
acoder
16,027 Expert Mod 8TB
I want to rewrite the code to display an enlarged image (from clickable thumbnail on my site) in a window on another site! (the url in the code below will be to a page on another site, different domain/server.
As Plater, just change the URL to the new domain, but you won't be able to access elements on the page, or use window.opener to refer back to the parent window.
Apr 25 '08 #25
acoder
16,027 Expert Mod 8TB
can I re-do the above code to open the enlarged image in a floating layer div instead?
Yes, you can. Look for "lightbox" or one of its clones.
Apr 25 '08 #26
Inny
77
Yes but I dont want to have to set a specific attribute for each image manually,
I want my code to reduce the dimensions, and then instead of opening in a new window, it could assign the newly reduced image whatever attribute triggers the lightbox function, but i dont know to rewrite the code to do that. I need a functional example please.

For instance: I could Use This js..

Expand|Select|Wrap|Line Numbers
  1. /*
  2. See http://www.howtocreate.co.uk/perfectPopups.html and http://www.howtocreate.co.uk/jslibs/termsOfUse.html
  3. for details and terms of use.
  4. To call this script, use something like (the number is a delay before it closes or 0 for no timed closing -
  5. the true/false says if the window should close when they switch to another window):
  6. <script type="text/javascript"><!--
  7. //you can style this, but don't try to text-align it to the right, it will break the resizing effect
  8. //keep it narrow, if it is wider than the image, the window will wrap to this width
  9. //the makeright class tells the script to automatically align it to the right
  10. var extraHTML = '<br><a href="javascript:window.close()" style="text-decoration:none;color:#777;background-color:#bbb;font-weight:bold;border-left:2px solid #000;" class="makeright">Close<\/a>';
  11. //--></script>
  12. <a href="me.jpg" onclick="return popImageExtra(this.href,'Site author',true,3000,extraHTML);">link</a>
  13. */
  14.  
  15. //really not important (the first two should be small for Opera's sake)
  16. PositionX = 10;
  17. PositionY = 10;
  18. defaultWidth  = 600;
  19. defaultHeight = 400;
  20.  
  21. //don't touch (except to modify the window contents)
  22. function popImageExtra(imageURL,imageTitle,AutoClose,oTimeClose,extraHTML){
  23.     var imgWin = window.open('','_blank','scrollbars=yes,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
  24.     if( !imgWin ) { return true; } //popup blockers should not cause errors
  25.     imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
  26.         'function getRefToDivMod( divID, oDoc ) {\n'+
  27.             'if( !oDoc ) { oDoc = document; }\n'+
  28.             'if( document.layers ) {\n'+
  29.             'if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {\n'+
  30.             'for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {\n'+
  31.             'y = getRefToDivNest(divID,oDoc.layers[x].document); }\n'+
  32.             'return y; } }\n'+
  33.             'if( document.getElementById ) { return oDoc.getElementById(divID); }\n'+
  34.             'if( document.all ) { return oDoc.all[divID]; }\n'+
  35.             'return document[divID];\n'+
  36.         '}\n'+
  37.         'function resizeWinTo() {\n'+
  38.             'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
  39.             'if( !document.images[0].height || window.doneAlready ) { return; }\n'+ //in case images are disabled
  40.             'var oH = getRefToDivMod( \'myID\' ); if( !oH ) { return false; }\n'+
  41.             'var oW = oH.clip ? oH.clip.width : oH.offsetWidth;\n'+
  42.             'var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }\n'+
  43.             'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
  44.             'window.doneAlready = true;\n'+ //for Safari and Opera
  45.  
  46.             'var mH = screen.availHeight-200, mW = screen.availWidth-200;\n'+
  47.             'if( oH > mH || oW > mW ) {\n'+
  48.  
  49.             'document.images[0].fullH = oH;\n'+
  50.             'document.images[0].fullW = oW;\n'+
  51.  
  52.             'var hDif = oH - document.images[0].height;\n'+
  53.             'var wDif = oW - document.images[0].width;\n'+
  54.             'mH = mH - hDif; mW = mW - wDif;\n'+
  55.             'mH = mH \/ document.images[0].height;\n'+
  56.             'mW = mW \/ document.images[0].width;\n'+
  57.             'var zoomFactor = ( mH < mW ) ? mH : mW;\n'+
  58.             'oH = Math.floor( document.images[0].height * zoomFactor );\n'+
  59.             'oW = Math.floor( document.images[0].width * zoomFactor );\n'+
  60.  
  61.             'document.images[0].style.cursor = \'crosshair\';\n'+
  62.             'document.images[0].title = \'Click to resize image\';\n'+
  63.             'document.images[0].oldHeight = document.images[0].height;\n'+
  64.             'document.images[0].oldWidth = document.images[0].width;\n'+
  65.             'document.images[0].newHeight = oH;\n'+
  66.             'document.images[0].newWidth = oW;\n'+
  67.             'document.images[0].onclick = function () { '+
  68.             'if( this.oldHeight == this.height ) { '+
  69.             'this.height = this.newHeight; this.width = this.newWidth; '+
  70.             'setTimeout(\'window.resizeTo(\'+this.oW+\',\'+this.oH+\'); '+
  71.             'if( !window.opera ) { '+
  72.             'window.moveTo(\'+Math.round((this.scW-this.oW)/2)+\','+
  73.             '\'+Math.round((this.scH-this.oH)/2)+\'); }\',1);\n'+
  74.             '} else { this.height = this.oldHeight; this.width = this.oldWidth; '+
  75.             'window.moveTo(0,0); window.resizeTo(this.scW,this.scH); '+
  76.             'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
  77.             'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
  78.             'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
  79.             'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
  80.             'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
  81.             'if( this.fullH < myH ) { var rs = this.fullH - myH; window.resizeBy(0,rs); '+
  82.             'if( !window.opera ) { window.moveBy(0,Math.round(rs/-2)); } }'+
  83.             'if( this.fullW < myW ) { var rs = this.fullW - myW; window.resizeBy(rs,0); '+
  84.             'if( !window.opera ) { window.moveBy(Math.round(rs/-2),0); } }'+
  85.             '} };\n'+
  86.  
  87.             'document.images[0].height = oH;\n'+
  88.             'document.images[0].width = oW;\n'+
  89.             'oH += hDif; oW += wDif;\n'+
  90.             '}\n'+
  91.  
  92.             'if(document.getElementsByTagName) {\n'+
  93.                 'for( var l = document.getElementsByTagName(\'a\'), x = 0; l[x]; x++ ) {\n'+
  94.                     'if(l[x].className==\'makeright\'&&!l[x].style.position){\n'+
  95.                         'l[x].style.position=\'relative\';\n'+
  96.                         'l[x].style.left=(document.images[0].width-(l[x].offsetWidth+l[x].offsetLeft))+\'px\';\n'+
  97.             '}}}\n'+
  98.             'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
  99.             'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
  100.             'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
  101.             'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
  102.             'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
  103.             'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
  104.             'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
  105.             'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
  106.             'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
  107.  
  108.             'document.images[0].oH = oH;\n'+
  109.             'document.images[0].oW = oW;\n'+
  110.             'document.images[0].scH = scH;\n'+
  111.             'document.images[0].scW = scW;\n'+
  112.  
  113.             'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
  114.             (oTimeClose?('window.setTimeout(\'window.close()\','+oTimeClose+');\n'):'')+
  115.         '}\n'+
  116.         '<\/script>'+
  117.         '<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
  118.         (document.layers?('<layer left="0" top="0" id="myID">'):('<div style="position:absolute;left:0px;top:0px;display:table;" id="myID">'))+
  119.         '<img src="'+imageURL+'" alt="Loading image ..." title="" onload="resizeWinTo();">'+
  120.         (extraHTML?extraHTML:'')+(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
  121.     imgWin.document.close();
  122.     if( imgWin.focus ) { imgWin.focus(); }
  123.     return false;
  124. }
  125.  
But how do I get My code(below) to :

1. reduce the image dimensions
2. trigger the code above (or similar lightbox code that requires thumbs to be e.g rel='lightbox')?

Even something like this would be good
http://www.c6software.com/Products/P...#Prerequisites

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. <!--
  3. function ResizeThem(){
  4. maxheight=250;
  5. maxwidth= 250;
  6. imgs=document.getElementsByTagName("img");
  7. for (p=0; p<imgs.length; p++) {
  8. if (imgs[p].getAttribute("alt")=="user posted image") {
  9. w=parseInt(imgs[p].width);
  10. h=parseInt(imgs[p].height);
  11. if (parseInt(imgs[p].width)>maxwidth) {
  12. imgs[p].style.cursor="pointer";
  13. imgs[p].setAttribute('title','Reduced Image - Click to see full size');
  14. imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  15. imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
  16. imgs[p].width=maxwidth;}
  17. if (parseInt(imgs[p].height)>maxheight) {
  18. imgs[p].style.cursor="pointer";
  19. imgs[p].onclick=new
  20. Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
  21. imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
  22. imgs[p].height=maxheight;}}}}
  23. ResizeThem()
  24. //-->
  25. </script>
  26.  
  27.  
Apr 26 '08 #27
acoder
16,027 Expert Mod 8TB
But how do I get My code(below) to :

1. reduce the image dimensions
2. trigger the code above (or similar lightbox code that requires thumbs to be e.g rel='lightbox')?
1. Just set the width or height to a fixed size.

2. Change the onclick, or for lightbox, set the rel attribute. If you don't want to change the code, try using an alternative/clone that doesn't require setting attributes.
Apr 26 '08 #28

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: rnd | last post by:
Hi all! could you kindly help me to solve a compatibility problem that involves Internet Explorer and NN/Mozilla. I created a html page that contains a form (its name is "Modulo") and some...
12
by: Bart | last post by:
Hallo, I'm have a problem with the following script: function wr(s) { //Just got tired of writing document.write, //so I created a shorthand version document.write(s);
6
by: Gary Mayor | last post by:
Hi, I'm trying to make it so when I click a image it prints out the image again and a load of other stuff. So far i've got this far. <html> <head> <script language="JavaScript" type="">...
1
by: David Smith | last post by:
I have the following snippet which will not render the control on the page: foreach(DataRow dr in ds.Tables.Rows) { System.Web.UI.HtmlControls.HtmlTableRow r = new...
3
by: kev | last post by:
Hello, I posted a question a while ago on tabbed pages, how to set it to invisible when the text box is empty.It was answered by Rick and the code ran perfectly. However, i tried using the same...
2
by: saurabhpant | last post by:
Hi friends, I am working on a blog application.In this application we use an iframe for writing the text I am using the javascript for storing the value of iframe in a temporary variable.The code is...
2
by: gunnuk | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
3
by: bnashenas1984 | last post by:
Hi everyone I have a HTML page which has some dynamic parts. The problem is that this page works fine in IE but not in MOZILLA ( doesn't work att all in mozilla ) here is an example:...
1
by: tegdim | last post by:
Hello, I'm working on a machine learning project that I have lots of HTML news stories to work with. I made an online tool that lets me look at these pages via mozilla and hand label them by...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.