[jQuery] Re: Fading text in/out (like a text slideshow)
I've solved this myself (a good night's sleep always helps!). Posting
results here for anyone interested.
The trick was understanding the callback option in fadeIn, which
didn't work as I'd expected (no parameters allowed; it doesn't really
call the function, just passes the function name to something within
jQuery). I used a global variable to track things (boo hiss, but ok
since I couldn't pass the counter). As a result this isn't really a
recursive function, despite the appearance.
Here's my code. Prior to this I set up an array, myQuotes, which
contains the strings to display. HTML code is included in each array
element to provide formatting, so this could likely be used for images
too.
var quoteCounter = 0;
var totalQuotes=myQuotes.length;
function setNext()
{
if (quoteCounter=totalQuotes) {quoteCounter=0;}
$('#animatedQuotes').html(myQuotes[quoteCounter]).fadeIn(1000).fadeTo
(1, 1).fadeOut(1000, setNext);
quoteCounter++;
}
$(document).ready(function() {
setNext();
});
On Apr 27, 9:38 pm, Mitch Cohen mitchellsco...@gmail.com wrote:
I have a small portion of a page which will contain a set of animated
text snippets. Item one will appear immediately, then fade out; item
two will fade in, pause, then fade out, etc. At the end of the
sequence item one will appear again repeating forever. It's basically
a slideshow of styled HTML text.
I'm hoping to keep this simple, without the need for a big slideshow
plugin.
I wrote this:
$('#animatedQuotes').html(number one).fadeIn(2000).fadeTo(5000,
1).fadeOut(1000).html(number two).fadeIn(2000);
When this line is hit, the DIV changes to number two immediately.
Number two fades out and back in again as you'd otherwise expect.
How can I sequence this properly? I tried a a recursive callback from
the fadeOut, but apparently that's not something we can do (Javascript
threw an error).
Thanks!
[jQuery] Fading text in/out (like a text slideshow)
I have a small portion of a page which will contain a set of animated
text snippets. Item one will appear immediately, then fade out; item
two will fade in, pause, then fade out, etc. At the end of the
sequence item one will appear again repeating forever. It's basically
a slideshow of styled HTML text.
I'm hoping to keep this simple, without the need for a big slideshow
plugin.
I wrote this:
$('#animatedQuotes').html(number one).fadeIn(2000).fadeTo(5000,
1).fadeOut(1000).html(number two).fadeIn(2000);
When this line is hit, the DIV changes to number two immediately.
Number two fades out and back in again as you'd otherwise expect.
How can I sequence this properly? I tried a a recursive callback from
the fadeOut, but apparently that's not something we can do (Javascript
threw an error).
Thanks!
[jQuery] Re: The Mitchies. Rating the Best GUI Plugins
I am so pleased you took the time to look closely at my project. Your analysis is perfect, but I do have some questoins below. Some may sound dumb because I am so new to all this. On Aug 29, 10:48 pm, Pops [EMAIL PROTECTED] wrote: Mitch, I have to say - excellent job, very nice. I do have some comments, and this is not just you but nearly all the web 2.0 sites: - No Javascript Since it depends on JavaScript, and you don't want to make it work in web 1.0, then add the following: noscript This site requires JavaScript to be enabled! /noscript That is easy to fix and I will add it. There was some thought I might create a version that did require JS but I can see now that is the impossible dream. It is really odd to see a site go gun-ho with a fancy like web 2.0. It must it taking alot of work, yet, they don't do some basic fundamentals. - Font Size Scaling Don't assume one size fits all. For me, my eyes are not like it use to be. So many times I hit ctrl + a few times to increase the size.. Many sites don't scale correctly when the fonts change. Plus, it really looks fantastic to be able to increase the web site font size on a large flat screen! You would be able to demo your web site and people see it from a distance. :-) I have the same complaint about sites using fonts that are too hard to read. Honestly I have not been thinking about eyes and I better start today. Can you offer any words of wisdom on what I need to do to scale well. Does it mean using ems instead of points? I dont know much about ems and not sure I understand them enough to do it right. What happens when the font is too big for its container? Like I didnt design the tabs or accordion and I dont know how to scale them. For your web site, 1) why restrict the width size? Make it work with 2 4 or 5% left and width margins. I definitly want to restrict the width because this is a control panel like environment, not a web site. Its more like Flash. I need to know where text is precisely for this to work. That is why the height is fixed too. 2) You will see the run off in tab 1 if you don't auto-fit the content. What do you mean here but run off How do I see that? 3) Tab 2 is all messy when the font size has changed. More below with tab 2. I just did moved the font size around and I am surprised at how little is wrong with it. I didnt know that radio buttons owuld enlarge when you make the font larger but of course that makes sense now. I dont see how I can do that if the width is fixed. 4) Tab 3 is perfect, It scales correctly (but will look better if the width was wider). It better look good. All that is there is a single paragraph of text. About tab 2, very nice looking, but there is so much. The whole goal of this was to get it on one screen so that is why its the way it is. I probably have gone a little overboard but I cant get rid of a lot of stuff on that page and still have it make sense. - Make it work in full screen! This is a debatable issue. I think full screen would look weird but I am open to seeing it. - Maybe another tab? You could put History on another tab, but the beauty is allowing people with large screens see it all. To be honest if I had to do this all over again I might use a drag and drop front end where the user could decide what to move and where to put it. I could hide the radio buttons in a drop down menu. - Make the location an accordion too? - How about group it by region - North East States - Mid East States - South East States - North Central States - Mid Central States - South Central States - North West States - Mid West States - South West States Or just North, Mid, South or East, Central, West. If you used region it might work nice as an accordion. I dont see how to do that with locatoin by state, and keep in mind that the user often selects more then one location (pacific coast, california, oregon). Other than that - Great job! Thanks that is kind of you, given all the stuff I got wrong. Mitch -- HLS On Aug 29, 6:21 pm, Mitch [EMAIL PROTECTED] wrote: The Mitchies. Rating the Best GUI Plugins My interface is an example of what a novice non programmer can do using jQuery and a number of its best plugins. The goal was to build a GUI that contained a large number of web 2.0 features, meaning controls that gave a desktop experience inside the browser. Besides wanting to upgrade my very popular avian search engine (http://www.whatbird.com), I wanted to see how far I could go, how many controls could I use to make my GUI inviting and modern. I also wanted to see how such a GUI would work in the various browsers, such as IE and FF. I wanted to see how fragile javascirpted web 2.0 pages were. I stumbled upon jQuery and instantly saw its value. Then I dived
[jQuery] The Mitchies. Rating the Best GUI Plugins
The Mitchies. Rating the Best GUI Plugins My interface is an example of what a novice non programmer can do using jQuery and a number of its best plugins. The goal was to build a GUI that contained a large number of web 2.0 features, meaning controls that gave a desktop experience inside the browser. Besides wanting to upgrade my very popular avian search engine (http://www.whatbird.com), I wanted to see how far I could go, how many controls could I use to make my GUI inviting and modern. I also wanted to see how such a GUI would work in the various browsers, such as IE and FF. I wanted to see how fragile javascirpted web 2.0 pages were. I stumbled upon jQuery and instantly saw its value. Then I dived in. The resulting project was an inspiration to me because of how much I could accomplish with so little code. I had to become familiar with a large number of topics that were very technical, but I had a lot of hand holding and help from thejQuery community. Below I have listed the plugins I have used in the whatbird GUI. Three stand out. I have given links to these so you can go get the plugin and try it. But you can see how it works right here by just going to the tab above calledSearch. I decided to give each plugin my own mitchie which is essentially my own plugin rating from 1 to 5 like the kind you see on Amazon. The winners are cycle from Mike Alsup, tabs by Klaus Hartl and accordian by John Resig. You can see the details and winners here: http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html Thanks Mike, Klaus and Dan. Mitch
[jQuery] Re: Not Blowing My Own Horn jQuery Super GUI Example
Thanks for the complicment James. It might look good but its held together with tape and paperclips :) Its interesting how focused this group is on the plugins and the visual capability of jQuery but there are so few examples of using that power. Why is that? I hope more people step up to the plate and show how they use jQuery to raise the bar on GUIs. On Aug 28, 6:43 am, Priest, James (NIH/NIEHS) [C] [EMAIL PROTECTED] wrote: -Original Message- From: Mitchell Waite [mailto:[EMAIL PROTECTED] This interface is an example of what a novice non programmer can do using jQuery and a number of its best plugins. The Wow - that's really slick for a not-too-long-ago jQuery dummy! :) Keep us posted as you complete it! My co-workers are probably wondering what in the heck I'm doing in here with all these bird sounds!! :) Jim
[jQuery] Re: Can I load HTML with jQuery code into another HTML/jQuery page?
Please ignore this, I didnt mean to pose it here. On Aug 22, 3:27 pm, Mitchell Waite [EMAIL PROTECTED] wrote: This might be really dumb but I have an HTML page with jQuery and css in it. I want to know if I can load this into another page into a container without creating problems with conflicting css. My reason for this is simple. I want to be able to build and test a page of HTML and jQuery that will be used in a larger jQuery project and its getting too hard to work on it. I want to make sure this page looks right before its loaded so I need the js, css and so on to be in its head. I am concerned that I will be creating multiple head and body tags in the larger project. Mitch
[jQuery] Re: Karl, cluetip questions: Select IE6 bug ETA, and incorporating JTIP?
Man thats great customer service. I will put a high rating on your satisfaction survey :) I'm not home right now so I can't test the performance of the custom demo but will let you know. On the custom demo if you alternate between the two example links, eventually the left link developes a gap between the arrow and the frame in IE7. You really need to bang on IE7 karl, its the dominant browser as you well know. Oh and I know I can make them smaller, I was just trying to get you to see that your samples will be more effective if they where representing the real size one woud use them for, I have found that large tool tips are a really bad idea - they make the UI very confusing. But I am going to convert to ClueTips and evangelize them from now on. On Aug 22, 6:21 pm, Karl Swedberg [EMAIL PROTECTED] wrote: On Aug 22, 2007, at 5:07 PM, Mitchell Waite wrote: One last thing Karl. Side by side your cluetips take longer to appear then jTips do. About 1/2 second slower on this rig but that is a critical period that should be fast. Again this is me, maybe others like them slow. You know, Mitch, I think I have an idea what's going on now. When you include the hoverIntent plugin in the head, the cluetip picks it up and uses its .hoverIntent() method (with default settings) rather than the .hover() method. So, I put together another little demo, just for you. I took out the hoverIntent plugin, and it's much zippier now. I also set the open option to show and the openSpeed option to '' (an empty string). http://plugins.learningjquery.com/cluetip/demo/mitch.html Let me know how that goes for you. If speed is what you're after, this should do the trick. Karl I see what may be a weird bug in IE7. If I leave your example page, go do something in another window, when I come back to your page the tooltips will not work until I reload your page. Thanks a lot for reporting this. I'll have to boot up Parallels and check it out asap. That kind of weird bug scares me, though. I'm not very good at debugging that sort of thing. The new layout on your example page is much better, and now that I see how easy it is to do the arrow thing I am more motivated to switch. Glad to hear it. I also think your examples are too large in font and size, e.g. normally tooltips are NOT giant boxes, they are tiny hints. Well, that's all adjustable, so change them to your heart's content. You can change the font-size in the css and you can change the width in the cluetip's options. Check out the demo I made for you (see link above). I made the font smaller. :-) Have you tested them in IE7? If they work fine there and FF I think I am now sold. Well, not often enough, to be honest. I have tested in IE7, but not lately. But I will soon. I promise. Most recently tested in IE6, Firefox, and Safari 2 Mac. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com
[jQuery] Re: Cycle Plugin Killing me
I got it to work, thank you guys, as you can see here (wait a few
seconds for the fade to occur).
http://www.whatbird.com/wwwroot/Components/cycle%20demo.html
However I cant get the special effects to work. For example this link,
which uses
$('#birds').cycle( {fx: 'scrollDown'} );
should do a scroll down:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
Instead nothing happens. And Firebug says there are no style rules,
but the rules are there as you can see.
Thanks for your help
On Aug 20, 10:37 pm, Aaron Heimlich [EMAIL PROTECTED]
wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/and appears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
Im going to do this from now on, its a really good idea. I wish there
was some kind of program that could scan the jQuery and correct braces
or at least tell you where they are wrong.
On Aug 21, 3:17 am, [EMAIL PROTECTED] wrote:
If you sort your indentation you could spot these things a lot easier!
Try this:
$(document).ready(
function() {
$('#birds').click(
function() {
$('#birds').cycle('fade');
}
);
}
);
Writing it all on one line just makes it a total swine to spot missing
braces...
On Aug 21, 6:37 am, Aaron Heimlich [EMAIL PROTECTED] wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/andappears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
Mike is it possible that there is still a bug or am I just doing
something really dumb here:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
I see the first image but no cycling. Firebug
I would like to point out something that I think would make your cycle
plugin much easier to use which is this.
This page starts out great by showing you the exact code you need to
enter.
But its not complete. You dont show everything that you need. The
container in your excellent examples is #S1. That really confused me.
In other words assuming this is correct code I believe your plugin and
every other one would be so more accessible if you just added this to
the example page
link href=../css/cycle.css rel=stylesheet type=text/css /
script src=../js/jquery.js type=text/javascript/script
script src=../js/jquery.cycle.all.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function(){
/* $('#birds').cycle('fade'); */
$('#birds').cycle(
{
fx: 'scrolldown', speed: 300, timeout: 2000
}
);
});
/script
/head
body
div id=birds class=pics
img src=../images/Acadian Flycatcher_X2.jpg /
img src=../images/Acorn Woodpecker_X2.jpg /
img src=../images/Alder Flycatcher_X2.jpg //div
/body
/html
Anway thats my nickle.
Mitch
On Aug 21, 7:42 am, Mike Alsup [EMAIL PROTECTED] wrote:
Mitch,
I've just fixed a bug in the scroll transitions. v1.8 is available
now and should fix the problem. Give me a shout if you're still
having troubles.
http://www.malsup.com/jquery/cycle/download.html
Mike
I got it to work, thank you guys, as you can see here (wait a few
seconds for the fade to occur).
http://www.whatbird.com/wwwroot/Components/cycle%20demo.html
However I cant get the special effects to work. For example this link,
which uses
$('#birds').cycle( {fx: 'scrollDown'} );
should do a scroll down:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
Instead nothing happens.- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
Specifically I was confused that the ID was missing from the pics container. Besides adding an ID to the container code I suggest that your js download contain a sample of ONE effect, the images and css. Lots of people do that and what is so nice is you can open there index.htm and immediately have it working, then start modifying or insidertinto your own code. Mitch On Aug 21, 2:16 pm, Mike Alsup [EMAIL PROTECTED] wrote: @mitch: What exactly is missing from the examples? Is it just the container ID that confused you? On the beginner demo I tried to clearly show how the markup and CSS should look but I didn't want to show that over and over for each and every demo. @Stephan: Interesting idea. For now I'm going to try to keep the Cycle Plugin as lean as possible. It's already grown much larger than I had intended. As an FYI, Cycle is for more than just images. Thanks for the feedback! Mike But its not complete. You dont show everything that you need. The container in your excellent examples is #S1. That really confused me.- Hide quoted text - - Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
JS: in
the DIV you have a single IMG file which will show up whether or not
JS is available
I would like it so only ONE image showed when you were viewing in your
editor instead of all images being stacked on top of each other.
On Aug 21, 12:51 pm, Stephan Beal [EMAIL PROTECTED] wrote:
On Aug 21, 9:32 pm, Mitch [EMAIL PROTECTED] wrote:
...
I would like to point out something that I think would make your cycle
plugin much easier to use which is this.
...
div id=birds class=pics
img src=../images/Acadian Flycatcher_X2.jpg /
img src=../images/Acorn Woodpecker_X2.jpg /
img src=../images/Alder Flycatcher_X2.jpg //div
Speaking of improvement, here's my idea:
It would be nice to be able to pass additional images to the plugin
function call. The reason for this is to support Unobtrusive JS: in
the DIV you have a single IMG file which will show up whether or not
JS is available. When the plugin is called, if it is passed an array
of image names, those images are added before the plugin does the rest
of its processing. This allows the JS users to have a cycling show and
the non-JS users to see the first image without any effects. As proof
of concept, here's some code for a trivial image cycler which
demonstrates this feature... the part to look at is the addImages
stuff:
///
// Miniature jQuery plugin for rotating through a set of images.
jQuery.fn.goshenImageFader = function( options ) {
options = jQuery.extend({
fadeOutSpeed:750,
fadeInSpeed:500,
delay:4500,
addImages:[],
forceImgAttr:null
},options);
if( options.addImages.length ) {
for( var i = 0; i options.addImages.length ; ++i ) {
var img = jQuery(img/);
img.hide()
.attr('src',options.addImages[i])
.appendTo(this);
}
}
var imgs = jQuery('img',this);
imgs.gt(0).hide();
if( options.forceImgAttr ) {
for( var k in options.forceImgAttr ) {
imgs.attr(k,options.forceImgAttr[k]);
}
}
var pos = 0;
var current = 0;
function cycle() {
function doIn(to) {
imgs.eq(to).fadeIn( options.fadeInSpeed );
}
function doOut(from,to) {
imgs.eq(from).fadeOut( options.fadeOutSpeed,
function(){doIn(to)} );
}
pos = (pos = (imgs.length-1)) ? 0 : ++pos;
doOut( current, pos );
current = pos;
};
setInterval( cycle, options.delay );
return this;
};
It's then called like so:
$('#FrontPageImageFader').goshenImageFader({
addImages:[
'/pics/homes/timberframe/thumb-50/
Kitchen_view_frontpage_byGoshens.jpg',
'/pics/homes/timberframe/WalnutCreek_Porch-
front.jpg',
'/pics/homes/timberframe/LaurelGap-Loft2.jpg'
]
});
i think a similar feature would be trivial to add to Cycle and would
help Cycle gracefully degrade in browsers w/o JS.
[jQuery] Re: What to do when a plugin's css gets in your way
I am beginning to have my own concerns about jTip. My jTips work fine in FF but in IE7 they are all shifted to the right by a fixed amount and I dont understand why or have a clue (ha ha) on how to fix it. I am going to post on this list and see if any one has a clue and maybe a tip. (ok ok I'll stop). If you go to this page and pass the cursor over the bird Acadian Flycatcher you will see what I mean. http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html I felt Karl's cluetip popups on his demo seemed slow to respond to me, and I did not like that I had to add another plugin to use them (dimensions). On the other hand Karl does a great job on documenting his work and is incredibly helpful soUnless I someone bails me out I will have to switch. Mitch PS Battling Firebug was a poor description. I dont use debuggers so this has had a steep learning curve for me of which I am somewhere still on the lower slopes. But I am beginning to get how to use it. On Aug 20, 11:31 am, Pops [EMAIL PROTECTED] wrote: On Aug 19, 11:52 pm, Mitch [EMAIL PROTECTED] wrote: I will look into ClueTip. I like the way this coder set things up but he did not do a good job laying out how to use it, and compared to other plugin specialists here, he did not set up the plugin for automatic use, I had to play with before I saw how it really worked. Maybe ClueTip did a better job of documentation, because for me that is as important as the plugin itself. jTip is small and sweet, but I quickly ran into ergnomic issues in our frame mode mail system layout where the top left frame has the message listing and upon user request, they want these stupid previews when hovering over a message link. Well, the preview box would be cut off for links near the bottom of the frame, and we envision fasinated users will swoop the mouse over the links to popup the previews. This would hit the server uselessly. So I looked to changed jTip to add smarter placement of the view and to add a delay to tthe popup. But before I did that I (I hate changing other people's code and I had downloaded the jTip zip that included jQuery but I didn't really know of jQuery)), I wrote to the author about it (no response) and searched to find outer balloon tip libraries. That is when I found ClueTip and jQuery as well. That was two weeks ago and I'm having a ball with this stuff. :-) ClueTip covered the two features I wanted very nicely and then some. I agree, docs is important. I don't recall but I hink I used the example/demo source to see how it works. Oh and I am still curious how people deal with battling CSS. Firebug? Not sure what you mean? Battling how? Honestly, I found Firebug about 3 weeks ago and jQuery about 2 weeks ago. :-) FireBug is basic debugger with traditional debugger ideas so its quick to learn and use (for me). jQuery is an oddity :-) I like the jQuery Theory but on the other hand the more I use it with other people plugins is raising a concern. Something I put to the side for the moment, but I am seeing more than usual cross-browser issues. i.e, what might work great under FF doesn't under IE. Anyway, thats a different matter. :-) --- HLS
[jQuery] Why do my tooltips slide to the right in IE and are fine in FF
My jTips work fine in FF but in IE7 they are all shifted to the right by a fixed amount and I dont understand why or have a clue (ha ha) on how to fix it. If you go to this page and pass the cursor over the bird Acadian Flycatcher you will see what I mean. http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html Maybe someone here can point out something I am doing wrong. Mitch
[jQuery] Cycle Plugin Killing me
Im having a heck of a time getting the Cycle plugin to work. Cycle is at http://www.malsup.com/jquery/cycle/ and appears to be the best slide show out there. Here is my incredibly simple jQuery program: http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html Can anyone see what I have missed? Thanks Mitch
[jQuery] Re: Simulate foucs on any div, really get Firebug and use it
I look at it and I see a bunch of problems :) But I should have made it clearer that this is a simulation for our current visual search engine at whatbird.com The current engine is very web 1.0-ish http://identify.whatbird.com/mwg/_/0/attrs.aspx Thank you for the compliments. I have several more features to add that use plugins. I really want to use cycle Mitch On Aug 18, 3:17 pm, Stephan Beal [EMAIL PROTECTED] wrote: On Aug 18, 9:43 pm, Mitch [EMAIL PROTECTED] wrote: In fact this demo has a little bit of every thing in it. That's what impressed me. It really is a full-fledged app (or appears to be - i couldn't figure out how to get it to do anything, so i assume it's a prototype or mock-up). You did a hell of a job on the UI.
[jQuery] Re: Simulate foucs on any div, really get Firebug and use it
Thanks Aaron. I had to make the left margin a fixed number. When I
make it auto it works great, but when I click on new search the entire
frame shifts to the left a few pixels and I am stuck on why.
On Aug 18, 2:23 pm, Aaron Heimlich [EMAIL PROTECTED] wrote:
On 8/18/07, Mitch [EMAIL PROTECTED] wrote:
I am pretty sure I can get the outdiv to float in the center of the page,
I just
have to remember how to do it.
I believe this is what you're looking for:
body {
position: relative;
margin-left: auto;
margin-right: auto;
width: 797px;
}
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com
[jQuery] Re: Simulate foucs on any div, really get Firebug and use it
Gosh that is so nice of you. I suspeced the table was changing size
but I didnt think about the scroll bar. Thank you for finding that and
giving me a solution.
On Aug 19, 4:50 pm, Aaron Heimlich [EMAIL PROTECTED] wrote:
On 8/19/07, Mitch [EMAIL PROTECTED] wrote:
When I make it auto it works great, but when I click on new search the
entire
frame shifts to the left a few pixels and I am stuck on why.
I got the same thing, and I don't think you're causing it. When Search
History is collapsed, the entire application appears on screen, so there's
no need for a vertical scrollbar. When it's expanded however, part of it
extends past the bottom of the screen, so the browser creates a vertical
scrollbar.
Since you have both margin-left and margin-right set to auto (because the
centering technique won't work without this), they auto-adjust themselves
whenever the width of the viewport changes. In Firefox, Adding the vertical
scrollbar causes the width of the viewport to change slightly, causing the
margins to auto-adjust themselves, which causes the shift we both noticed.
The solution, then, is to force the scrollbar to always appear -- if it's
already there when Search History is expanded, then there are no
left/right margins that need to be auto-adjusted. Something like
body {
height: 100%;
}
Usually does this, but I don't think it'll work in your case since you seem
to have a bunch of wrappers that are absolutely positioned, so you may want
to use an explicit value that you know will trigger the vertical scrollbar
instead.
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com
[jQuery] What to do when a plugin's css gets in your way
What do you guys suggest when I use someone's plugin and its css contains styles that alter my entire page. I have never had this happen until I tried jTip, which is a very cool tooltip plugin. It has a body style that changes its font to 62.5% of an em, and that ends up shrinking all my fonts. Mitch
[jQuery] Re: What to do when a plugin's css gets in your way
Wow that is a freaking amazing solution. Not only getting the right
css portion, but in showing me the way you use import then restyle on
the page. Very cool.
I will look into ClueTip. I like the way this coder set things up but
he did not do a good job laying out how to use it, and compared to
other plugin specialists here, he did not set up the plugin for
automatic use, I had to play with before I saw how it really worked.
Maybe ClueTip did a better job of documentation, because for me that
is as important as the plugin itself.
Oh and I am still curious how people deal with battling CSS. Firebug?
On Aug 19, 6:03 pm, Pops [EMAIL PROTECTED] wrote:
Mitch,
I came across the same issue with jTip until I studied it more.
The global.css provided jTip is only an example. All you really need
here are the classes beginning with JT_ The CSS has an inline
comment separating the specific JT_ classes.
What I did was cut and paste these classes into a file called jTip.CSS
file and then I do this to customized them:
style type='text/css' media='all'
@import '/public/js/jtip/css/jtip.css';
#JT{ background-color: lightcyan; }
.jTip { cursor:default;}
#JT_close_left { background-color: green; color: white; }
#JT_close_right { background-color: green; color: yellow;}
/style
ps: You may want to explore ClueTip. It has some improved ideas over
jTip, like proper placement so it isn't cut off, delaying the popup
until the hovering mouse is idle on the link, plus some other features
like Sticky Popups.
--
HLS
On Aug 19, 8:17 pm, Mitch [EMAIL PROTECTED] wrote:
What do you guys suggest when I use someone's plugin and its css
contains styles that alter my entire page.
I have never had this happen until I tried jTip, which is a very cool
tooltip plugin. It has a body style that changes its font to 62.5% of
an em, and that ends up shrinking all my fonts.
Mitch- Hide quoted text -
- Show quoted text -
[jQuery] Re: @import vs link
Check this:
style type='text/css' media='all'
@import '/public/js/jtip/css/jtip.css';
#JT{ background-color: lightcyan; }
.jTip { cursor:default;}
#JT_close_left { background-color: green; color: white; }
#JT_close_right { background-color: green; color: yellow;}
/style
Its from HLS, which I dont think stands for Hue, Luminence and
Saturation, but is a gentleman's initials.
On Aug 19, 6:45 pm, Rey Bango [EMAIL PROTECTED] wrote:
Hi guys,
In looking at another thread about jTip, I noticed that the css file was
including like this:
@import '/public/js/jtip/css/jtip.css';
What's the difference and/or benefit of using @import vs link to
include a stylesheet?
Rey...
[jQuery] Simulate foucs on any div, really get Firebug and use it
I finally figured out what was wrong with my attempt to get
stopPropation to work so I could simulate focus on any div, not just
an input element. This is the link to the demo and below is how it
works (the foucs and unfocus part).
http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html#Javascript;
Learn to use Firebug
I could not have done this without Firebug and Mike Geary who clued me
to putting 'debugger;' in my troubled handler, which is when I saw I
could watch the this click event perculate up the DOM. Beginners
should know this early in there education.
You can make Firebug continue processing your handler each time it
reaches the debugger keywork. It will stop and display what container
it is in. Then hit the play button (right pointing arrow button) to
continue. I watched my handler allow a lot more containers to be hit
by the click. Which made me see I could not get this to work unless
the stopPropagation was put in the right place.
Much of what is below will probably be boring to you experts but
beginners might like it.
* cool foucus --- */
/* Note: I wanted to simulate a container getting focused when
clicked. The concept is to change some objects color when the div that
gets the focus is clicked. Then remove it when anything outside that
container is clicked. Seems easy but I struggled with these for 3
days. The problem is this: since everhting is inside of the container
that does the unfocus how do you prevent a click to the container with
focus continuing up the food chain in your DOM and reaching the
#outerdiv and unfocusing itself? The simple way to fix is to make sure
that a click on the container with focus gets stopped before it can do
its damage.
event.stopPropagation(); is the way out.
Note carefully the syntax of these handlers the word event has been
put inside the main jQuery click fuction so its
.click(function(event) {... instead of .click(function() {...
Here is the code
/* if inside #matchcontainer or #species simulate focus and stop
event from bubbling */
$('#matchcontainer, #species').click(function(event) {
$('#text800birds').css( { background: #99, color:
#FF} );
event.stopPropagation();
});
/* any click that reaches the outer container simulate removing focus
*/
$('#outerdiv').click(function(event) {
$('#text800birds').css( { background: #FF, color:
#99} );
});
Have fun. Hope this message is not a waste of eletrons.
Mitch
[jQuery] Re: anyone knows a jQuery based slideshow plugin like this?
Interface Elments is very cool but I think its overkill. Its not that easy to use. jCarouselLite seems just the oppostie, too simple and not enough features. What you want to do doesnt need a plugin, its really easy in jQuery using show and hide or animate. I do which there was a carousel that was took a middle ground. Mitch
[jQuery] Re: anyone knows a jQuery based slideshow plugin like this?
With the paging feature you will need more then one line of code. Cycle has exactly what you want. Its called the Pager. I am going to use that myself, its so simple. http://www.malsup.com/jquery/cycle/int2.html Mitch
[jQuery] Re: Simulate foucs on any div, really get Firebug and use it
Right on browthanks for your review, I love the word excellent. There is not much better, except maybe awesome. As far as being way to the right, I was trying to be clever and make the window float in the middle of the page by putting everything inside a table. That was before I really understood what absolute means. I am pretty sure I can get the outdiv to float in the center of the page, I just have to remember how to do it. Some padding thing on each side or something. But I am happy you like the app. Did you notice the history drop down at the bottom. That all came from Klaus's (I think) trick css button swap code. In fact this demo has a little bit of every thing in it. http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html Mitch
[jQuery] Re: Question about event.StopPropagation()
Hi Michael
I thought that since 'match' is a ID (div id=#match) that means it
is NOT a string, so I do I have the whole wrong idea about IDs? They
are just plain old strings?
Using the debugger is just what I need. I added the line to my code
$(div).click(function(event) {
debugger;
if (event.target.id != 'match') {
$(#text800birds).css( { background: #EE, color:
#FF} );
}
});
When I load the page Firebug opens (not everytime for some reason)
with the script tab showing and the line with debugger; in yellow and
to the right is the watch window.
I can then go into the console and type:
event.target.id and it shows its a null
event.target shows div class=clipframe
So does that mean that event.target.id doesnt work?
I wish Firebug had some documentation.
Mitch
On Aug 16, 7:57 pm, Michael Geary [EMAIL PROTECTED] wrote:
if (event.target.id != 'match')
Thank you for the syntax correctoin. But how does jQuery know
that 'match' is an ID and not an ordinary variable.
It's neither. 'match' is a string.
event is a variable. event.target is a property of the event variable, and
event.target.id is a property of event.target.
I have the handler set up but it seems to match any div that
is clicked including the #match ID which I want it to ignore. Grrr.
So I am wondering is there some kind of process I could
follow on Firebug that would help me see where things are going wrong?
I would add this statement where you want to look around (e.g. at the first
line of your click event function):
debugger;
Firebug will stop there and you can look at variables and stuff. For
example, you can type event.target.id into the Watch window and it will show
you the value of that property.
I wonder if it should be this.id instead of event.target.id? See what is in
them both...
-Mike
[jQuery] Re: jQuery negatives: dual/triple/quadruple special-case uses for both function calls and method names
Is this topic changing to the need for removing stuff from jQ? My
intention was to just get opinions about the comment Thor made.
On Aug 17, 1:04 am, Erik Beeson [EMAIL PROTECTED] wrote:
$(p:gt(4)).show().gt(10).css(color,red);
Or, if you need to operate multiple time on same collection:
var my_coll = $(p);
my_coll.gt(3).css(color,red);
my_coll.lt(3).css(color,blue);
This stuff cannot be done by solely in selector expression.
I'm pretty sure this can be done with filter. In fact, a cursory test
with firebug on jQuery.com suggests it can:
$('p');
[p, p, p.surprise, p, p.download_link, p.download_link, p, p, p]
$('p:gt(2)');
[p, p.download_link, p.download_link, p, p, p] $('p:gt(2)').gt(4);
[p]
$('p:gt(2)').filter(':gt(4)');
[p]
I'm all in favor of removing gt/lt/eq in favor of the selector version
with filter.
--Erik
[jQuery] Re: jQuery negatives: dual/triple/quadruple special-case uses for both function calls and method names
Thank you John - from you that means a lot. Speaking of meaning, are you suggesting I better get moving on this? When you say move it to the wiki do you mean I can go and set this up on the jq site? On Aug 16, 8:45 pm, John Resig [EMAIL PROTECTED] wrote: Great work Mitch - if someone wants to beat me to you, you should move this over to the wiki. I'll try to take a stab at it, if I can remember. --John On 8/16/07, Mitch [EMAIL PROTECTED] wrote: I think this is a very stimulating topic - the responses have given me a lot of insights to the frameworks of which jQuery belongs. I see there are some big issues here that kind of scare me, the one that stood out to me is the claim that jQurey is not for beginners who don't know the DOM, CSS and JS. I would contend that it is precisely the beginner that jQuery appeals to. Using myself as a test case - I came in knowing a little bit about JS, a bit more about CSS and pretty much nothing about DOM.. I had tried to use JS and CSS to do some fancy interface work and really got stuck in the complexities of JS. Then I found JQ and the world rocked for me. Suddenly I could do amazing things with my GUIs. Sure I had holes in my knowledge bank, and its shown in this mailing list, but I think you will admit this is a pretty impressive interface for a beginner to make: http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html I have tons to learn but what a great and fun way to get started! I do think there is one hole in the JQ web site and that is there are not enough real life examples. To that end I am putting together jQuery Cheat Sheet (TM) (C) How To. I plan to make this available for everyone to contibute to. These two How Tos are examples of the format I am proposing to begin with. If anyone has any suggestions would love to hear them. If you have some suggestions for How Tos let me know and I will try and create them. I was thinking of making this into some kind of wiki like system where it would allow poeple to create How Tos that ended up in this standard format when formatted. http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_not.html http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_attr.html The JQ web site and other sites do a great job on explaining the API (even if most of the examples dont show up correclty in IE7) - whats missing is the practical side of the package. Real world non verbose examples of how to use the important features presented in a non trival but lucid manner, with the key concepts listed for indexing as well as the discussion is key to these working. Mitch- Hide quoted text - - Show quoted text -
[jQuery] Re: Question about event.StopPropagation()
Have you looked at the documentation? They have a one page FAQ, console reference, keyboard reference and jQuery Lite. I dont see anything like how to use Firebug to debug. http://getfirebug.com/docs.html Maybe there is another link to a tutorial? On Aug 17, 7:22 am, Mike Alsup [EMAIL PROTECTED] wrote: I wish Firebug had some documentation. It does. http://getfirebug.com/
[jQuery] Re: Question about event.StopPropagation()
I found something http://www.evotech.net/blog/2007/06/introduction-to-firebug/ On Aug 17, 7:22 am, Mike Alsup [EMAIL PROTECTED] wrote: I wish Firebug had some documentation. It does. http://getfirebug.com/
[jQuery] Re: Question about event.StopPropagation()
Thank you Mike. I discovered that the best first documentation to
read can be found by clicking on every screen shot on the main page,
and printing each out and then trying every feature they so describe
with terrific brevity (like one or two sentences :)
I'm beginning to see how to use Firebug. But I am stuck on how to get
it to help me with my foucs unfocus issue. I have this little snippet
of code
$(div:not('#matchcontainer')).click(function() {
$(#text800birds).css( { background: #66, color:
#DD} );
});
I have it working in my How To
http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_not.html
But I am unable to implement it in my real application
http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab2.html
Note the rectangle around the text 880 Birds of North America. When
you click anywhere but the left container (scrolling list of birds).
Yet when I click on the matchcontainer it still triggers the handler.
The not is suppose to prevent it from selecting matchcontainer.
The DOM of my app is pretty complicated but matchcontainer is
definitely inside all the other divs so it should be matched.
When I put an alert(here) statement inside the snippet above and
click anywhere I get the alert pop 6 times! Which means its matching
many other divs and it should not.
I am at wits end as to what to do next to find out why.
Mitch
On Aug 17, 8:50 am, Mike Alsup [EMAIL PROTECTED] wrote:
Look at all the Learn More links on the main page. There is some
good stuff. Maybe not exactly what you're looking for, but there is
some useful info.
Have you looked at the documentation? They have a one page FAQ,
console reference, keyboard reference and jQuery Lite. I dont see
anything like how to use Firebug to debug.
http://getfirebug.com/docs.html
Maybe there is another link to a tutorial?- Hide quoted text -
- Show quoted text -
[jQuery] Re: Selector Question should be easy (continued with online example)
Awesome! I got it working and improved it: http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_not3.html You can now see clicking any div other then div2 unfocuses div2 while clicking on div2 gives it focus again. And they said it could not be done! Thanks for the help. Mitch PS Karl I read page 49-52 about event bubbling and it all made sense. However I just didnt follow the switcher example on page 52 and instead was trying to remove the handler. I actually got that working but it didnt prevent the click from bubbling.
[jQuery] jQuery negatives: dual/triple/quadruple special-case uses for both function calls and method names
What do you guys think of this critique of jQuery I found on Simon Willison's site (which is good reading). http://simonwillison.net/2007/Aug/15/jquery/ quote jQuery is definitely a popular utility function library, but the sheer amount of dual/triple/quadruple special-case uses for both function calls and method names is an instant turnoff for me. The jQuery object itself can perform a selector query, embed a DOM element, create a DOM element from HTML and assign a DOMContentReady event handler - and probably more. Event handling is separated into separate methods for each event type. Some method names make no immediate sense, like .one or .eq, and you can't immediately tell if a method acts on the first element in the collection or all of them. I can't recommend jQuery to the developers I am mentoring because it is in itself a completely separate abstraction, and a muddy one at that. They will end up having to learn jQuery instead of having to learn DOM, CSS and JS, and when being considered as a direct replacement for those it fails both due to complexity and inconsistency. /quote Mitch
[jQuery] Re: jQuery negatives: dual/triple/quadruple special-case uses for both function calls and method names
I think this is a very stimulating topic - the responses have given me a lot of insights to the frameworks of which jQuery belongs. I see there are some big issues here that kind of scare me, the one that stood out to me is the claim that jQurey is not for beginners who don't know the DOM, CSS and JS. I would contend that it is precisely the beginner that jQuery appeals to. Using myself as a test case - I came in knowing a little bit about JS, a bit more about CSS and pretty much nothing about DOM.. I had tried to use JS and CSS to do some fancy interface work and really got stuck in the complexities of JS. Then I found JQ and the world rocked for me. Suddenly I could do amazing things with my GUIs. Sure I had holes in my knowledge bank, and its shown in this mailing list, but I think you will admit this is a pretty impressive interface for a beginner to make: http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html I have tons to learn but what a great and fun way to get started! I do think there is one hole in the JQ web site and that is there are not enough real life examples. To that end I am putting together jQuery Cheat Sheet (TM) (C) How To. I plan to make this available for everyone to contibute to. These two How Tos are examples of the format I am proposing to begin with. If anyone has any suggestions would love to hear them. If you have some suggestions for How Tos let me know and I will try and create them. I was thinking of making this into some kind of wiki like system where it would allow poeple to create How Tos that ended up in this standard format when formatted. http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_not.html http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_attr.html The JQ web site and other sites do a great job on explaining the API (even if most of the examples dont show up correclty in IE7) - whats missing is the practical side of the package. Real world non verbose examples of how to use the important features presented in a non trival but lucid manner, with the key concepts listed for indexing as well as the discussion is key to these working. Mitch
[jQuery] Question about event.StopPropagation()
I am trying to get event bubbling to work right and have this snippet
$(div).click(function(event) {
if (event.target == this) {
$(#text800birds).css( { background: #EE, color:
#FF} );
}
});
I would like to change this part
if (event.target == this)
to
if (event.target #match)
so that it wont pass the event if the div is #match.
Can you tell me the proper syntax?
Mitch
[jQuery] Re: Question about event.StopPropagation()
Thank you for the syntax correctoin. But how does jQuery know that
'match' is an ID and not an ordinary variable.
I have the handler set up but it seems to match any div that is
clicked including the #match ID which I want it to ignore. Grrr.
So I am wondering is there some kind of process I could follow on
Firebug that would help me see where things are going wrong?
I have been putting alert(here) into this handler, like this
$(div).click(function(event) {
if (event.target.id != 'match') {
alert(here)
$(#text800birds).css( { background: #EE,
color: #FF} );
}
});
And what I see is 7 alerts appearing no matter where I click.
That really throws me. And I dont know what to do now to find out
where things are messing up.
Again the purpose of all this is to simulate focus and unfocus on a
DIV. I can get it to work in a small example but in real life, nada.
Mitch
On Aug 16, 7:16 pm, Karl Rudd [EMAIL PROTECTED] wrote:
I think you mean:
if (event.target.id != 'match')
Karl Rudd
On 8/17/07, Josh Nathanson [EMAIL PROTECTED] wrote:
I think this will work:
if (event.target.id 'match')
-- Josh
- Original Message -
From: Mitch [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, August 16, 2007 6:32 PM
Subject: [jQuery] Question about event.StopPropagation()
I am trying to get event bubbling to work right and have this snippet
$(div).click(function(event) {
if (event.target == this) {
$(#text800birds).css( { background: #EE, color:
#FF} );
}
});
I would like to change this part
if (event.target == this)
to
if (event.target #match)
so that it wont pass the event if the div is #match.
Can you tell me the proper syntax?
Mitch- Hide quoted text -
- Show quoted text -
[jQuery] Re: Selector question should be easy
I news for all of you, none of these suggestions work. Here is my code
you can run it and see. When I add the last click handler it breaks
the 2nd one and nothing happens. My guess is that is still not the
right selector.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleUntitled Document/title
script src=../js/jquery.js type=text/javascript/script
script type=text/javascript
$(document).ready(function(){
/* makes inner div light gray */
$(#apDiv2).css('background-color','#EE');
/* makes inner dive dark gray when clicked */
$('#apDiv2').click(function() {
$(#apDiv2).css('background-color','#66');
});
/* this should make inner div light gray when the outer
div apDiv1 is clicked */
$(div:not(#apDiv2)).click(function() {
$(#apDiv2).css('background-color','#EE');
});
/* $(div:not(#apDiv2)) john
$(div:not('#apDiv2')) klaus*/
});
/script
style type=text/css
!--
#apDiv1 {
position:absolute;
width:761px;
height:372px;
z-index:1;
background-color: #CC;
}
#apDiv2 {
position:absolute;
width:216px;
height:315px;
z-index:1;
left: 32px;
top: 21px;
background-color: #FF;
}
--
/style
/head
body
h1How do I...focus and defocus using not/h1
div id=apDiv1
div id=apDiv2/div
/div
/body
/html
[jQuery] Turning a checkbox on and off
How do you check and uncheck a checkbox from jQuery? And how do you determine if a checkbox has been checked or unchecked? I tried attr and css and none of them worked. Thanks Mitch
[jQuery] Re: FW: [jQuery] Re: Hover accordion (as on apple.com)
If you add height: 300px; to the dl:
dl { width: 300px; height: 300px; }
it will do what I am talking about.
But I bet if I added any new li it would need to be readjusted.
Ouch.
[jQuery] Need help with interface slider on Firefox/Win
I'm trying to build a horizontal slider using the jQuery interface plugin. When I click on the slider's indicator, the indicator jumps well to the right of the mouse cursor. This behavior manifests with Firefox 2.0.0.4 / Windows; everything works correctly with IE 6. The slider has a single indicator. The slider's HTML elements are nested inside several levels of div elements. The slider is inside a div with CSS position:relative. The slider has position:relative, and the indicator has position:absolute. Any help would be greatly appreciated. Please let me know if you need additional information.
[jQuery] Re: Need help with interface slider on Firefox/Win
On May 31, 6:33 pm, Richard D. Worth [EMAIL PROTECTED] wrote: On 5/31/07, Mitch [EMAIL PROTECTED] wrote: I'm trying to build a horizontal slider using the jQuery interface plugin. ... Any help would be greatly appreciated. Please let me know if you need additional information. Some code samples would be great. Also, are you using the dimensions plugin? I'm not using the dimensions plugin. While assembling code samples I discovered the cause of my problem. It's kind of embarrassing -- somehow I had given my document body's position to relative. Removing that fixed the problem. Thanks for the help, though.
