473,382 Members | 1,689 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Resize Google frame when user resizes their browser

RedSon
5,000 Expert 4TB
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:

Expand|Select|Wrap|Line Numbers
  1. <div id="googleSearchUnitIframe">&nbsp;</div>
  2. <script type="text/javascript">
  3.     var winW = 630;//default
  4.     if (parseInt(navigator.appVersion)>3) {
  5.      if (navigator.appName=="Netscape") {
  6.       winW = window.innerWidth;
  7.      }
  8.      if (navigator.appName.indexOf("Microsoft")!=-1) {
  9.       winW = document.body.offsetWidth;
  10.      }
  11.     }
  12.  
  13.  
  14.    var googleSearchIframeName = 'googleSearchUnitIframe';
  15.    var googleSearchFrameWidth = winW * .76;
  16.    var googleSearchFrameborder = 0 ;
  17.    var googleSearchDomain = 'www.google.com';
  18. </script> <script type="text/javascript"
  19.          src="http://www.google.com/afsonline/show_afs_search.js">
  20. </script></div>
As you can see I create a blank div called googleSearchUnitIframe 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 googleSearchFrameWidth 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!!11eleven!! Need help plz pzl plzzzzzz.
Aug 16 '07 #1
15 3142
acoder
16,027 Expert Mod 8TB
onresize ?
Aug 16 '07 #2
acoder
16,027 Expert Mod 8TB
What c0dez r ur going to give me to m4ke it werk?!?!?!1!!11eleven!! 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.
Aug 16 '07 #3
Motoma
3,237 Expert 2GB
Couldn't you just set your div dimension to a percentage of the overall size?
Aug 16 '07 #4
RedSon
5,000 Expert 4TB
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
Expand|Select|Wrap|Line Numbers
  1. var googleSearchFrameWidth = winW * .76;
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.
Aug 16 '07 #5
RedSon
5,000 Expert 4TB
onresize ?
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.
Aug 16 '07 #6
acoder
16,027 Expert Mod 8TB
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
Expand|Select|Wrap|Line Numbers
  1. var googleSearchFrameWidth = winW * .76;
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?
Aug 17 '07 #7
acoder
16,027 Expert Mod 8TB
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.
Aug 17 '07 #8
RedSon
5,000 Expert 4TB
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 %
Aug 17 '07 #9
RedSon
5,000 Expert 4TB
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?
Aug 17 '07 #10
acoder
16,027 Expert Mod 8TB
Google requries an integer not a %
Wait a minute, have you tried setting the width after the Google script?
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("googleSearchUnitIframe").style.width=winW*.76;
Aug 17 '07 #11
RedSon
5,000 Expert 4TB
Wait a minute, have you tried setting the width after the Google script?
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("googleSearchUnitIframe").style.width=winW*.76;
no ...
Aug 17 '07 #12
RedSon
5,000 Expert 4TB
Yea that doesnt work because that variable needs to be set before the request is made to google to display the search results.
Aug 17 '07 #13
acoder
16,027 Expert Mod 8TB
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?
Aug 17 '07 #14
RedSon
5,000 Expert 4TB
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.
Aug 18 '07 #15
acoder
16,027 Expert Mod 8TB
Ok so how do I refresh the page on resize to send the query again?
You can either refresh the page using
Expand|Select|Wrap|Line Numbers
  1. window.location.reload();
but that seems a bit overkill, or just send the query again to refresh the div. You would do that by finding out the new variable values and calling the script again. To run the script, you'll have to add it dynamically to the page, e.g.
Expand|Select|Wrap|Line Numbers
  1. var script = document.createElement("script");
  2. script.setAttribute("type","text/javascript");
  3. script.setAttribute("src",...);
and then append it to the body using appendChild.
Aug 18 '07 #16

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Matt | last post by:
I use CSS for positionings in my html page, the problem is when i resize the browser, the positions are offset. Here's the code, any ideas?? <html> <head> <style type="text/css">
6
by: David Hayes | last post by:
juglesh <juglesh@nospamRadioKDUG.com> wrote in "Re: how to maximize the browser window that fits the monitor size?" (Saturday, January 01, 2005 3:12 AM): > > >I want to maximize the browser...
13
by: Giggle Girl | last post by:
Hi there, I am having a problem with the behavior of Firefox, where lefthand column content is not resized properly after it is "collapsed" and then "re-expanded". An online demo is available...
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
4
by: hash4sp | last post by:
Hi ! I have a problem with my frame size. The frame is used to display results in form of html table generated dynamically. Sometimes the frame resizes its height according to the content in...
5
by: Doug Gunnoe | last post by:
I'm considering resizing a div onload to better match the screen width of the user. Easy enough, however it seems that I have read in this group that there are potential problems with this,...
3
by: =?Utf-8?B?UiBSZXllcw==?= | last post by:
Hi! This discussion may help other programmers get a better idea of how to save uploaded images through a website. Why? Well currently, I save 3 versions of every uploaded image on my own...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.