[jQuery] Trying to get CrossSlide plugin to work
I'm trying to implement the CrossSlide plugin with Drupal and I'm not
having any luck. Based on some help I got from this group, I have
this code that sets a different banner depending on the URL in
script.js (at www.oregonpatrolservice.com):
Drupal.behaviors.setBanner = function (context) {
var img = {
'/content/about-us': 'images/OPS-Banner-02.jpg',
'/content/services': 'images/OPS-Banner-03.jpg',
'/content/ops-armory': 'images/OPS-Banner-04.jpg',
'/content/careers': 'images/OPS-Banner-07.jpg',
'/contact': 'images/OPS-Banner-08.jpg',
'/user': 'images/OPS-Banner-05.jpg'
}[location.pathname] || 'OPS-Banner-01.jpg';
$("td#header").css("background","url(/sites/all/themes/theme060/
images/" + img + ") no-repeat");
};
So I have the jquery.cross-slide.js file included in the header, and
this code in script.js:
Drupal.behaviors.crossSlideBanner = function (context) {
$('td#header').crossSlide({
sleep: 5, //in sec
fade: 2//in sec
}, [
{ src: 'images/OPS-Banner-01.jpg'},
{ src: 'images/OPS-Banner-02.jpg'},
{ src: 'images/OPS-Banner-03.jpg'},
{ src: 'images/OPS-Banner-04.jpg'},
{ src: 'images/OPS-Banner-05.jpg'},
{ src: 'images/OPS-Banner-06.jpg'},
{ src: 'images/OPS-Banner-07.jpg'},
{ src: 'images/OPS-Banner-08.jpg'},
{ src: 'images/OPS-Banner-09.jpg'},
{ src: 'images/OPS-Banner-10.jpg'}
]);
};
But I get nothing displayed. The only thing I can think of is that my
original script sets the background property of td#header, where
CrossSlide replaces the content of td#header. Even so, it seems that
I should see something at least.
Can anyone tell me what I'm missing?
Thanks.
Steve
[jQuery] Re: How to get parts of URL after domain
OK, so if I try using that to set my banner, I come up with something
like this:
var img = {
'/ops/content/services': 'banner2.jpg',
'/ops/content/services': 'banner3.jpg',
}[location.pathname] || 'banner1.jpg';
$("td#header").css("background","url(/ops/sites/all/themes/
theme060/images/" + img + ") no-repeat");
and it works like a charm. All in 5 lines of code. WOO HOO! Thanks
a ton!
Steve
But I keep getting an error
On Dec 22, 12:50 pm, "Michael Geary" wrote:
> Sure, it's just a combination of some other JavaScript features that may
> look more familiar if we take them one by one:
>
> // Use an object literal to create an object
> // with two properties. Each property has
> // a name and a value.
> var images = {
> '/services': 'one-image.png',
> '/about-us': 'another-image.png'
> };
>
> // Select one of the properties from the
> // object by name, and get its value. If
> // not found, the value is undefined.
> // (That doesn't mean an unpredictible
> // value, it means the specific value in
> // JavaScript known as "undefined".)
> var img = images[location.pathname];
>
> // Select a default image if img is undefined.
> img = img || 'default-image.png';
>
> // Or another way to do that last statement
> // (means exactly the same thing):
> if( ! img )
> img = 'default-image.png';
>
> -Mike
>
> > From:Wonder95
>
> > Could you explain that construct? I'm no JS expert, and I
> > haven't seen it before.
>
> > Thanks.
> > > If you want to do it in JavaScript, you don't need jQuery, regular
> > > expressions, or indexOf. window.location (or just location) has
> > > several properties that give you different pieces of the URL.
> > > location.pathname is the one you want here. Note that it
> > includes the leading slash. For example:
>
> > > var img = {
> > > '/services': 'one-image.png',
> > > '/about-us': 'another-image.png'
> > > }[location.pathname] || 'default-image.png';
[jQuery] Re: How to get parts of URL after domain
Could you explain that construct? I'm no JS expert, and I haven't
seen it before.
Thanks.
> If you want to do it in JavaScript, you don't need jQuery, regular
> expressions, or indexOf. window.location (or just location) has several
> properties that give you different pieces of the URL. location.pathname is
> the one you want here. Note that it includes the leading slash. For example:
>
> var img = {
> '/services': 'one-image.png',
> '/about-us': 'another-image.png'
> }[location.pathname] || 'default-image.png';
>
> -Mike
[jQuery] How to get parts of URL after domain
I"m sure this is easy to do, but I can't figure it out for some reason. I'm writing a simple little function in Drupal (in script.js in my theme) to display a different banner image (as a background for an element) based on the URL. So, for instance, if the URL is http://www.mysite.com/services, I want to display one image, if it's http://www.mysite.com/about-us, I want to display another one, and so on. Is there a built in way to get everything after "http:// www.mysite.com/" in jQuery, or do I just need to use window.location and do something like use a regular expression to get what I need? Thanks. Steve
[jQuery] Syntax for specifying size of new window with window.open
OK, I know I'm not the first one to ask this, but I'm stumped. I'm
working on a Drupal site, and the client didn't like my nice block I
created for a little calculator, so they want a popup window instead.
So, I created a separate .htm page with the HTML for the form (four
fields plus a button to calculate), and all I want to do is open it in
a separate small window (175X250). However, I can't seem to get the
syntax right for specifying the size If I do this:
$(function() {
$('a[href$=.htm]').attr('target','blank').click(function () {
window.open($(this).href);
return false;
});
});
it opens in another full sized tab, but when I try to add the other
parameters to window.open, my IDE tells me something is wrong, and it
doesn't work (something like this):
$(function() {
$('a[href$=.htm]').attr('target','blank').click(function () {
window.open($(this).href,,"width=200 height=200");
return false;
});
});
Is that the way to specifiy the size of the new window, or is there a
better way?
Thanks.
[jQuery] Re: Adding error message in HTML with form validation
On Aug 30, 2:06 pm, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
> This works fine for me:
>
> $("").appendTo("#main").text("appendTo").addClass("cool");
>
> as does:
>
> $('' + 'insertAfter' + '').insertAfter("#main").addClass('cool');
>
> See here for a full page example with both:
>
> http://paste.pocoo.org/show/83938/
>
> - Richard
>
> Richard D. Worthhttp://rdworth.org/
Richard, thanks for that example. That clarifies. Karl, also thanks
for your code. That worked perfectly.
Steve
[jQuery] Re: Adding error message in HTML with form validation
> $('#edit-square-area').after(''+errorMessage+'');
>
> - Richard
OK, thanks, that works in this case. But say for some reason I need
to add a class to the dynamically. What would the syntax be to
shift focus to that element after appending it to #edit-square-area so
that I could use addClass?
Thanks.
Steve
[jQuery] Adding error message in HTML with form validation
I'm trying to do some simple form validation, and I can get one
response to work but not another one. I have a simple form in a
sidebar block (in Drupal) that is an area calculator (user enters
length, width, and height, clicks Calculate button, and area field is
filled in via jQuery). That part works fine. I'm trying to add some
form validation so that the user is only allowed to enter numbers in
the fields using the isNaN function, and the part where I (try to)
display a message isn't. If I use this:
$(function() {
$('#calculate-square-form input:text').blur(function() {
if (isNaN($(this).val())) {
alert("Only numbers are allowed");
$(this).val('');
};
});
});
it works fine; the alert box is displayed, and the field is blanked
out. However, if I try to be a little more graceful and display the
error as HTML like this:
$(function() {
$('#calculate-square-form input:text').blur(function() {
if (isNaN($(this).val())) {
var errorMessage = 'Please enter only numbers';
$('').text(errorMessage).appendTo('#edit-square-
area');
$(this).val('');
};
});
});
then nothing happens (I plagiarized this from chapter 8 of "Learning
jQuery").
I tried this:
$(function() {
$('#calculate-square-form input:text').blur(function() {
if (isNaN($(this).val())) {
var errorMessage = "Please enter only numbers";
$('').addClass('error').text(errorMessage).insertAfter('#edit-square-
area');
$(this).val('');
};
});
});
but no luck. This will work
$(function() {
$('#calculate-square-form input:text').blur(function() {
if (isNaN($(this).val())) {
var errorMessage = "Please enter only numbers";
$('#edit-square-area').after(''+errorMessage+''); */
$(this).val('');
};
});
});
but it will display the error message for each time the user exits the
field. I want to add a class to the new div so I can filter on it and
delete it if it exists at the beginning of the function, but
adding .addClass adds the class to #edit-square-area, not my new div.
How can I add the class to my new div?
Thanks.
