Resize Google frame when user resizes their browser

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • RedSon
    Recognized Expert Expert
    • Jan 2007
    • 4980

    Resize Google frame when user resizes their browser

    Yea! Now after years of applications work I have finally bit the bullet and gotten myself a website playground. But I am running into a problem. I want to be able to make some money off this site when a user wants to search for something. So I set up google to be my search engine of choice and whenever someone searches something google populates a div in my search.php with the information returned from their servers. Here is what the code looks like:

    [CODE=javascript]
    <div id="googleSearc hUnitIframe">&n bsp;</div>
    <script type="text/javascript">
    var winW = 630;//default
    if (parseInt(navig ator.appVersion )>3) {
    if (navigator.appN ame=="Netscape" ) {
    winW = window.innerWid th;
    }
    if (navigator.appN ame.indexOf("Mi crosoft")!=-1) {
    winW = document.body.o ffsetWidth;
    }
    }


    var googleSearchIfr ameName = 'googleSearchUn itIframe';
    var googleSearchFra meWidth = winW * .76;
    var googleSearchFra meborder = 0 ;
    var googleSearchDom ain = 'www.google.com ';
    </script> <script type="text/javascript"
    src="http://www.google.com/afsonline/show_afs_search .js">
    </script></div>[/CODE]

    As you can see I create a blank div called googleSearchUni tIframe that google then puts its information in. I also specify the framewidth and frameborder which I try to do dynamically whenever the page loads (well not the border). My nav bar is on the right that is why the width needs to be multiplied by .76.

    This little javascript actually works great, but what I am trying to do is handle if/when the user wants to resize their browser window. At this point the google frame will stay the same size and everything will resize behind it. I want to make it so that the googleSearchFra meWidth will be recalculated everytime the user presses F5(which it does now) or resizes the window(which it does not do now). It may require the page to be reloaded whenever the window is resized, that is fine. I don't mind a google search request being resent everytime the window is resized.

    What c0dez r ur going to give me to m4ke it werk?!?!?!1!!11 eleven!! Need help plz pzl plzzzzzz.
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    onresize ?

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Originally posted by RedSon
      What c0dez r ur going to give me to m4ke it werk?!?!?!1!!11 eleven!! Need help plz pzl plzzzzzz.
      Please type in clear English. Thanks!

      Changed the thread title. I think you need a reminder of the posting guidelines.

      Comment

      • Motoma
        Recognized Expert Specialist
        • Jan 2007
        • 3236

        #4
        Couldn't you just set your div dimension to a percentage of the overall size?

        Comment

        • RedSon
          Recognized Expert Expert
          • Jan 2007
          • 4980

          #5
          Originally posted by Motoma
          Couldn't you just set your div dimension to a percentage of the overall size?
          I tried to make some changes to the CSS so that the div would work properly. the Iframe div does inherit its size and padding from the body div. It looks like google's js overrides what my CSS says because of the [CODE=javascript]var googleSearchFra meWidth = winW * .76;[/CODE] part. So not sure if this is the correct answer, give me some tips about what kind of CSS changes to try and in what divs, and I'll test all possible permutations to see if I can make it behave.

          Comment

          • RedSon
            Recognized Expert Expert
            • Jan 2007
            • 4980

            #6
            Originally posted by acoder
            I tried handling that. But I could not get it to refresh the screen. I also tried to recalculate the width using the same methods that I did when the page is first loaded, but while it does report the proper width it does not resize google's js. I think I will need to run the query to google again after the screen resizes so that they can put the newly resized information in my blank div.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              Originally posted by RedSon
              I tried to make some changes to the CSS so that the div would work properly. the Iframe div does inherit its size and padding from the body div. It looks like google's js overrides what my CSS says because of the [CODE=javascript]var googleSearchFra meWidth = winW * .76;[/CODE] part. So not sure if this is the correct answer, give me some tips about what kind of CSS changes to try and in what divs, and I'll test all possible permutations to see if I can make it behave.
              You could try the width property, but I don't know the inner workings of Google's script. Does it expect a number and not a percentage?

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                Originally posted by RedSon
                I tried handling that. But I could not get it to refresh the screen. I also tried to recalculate the width using the same methods that I did when the page is first loaded, but while it does report the proper width it does not resize google's js. I think I will need to run the query to google again after the screen resizes so that they can put the newly resized information in my blank div.
                If Google's not responding to the width change, it probably means that you'll have to run the query again.

                Comment

                • RedSon
                  Recognized Expert Expert
                  • Jan 2007
                  • 4980

                  #9
                  Originally posted by acoder
                  You could try the width property, but I don't know the inner workings of Google's script. Does it expect a number and not a percentage?
                  Google requries an integer not a %

                  Comment

                  • RedSon
                    Recognized Expert Expert
                    • Jan 2007
                    • 4980

                    #10
                    Originally posted by acoder
                    If Google's not responding to the width change, it probably means that you'll have to run the query again.
                    Ok so how do I refresh the page on resize to send the query again?

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032

                      #11
                      Originally posted by RedSon
                      Google requries an integer not a %
                      Wait a minute, have you tried setting the width after the Google script?
                      [CODE=javascript]document.getEle mentById("googl eSearchUnitIfra me").style.widt h=winW*.76;[/CODE]

                      Comment

                      • RedSon
                        Recognized Expert Expert
                        • Jan 2007
                        • 4980

                        #12
                        Originally posted by acoder
                        Wait a minute, have you tried setting the width after the Google script?
                        [CODE=javascript]document.getEle mentById("googl eSearchUnitIfra me").style.widt h=winW*.76;[/CODE]
                        no ...

                        Comment

                        • RedSon
                          Recognized Expert Expert
                          • Jan 2007
                          • 4980

                          #13
                          Yea that doesnt work because that variable needs to be set before the request is made to google to display the search results.

                          Comment

                          • acoder
                            Recognized Expert MVP
                            • Nov 2006
                            • 16032

                            #14
                            Originally posted by RedSon
                            Yea that doesnt work because that variable needs to be set before the request is made to google to display the search results.
                            The variable needs to be set before, but you can alter the width of the div after the request surely?

                            Comment

                            • RedSon
                              Recognized Expert Expert
                              • Jan 2007
                              • 4980

                              #15
                              Originally posted by acoder
                              The variable needs to be set before, but you can alter the width of the div after the request surely?
                              Yes you can but it looks like google formats the output from the query based on what value you give it before hand. So it is important to make them match otherwise all of the results will be cut off, and that is not very helpful.

                              Comment

                              Working...