[RESOLVED] Using jQuery with JavaScript function

Yo, 'sup?

Code:

---

function minimise(minid)
{
        $(minid.' > div.body').slideUp("fast");
}

---

That code doesn't work.

Anybody know what I'm suppose to write for the minid.' > div.body' bit?

Is minid supposed to be an id? If so, you're missing the #.

Code:

---

$('#'+minid+' > div.body').slideUp('fast');

---

Oh that's annoyingly obvious, but doesn't work...

Just tried the code without the variable to make sure it is working, it does, so that's fine. I'm playing around with defining variables now. Any other ideas?

Turns out my the other similar code isn't working in Firefox at all...

Code:

---

function closewidget(closeid)
{
        $(closeid).fadeOut('slow');
}

---

Firefox says "Error: blog is not defined" (blog is the closeid as an example)

Works in Safari and Internet Explorer (never thought I'd write that).

Update: been searching around for the Firefox and it seems like the entire web development world, who handles JavaScript is pretty pissed off with Mozilla. Haven't found a solution that keeps jQuery happy yet though...

jQuery needs the # in the selector. So I don't know what to tell you. I've done this time and time again and it works just fine in all browsers.

Code:

---

var closeid='awesome';
$('#'+closeid).fadeOut('slow');

---

If you have an element with an id of "awesome" on the page, it will fade out.

See that's what I thought, but this code works!

Code:

---

function minimise(minid)
{
        $(minid).slideToggle('fast');
}

---

Is minid a string? And what exactly is it's value? Also, is this online anywhere so I can check out your DOM?

It's on a private server, it's got NDAs attached to it!

minid is the id of the div.

Code:

---

<div class="widget" id="blog">
        <div class="title">
                <div class="close" onclick="closewidget(blog)"></div>
                <div class="minimise" onclick="minimise(blog)"></div>
                <h3><a href="/blog/">Blog</a></h3>
        </div>
        <div class="body">
                <!-- body to slideup -->
        </div>
</div>

---

So in theory the JavaScript and jQuery should be

Code:

---

function minimise(minid)
{
        $('#'+minid+' > div.body').slideUp("fast");
}

---

Which should keep the 'title', with the buttons, but close the 'body' of the 'widget'.

Thanks for the help so far, it's a real puzzler!

Your problem is here: minimise(blog)

'blog' is not a string. That's probably why you're getting mixed and unexpected results.

You should use:

Code:

---

<div class="minimise" onclick="minimise('blog')"></div>

---

See the difference? Now 'blog' is a string.

Oh what a douche... Yeah, it works! You're a genius!

Still have the Firefox problem though – both work in Safari and Internet Explorer, but Firefox is still whinging about it not being defined.

Sorted out Firefox, it just needed a little attention around some other functions and it was happy!

Thanks Taco!

Well, to many help you out without seeing the problem, you're using jQuery, but not using it to it's fullest. The onclick attribute on an element shouldn't be used when binding click events. jQuery has support for that built in.

Code:

---

$(document).ready(function(e)
{
    $('#body .title .close').click(function(e)
    {
        $('#body > div.body').slideUp('fast');
    });
});

---

You should be doing something like that.

I didn't know it could do that! First proper jQuery project I've worked on, so a little slow! Damn useful, thank you.