Enlarge a pop-up window that is hard coded in the template

[GreenGiant]

I'm new to all this and never built a ecommerce website but giving it a hell of a try. My job was eliminated and I'm to damn old to get hired by anyone. So I'm starting my own business. Here is my problem.

When after I added my options to my website in a dropdowns, to the side there is a click details thumbnail. But when you click on it the pop-up window opens up so small you can't see anything and have to stretch it open.

I'm looking for a way to enlarge a pop-up window that is hardcoded in the template, to show picture and text from the details HTML. Or a way to write a script that would open the new window with html that has my pics and text in it an easier to see and read and close the old one. . When I wrote my webhosting service annd they said was. "You would need to add custom jQuery to your template that would over ride the "Hard Coded" window that is opened by default"

To be honest I have no idea what they are talking about and just decided to take on this project because I don't have enough money to hire someone to do it.
Thanks for any help!

[jscheuer1]

If there is a forum dedicated to the package you are using, this must be a fairly common problem, I'd ask there.

If not, no promises. We don't have enough information to know if this is really doable or not.

Are you sure there aren't settings or parameters you can pass to the function that opens the window?

If so that would be easiest.

Can you edit the template? We would need to see the template to help with that. But that would probably be the next easiest.

Failing that you could use jQuery. There's no reason it would have to be that. If the template already uses jQuery for other things though, that would make it a logical choice. Ordinary javascript can do whatever jQuery can do, it just takes a lot more code because jQuery is a library of routines. And there are already many scripts that use it for opening window like objects on a page. To code without jQuery one must make up all of the routines for any given task. There are also other libraries of routines with scripts written using them to open up window like objects.

Whatever is done along those lines, yes the native window function would either have to be overridden or perhaps simply not used at all.

To figure that out we would need to see a demo page that uses the default popup window.

[GreenGiant]

The webhosting is through Volusion,. Right now I'm using a temp domain name till I can transfer my own domain name. Here is a link to my product page maybe you can rell me how to fix my problem. I need the window to open larger on the length and width to show the pictire in the door size details. Hope this is what you want> I just stuck a pic and some random tex in there to work with for now.
http://xdgjk.xwzae.servertrust.com/ProductDetails.asp?ProductCode=001


Thanks

[jscheuer1]

Where you have (highlighted, scroll the code block to see it):


Door Size details<font color="#CC0000">*</font>:
</td><td vAlign="top"><a href="javascript:void(0);" onClick="javascript:OpenNewWindow('help_options.asp?ID=14', 350, 250);">
<img clas="vCSS_img_help_options" src="v/vspfiles/templates/137/images/Icon_Help_Options.gif" border="0"></a></td><td>
<SELECT name="SELECT___001___14" onChange="change_option('SELECT___001___14',this.options[this.selectedIndex].value)">
<OPTION value="0" >.</OPTION>
<OPTION value="55" SELECTED>Small (5 1/2 x 7 1/2)</OPTION>
<OPTION value="56" >Small Medium (6 1 . . .

350 is the width and 250 is the height. Adjust to suit.

If you can't do that, put this script on the page:


<script type="text/javascript">
jQuery(function($){
$('a[onclick$="350, 250);"]').each(function(){
var fstr = String(this.onclick);
this.onclick = null;
$(this).click(new Function('(' + fstr.replace(/onclick/, '').replace(/350, 250/, '600, 700') + ')();'));
});
});
</script>

The '600, 700' is the new dimensions.

Put the script on the page after this tag which is already in the head of the page:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Oh and if you want to install something like the jQuery based FancyBox:

http://fancybox.net/

you could have the content pop up in a FancyBox box.

[GreenGiant]

Well John, I tried the 2nd one but had no luck. possibly I did it woron or maybe just didn't understand correctly. The area I have to enter my code is mainly a text area but if I enter html it will read it correctly. Maybe it would be be better or easier to make the window self close and reopen in the new size with the photos and text I need? Like I said I never did this stuff before so most of it is trial and error for me....sorry..
You can go there and check the code and see if I did it correctly and maybe I did it wrong? the text an photo I have in there now is the largest size window I will need.

[bernie1227]

Well John, I tried the 2nd one but had no luck. possibly I did it woron or maybe just didn't understand correctly. The area I have to enter my code is mainly a text area but if I enter html it will read it correctly. Maybe it would be be better or easier to make the window self close and reopen in the new size with the photos and text I need? Like I said I never did this stuff before so most of it is trial and error for me....sorry..
You can go there and check the code and see if I did it correctly and maybe I did it wrong? the text an photo I have in there now is the largest size window I will need.

first question, did you put the specified code in the head of the html?
second question, did you try the first method?
If it's possible, could you please post the appropriate code for us to check?
Bernie

[jscheuer1]

bernie1227's right, the first method is easier and better if you can do it.

About the second method. I see no evidence of the script being added to the page. It's not on the page nor is there any external script tag on the page that brings it in. There's not even any garbage in the source code of the page that would indicate an attempt to insert the script that failed because it was written as something other than a script.

Here's something we can try. Using a text only editor like NotePad, save this as 'mycustomwindow.js':


jQuery(function($){
$('a[onclick$="350, 250);"]').each(function(){
var fstr = String(this.onclick);
this.onclick = null;
$(this).click(new Function('(' + fstr.replace(/onclick/, '').replace(/350, 250/, '600, 700') + ')();'));
});
});

Upload it to the:

xdgjk.xwzae.servertrust.com/a/j/

folder.

Then on the page, just after:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />

add the highlighted as shown:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="/a/j/mycustomwindow.js"></script>

[GreenGiant]

Here is what I have entered into the Door size window text area.


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="/a/j/mycustomwindow.js"></script>
</script>
<SPAN style="FONT-SIZE: 14pt; FONT-WEIGHT: bold">Details:<BR></SPAN>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-WEIGHT: bold"><IMG border=0 hspace=5 alt="training flap option for Hale Pet Door models" align=left src="/v/vspfiles/assets/images/trainingflap.jpg" width=200 height=150></SPAN><SPAN style="FONT-SIZE: 14pt">Some pets initially resist pushing through the regular pet door flaps so we offer a flexible training flap as an optional add-on. The training flap is made of a similar material to our regular flap but it has no strikes and has been vertically slashed several times to make it very easy to push through. It does not, however, provide the energy efficiency of our regular flap. Therefore, once an animal has gotten used to the training flap, the standard flaps should be re-installed one at a time.</SPAN></P>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-SIZE: 14pt">If you order this at the same time as you order your door, we will install it for you at the factory and send the regular flaps (predrilled for ease of installation) in addition to your door. As a standard, only one training flap is supplied with each order. Typically, you would train the animal to use the single training flap, then switch it out for one of our regular flaps and finally attach the second regular flap on a double flap model. If you prefer to have two training flaps sent with your door, please order an additional one from our parts page.</SPAN></P>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-SIZE: 14pt">If you do not order a training flap with your initial door order but find that you need one at a later date, you can order them later.</SPAN></P>

I created the file 'mycustomwindow.js':
and uploaded it to xdgjk.xwzae.servertrust.com/a/j/

so I must be missing something. If you want to log in I can set up an account on my site so you can see the areas I have to work with to make the changes. Email me direct and I will send you the login info. I am trying my best because I have a lot of these changes to make before I can go any farther on building my site. I like the 1st set of code but don't know how to tie it to my form fields.
Thanks
Tim

[jscheuer1]

http://xdgjk.xwzae.servertrust.com/a/j/mycustomwindow.js

Is a 404 Not Found.

The script (mycustomwindow.js) is not there, and the code isn't on the page, anywhere.

And you've misunderstood stood where the code goes.

This is already on the page:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />

All you have to do is add:


<script type="text/javascript" src="/a/j/mycustomwindow.js"></script>

below it.

If you cannot add it there, it could go anywhere after those scripts, but don't repeat those other scripts, they're already there.

[GreenGiant]

Ok I corrected the link
http://xdgjk.xwzae.servertrust.com/v/vspfiles/a/j/mycustomwindow.js

This is exactly how I have it entered in my text field


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="/v/vspfiles/a/j/mycustomwindow.js"></script>
</SCRIPT>
<DIV><SPAN style="FONT-SIZE: 14pt; FONT-WEIGHT: bold"></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 14pt; FONT-WEIGHT: bold">Details:<BR></SPAN></DIV>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-WEIGHT: bold"><IMG border=0 hspace=5 alt="training flap option for Hale Pet Door models" align=left src="/v/vspfiles/assets/images/trainingflap.jpg" width=200 height=150></SPAN><SPAN style="FONT-SIZE: 14pt">Some pets initially resist pushing through the regular pet door flaps so we offer a flexible training flap as an optional add-on. The training flap is made of a similar material to our regular flap but it has no strikes and has been vertically slashed several times to make it very easy to push through. It does not, however, provide the energy efficiency of our regular flap. Therefore, once an animal has gotten used to the training flap, the standard flaps should be re-installed one at a time.</SPAN></P>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-SIZE: 14pt">If you order this at the same time as you order your door, we will install it for you at the factory and send the regular flaps (predrilled for ease of installation) in addition to your door. As a standard, only one training flap is supplied with each order. Typically, you would train the animal to use the single training flap, then switch it out for one of our regular flaps and finally attach the second regular flap on a double flap model. If you prefer to have two training flaps sent with your door, please order an additional one from our parts page.</SPAN></P>
<P style="TEXT-ALIGN: justify"><SPAN style="FONT-SIZE: 14pt">If you do not order a training flap with your initial door order but find that you need one at a later date, you can order them later.</SPAN></P>

If this will not work I will have to find someone that is familar with the Volusion templates or give one of you guys on here access to look all of it over to help me find out where to make the code change. I don't know where other than in the text field to make the change all Volusion support would say is it could be done by adding a custom jQuery to your template that would over ride the "Hard Coded" window that is opened by default. Their support sucks.

[jscheuer1]

Well, the script file is where you say it is, but you're still not getting any code onto the http://xdgjk.xwzae.servertrust.com/ProductDetails.asp?ProductCode=001 page.

And I still don't think you understand what code to put where on the http://xdgjk.xwzae.servertrust.com/ProductDetails.asp?ProductCode=001 page.

Go back and read my previous post for that.