Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Putting HTML in the midde of a Function ....

    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

    Code:
    function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,titlePricelist,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.u..._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 ?
    Last edited by simonwar; 07-01-2011 at 01:50 PM. Reason: forgot to mention <div class>

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    103
    Thanks
    0
    Thanked 13 Times in 13 Posts
    you will want to add an onclick event in your function

    Code:
    function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,titlePricelist,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");
    
    }

  • #3
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by simonwar View Post
    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...

    Code:
    /**
     * 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
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Fugix,

    I added code line
    Code:
    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?

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Krupski,

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

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another question I have is how do I put a <br> in the text loaded in the function.

    My code:
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2011
    Posts
    103
    Thanks
    0
    Thanked 13 Times in 13 Posts
    not sure exactly what text you are referring to, however you can try this if this is the text that you are talking about

    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. <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •