Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Google gadget width 100%

Posted on 2011-10-03
8
Medium Priority
?
292 Views
Last Modified: 2012-05-12
Adding Google Facebook gadget to my external website and need for the width to be 100%.  setting w=100% doesn't work.  I've tried setting the script ID and applying width using CSS but doesn't work.  Is it possible to get this to size width 100%?

Here's the widget: http://www.gmodules.com/ig/creator?synd=open&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F100080069921643878012%2Ffacebook.xml&lang=en
0
Comment
Question by:azyet24
  • 4
  • 4
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 36915119
you have to apply width="100%" to table which has id = "previewarea"
and for inner table also.

hope this gets you out of your problem.
0
 

Author Comment

by:azyet24
ID: 36916938
I added #previewarea {width:100%} to my stylesheet, which loads last on the page.  I was unable to identify an inner table.  I viewed source of the gadget and then looked at Google's css and didn't see anything that would be causing the widget to not expant to 100%.  It seems to be locked in on the script width value, which only accepts px numbers.
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 36917198
If you want make inner table also having width as 100%, then you can use jQuery as:

1. Include jquery js file in your project.
2. Write this code :

$(document).ready(function() {
          $('#previewarea').find("table:first").css('width', '100%');
});

It will apply width as 100% to inner table.

Hope this helps you.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:azyet24
ID: 36917277
hmm, I must be doing something wrong then b/c it still is not working.   here's the code:


 <script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#previewarea').find("table:first").css('width', '100%');
    });</script>
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/facebook.xml&up_session=&synd=open&w=100&h=200&title=&lang=en&country=ALL&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 2000 total points
ID: 36917305
Update this code:

$(document).ready(function() {
        alert('start');
        $('#previewarea').find("table:first").css('width', '100%');
       alert('Object: ' + $('#previewarea') + ' and ID: ' + $('#previewarea').attr('ID'));
});</script>

If you are getting both alerts; and second with value:
Object: [Object] and ID: previewarea

then this should work.

you can check the same in firebug in firefox.
0
 

Author Comment

by:azyet24
ID: 36917337
No I get this:

Object: [object Object] and ID: undefined
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 36922080
Can you pl share your code where exactly you put your code, so that i can check ?
0
 

Author Comment

by:azyet24
ID: 36959397
Sorry for the delay.  I was able to get this t work using an alternative approach.  On the intranet login screen I'm using javascript to capture the resolution and assinging the value to a hidden input control.  From there I read upon postback the value in code-behind and storing in cookie to use in the site.  Therefore I now know how I need to size the widget.  thanks for you help.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question