Resize div with jQuery if statement

Hi Guys.

I’m having an issue at the moment that I think can be sorted out with jQuery, but I’m not 100% sure of the correct syntax etc. I’m very much a newbie when it comes to jQuery and JavaScript, so please forgive me if I use the wrong terminology when asking my questions here.

Ok, what I’m trying to do is this. I have a Joomla template that I’m working from and it has a slide show that, for some reason, has been made part of the header. I’m not going to editorialize about how that’s a really stupid move (oops, ok, so I won’t editorialize more then), suffice to say that it makes things difficult if you want to take the module out of a page. What it does is leave a big chunk of space where the slide show used to be and I want to make it collapsible so that if the module isn’t present on the page, the content comes up to meet the menu system.

The module generates two css rules, one called .coin-slider and the other called #coin-slider. What I’m trying to ascertain is this, does the class or id exist on the page and if not, make the header smaller. The following code is what I have pieced together so far:

$(document).ready(function() {
if ($(.coin-slider) || (#coin-slider).is(':visible')) {
$(.header).css('height', '547px');
} else {
$(header).css('height', '175px');
}
});

I know the (‘:visible’) part isn’t right, as the elements don’t have this as part of there rule sets. So, I’m asking what would be the correct thing to have here. Other than that, does it look about right?

Thanks in advance for your responses, looking forward to learning from you.

All the best,

Tim.

Actually this is very common practice and up to a few years back it was the preferred place to put JavaScript. Still is for a majority of developers. Most frameworks such as Joomla don’t lend themselves well to placing JavaScript in the head, but the body. Its just the nature of the beast given the limitations of such generic systems.

Hi Scallio.

Thanks for your reply mate.

Just a quick question… The height needs to change if the slider doesn’t exist. Would the code for that be as follows:

if ($("#coin-slider").length < 0) {
$(".header").css("height", "175px");
}

Does that look about right? Or am I missing the point?

Tim.

Leaving aside that the < should be a > it looks perfect ! :wink:

PS. I usually use .height(175); instead of .css(“height”, “175px”); but I suppose that’s just a matter of taste :slight_smile:

if you want to know if the element exists I’d do it as follows:


if ($("#coin-slider").length > 0) {
  // there is at least one element with the ID of "coin-slider"
  // (since it is an ID I hope they aren't multiple elements with the ID but it might be ...)
}

Also, I assume 547px is the normal height for when the slider is available and that is also the default height set using CSS rules somewhere?
If so, I wouldn’t include that in the function, because you’d basically be saying “set the height of that element to the height it already has”, which is quite redundant.
Instead just make one if: if the element does not exist then decrease the height of another element

:slight_smile:

Hi Guys.

Oddz…
I think you’ve misunderstood my original premise. While there is some JavaScript in the “head” tag, the slide show itself is in a div with the id of “header”. This div contains the logo, menu and slide show, which means that if you take the slide show out, it stays the same height with a massive green section. (Please see the image m_b_t_no_slideshow.jpg below)

You can see in the other images that when the jQuery is running, it breaks the slide show layout (please see m_b_t_with_script.jpg below). What I am trying to do is reduce the size of the “header” div from 547px to 175px when the slide show isn’t visible (this is done in the Joomla back end by not showing the module in the selected menu items). On the pages where it is visible, nothing changes.

I have attempted this using the following code:


$(document).ready(function() {
	if ($('.coin-slider').length > 0) {
		$('.header').height(547);
	} else {
		$('.header').height(175);
	}
});

When I use firebug, I can see the div with the class of .coin-slider (there is also a div with the id of #coin-slider inside that) on the page which has the slide show running. In the page without the slide show, there is no div. In the css, the .coin-slider class has the height & width set to !important, which might explain why it breaks the slide show on the front page, but I’m thinking that I must be doing something wrong with my jQuery code.

Thanks for being so patient guys, I really appreciate your input and help.

All the best,

Tim.