Re: [jQuery] Re: img src replacement
Hi Glen.
I'm late to the thread (and this is probably a bit off-topic for this list)
but up until the point where you asked for the cross-fade, everything you need
can be done with vanilla CSS, no need to involve jquery at all.
In the page:
a class=available-button href=whatever.php
Currently accepting new jobs
/a
In the CSS:
div#availibilty a.available-button {
display: block;
float: right;
width: 169px;
height: 222px;
border: none;
background: url('images/avail.png) top left no-repeat;
text-indent: -3000px;
}
div#availibilty a.available-button:hover {
background: url('images/availhover.png) top left no-repeat;
}
I put up the example above using your images:
http://b.ite.me.uk/css_demo.html
One advantage to this is that it works in browsers that have javascript turned
off, and also that screen readers etc. will still see the link as text (try
looking at it in Firefox with styles turned off to get an idea what a screen
reader sees). Improved accessibility is always a good thing.
Hope this helps, if not for this (CSS can't do you a cross-fade) then maybe
other projects,
Mark
[jQuery] Re: simple jquery form plugin question
Hi David,
I was able to recreate the same problem and fixed it. Try this:
html
head
titlejQuery Form Plugin/title
style type=text/css
form { background: #DFEFFC; border: 5px solid #c5dbec; margin: 10px 0;
padding: 20px }
/style
script type=text/javascript src=../jquery-latest.js/script
script type=text/javascript src=../jquery.form.js/script
script type=text/javascript
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert(Thank you for your comment!);
});
});
/script
/head
body
form method=post action=dummy.php id=myForm
Name:input type=text value=MyName1 name=Name/
input type=submit value=Submit1 name=submitButton/
/form
/body
/html
- replace action=http://jquery.malsup.com/form/dummy.php; with:
action=dummy.php [just create a text file with dummy text in it,
name it 'dummy.php' and put in same directory as your test HTML file]
- remove the extra pair of script tags script type=text/
javascript /script - you nested your script inside two pairs of
tags - just remove one pair.
Other than that, just make sure the path to your .js files is correct,
as Brian suggested.
[jQuery] Re: anonymous function and code reusing
Mirko,
You were missing a small but significant point. The function you call
must return a function.
$('#moon').click(myFunction('param'));
$('#earth').click(myFunction('param2'));
function myFunction(param) {
return function() { alert(param); };
}
I suggest studying this pattern closely; it's one of the most powerful
aspects of Javascript.
-Kelly
On Jun 13, 9:07 am, Mirko Galassi mirko.gala...@ymail.com wrote:
Hi guys, apologize for posting again the same topic. I haven't found a
solution yet for my simple problem. I have a simple function that works when
a link is clicked $(document).ready(function(){ $(#moon).click(function(){
alert(do something); }); }); I need to reuse that function passing a
parameter so I modified the function like that $(document).ready(function(){
$(#moon).click(myFunction(param));
$(#earth).click(myFunction(param2)); function myFunction(param){
alert(param); } }); I thought it should have worked but it doesn't. In fact,
when the page has loaded even without clicking the first and second
istructions are executed: $(#moon).click(myFunction(param));
$(#earth).click(myFunction(param2)); whereas with the following case
$(#moon).click(function(){ alert(do something); }); the function need to
be activate by a click any idea? Thanks a lot c
[jQuery] Re: Clarification of the Basics
They are not the same.
The first situation, $.prompt(x), is just a function, attached to the
jQuery namespace. This is useful if you're creating a function and you
want to put it somewhere without creating a new function in the global
namespace. Beyond that, it behaves as any normal function would. For
example:
$.prompt = function(x) { ... };
jQuery.prompt = function(x) { ... };
The second situation, $(selector).prompt(x), is a jQuery plugin.
Typically it would operate on a jQuery object. A jQuery object usually
represents none-or-many matched elements. These plugins are stored in
the jQuery.fn namespace like so:
$.fn.prompt = function(x) { ... };
jQuery.fn.prompt = function(x) { ... };
Within the plugin function, this refers to the jQuery object it's
being called on. The collection of elements is often iterated over
using this.each(function() { ... }); Within that function, this will
refer to an individual matched element. To allow proper chaining, the
final statement in $.fn.prompt() should be return this;
Obviously that's a very brief explanation of how plugin functions
work. If you need more detail, seek out some tutorials on writing
jQuery plugins.
Hope that helps.
-Kelly
On May 28, 11:18 am, kiusau kiu...@mac.com wrote:
QUESTION: Do $.prompt(temp) and $().prompt(temp) mean the same
thing? If they do not mean the same, how are they different.
Roddy
[jQuery] Re: Issues with my Dynamically Placed Table
Rather than building all the table HTML in a string and appending
that, you will have better luck if you start like this:
var $table = $('table/table');
Now, you want to add your heading row. It appears from your code that
you added the th without enclosing in a tr. I'll assume you meant
to do that. At this point, now that you have a handle on your table
element, you can continue to add via strings or by building jQuery
objects:
$table.append('trth.../th/tr');
And continue building your table rows using the function you have:
$table.append(buildItemHTML(...));
Loop that, or whatever. Assuming that all the additions are complete
rows, there is no need to close the table tag, since you've appended
inside of the table/table you started with. At this point, $table
contains your complete DOM structure for your table, and you just add
it to your page the same way you did:
$('#container').append($table);
You'd used two line breaks after it, presumably for spacing. You have
a couple of options when you append:
$('#container').append($table,'br /br /');
$('#container').append($table).append('br /br /');
These are roughly the same, but the first method is probably more
preferable. This demonstrates that you can mix jQuery objects and
strings of HTML similar to the above where you built a jQuery object
representing the table but appended strings of HTML inside to build
the rows.
Another alternative would be to use CSS to add a margin-bottom to the
table instead of the (probably non-semantic) line breaks.
$('#container').append($table);
$table.css('marginBottom','2em');
This is another advantage of having a reference to $table ... you can
modify it's CSS at any point in your code; before, after or at once:
$('#container').append($table.css(...));
Ok, now you've got the table into the DOM on the page. Here's a method
for adding your zebra stripes:
var even = false;
$table.find('tr').each(function() {
if (even) $(this).addClass('even');
even = !even;
});
This will add the class even to every other table row. Then you can
use a css rule to style it:
table tr.even { background-color: gray; }
The beauty of this is that there is no particular order. You can add
the classes before appending the table to the DOM. As long as $table
is in scope you can manipulate this structure whether it's been
appended to the page or not. Many possibilities!
-Kelly
On May 28, 9:35 am, RachelG rachelgat...@gmail.com wrote:
Hey Everybody!
I'm having an issue that I really hope some nice person can give me a
hand with. I am pretty new to Jquery and I'm really getting confused.
I am currently working on this page:
http://www.empirepatiocovers.com/MetroBlack-Patio-Covers1.aspx (FYI:
a lot of the page functionality does not work. We will be adding
proper functionality eventually)
There is a dynamically placed table that is pulling data from our XML
sheet. This works beautifully. However the page needs to ultimately
look like this:
http://www.empirepatiocovers.com/MetroBlack-Patio-Covers.aspx
See how the table background colors alternate? There is an even and
an odd css class that is being applied to alternating tr's. I found
a code that would apply that effect, in this
article:http://blog.jquery.com/2006/10/18/zebra-table-showdown/, but that
script is being applied to a table that is already on the page. Since
ours is being build dynamically, this script is not working for us.
Essentially what I need to do is create some kind of event handler or
an event listener applies the alternating css classes once the table
is finished loading. I understand the logic, but I don't know how make
it work.
I have been trying to figure out a solution for about 3-4 hours now
but I have hit a wall. Even my friend, who is an experienced developer
can't figure this one out. He said the only other solution he can
think of is to determine what tables are going to be even and odd in
my XML and get my .js file to call that. I don't have a problem doing
this, but I know it will be very tedious considering my XML sheet
contains all of our products, and I'd like to find an easier way to do
it.
This is the link to my .js file:
http://www.empirepatiocovers.com/javascript/readXML.js
I really appreciate everyone's help and look forward to some
responses! Thanks so much!
- Rachel
[jQuery] Re: How to convert csv file to json
Brian said that JSON uses a key:value format, but it is really just a
shorthand for Javascript literals. Which means you can easily
represent ordered lists like CSV data as well:
[ [ 'c', 's', 'v' ], [ 'c', 's', 'v' ], ... ]
To get around the cross-domain restrictions and to solve your
conversion issue, maybe you should write a script on the server that
pulls the data, caches it, and writes out JSON.
Assuming you were using PHP on the server, and assuming the PHP
settings allow fopen wrappers for URLs, this would be pretty easy:
define('DATA_FILE','data.json'); // must be writable
if (file_exists(DATA_FILE) and filemtime(DATA_FILE) (time() - 900))
readfile(DATA_FILE);
else {
$fh = fopen('http.../yoururl/data.csv','r');
$rows = array();
while($rows[] = fgetcsv($fh)) { }
$json = json_encode($rows);
file_put_contents(DATA_FILE,$json);
echo $json;
fclose($fh);
}
I didn't test this code but it should be pretty close.
On May 20, 7:45 am, brian bally.z...@gmail.com wrote:
There's quite a difference between the two. JSON uses a key: value
format, while CSV is generally value only
On Wed, May 20, 2009 at 6:28 AM, Nitin Sawant nitin.jays...@gmail.com wrote:
How to convert csv file to json using jquery / javascript??
[jQuery] Using Google's Code Repo
I just started using google's code repo to call JQuery on my sites. It was recommended by a number of people, including John Resig (on TWiT); I'm having an issue though, and I'm wondering if it's just me. about one in a hundred times it just doesn't load at all; and on some configurations, it was as high as 1 in 10. not loading jQuery breaks a great deal of my javascript, and I'm going to have to go back to self-hosting the library. The specific configuration that it's not loading consistently is this: Firefox 3 Windows, On a small office network (5 computers) with a cable broadband connection; I've also seen it on FF3 OSX and Safari OSX
[jQuery] Re: New plugin: simplyScroll
Have added a new complex markup example http://logicbox.net/jquery/simplyscroll/custom.html On Feb 19, 1:13 am, Will Kelly willrke...@gmail.com wrote: Great stuff, let me know how it goes! Will On Feb 18, 11:06 pm, Daniel dcosta...@gmail.com wrote: Wonderful! I plan to use this on the redesign of hodgesfarmequipment.com! Thank you, bookmarked! On Feb 18, 2:41 pm, Will Kelly willrke...@gmail.com wrote: Hi Just released a plugin for some code I've been working on and off for the past few months. It's a simple content scroller that can accept images as well as more complex content and features an 'infinite' scroll mode as well as image data from Flickr. Plug-in:http://logicbox.net/jquery/simplyscroll/ Blog post:http://logicbox.net/blog/simplyscroll-jquery-plugin Would love feedback etc, also would be interested to know how I can detect Safari/Chrome (webkit), now that I can't use $.browser! Cheers Will
[jQuery] [ANN] New plugin: simplyScroll
Hi Just released a plugin for some code I've been working on and off for the past few months. It's a simple content scroller that can accept images as well as more complex content and features an 'infinite' scroll mode as well as image data from Flickr. Plug-in: http://logicbox.net/jquery/simplyscroll/ Blog post: http://logicbox.net/blog/simplyscroll-jquery-plugin Would love feedback etc, also would be interested to know how I can detect Safari/Chrome (webkit), now that I can't use $.browser! Cheers Will
[jQuery] Re: New plugin: simplyScroll
Great stuff, let me know how it goes! Will On Feb 18, 11:06 pm, Daniel dcosta...@gmail.com wrote: Wonderful! I plan to use this on the redesign of hodgesfarmequipment.com! Thank you, bookmarked! On Feb 18, 2:41 pm, Will Kelly willrke...@gmail.com wrote: Hi Just released a plugin for some code I've been working on and off for the past few months. It's a simple content scroller that can accept images as well as more complex content and features an 'infinite' scroll mode as well as image data from Flickr. Plug-in:http://logicbox.net/jquery/simplyscroll/ Blog post:http://logicbox.net/blog/simplyscroll-jquery-plugin Would love feedback etc, also would be interested to know how I can detect Safari/Chrome (webkit), now that I can't use $.browser! Cheers Will
[jQuery] Tablesorter Plugin and widgets
I'm working on Christian Bach's tablesorter.
I've made a widget that can select rows, and now I want to make a
widget that can delete rows, and have a callback.
The problem is the callback.
The widgets are called like this
$.tablesorter.addWidget({
// give the widget a id
id: selectRows,
// format is called when the on init and when a sorting has
finished
format: function(table)
{
$(tbody tr,table).click(function(e){
row = this;
if($(row).hasClass('selectedRow'))
$(row).removeClass('selectedRow');
else
$(row).addClass('selectedRow');
});
}
});
$.tablesorter.addWidget({
// give the widget a id
id: deleteRows,
// format is called when the on init and when a sorting has
finished
format: function(table)
{
if($(tfoot,table).length)
{
//add the foot
$(table).append(tfoot/tfoot);
}
//add a row.
$(tfoot,table).append(tr class=\deleteRow\a
href=\#\
class=\deleteRows\Delete selected entries/a);
$(.deleteRows).click(function(){
$(.selectedRow,table).each(function(){
$(this).remove();
///I WANT A CALLBACK HERE
});
});
}
});
$(table).tablesorter({
widgets: ['selectRows','deleteSelected']
});
So, the widgets are called via a text array. How could I add a
callback to a widget?
[jQuery] Re: Jcrop v0.9.0 image cropping plugin - comments please
I wanted to use jQuery UI but the docs site was down :-) At the end of the day, I don't think potential consumers of plugin(s) should be too concerned whether there's an additional few KB of script loaded on a page which duplicates a functionality already available in another loaded library. Not as concerned as they should be about how the end-user experience is, especially when it's all running together. In other words, I would be concerned if there was a performance degradation to using both. Absent that, I would evaluate on end-user factors, or other developer concerns, if any. This is what I was saying to Jose...which one you should use ought to be based on which one does what you want it to do better, and then think about things like ease-of-implementation. In my view, the spectre of bandwidth or memory efficiency is not an issue on this scale per se. I'm eager to see a solid demo of cropping using the UI libraries. Then I'd like to see one with all the same interface features (dragging from edges, animated ant-lines, etc). I'm not saying all those features are necessary for a cropping tool, or even desirable to everyone...I'm just saying, we've got to be able to compare apples to apples. Regardless of bells and whistles, I think this type of interface is valuable now and will be more valuable over time as more sites implement more advanced interfaces and features. UI should have something better than that existing demo. I'm a big proponent of re-use, so I really appreciate this discussion about the UI library. I am more motivated to go investigate how I could utilize it here. Though I would expect that UI generally has everything over my engine in terms of features and design, I have a very specific use and it may be one case where the extra few kilobytes of homebrew engine actually beats the performance overhead of a bigger library, I don't know. But, I do plan to do some experiments in the lab... Maybe when that docs site comes back up! :-) Thanks again, RDW et al. -Kelly On Sep 18, 3:35 am, Richard D. Worth [EMAIL PROTECTED] wrote: Yes, both do. JCrop has an aspectRatio option. You specify a decimal, or a ratio (16 / 9 for wide, or 1.0 for square). See http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options jQuery UI Resizables has a similar option (same key - aspectRatio). If specified as a boolean/true it will maintain the original aspect ratio. Or you can specify it as a number. Also if the aspectRatio option is not set, you can hold the shift-key down while resizing and a square ratio will be enforced. See http://docs.jquery.com/UI/Resizables/resizable#options(click on the options tab) - Richard On Wed, Sep 17, 2008 at 3:27 PM, Sam Sherlock [EMAIL PROTECTED]wrote: Please forgive me if this has been raised before (I may have missed it) but do either of these plugins have a contrained aspect ratio feature 2008/9/17 Richard D. Worth [EMAIL PROTECTED] On Wed, Sep 17, 2008 at 10:37 AM, Kelly [EMAIL PROTECTED] wrote: Thanks Richard W. And thanks to everyone who has commented. I am glad that most of the issues raised have been purely philosophical. :) Jose, please use whatever plugin you feel is best suited for you needs. The whole purpose of a plugin is you don't need to worry about what's inside. If you have a conviction that you want to use jQuery UI somewhere, please do. Both good points. I've seen that jQuery UI-based cropping demo and frankly it's broken. I don't think that's jQuery UI's fault, but it does not make a very compelling demo. Nor does the demo include documentation, downloads, or anything else I can see. Agreed. Though I didn't author that demo, I've been meaning to fix it up for some time. Seeing what you've done has re-inspired me. Surely jQuery UI could have been used, but I was not/am not familiar enough with it. Therefore, I cannot comment if it would actually benefit more than my coding time. I also wanted to minimize the codebase and dependencies. I do plan to experiment with the UI libraries. If they prove beneficial, a future release may use it. Or, I may incorporate some of UI's optimizations in my own code, if applicable. Either way, :-) As with the naming (e.g. Jcrop vs. jCrop), these are issues I considered a lot. It's very possible that I made some wrong choices. This is the first time I've ever seen lack of a dependency as a detriment to someone. If someone is already using jQuery UI it's a bit reversed, as the duplication/dependence on additional code would be coming from your plugin, not the other way around. Of course it goes further than just code size. Not to say there's no place for Jcrop. There will always be a place for stand-alone plugins. But jQuery UI could really benefit from having available such a stellar image crop plugin as well. I'll take a crack at merging some bits of what you've done with what jQuery UI has
[jQuery] Re: Jcrop v0.9.0 image cropping plugin - comments please
Thanks Richard W. And thanks to everyone who has commented. I am glad that most of the issues raised have been purely philosophical. :) Jose, please use whatever plugin you feel is best suited for you needs. The whole purpose of a plugin is you don't need to worry about what's inside. If you have a conviction that you want to use jQuery UI somewhere, please do. I've seen that jQuery UI-based cropping demo and frankly it's broken. I don't think that's jQuery UI's fault, but it does not make a very compelling demo. Nor does the demo include documentation, downloads, or anything else I can see. Surely jQuery UI could have been used, but I was not/am not familiar enough with it. Therefore, I cannot comment if it would actually benefit more than my coding time. I also wanted to minimize the codebase and dependencies. I do plan to experiment with the UI libraries. If they prove beneficial, a future release may use it. Or, I may incorporate some of UI's optimizations in my own code, if applicable. As with the naming (e.g. Jcrop vs. jCrop), these are issues I considered a lot. It's very possible that I made some wrong choices. This is the first time I've ever seen lack of a dependency as a detriment to someone. Ultimately, I choose plugins based on other factors. -Kelly On Sep 17, 4:41 am, Richard W [EMAIL PROTECTED] wrote: Very very nice thank you Kelly. RE ui debate: i haven't taken a look a the code of this plugin, but from a users experience it does seem to have smoother dragging than the jQ UI example. On Sep 16, 7:22 pm, Jose [EMAIL PROTECTED] wrote: thanks. I am a bit confused which one should I use. I think some plugin authors should be encouraged to go the UI way, if the advantages are clear. Maybe the author can comment why he didn't pick UI as the base to build the plugin regards jose On Mon, Sep 15, 2008 at 9:38 PM, Richard D. Worth [EMAIL PROTECTED] wrote: jQuery UI could be used (thought it isn't in this case) to make a crop component like this. You would make use of three lower-level interaction plugins: Mouse (internal, in ui.core.js) Draggables (ui.draggable.js, builds on mouse) Resizables (ui.resizable.js, builds on mouse) So there's a bit of overlap. Here's a very simple demo of one done in that way: http://ui.jquery.com/repository/real-world/image-cropper/ The other thing that jQuery UI would offer a plugin like this is a widget plugin system that abstracts out some common elements like defaults, options, method calls, getters/setters. I think it would quite interesting. - Richard On Mon, Sep 15, 2008 at 2:00 PM, Jose [EMAIL PROTECTED] wrote: hi, how does the plugin compare to the functionality in UI ? thanks and regards, jose On Tue, Sep 9, 2008 at 11:35 PM, Kelly [EMAIL PROTECTED] wrote: Announcing initial release of Jcrop image cropping plugin for jQuery. This is my first plugin release, so I would appreciate any feedback. http://deepliquid.com/content/Jcrop.html Also posted to plugins.jquery.com There are some rough edges in the API and a few other minor issues. More work to do before 1.0, but what's there is pretty functional. I needed to push it out or I'd keep tinkering forever... Thanks for looking! -Kelly
[jQuery] Jcrop v0.9.0 image cropping plugin - comments please
Announcing initial release of Jcrop image cropping plugin for jQuery. This is my first plugin release, so I would appreciate any feedback. http://deepliquid.com/content/Jcrop.html Also posted to plugins.jquery.com There are some rough edges in the API and a few other minor issues. More work to do before 1.0, but what's there is pretty functional. I needed to push it out or I'd keep tinkering forever... Thanks for looking! -Kelly
[jQuery] Re: .click( ) event causes anchor-like jump
Have you tried adding return false; ?
On Aug 13, 3:40 pm, cdawg [EMAIL PROTECTED] wrote:
Hello Everyone,
I am creating a .click() event for a TR, and then i show a row that is
corresponding directly below it. The problem is that when the event
fires, the browser jerks down as if the TR i clicked on was an anchor
and goes to the TR. I do not want any behaviour like this, I just want
it to open and the browser to stay looking at what its looking at.
Code is as follows:
$(.event_heading).click(function(e) {
e.preventDefault();
e.stopPropagation();
//Get the id
var id = $(this).attr(id);
//toggle the event
toggleEvent(id);
});
e.preventDefault(); and e.stopPropagation(); dont seem to have any
effect on this.
the toggleEvent(id) function grabs a TR from an external source,
inserts it directly below the heading with the given id and then
calls .show()
any help would be greatly appreciated! Thanks in advance
[jQuery] Re: jquery ajax post not working
Hi Tom,
I think you are missing dataType = 'html' ... The manual says If none
is specified, jQuery will intelligently pass either responseXML or
responseText to your success callback, based on the MIME type of the
response. I suspect it's intelligently guessing wrong.
This is a much easier way to do what you're trying to do:
$('#ccol24').load('addLinks.php',{ url: url, title: title });
If you need a further 'success' callback, you can add one as the third
argument.
The only drawback to that shortcut is that you can't set an error callback.
Hope that helps.
-K
Tom Shafer wrote:
I am trying to use ajax post to simply send a form field to php and
return it to a div
Here is what I have
$(document).ready(function(){
$(#addLinks).submit(function() {
$.ajax({
url: 'addLinks.php',
type: 'POST',
data: {
url: $(#url).val(),
title: $(#title).val()
},
error: function () { alert('Error adding link'); },
success: function (data) { $(#contentcol4).append(data); }
})
});
});
the php file contains ? echo $_POST['url'];?
i keep getting a error of
This XML file does not appear to have any style information associated
with it. The document tree is shown below.
im not sure what to do, I am new to this
Thanks
[jQuery] Re: AJAX not working
Jay, could this be it? When I go to this URL I get an error: http://bttt.bidding-games.com/setBothBids.php?id=16player1=500player2=500 Since you're using $.get() you can just view a URL as above, and see what php is sending back. If it's not the JSON data you're expecting, that is probably why the alert is not firing. -K jbhat wrote: Okay, i got my code up and running on http://bttt.bidding-games.com/game.php when you type something in the bid box, and hit enter, we get a post firing to setBothBids.php. However, the alert in this function's callback is not firing. Why? Thanks, Jay
[jQuery] Superfish breaks if you replace the inner structure
Ok, so I have a CMS, and it uses Superfish for (most, not all) of the navigation. Every so often (on specific actions by admin) the inner structure of the navigation is tossed about. With superfish enabled, it breaks my navigation, and I can only get to the top level items, anything hidden in a dropdown is gone.
[jQuery] IE6,7,8b Transparency with Fade causes problems.
Ok, in IE the Fade: option is not working at all for me, it causes blank or non-existent images to be rotated in, This happens if I say True, or put a numerical value in, it doesn't matter. Fade works fine in FF
[jQuery] Re: Complex(ish) table formatting code not working in Firefox 2
Deamach thanks for looking, In the screen shot you posted it definately appears wrong. please take a look at the page with the firefox win fix. http://www.logicbox.net/jquery/pricetable/index2.html The second table should have a thick blue border around the body. W On Jul 17, 7:17 pm, Daemach [EMAIL PROTECTED] wrote: It's working fine here (ss attached). Try refreshing your cache. If you are using Firefox, occasionally you have to force it. Try using this addon: https://addons.mozilla.org/en-US/firefox/addon/1801 Then reload the page using ctrl-shift-r. On 7/17/07, Will Kelly [EMAIL PROTECTED] wrote: Screenshot from FF2 here http://www.logicbox.net/jquery/pricetable/screen.jpg On Jul 17, 2:15 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: I second Erik on this, can you elaborate on your issue? Maybe send a screen shot of what you are getting? tableprice.jpg 152KViewDownload
[jQuery] Re: Complex(ish) table formatting code not working in Firefox 2
Can anybody confirm if this is a bug? It looks like it to me!
Here's the code...
(function($) {
$.fn.priceTable = function () {
return this.each(function() {
$(thead td:first, this).addClass('js-ptd');
$(thead th:last, this).addClass('js-rtd');
$(tbody th, this).addClass('js-ltd');
$(tbody tr:first td, tbody tr:first
th,this).addClass('js-ttd');
$(tbody tr, this).each(function() {
$(td:last, this).addClass('js-rtd');
$(td:odd, this).addClass('js-bgtd');
});
$(tbody tr:last td, tbody tr:last
th,this).addClass('js-btd');
});
};
})(jQuery);
$(function() {
$(table.prices).priceTable();
});
On Jul 16, 1:37 pm, Will Kelly [EMAIL PROTECTED] wrote:
Hi,
Not sure if this is a bug or not, but Firefox seems not to properly
apply a series of class names.
Here's the examplehttp://www.logicbox.net/jquery/pricetable/short-css.html
with a 'console.log' to fix the firefox
rendering.http://www.logicbox.net/jquery/pricetable/short-css-firefox-fix.html
Thinking that this might be to with specificity I did a version with
more verbose
CSS.http://www.logicbox.net/jquery/pricetable/verbose-css.htmlhttp://www.logicbox.net/jquery/pricetable/verbose-css-firefox-fix.html
Again the same problem crops up in Firefox. They all work fine in
IE6/7, Safari 3beta etc.
Very odd, any ideas? This one's been annoying me for a while now!
Thanks,
Will
[jQuery] Re: Complex(ish) table formatting code not working in Firefox 2
Erik thanks, Just had a friend test on Firefox 2 on Mac OS X, and he had no problem, are you on the same platform? I think possibly it's a Windows issue only. Created new example pages to better demonstrate. This page: http://www.logicbox.net/jquery/pricetable/index1.html The top table is unmodified and the bottom one should be in should be fully jqueried up. However in Firefox 2 (2.0.0.4 here, not sure about 1 or 1.5etc) the border styles around the td's/th's in the table body aren't rendered (though the class names are correctly applied). On this page (with Firebug installed): http://www.logicbox.net/jquery/pricetable/index2.html It renders it correctly with a console.log($(table.prices1)) 'hack'. Will On Jul 17, 12:37 pm, Erik Beeson [EMAIL PROTECTED] wrote: I'm not sure what problem you're having. The pages appear to render identically in FF and Safari... What about it do you think isn't working right? In looking through the generated source in firebug, it appears that all of your classes are getting added to the correct elements... Actually, upon closer inspection, there is a small 1px white line between the column headers in FF that isn't in Safari, but it isn't bad, and is probably the result of a rendering difference between the browsers, not a jQuery issue. --Erik On 7/16/07, Will Kelly [EMAIL PROTECTED] wrote: Hi, Not sure if this is a bug or not, but Firefox seems not to properly apply a series of class names. Here's the example http://www.logicbox.net/jquery/pricetable/short-css.html with a 'console.log' to fix the firefox rendering. http://www.logicbox.net/jquery/pricetable/short-css-firefox-fix.html Thinking that this might be to with specificity I did a version with more verbose CSS. http://www.logicbox.net/jquery/pricetable/verbose-css.html http://www.logicbox.net/jquery/pricetable/verbose-css-firefox-fix.html Again the same problem crops up in Firefox. They all work fine in IE6/7, Safari 3beta etc. Very odd, any ideas? This one's been annoying me for a while now! Thanks, Will
[jQuery] Re: Complex(ish) table formatting code not working in Firefox 2 [windows bug?]
Ouch rather annoyingly googlegroups ate my reply!.. Erik thanks, I got a friend to test on FF2 on Mac OS X and he had no problems, are you on the same platform? I think possibly it's a FF Windows issue. To clarify this problem ive done a couple of new examples. http://www.logicbox.net/jquery/pricetable/index1.html Top table is unmodified, bottom one has is jqueried, however in FF2 Win (2.0.0.4 here, not tested on 1/1.5) it does not correctly render the border on the td's/th's within the tbody (though the classnames are correctly applied). http://www.logicbox.net/jquery/pricetable/index2.html This works on FF2 (with Firebug). I've applied the 'fix' console.log($ (table.prices1)) Will On Jul 17, 12:37 pm, Erik Beeson [EMAIL PROTECTED] wrote: I'm not sure what problem you're having. The pages appear to render identically in FF and Safari... What about it do you think isn't working right? In looking through the generated source in firebug, it appears that all of your classes are getting added to the correct elements... Actually, upon closer inspection, there is a small 1px white line between the column headers in FF that isn't in Safari, but it isn't bad, and is probably the result of a rendering difference between the browsers, not a jQuery issue. --Erik On 7/16/07, Will Kelly [EMAIL PROTECTED] wrote: Hi, Not sure if this is a bug or not, but Firefox seems not to properly apply a series of class names. Here's the example http://www.logicbox.net/jquery/pricetable/short-css.html with a 'console.log' to fix the firefox rendering. http://www.logicbox.net/jquery/pricetable/short-css-firefox-fix.html Thinking that this might be to with specificity I did a version with more verbose CSS. http://www.logicbox.net/jquery/pricetable/verbose-css.html http://www.logicbox.net/jquery/pricetable/verbose-css-firefox-fix.html Again the same problem crops up in Firefox. They all work fine in IE6/7, Safari 3beta etc. Very odd, any ideas? This one's been annoying me for a while now! Thanks, Will
[jQuery] Re: Complex(ish) table formatting code not working in Firefox 2
Screenshot from FF2 here http://www.logicbox.net/jquery/pricetable/screen.jpg On Jul 17, 2:15 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: I second Erik on this, can you elaborate on your issue? Maybe send a screen shot of what you are getting?
[jQuery] Complex(ish) table formatting code not working in Firefox 2
Hi, Not sure if this is a bug or not, but Firefox seems not to properly apply a series of class names. Here's the example http://www.logicbox.net/jquery/pricetable/short-css.html with a 'console.log' to fix the firefox rendering. http://www.logicbox.net/jquery/pricetable/short-css-firefox-fix.html Thinking that this might be to with specificity I did a version with more verbose CSS. http://www.logicbox.net/jquery/pricetable/verbose-css.html http://www.logicbox.net/jquery/pricetable/verbose-css-firefox-fix.html Again the same problem crops up in Firefox. They all work fine in IE6/7, Safari 3beta etc. Very odd, any ideas? This one's been annoying me for a while now! Thanks, Will
[jQuery] Re: dev tip: combining JS script files
This might be of interest. A php implementation for caching and combining js/css files http://www.ejeliot.com/blog/73
[jQuery] Re: Best practice for image source change
I wrap each thumbnail with a link:
a href=javascript:; id=tnLink01img src=thumbnail01.jpg
alt= //a
This is the amateurish jQuery code I've conjured up:
$(a#tnLink01).click(function() {
$(#mainImage).attr({src:another_large_image.jpg});
});
I'll need one of these functions for every thumbnail and that seems
wrong somehow, so I'd really appreciate any helpfil tips and
strategies for switching a larger image when clicking thumnails.
You could make your css query less specific.
You could also automatically generate a large image url based on the content
of your thumbnail ie.
$(div.thumbnails img).click(function() {
var large_img = $(this).attr('src').split(.).shift() + '_large.jpg'
//gets image src part before period, adds suffix
$(#mainImage).attr('src'.large_img);
}
Above example is simple and assumes image on has 1 period in it!
Hope that helps,
Will
