Announcement

Collapse
No announcement yet.

AUG - Auto resizing pop-ups to fit...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    AUG - Auto resizing pop-ups to fit...

    First off, the AUG is fantastic i have done so many things with it!

    However, with this tutorial, it works great to what it says it does, but unfortunatly isn't quite up to spec for what i need and was hoping someone would know how to include the following.

    As it resizes to fit what is within it, the layout also removes any extended information text, the 'click to close' button and so on. Is there a way to include this and keep the function of auto resizing the pop up window ?

    With my current set up, i have various image sizes with sometimes a hefty amount of text (techinical information about products) and i have had to sometimes guess, check, change, check, change, check to get it anywhere near what it should be. I'm not asking for it to resize to fit the text as well, but at least re-include it and leave some space for it.

    I have pasted the code below from the AUG just in case, thanks!

    Code:
    <html>
    <head>
    <Actinic:WINDOW width="<Actinic:Variable Name="ExtendedInfoImageWidth"/>" height="<Actinic:Variable Name="ExtendedInfoImageHeight"/>"/>
       <title><actinic:variable name="PageTitle" /></title>
       <actinic:variable name="BaseHref" />
        <script language='javascript'>
    	  var arrTemp=self.location.href.split("?");
    	  var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
    	  var NS = (navigator.appName=="Netscape")?true:false; 
    	  
    	  function FitPic()	   {
    	   iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
    	   iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
    	   iWidth = document.images[0].width - iWidth; 
    	   iHeight = document.images[0].height - iHeight; 
    	   window.resizeBy(iWidth, iHeight); self.focus(); }; 
    	</script>
    </head>
    <body bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
      <script language='javascript'>
        document.write( "<a href=\"javascript:window.close();\"><img src=\"<Actinic:Variable Name="ExtendedInfoImage"/>\" width=\"<Actinic:Variable Name="ExtendedInfoImageWidth"/>\" height=\"<Actinic:Variable Name="ExtendedInfoImageHeight"/>\" border=\"0\"></a>" );
      </script>
    </body>
    </html>
    LMC Audio Systems - Pure Audio Choice

    #2
    well, interestingly, i wrote this.

    it wasnt taken into consideration when the code was written, since we only wanted the image to pop up.

    however, saying that... its possible to extend the image downwards a set number of additional pixels, to fit some text you may ahve in there.

    Code:
    window.resizeBy(iWidth, iHeight); self.focus(); };
    this line for instance, could become:
    Code:
    window.resizeBy(iWidth, iHeight + 50); self.focus(); };
    to give an extra 50 pixels below the picture.


    ...and for the text to be added back in
    Code:
    Name="ExtendedInfoImageHeight"/>\" border=\"0\"></a>" );
    is the last bit of data written to the window. so in order to get your text back, you'll ahve to add the variable for the text in there. sorry, it escapes me at the moment.


    {note, thats psudocode and i couldnt test it at this moment}

    Comment


      #3
      I take the slightly "less" geeky approach and position the close window button at the top using CSS ... if the user opens a very long window which they do not require there is a nice big "close" link at the top right (amazing how many people use this compared to the big X in the browser bar) rather than having to scroll (not always nice to fill the screen with a pop up)

      ps....

      that was in no way having a go at Gabe with the "geek" reference .. he is way too scary to stand toe-to-toe with

      *phew*


      Bikster
      SellerDeck Designs and Responsive Themes

      Comment


        #4
        oop! forgot about hisclose button problem, and you're right. but using the resizing approach of mine added to the aug cuts out the description text attached to the popup. and this includes the close button. so, really, it will ahve to be added back in to the script to build the window.

        i cant find the right variable to put in there at the moment.

        any ideas mr jont?

        Comment


          #5
          <Actinic:Variable Name="ExtendedInfoText"/>


          Bikster
          SellerDeck Designs and Responsive Themes

          Comment


            #6
            then this will put the text back into the box:

            Name="ExtendedInfoImageHeight"/>\" border=\"0\"></a><br><Actinic:Variable Name="ExtendedInfoText"/>" );

            Comment


              #7
              Have you gone off <br /> now?


              Bikster
              SellerDeck Designs and Responsive Themes

              Comment


                #8
                no, i noticed that his site would complain if he used them, since they are pure xhtml.



                wouldnt want to be introducing errors in there, now would i?

                but since the content in question is generated by script, it'll prolly never be seen or validated anyhow heh.

                Comment


                  #9
                  Actinic? Compliant? C'mon Mr Crowe you should know better

                  OT : Cheers for the mail BTW, will have a play tomorrow (looks like a cunning plan)


                  Bikster
                  SellerDeck Designs and Responsive Themes

                  Comment


                    #10
                    good good!! working on that now.

                    Comment


                      #11
                      Code:
                      <html>
                      <head>
                      <Actinic:WINDOW width="<Actinic:Variable Name="ExtendedInfoImageWidth"/>" height="<Actinic:Variable Name="ExtendedInfoImageHeight"/>"/>
                         <title><actinic:variable name="PageTitle" /></title>
                         <actinic:variable name="BaseHref" />
                          <script language='javascript'>
                      	  var arrTemp=self.location.href.split("?");
                      	  var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
                      	  var NS = (navigator.appName=="Netscape")?true:false; 
                      	  
                      	  function FitPic()	   {
                      	   iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
                      	   iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
                      	   iWidth = document.images[0].width - iWidth; 
                      	   iHeight = document.images[0].height - iHeight; 
                      	   window.resizeBy(iWidth, iHeight + 100); self.focus(); }; 
                      	</script>
                      </head>
                      <body bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
                        <script language='javascript'>
                          document.write( "<a href=\"javascript:window.close();\"><img src=\"<Actinic:Variable Name="ExtendedInfoImage"/>\" width=\"<Actinic:Variable Name="ExtendedInfoImageWidth"/>\" height=\"<Actinic:Variable Name="ExtendedInfoImageHeight"/>\" border=\"0\"></a>" );
                        </script>
                      </body>
                      </html>
                      Hi,

                      When I cut and paste this code, all of the Actinic:variable Name(s), disappear, and turn into the correct format, that you normally see in any Actinic Style sheet.

                      But.. the first "<Actinic:WINDOW width" in the second line, stays red, which is normally what I get, when I have mis-typed something.

                      So, not wishing to question the experts on here, but could someone just explain why.

                      Thanks

                      Clive
                      Suz and Clive Slade
                      www.purple-ferrets.com

                      Comment


                        #12
                        Sorry, no. The colour coding makes absolutely no sense and is not consistent.
                        Bill
                        www.egyptianwonders.co.uk
                        Text directoryWorldwide Actinic(TM) shops
                        BC Ness Solutions Support services, custom software
                        Registered Microsoft™ Partner (ISV)
                        VoIP UK: 0131 208 0605
                        Located: Alexandria, EGYPT

                        Comment

                        Working...
                        X