[jQuery] Re: Can jQuery create an element then bind a hover function to it?
Hi Josh,
Sorry for the late reply... but I finally got round to implementing
your suggestion. Unfortunately, it doesn't seem to help. The action
(SlideInUp) only happens once, on only one of the divs, and then
mousing-out of it doesn't trigger the second half of the .hover
function. Hovering over any other '.show' divs doesn't trigger their
effects either. You can only get one effect to happen on the page. :-S
Why do you think that is happening?
Cheers,
Zarino
On Dec 27, 12:20 am, Josh Nathanson [EMAIL PROTECTED] wrote:
Zarino - it's because you are building the html within the success function
of the Ajax call, but the binding of the hover function happens outside it.
What you might want to do is put your hover binding into its own function
that you can call from within the Ajax success function:
var binder = function( divs ) {
divs.hover( //etc.
}
Then inside your ajax success function:
binder( $(.show) );
Alternately you could use the LiveQuery plugin which does this sort of thing
automatically.
-- Josh
- Original Message -
From: zarino [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Wednesday, December 26, 2007 3:23 PM
Subject: [jQuery] Can jQuery create an element then bind a hover function to
it?
Well, I know the answer is yes, but I can't figure out how. Can you
help?
I'm using jQuery to take values from an XML file (a schedule for a
radio station), wrap them up into nice HTML elements, and inject them
into my web page. When the user hovers over any of the jQuery-created
elements, I want something to happen.
Currently, my jQuery code looks like this...
$(document).ready(
function(){
var nowDay = new Date().getDay();
var nowHours = new Date().getHours();
var nowMinutes = new Date().getMinutes();
var nowID = nowDay * 1 + nowHours *100 + nowMinutes;
$.ajax({
type: GET,
url: schedule.xml,
dataType: xml,
success: function(xml) {
$(xml).find('show').each(
function(){
var showStart = $(this).attr('start');
var showEnd = $(this).attr('end');
var showDay = $(this).parent('day').attr('id');
var showTitle = $(this).find('title').text();
var showArtist = $(this).find('artist').text();
var showDescription = $(this).find('description').text();
var showTime = $(this).find('time').text();
$('#'+showDay).append(div class='show'span
class='time'+showTime+/span h3+showTitle+/h3div
class='more-info'p class='artist'+showArtist+/pp
class='description'+showDescription+/p/div/div);
}
);
$(.show).hover(
function(){
$(this).children('.more-info').SlideInUp(500);
}, function(){
$(this).children('.more-info').SlideOutUp(500);
}
);
}
});
}
);
As you can see, I'm trying to bind an animation to the hover event of
all div.show elements on the page. But because they're created by
jQuery, the usual way I'd do it doesn't seem to work.
Any suggestions would be greatly appreciated.
Many thanks :-)
Zarino Zappia
[jQuery] Can jQuery create an element then bind a hover function to it?
Well, I know the answer is yes, but I can't figure out how. Can you
help?
I'm using jQuery to take values from an XML file (a schedule for a
radio station), wrap them up into nice HTML elements, and inject them
into my web page. When the user hovers over any of the jQuery-created
elements, I want something to happen.
Currently, my jQuery code looks like this...
$(document).ready(
function(){
var nowDay = new Date().getDay();
var nowHours = new Date().getHours();
var nowMinutes = new Date().getMinutes();
var nowID = nowDay * 1 + nowHours *100 +
nowMinutes;
$.ajax({
type: GET,
url: schedule.xml,
dataType: xml,
success: function(xml) {
$(xml).find('show').each(
function(){
var showStart =
$(this).attr('start');
var showEnd =
$(this).attr('end');
var showDay =
$(this).parent('day').attr('id');
var showTitle =
$(this).find('title').text();
var showArtist
= $(this).find('artist').text();
var
showDescription = $(this).find('description').text();
var showTime =
$(this).find('time').text();
$('#'+showDay).append(div class='show'span
class='time'+showTime+/span h3+showTitle+/h3div
class='more-info'p class='artist'+showArtist+/pp
class='description'+showDescription+/p/div/div);
}
);
$(.show).hover(
function(){
$(this).children('.more-info').SlideInUp(500);
}, function(){
$(this).children('.more-info').SlideOutUp(500);
}
);
}
});
}
);
As you can see, I'm trying to bind an animation to the hover event of
all div.show elements on the page. But because they're created by
jQuery, the usual way I'd do it doesn't seem to work.
Any suggestions would be greatly appreciated.
Many thanks :-)
Zarino Zappia
[jQuery] Else If statements - why isn't this working?
This'll probably seem obvious to anyone with more jQuery knowledge
than myself...
I'm using the below code to show/hide specific divs according to which
day it is. However, for some reason it isn't working. I've tried my
best to find doumentation on how to write If/Else statements for
jQuery but it's pretty thin on the ground... I've probably just missed
something out. But, any ideas why none of the actions take place?
$('body.schedule').ready(
function(){
var today = new Date().getDay();
if (today == 2) {
$(div.monday).hide();
} else if (today == 3) {
$(div.monday).hide().next().hide();
} else if (today == 4) {
$(div.monday).hide().next().hide().next().hide();
} else if (today == 5) {
$(div.monday).hide().next().hide().next().hide().next().hide();
} else if (today == 6) {
$
(div.monday).hide().next().hide().next().hide().next().hide().next().hide();
} else if (today == 7) {
$
(div.monday).hide().next().hide().next().hide().next().hide().next().hide().next().hide();
}
}
);
Thanks in advance,
Zarino Zappia
[jQuery] Firing off a jQuery action ASAP - before document ready?
Hi there! I have a jQuery action which I'd like to run as soon as possible. Currently it runs on (document).ready but that's too late, and I see a flicker of the page before the action takes place (importing a new stylesheet). Is there a way to make an action happen before the doument is ready? Will I have to use plain javascript (n!), rather than jQuery? Thanks for any light you can shed. Zarino Zappia
[jQuery] Re: Firing off a jQuery action ASAP - before document ready?
Hi Andy. Thanks for the suggestion, but I'm not sure it's made much of a difference. Zarino On Nov 21, 4:51 pm, Andy Matthews [EMAIL PROTECTED] wrote: have you tried window.ready? -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of zarino Sent: Wednesday, November 21, 2007 8:20 AM To: jQuery (English) Subject: [jQuery] Firing off a jQuery action ASAP - before document ready? Hi there! I have a jQuery action which I'd like to run as soon as possible. Currently it runs on (document).ready but that's too late, and I see a flicker of the page before the action takes place (importing a new stylesheet). Is there a way to make an action happen before the doument is ready? Will I have to use plain javascript (n!), rather than jQuery? Thanks for any light you can shed. Zarino Zappia
[jQuery] Re: Performing actions at specific times of day, or at random?
That's excellent Ariel! Thank you very much. I'll try it out asap. :-D
Zarino
On Nov 17, 7:26 pm, Flesler [EMAIL PROTECTED] wrote:
I don't think there's a plugin like that, but you definitely don't
need jQuery to get the hour of the day and check for a range.
var hour = new Date().getHours();
var id = hour 12 ? 'morning'
: hour 13 ? 'noon'
: hour 19 ? 'afternoon'
: 'night';
document.getElementById('stylesheet-'+id).disabled = false;
That is just a simple example of how to do that, that works if you add
4 css, with the attribute disabled=disabled and you only enable the
one you want. You can add this right after the stylesheets, no need
for document.ready, so the style will be applied earlier.
The other option, is to use document.write, instead of
document.getElementById you write:
document.write('link type=text\/css rel=stylesheet
src=stylesheet-'+id+'.css \/).
or do the same, using DOM methods.
You can find info about Date's methods
here:http://www.w3schools.com/jsref/jsref_obj_date.asp
with random:
var ids = [ 'one', 'two', 'three' ];
var index = Math.round( Math.random()*10 ) % 3;
var id = ids[ index ]
Ariel Flesler
On Nov 16, 1:05 pm, zarino [EMAIL PROTECTED] wrote:
Hi there!
I'd like to load a different css stylesheet depending on the time of
day. If it's 6am-12noon, it'll be one sheet. If it's 12noon-6pm it'll
be another. And 6pm-6am, it'll be a third.
I'm sure there must be an easy way of getting jQuery to take the
browser's time and date, check which time range it falls within, and
summon up the correct stylesheet (or simply add a class to the body
tag, to which I'll hook css rules).
Similarly, how would I get it to choose a stylesheet at random, from
the list of three possibilities?
Many thanks,
Zarino Zappia
[jQuery] Re: Performing actions at specific times of day, or at random?
Ahh... one more question...
Since I have index.html pages on two levels of my site (both
'www.domain.com/' and 'www.domain.com/stuff') the generated link
element needs to contain one href for pages on the root level, and
then a different href for pages one directory up. At the moment, the
javascript (stored in an external file) simply serves up one href,
which means the stylesheet can't be found for pages anywhere other
than the root level.
I hope that makes sense. How can I ensure the link element's
relative href points to the correct file, no matter which level it's
accessed from?
Thanks,
Zarino Zappia
On Nov 17, 7:26 pm, Flesler [EMAIL PROTECTED] wrote:
I don't think there's a plugin like that, but you definitely don't
need jQuery to get the hour of the day and check for a range.
var hour = new Date().getHours();
var id = hour 12 ? 'morning'
: hour 13 ? 'noon'
: hour 19 ? 'afternoon'
: 'night';
document.getElementById('stylesheet-'+id).disabled = false;
That is just a simple example of how to do that, that works if you add
4 css, with the attribute disabled=disabled and you only enable the
one you want. You can add this right after the stylesheets, no need
for document.ready, so the style will be applied earlier.
The other option, is to use document.write, instead of
document.getElementById you write:
document.write('link type=text\/css rel=stylesheet
src=stylesheet-'+id+'.css \/).
or do the same, using DOM methods.
You can find info about Date's methods
here:http://www.w3schools.com/jsref/jsref_obj_date.asp
with random:
var ids = [ 'one', 'two', 'three' ];
var index = Math.round( Math.random()*10 ) % 3;
var id = ids[ index ]
Ariel Flesler
On Nov 16, 1:05 pm, zarino [EMAIL PROTECTED] wrote:
Hi there!
I'd like to load a different css stylesheet depending on the time of
day. If it's 6am-12noon, it'll be one sheet. If it's 12noon-6pm it'll
be another. And 6pm-6am, it'll be a third.
I'm sure there must be an easy way of getting jQuery to take the
browser's time and date, check which time range it falls within, and
summon up the correct stylesheet (or simply add a class to the body
tag, to which I'll hook css rules).
Similarly, how would I get it to choose a stylesheet at random, from
the list of three possibilities?
Many thanks,
Zarino Zappia
[jQuery] Performing actions at specific times of day, or at random?
Hi there! I'd like to load a different css stylesheet depending on the time of day. If it's 6am-12noon, it'll be one sheet. If it's 12noon-6pm it'll be another. And 6pm-6am, it'll be a third. I'm sure there must be an easy way of getting jQuery to take the browser's time and date, check which time range it falls within, and summon up the correct stylesheet (or simply add a class to the body tag, to which I'll hook css rules). Similarly, how would I get it to choose a stylesheet at random, from the list of three possibilities? Many thanks, Zarino Zappia
[jQuery] Set element's css 'min-height' to browser's viewport height?
Hi! I'd like to set all elements with the class .inner to have a minimum height equal to the height of the browser's viewport. So, if the window height is 550px, each of the '.inner' divs will have a minimum height of 550px. I suspect it's bound to be super-easy to do with jQuery, but newbie that I am, I can't figure it out. :-S How would I go about doing this? Many thanks, Zarino
[jQuery] Re: Set element's css 'min-height' to browser's viewport height?
Ahhh brilliant!
Firstly thanks to Benjamin for a speedy response. I never knew about
the dimensions plug in. Very useful!
I wrote my own little bit of code, but admittedly it doesn't take into
account the IE6 problem. Your version, Klaus, is excellent.
Thank you everyone! I knew it would be something simple!
Zarino
On Jul 8, 5:23 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
zarino wrote:
Hi!
I'd like to set all elements with the class .inner to have a minimum
height equal to the height of the browser's viewport. So, if the
window height is 550px, each of the '.inner' divs will have a minimum
height of 550px. I suspect it's bound to be super-easy to do with
jQuery, but newbie that I am, I can't figure it out. :-S
How would I go about doing this?
Many thanks,
Zarino
Benjamin already mentioned the dimensions plugin. With it included, try:
$(function() {
$('div.inner').css(($.browser.msie $.browser.version 7 ? '' :
'min-') + 'height', $(window).height() + 'px');
});
If you need to adjust on window resize try this:
$(function() {
$(window).bind('resize', function() {
$('div.inner').css(($.browser.msie $.browser.version 7 ?
'' : 'min-') + 'height', $(window).height() + 'px');
}).trigger('resize');
});
--Klaus
[jQuery] Re: Randomly insert one of a pre-defined HTML extracts?
Ooh, Scott, I'm so sorry, I've just realised a problem. Since the path to the 'facts' directory is relative, it only works for 'parent' HTML files on the one level. I have a homepage at the root level (eg: keep/default.htm), and then various other pages one level further in (eg: keep/why/default.htm). With the current code, these deeper ones don't display the includes because the relative path isn't right for those pages. I suppose I could add a class of one to the body of the home page, and then a class of two to the pages one directory in, and then three to pages another step in... and then use individual $ (body.one).ready(), $(body.two).ready()... etc calls in my jQuery code. But it's a bit ugly. Is there an easier way which doesn't involve adding a class to each body element? Thanks. ~ Zarino On Jun 27, 11:38 pm, Scott Sauyet [EMAIL PROTECTED] wrote: zarino wrote: Excellent! That was it. It all works brilliantly now. :-D As a side-note: Am I being really picky here, or could the contents of facts.js and custom.js be combined into one file? Seems a shame to have a whole separate javascript file containing just one line of code. That would be fine. The only reason I thought they should be separated is that the list of facts is likely to change regularly; the other should remain static. If you have other JQuery on the page, you can put it together with what's in custom. I guess it's simply a way to separate the dynamic data from the code. Good luck, -- Scott
[jQuery] Re: Randomly insert one of a pre-defined HTML extracts?
Aahh, fair enough. I'm having to design this for somebody else to maintain (someone with little coding knowledge) and I guessed just having one file would be easier than having two. I'll ask their opinion. But thank you for everything. :-D ~ Zarino On Jun 27, 11:38 pm, Scott Sauyet [EMAIL PROTECTED] wrote: zarino wrote: Excellent! That was it. It all works brilliantly now. :-D As a side-note: Am I being really picky here, or could the contents of facts.js and custom.js be combined into one file? Seems a shame to have a whole separate javascript file containing just one line of code. That would be fine. The only reason I thought they should be separated is that the list of facts is likely to change regularly; the other should remain static. If you have other JQuery on the page, you can put it together with what's in custom. I guess it's simply a way to separate the dynamic data from the code. Good luck, -- Scott
[jQuery] Re: Randomly insert one of a pre-defined HTML extracts?
Wow, Scott, that's thorough!
The third method seems the most plausible. I've tried to implement it,
but the fact snippets don't appear in the 'factholder'. Safari tells
me there's an error loading the page, and I see that it's tried to
load the file website/facts/undefined.html (instead of website/scr/
facts/FactA.html) ... so *that*s why the fact doesn't display.
How come the javascript governing which file-name to choose isn't
working? Also, does the path in the jQuery .load event have to be
relative to that javascript file, or the 'parent' html file?
- - - - -
Here's my code, just incase that helps...
// in 'facts.js' (url: website/scr/facts.js)
var facts = [FactA, FactB, FactC];
// in 'custom.js' (url: website/scr/custom.js)
$(document).ready(function() {
var fact = facts[Math.floor(facts.size * Math.random())];
$(#fact-box).load(facts/ + fact + .html);
});
// HTML snippets in the directory: website/scr/facts/ (eg: website/
scr/facts/FactA.html)
// in the 'parent' HTML page (url: website/default.htm)
script src=scr/facts.js type=text/javascript/script
script src=scr/custom.js type=text/javascript/script
div id=fact-box
/div
Cheers.
~ Zarino
On Jun 27, 3:40 pm, Scott Sauyet [EMAIL PROTECTED] wrote:
zarino wrote:
Server-side coding would be nice, but it's not PHP-enabled, and I
think the only method would through ASP which I, frankly, haven't the
foggiest clue about! For the time it'll take to download the
relatively small number of 'facts', it shouldn't be a problem.
Wasted bandwidth! Tsk, tsk! :-)
For small amounts of data, it's certainly not a big deal. Then you are
left with two straightforward techniques, and one trickier option.
--
The first one is relatively obnoxious unless you have access to *some*
dynamic method on the server. (Do you have SSI available?) This would
be to have the divs included on each page, but hidden with some
combination of CSS and JS, then to use JS to display the randomly
selected one.
Pros: Leaves the HTML formating inside HTML
Easy to implement
Cons: Large maintenance issue unless you have some dynamic include
Increased bandwidth
--
The second one is to do the HTML formating from Javascript. Download a
JSON array with all your facts, randomly, choose one, and format HTML
from it to add to the DOM.
Pros: Pretty easy to implement
Centralized maintenance of your facts
Cons: Less flexibility in HTML facts, as they're created by static code.
--
The trickier one involves AJAX: format each fact in its own HTML file,
and maintain a simple JSON list of filenames. At load time, randomly
select one element from the list, and AJAX it into the DOM.
Pros: Leaves the HTML formating inside HTML
Centralized maintenance of your facts
Cons: More complex to implement
This one is not that hard. If you would like your facts to have some
simple flexibility in layout and design, I would recommend it. Here's
some pseudo-code:
// in facts.js:
var facts = [factA, factB, factC, brandNewFact, faceTheFacts];
// in a script included after facts.js:
$(document).ready(function() {
var fact = facts[Math.floor(facts.size * Math.random())];
$(#factHolder).load(/path/to/fact/dir/ + fact + .html);
});
Adding a new fact involves creating an HTML snippet in a file and
updating the list in facts.js. You can delete one by simply updating
facts.js.
Cheers,
-- Scott
I take it, using your code, Glen, I'd have a series of hidden divs and
then jQuery will randomly pick one and show it?
This, I presume, will require all of the divs to be duplicated in all
of the pages I want to have a random fact displaying on? Is there a
way to have the 'facts' centralised -- for example in the jQuery
'custom.js' file or something -- so it's easy to add and remove new or
old facts?
Thanks for your imput. We've nearly cracked it! :-D
Zarino
On Jun 26, 11:07 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I agree. I was stretching his original intent. :)
Glen
On 6/26/07, Scott Sauyet [EMAIL PROTECTED] wrote:
Glen Lipka wrote:
Scott, I can think of a couple reasons for this.
Let's say you want to scroll some facts or quotes or customer
testamonials across the screen, but you also want to start at a random
one.
That sort of thing. Or scrolling images.
Oh, I can see plenty of reasons for choosing a random element of a set,
but the OP said
I'd like to create a repository of 'facts' and have jQuery serve up
a different fact at random with each page-load.
which sounds more server-side to me. Not a big deal either way. As you
pointed out, it's easy enough to do in JQuery if that's what's needed.
-- Scott
[jQuery] Re: Randomly insert one of a pre-defined HTML extracts?
Hm... I've made the path relative to the HTML file, but it still doesn't work. You can now find all of the files here - http://zarino.zappia.co.uk/keep/ ...or for quick reference: - http://zarino.zappia.co.uk/keep/default.html - http://zarino.zappia.co.uk/keep/scr/files.js - http://zarino.zappia.co.uk/keep/scr/custom.js - http://zarino.zappia.co.uk/keep/scr/facts/FactA.html (etc...) The page's very much still under construction, and has proprietary Blogger tags everywhere, but the fact-box in which the facts should be generated is in the right-hand sidebar, between the return to home page and KEEP comic strip areas. Thanks for you input. On Jun 27, 7:44 pm, Scott Sauyet [EMAIL PROTECTED] wrote: zarino wrote: How come the javascript governing which file-name to choose isn't working? Also, does the path in the jQuery .load event have to be relative to that javascript file, or the 'parent' html file? The path should be relative to the HTML page, not the Javascript. If that doesn't work, do you have a public location to post it so that we can look at it? -- Scott
[jQuery] Re: Randomly insert one of a pre-defined HTML extracts?
Excellent! That was it. It all works brilliantly now. :-D As a side-note: Am I being really picky here, or could the contents of facts.js and custom.js be combined into one file? Seems a shame to have a whole separate javascript file containing just one line of code. Thanks so much. ~ Zarino On Jun 27, 8:34 pm, Scott Sauyet [EMAIL PROTECTED] wrote: zarino wrote: Hm... I've made the path relative to the HTML file, but it still doesn't work. My fault. Try: var fact = facts[Math.floor(facts.length * Math.random())]; not var fact = facts[Math.floor(facts.size * Math.random())]; -- Scott
[jQuery] Randomly insert one of a pre-defined HTML extracts?
Hi! Is it possible to use jQuery to choose an extract of HTML (for example one div out of a possible ten to choose from) and insert it in a page? I'd like to create a repository of 'facts' and have jQuery serve up a different fact at random with each page-load. I've searched and searched the web, but nothing seems to jump out. Is it too difficult? And if so, does anybody know any other way? Many thanks. Zarino Zappia
