Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Cannot change table in widget generated by Javascript


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 31, 2012, 01:57 PM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
I created a widget area(#text-23 .textwidget) and placed it on a page. I added a text wigdet to the text widget area, and placed some code in it from a third party vendor. It uses Javascript to display up to the minute gas prices. My problem is that the cells of the table that is generated are all on top of one another, making it impossible to read. I used firefox to look at the generated code, and the table layout parameters show cellspacing and padding to be 0, but since it is generated within the Javascript, I am not able to change them.
I've tried CSS inserts to affect the #text-23 .textwidget selector, but to no avail. Can this be done? I am using Atahualpa 3.6.4. and the site url is ezw123.com/cheap-gas. Thanks for any help you can give me.
  #2  
Old Mar 31, 2012, 03:17 PM
juggledad's Avatar
juggledad
 
22,042 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ezw123.com/cheap-gas gets a 'Not Found'
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Mar 31, 2012, 03:19 PM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
I apologize - wrong site... it's greenvilleconcerts.com/cheap-gas
  #4  
Old Mar 31, 2012, 04:00 PM
juggledad's Avatar
juggledad
 
22,042 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Have you looked at the table using FireBug?
specifically at the table cell?
If so, did you look at ALL the CSS being applied?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Mar 31, 2012, 04:43 PM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
Yes. In the html snippet that I downloaded from a gas pricing site,

HTML Code:
<table width="100%">
<tr>
<td align="center" style="font-family:Arial; font-weight:bold; font-size:16px;">Lowest Gas Prices in<span id="tenlowest_title">&nbsp;Greenville</span>
</td>
</tr>
<tr>
<td align="center" id="gasbuddy_22783">
Immediately after the above line, it runs a Javascript script that calls the feed. The feed gets dumped into this tiny little table that looks like its ready to explode. I don't visually see a place to change the attributes for the table element.
  #6  
Old Mar 31, 2012, 07:27 PM
juggledad's Avatar
juggledad
 
22,042 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
FireBug has this nifty feature, the 'inspector'
Click image for larger version

Name:	inspect.jpg
Views:	245
Size:	16.4 KB
ID:	1810
You can point at an element and see the CSS in the right hand column. Take a look at the <TD> for the first address then look at ALL the CSS that applies to it.

oh yeah, you can click on the css and change the value part of a rule.

So...now that you have inspected the CSS have you figured it out? (The answer is worth 80% of your final grade, the other 20% will be determined by your 'buttering up' the teacher )

(You can also add new CSS by tab past the last CSS rule - but you don't need to do this to discover what is happening in this case)
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 31, 2012 at 07:45 PM.
  #7  
Old Apr 1, 2012, 10:30 AM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
Quote:
Take a look at the <TD> for the first address then look at ALL the CSS that applies to it.
I was not sure what you meant by "first address" so i looked at first <TD> in the table:
HTML Code:
<td align="center" style="font-family: Arial; font-weight: bold; font-size: 16px;">
That is for header cell, and it fits nicely. If I continue down to next table description,
HTML Code:
<table id="prices" cellspacing="0" width="413" style="border: 1px dotted rgb(172, 172, 172);">
and increase the cellspacing and the width, the text inside the cells is still illegible: it's looks like text that does not have a <br> after each line. Does that mean I need to change the line height?
I guess I am failing this course... I seem to be overlooking the code that needs to be changed to affect cell size. Is it cellpadding?
Also, I'm using Firefox 3.6.2.7 - and I always use the "inspect code tool", but the CSS on the right - should it be STYLE, COMPUTED, or DOM when working with CSS? Thanks for your tireless patience and esteemed knowledge. (REAL butter, not an imitation)
  #8  
Old Apr 1, 2012, 10:45 AM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
Well, I might have it. I changed the line height from .5 to 1.5, and the text seems to fit nicely. Last question - for now .....

How can I change the line height in code that I cannot see? Since the javascript is generating the code, would I be able to make the change in CSS Inserts? I've worked with that before, but usually run into problems with knowing how deep I have to make the CSS path.

Would starting the page div and working down to the table "Prices" be sufficient? I am going to give that a try now. Thank you for the fishing lesson.....
  #9  
Old Apr 1, 2012, 11:12 AM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
I changed the line height in ATA options/body, text, links/ to 1.5 and that did the trick. But when i added this code to CSS inserts, it changed nothing..
Code:
div#text-23 .textwidget, table#prices {
cellspacing: 10px;
width: 600px;
border: 1px dotted rgb(172, 172, 172)
}
Can you give me a hint as to why the CSS is being ignored? Table looks much better though:

http://greenvilleconcerts.com/cheap-gas

Last edited by webgurl; Apr 1, 2012 at 11:15 AM. Reason: wrong url
  #10  
Old Apr 1, 2012, 11:17 AM
juggledad's Avatar
juggledad
 
22,042 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
If you go back and look, you will see that the 'line-height' is being set as part of the CSS for 'class' of 'body'. That class is associated with the HTM:L element '<body> and since there is no other 'line-height' rule, it cascades (the first 'c' in 'css) to all it's children (of which the <td> are) on the page

So you have several options, you can set a line hight for all TD's
HTML Code:
td {line-height: 1.5em;}
or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........

(I'm giving you an A- - you found what was causing it, just not where )
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Apr 5, 2012 at 09:28 AM.
  #11  
Old Apr 5, 2012, 09:17 AM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
Quote:
Originally Posted by juggledad
....or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........

(I'm giving you an A- - youfound what was causing it, just not where )

Thank you for helping me solve this. I don't know why I set the line height to .5 in ATA options/Body/Text/Links, but at least now I realize that code in that section affects everything on the pages, and posts - including tables.

Bookmarks

Tags
table, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
No Javascript in Text Widget (adsense code) kitetheworld Sidebars & Widgets 3 Jul 3, 2011 09:25 AM
[SOLVED] Style Inside a Table: How to change H1/2/3 padding? epsymp Atahualpa 3 Wordpress theme 2 Mar 5, 2011 07:13 PM
table: change background color in one cell petevannuys Center area post/pages 1 Nov 14, 2010 08:32 PM
[SOLVED] javascript in widget not working Emanuele Sidebars & Widgets 12 May 24, 2010 03:14 PM
[SOLVED] Javascript not working in widget sidebar marj318 Sidebars & Widgets 4 Apr 30, 2010 05:59 AM


All times are GMT -6. The time now is 02:45 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.