...

View Full Version : Putting HTML in the midde of a Function ....



simonwar
07-01-2011, 02:47 PM
Hi,

I am a newbie to Javascript but managed to set up a simple Function that allows me to create a thumbnail image viewer with headings and text.

One of the variables is a Hyperlink.

It all works fine but I want the hyperlink to open as a PopUp Window, but not sure how to do it.

My Code


function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,title Pricelist,pricelistText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
document.getElementById(titleText).innerHTML=textText;
document.getElementById(titleJob).innerHTML=jobText;
document.getElementById(titlePricelist).innerHTML=pricelistText;

}

and in my <body>, I have this code for each thumbnail ....


<a href="#_self" onclick="LoadGallery('TeamGallery', 'http://www.albionhousehairsalon.co.uk/images/theteam_sharron_lg.gif', 'TeamGalleryCaption', 'Sharron', 'TeamGalleryText', 'Some text about Sharron','TeamGalleryRole','Senior Stylist','TeamGalleryPrices','&lt;a href=\'/albion_house_hair_salon.html\'&gt;Click here to see Sharrons Service Price List&lt;/a&gt;')"><img src="http://www.albionhousehairsalon.co.uk/images/theteam_sharron_thumb.gif" width="90" height="61" /></a>


This can be seen working her:

http://www.albionhousehairsalon.co.uk/albion_house_hair_salon_the_team.html

but what I want is when you click on the text "Click here to see Gemma's Service Price List" (specific to Gemma of course).

.... her price list opens in a popup?

(If you want to try this Gemma is the Director with the Burgundy haircolour, top left on the page).

Can anyone help?

P.S. I am using the <div class> and id to pass the variable data through the function and display the enlarged image and relevant text and hyperlink... if that makes sense ?

Fugix
07-01-2011, 04:08 PM
you will want to add an onclick event in your function


function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,title Pricelist,pricelistText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
document.getElementById(titleText).innerHTML=textText;
document.getElementById(titleJob).innerHTML=jobText;
document.getElementById(titlePricelist).innerHTML=pricelistText;
document.getElementById(titlePricelist).onclick=window.open("albion_house_hair_salon.html","name","height=200,width=150");

}

Krupski
07-01-2011, 05:33 PM
It all works fine but I want the hyperlink to open as a PopUp Window, but not sure how to do it.


Here's the popup code I use...



/**
* window popup
* if (close == true) then window self closes upon losing focus
* url = string url to open (required)
* width = integer width of popup (required)
* height = integer height of popup (required)
* name = string name of window (optional)
* close = boolean true == autoclose (optional)
**/
var popup = function (url, width, height, name, close) {
if (!name) { name = '_popup'; }
var yes = ['scrollbars', 'resizable'];
var no = ['toolbar', 'location', 'directories', 'status', 'menubar', 'fullscreen', 'channelmode'];
var y = yes.length;
var n = no.length;
var scr = viewPortSize();
var lpos = (scr.width) ? parseInt((scr.width - width) * (1 / 2)) : 0; /* centered L-R */
var tpos = (scr.height) ? parseInt((scr.height - height) * (1 / 3)) : 0; /* 1/3 from the top */
var settings = 'height=' + height + ',width=' + width + ',top=' + tpos + ',left=' + lpos;
var options = '';
while (y--) { options += ',' + yes[y] + '=1'; }
while (n--) { options += ',' + no[n] + '=0'; }
var win = window.open(url.replace(/&amp;/g, '&'), name, settings + options);
if (window.focus) { win.focus(); }
if (close) { win.document.body.setAttribute('onblur', 'this.close()'); }
return win;
}

/***
* viewPortSize ()
* returns an object containing the actual width
* and height of the client browser window.
***/
var viewPortSize = function () {
return {
'width' :
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth,
'height' :
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight
}
}

Hope you can use this.

-- Roger

simonwar
07-02-2011, 10:35 AM
Hi Fugix,

I added code line

document.getElementById(titlePricelist).onclick=window.open("albion_house_hair_salon.html","name","height=200,width=150");


but what this does is open the window immediately, and it also opens the same window, "albion_house_hair_salon.html".

Thats not what I want.

On my page I have several stylists who all have a price list each, I want to click on their thumbnail and the option to see their price list is a hyperlink under their enlarged picture, (along with their name, biog and job description).

As you click on different thumbnails the four attributes change accordingly; name, title, picture, price list hyperlink.

This I can do with the code I have but when I click on the price list hyperlink, it opens as a full page, and I would like it to open as a pop-up, 360 x 500 for example, with close buttons, scroll bars, no menu bar.

So, if the user wants to see the specific stylists price list, (they don't have to see it), they can click the link and a popup page relevant to that stylist opens.

e.g.
Helen - helens_price_list.html
Gemma - gemmas_price_list.html

etc.

Does that make sense?

simonwar
07-02-2011, 10:37 AM
Hi Krupski,

Appreciate the time in your response, can I hold that thought a mo. Nice one, Simon.

simonwar
07-02-2011, 12:22 PM
Another question I have is how do I put a <br> in the text loaded in the function.

My code:

<a href="#_self" onclick="LoadGallery('TeamGallery', 'http://www.albionhousehairsalon.co.uk/images/theteam_joe_lg.gif', 'TeamGalleryCaption', 'Joe', 'TeamGalleryText', 'Joe is a great example of what can be achieved if you work your way through the Albion House training from scratch. Having never had any experience of Hairdressing, Joe joined Albion House from 6th form college and was able to complete his Level 2 NVQ in Hairdressing soon after starting due to the accelerated program of work, not available to all Salon\'s, put together by the internal training team, led by Lucy. Following such focussed training and combined internal and external assessment, Joe is now midway through his Level 3 in the same way. Joe focussed on Barbering to begin with undertaking Wahl\'s comprehensive cutting course last year and now continuing his vocational training with both TIGI and Redken on courses at their London Academy\'s. Joe has firmly established himself as a Stylist at Albion House building an accomplished client base and leading by example.','TeamGalleryRole','Stylist','TeamGalleryPrices','&lt;a href=\'/albion_house_hair_salon.html\'&gt;Click here to see Joes Service Price List&lt;/a&gt;')"><img src="http://www.albionhousehairsalon.co.uk/images/theteam_joe_thumb.gif" width="90" height="61" /></a>

Unfortunately the text comes out in 1 paragraph, it would be nice to split it using a line break?

Appreciated.

Fugix
07-02-2011, 06:15 PM
not sure exactly what text you are referring to, however you can try this if this is the text that you are talking about


<a href="#_self" onclick="LoadGallery('TeamGallery', 'http://www.albionhousehairsalon.co.uk/images/theteam_joe_lg.gif', 'TeamGalleryCaption', 'Joe', 'TeamGalleryText', 'Joe is a great example of what can be achieved if you work your way through the Albion House training from scratch. <br />Having never had any experience of Hairdressing, Joe joined Albion House from 6th form college and was able to complete his Level 2 NVQ in Hairdressing soon after starting due to the accelerated program of work, not available to all Salon\'s, put together by the internal training team, led by Lucy. <br />Following such focussed training and combined internal and external assessment, Joe is now midway through his Level 3 in the same way. Joe focussed on Barbering to begin with undertaking Wahl\'s comprehensive cutting course last year and now continuing his vocational training with both TIGI and Redken on courses at their London Academy\'s. Joe has firmly established himself as a Stylist at Albion House building an accomplished client base and leading by example.','TeamGalleryRole','Stylist','TeamGalleryPrices','&lt;a href=\'/albion_house_hair_salon.html\'&gt;Click here to see Joes Service Price List&lt;/a&gt;')"><img src="http://www.albionhousehairsalon.co.uk/images/theteam_joe_thumb.gif" width="90" height="61" /></a>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum