http://www.msiatlanta.com/backstage/Clients/SIA/index.html
I have a gallery that I got from Code Canyon which works well. But when inserting it into another div layer it stops working. I see the javascript code in the header points to .container, but since its also inside another div not sure if something needs to be changed. Could I get some help on this small issue? thanks.
Which is the new div, and why are you adding it?
I see the javascript code in the header points to .container
Where’s that? I don’t see it.
The new div it is in is .conatainer #homeBanner - This is how I have my site laid out.
It’s in the header Under the javascript.
<script type="text/javascript">
$(document).ready(
function() {
$(".container").wtRotator({
width:878,
height:300,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_numbers:true,
display_timer:true,
mouseover_pause:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"image",
lock_tooltip:true,
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
}
);
</script>
at the very top of the code it says that. So not sure if this is a CSS issue or javascript. Thanks.
You have this in your JS:
$("[COLOR="Red"].[/COLOR]homeBanner").wtRotator({
But the div has an id, not a class, so try this:
$("[COLOR="Red"]#[/COLOR]homeBanner").wtRotator({
Nope. That didn’t work…
With things like this, I find that you need to install the code as received, and then make minor adjustments and test at each stage. Then if something goes wrong, you know where the trouble started. There are some styles in there hiding the content, but that doesn’t seem to be the whole story.
Yea I am going back through now and trying to test things one by one to narrow it down. Having no luck yet though. The test page that came with the gallery, when I edit it and put the gallery into another div it works fine. So it’s only when I’m putting it into my new page…
All the same, you are calling on a class that doesn’t exist, so might as well make it an id.
You also call on the jQuery library twice, which is a mistake. Not sure if that messes anything up, but at least remove the second link to the library. It could cause problems to call it again—especially after you’ve cited it already. If nothing else, it’s twice as much code to download.
I changed it to a class. But I also changed the js just now back to .container because thats how it came when I downloaded it. Also where am I calling on the jquery library twice? Can’t seem to find that…
In the <head> you have this:
<script type="text/javascript" src="js/[COLOR="Red"]jquery-1.6.1.min.js[/COLOR]"></script>
and then a little further down this:
<!-- jQuery Slideshow for Partners -->
<script type="text/javascript" src="js/[COLOR="Red"]jquery-1.2.6.min.js[/COLOR]"></script>
So, two versions of jQuery. Just use one, and put it up above any other jQuery code. 
Oh ok I see that now. So I can use the latest one and they both would work? I was under the impression you needed to use the library that the script was written for. I have another slideshow as you can see in the third grey box. That’s what the other one is for. So just delete it and use one?
Also here is the gallery working in the page I got it from Codecanyon,
See it works here. I copied and pasted everything I needed.
Generally yes, it should be fine to update to the latest script. Normally it’s backward compatible—at least in my experience, although I’ve seen a minor break once.
After going back through and trouble shooting it looks like I figured it out. Working fine, now just need to customize it. Thanks for your help.
Great, glad it’s on the way. Not sure if you’ve come to this yet, but the social buttons on the right are a bit messed up at this stage. See screen shot.
What browser are you on? I was making changes just now. Could you try taking another look?
On a Mac, and it’s the same in all browsers. It was like that before—just didn’t want to distract you. I’d prefer a CSS solution, but an easy fix is to add a <br>:
GET SOCIAL UPDATES FROM SIA[COLOR="Red"]<br>[/COLOR]
<img height="32" width="32" alt="Southern Insurance Agency Facebook" src="http://www.sitepoint.com/forums/images/social/facebook_32.png">
<img height="32" width="32" alt="Southern Insurance Agency Twitter" src="http://www.sitepoint.com/forums/images/social/twitter_32.png">
<img height="32" width="32" alt="Southern Insurance Agency LinkedIn" src="http://www.sitepoint.com/forums/images/social/linkedin_32.png">
EDIT: sorry, not true: not all browsers, but I first noticed in in Firefox.
I was going to use that temp. What would be a proper css way to do that? If you don’t mind when you have a chance could you show me? <br> will work for now. But it’s weird I don’t see that on a PC in any browser, IE, Firefox, Chrome…
Browsers each render text a bit differently, so you can’t rely on with width of the text to push those images down. I guess there’s nothing really wrong with the <br>. I prefer not to have raw text in a div, though. I normally use a <p>, but others disagree with that. One thing you could do instead is just reduce the width of the div a bit (and maybe adjust its position a little also to make up for it not being 100% wide.
Before you even mentioned it I did <p>. I don’t like using <br> too much. Seem to work now?