Question

I am using a wordpress plugin for sliding images and text. This banner has a content area (as all do) where the images which slides are displayed. text and images can be added from back end. Text is allowed to display over the image. I mean the text will show over the image.

What I am trying to do is forcing that text outside that content area so as to show it outside of it.

  <div class='uds-bb-slides'>
       <!--slide 1-->
       <div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 1</a> 
      <div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
              <div class='uds-bb-description-inside'>this is slide one text</div>
            </div>
      </div>
      <!--slide 2-->
       <div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 2</a> 
      <div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
              <div class='uds-bb-description-inside'>this is slide two text</div>
            </div>
      </div>
</div>

Above is the plugin output. from the javascript at page load , uds-bb-slides is made overflow:hidden so that the sliding images show within the content do not show outside it.

This is the problem due to which the forced text is not showing. but when in the plugin js file , I make it overflow : visible. text show outside but the banner images does not show only in the content box. Theay comes from the very right and goes to left. I mean it is not showing its animation properly

My question is how I can force the text outside while the image slides show properly.

Plugin Javascript snippet for making uds-bb-slides overflow hidden at page load

b(".uds-bb-slides",h).css({overflow:"hidden"});

Thanks

Answer 1

I’m not sure of what degree of control you have over the markup that is generated, but if it is possible, I would recommend somehow getting the div with class uds-bb-description uds-undefined to be a sibling of .uds-bb-slides, which has the overflow: hidden. You can then try to position it from there.

You could do this by putting both under a wrapper div with position: relative, and set both child div elements to position: absolute so that you can position them relative to the container.

If it is too difficult to change the output markup from the plugin, you could try doing it with JavaScript. jQuery would make this job easier, but would not be absolutely necessary.

The basic idea is to move the text in the DOM so that it is not longer a child of .uds-bb-slides and is therefore not effected by the overflow: hidden.

Edit:

Ahh…I just noticed you have the .uds-bb-slides and .uds-bb-slide classes, and I mistook the second for the first one.

In that case you may need to do some “hacking” to get the result you want. The plugin probably has some JavaScript that handles visibility and movement of the whole .uds-bb-slide elements, which means the text will go with it.

Option 1:

I don’t know exactly how you want it to look, but it sounds to me like you want the text to be on the side, but slide in as well just like the images. One thing you could do is have two .uds-bb-slides elements. The first will be the regular one with the images, but now without any text. The second will have only the text without the background image. You can then attach the event that triggers the image to slide, to the event that causes the text to slide.

Say there is a button (I don’t know if there actually is one) that you click to slide the image. You can do something like this with jQuery:

// This is jQuery
$('.btnSlideImage').click(function() { // when you slide the image...
    $('.btnSlideText').click(); // trigger text slide
});

You might even be able to copy whatever code they use, and just apply it to your second slider for the same event as the first.

The problem with this is that you get that second slider, which may block clicks or have a default background. You may be able to just set the height and width to 0px, and set overflow: visible, so that the text appears. Again, it’s difficult to give exact details without knowing what is really going on.

Option 2:

You could write your own text slider and position it in the right spot. It doesn’t even have to slide – perhaps a fade will work for you, which may be much easier to do with jQuery, CSS3, or even pure JavaScript.

Then you can attach an event handler to whatever is causing the image to slide like in option 1:

// This is jQuery too
$('#whatever_makes_image_slide').click(function() {
    SlideMyText();
});