Solved

Captions within a Image div in a Twitter Bootstrap enviornment

Posted on 2014-01-17
27
3,751 Views
Last Modified: 2014-01-19
Hello

I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.

Again, because this is a twitter bootstrap site, I can't put width and height for the images in the html.

Then the next challenge is to get text to wrap around the images and text.  

Here is a mockup of what I would like it to look like.  In my next comment I will provide a link to my test development site.
MockupThanks for any help you can provide.
0
Comment
Question by:Rowby Goren
  • 15
  • 11
27 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790015
Okay.  Here is a link to a test site, with Twitter bootstrap responsive enabled.

Is this possible with most -- ideally all --  modern browsers.  Including Internet Explorer 8 :)

test site
Thanks,

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790073
You first have to the the width of the image using jquery or javascript, then apply the width to the caption.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    #image_div{float:left;margin-right:.5em;margin-bottom:.5em;}
    .caption{text-align:center;text-size:80%;padding-left:5px;padding-right:5px;}
  </style>
  <script>
    $(function() {
    var picWidth=$('#MainImage img').width();
    $('div.caption').width(picWidth);
    });
    
  </script>
</head>
<body>
  <!--

small
http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg

med
http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg

  -->
  <div class="row">
    <div id="image_div" class="col-sm-3">
      <div id="MainImage"><img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg"></div>
      <div class="caption">This is the caption This is the caption This is the caption This is the caption</div>
    </div>  
    <div id="text_div" class="col-sm-9">
    <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
       <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
  </div>
  </div><!-- row end -->    
    
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790112
This needs more tweaking. I can come back to it later.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790651
Thanks Scott.

Just a further clarification. In my question say "An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page."

I should have been more specific. I should have said

FOR EXAMPLE, an image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.  The widths could be any width, depending on the photo."

I figure you assumed that, but I wanted to be clear.

I see you want to further tweak it.  But I'll put up your current version and let's see how it looks so far  with twitter bootstrap.

Thanks!

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790653
Here it is working on screen below 1200px.   Is this in the right direction for you?
http://jsbin.com/OZIHeCAF/1/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<style>
  body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
      #image_div{float:left;margin-right:.5em;margin-bottom:.5em;}
    .caption{text-align:center;text-size:80%;padding-left:5px;padding-right:5px;}
  </style>
    <script>
    $(function() {
    var picWidth=$('#MainImage img').width();
    $('div.caption').width(picWidth);
    });
    
  </script>
  <meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <!--

small
http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg

med
http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg

  -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

    <div class="row">
    <div id="image_div" class="col-lg-1">
      <div id="MainImage"><img src="http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg"></div>
      <div class="caption">This is the caption This is the caption This is the caption This is the caption</div>
    </div>  
    <div id="text_div" class="col-lg-11">
    <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
       <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
  </div>
  </div><!-- row end -->  

    </div><!-- /.container -->
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790655
The width does not matter here because I am getting the width of the image using jquery.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790680
Hi

I will put the new code in -- give me a few minutes....

Thanks

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790692
I think I put it in correctly but it does not seem to wrap correctly.

One thing, this is a Joomla 3.2 site and Joomla uses Twitter bootstrap 2.3.2 . Your bootstrap link is to bootstrap  v3.0.3,

So I left out the link to <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

I also left out the link to  jquery.min.js  because I looked at my source and I see there is a jquery linked to
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

So I am wondering if the issue is because of the above.  

I see your navigation buttons in the source, but when I save them they disappear from the site.  I assume that is because you are using bootstrap 3 -- which would be nice, but Joomla does not support Bootstrap 3 in its current version.

test link

Any thoughts?

Thanks!

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790742
The image does not change in v2 like it does in v3.  It can be simpler.   http://jsbin.com/uJufuWAP/1/  

Credit to Cathel

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
  <style>
    .img_container{
      float:left;padding-right:10px;padding-bottom:5px;
      
    }
    
  </style>
<title>JS Bin</title>
</head>
<body>
  <div class="row-fluid">
    <div class="span12">
   
   
      <div class="img_container">
      <img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg">
        <div class="caption">My Caption Goes Here</div>
      </div>
       <p>
      I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
       <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
        <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
 
    </div>
  </div><!-- row end -->    
    
</body>
</html>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790798
Hi Scott

Looks great.  Is there any way the caption for the image can wrap within the div -- for most modern browsers.

Here's a link where I show three examples,  One after the other (scroll down the page:
test page

1)  Exact code
2)  Exact code with longer caption -- lack of word wrap pushes wrapped text away
3)  Exact code with <br/> added to caption text.  If necessary I can use that -- if word wrap can't easily be implemented within the caption.

Thanks!

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39790881
http://jsbin.com/uJufuWAP/3/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
  <style>
    .img_container{
      float:left;padding-right:10px;padding-bottom:5px;
      
    }
    .caption{text-align:center;}
  </style>
  <script>
    $(function() {
      // when page loads
    var imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
    });
    // when window resizes
    $( window ).resize(function() {
      imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
    });
    
  </script>
<title>JS Bin</title>
</head>
<body>
  <div class="row-fluid">
    <div class="span12">
   
   
      <div class="img_container">
      <img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg">
        <div class="caption">My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here</div>
      </div>
       <p>
      I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
       <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
        <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.  

Because this is going to be a reusable template, the widths of the images will vary.  An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.
      </p>
 
    </div>
  </div><!-- row end -->    
    
</body>
</html>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791217
Hi

I swapped out the header code and the HTML

But the caption is not wrapping when the text is wider than the image.  I have two version on this page.  One with a short caption that is fine.

Below it is a long caption and it is not wrapping.

It does wrap when I start to minimize the screen.  But not when the screen is at full resolution.

link to test page

Any thoughts?  Should I just use br/ 's?


Thanks!

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791254
I don't think the size is being computed because you have a mix of libraries.  

Try changing

 $(function() {

to

jQuery(function($){
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791287
HI

Perfect in firefox
Chrome has I am sure a fixable issue.  (Each individual word is wrapping)
Perfect in IE 11
Safari for windows has the same issue as Chrome (each individual word is wrapping.)

Any thoughts?

Getting there!!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791305
Update.

Apparently IE 8 doesn't wrap at all based on a browser emulator.   I realize that may not be fixable for an old browser.

Also my Android Galaxy 3 and Samsung tab has the same problem -- no wrap at all.  Also I realize might not be fixable.

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791327
>Safari for windows

I think you don't have to worry about safari for windows.  

Lets see if the image size is being calculated.  Put some alerts in the code to test. One when the page loads and one when it resizes.  See if that fires and results.

<script>
    $(function() {
      // when page loads
    var imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95

alert(imgWidth);


    $('.caption').width(imgWidth+'px');
    });
    // when window resizes
    $( window ).resize(function() {
      imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95

alert(imgWidth);

    $('.caption').width(imgWidth+'px');
    });
    
  </script>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791341
Try using a smaller image to start with.  Test it with something half the width.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791543
Hmmm

Used smaller image, put new code in head, now the function seems to have been stopped.


link to page
Here's the html around the image and caption (you can see it in the source):

<div class="span12">
		<div class="img_container">
			<img align="bottom" alt="banana_smaller.jpg" src="images/banana_smaller.jpg" />
			<div class="caption">
				My Caption Goes Here My Caption Goes Here</div>
		</div>
		<p>
			I would like t

Open in new window


And here's what's in the head:

    </script>
<script>
    $(function() {
      // when page loads
    var imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95

alert(imgWidth);


    $('.caption').width(imgWidth+'px');
    });
    // when window resizes
    $( window ).resize(function() {
      imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95

alert(imgWidth);

    $('.caption').width(imgWidth+'px');
    });
    
  </script>
</head>

Open in new window


....Rowby
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39791629
Please try and change out the script inside the function with below.  Let's see what is going on.

http://jsbin.com/uJufuWAP/7/edit
small http://jsbin.com/uJufuWAP/6/edit

      var capText='My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here'
      // when page loads
    var imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
      $('.caption').text('start: '+imgWidth+' '+capText);
    });
    // when window resizes
    $( window ).resize(function() {
      imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
      $('.caption').text('changed: '+imgWidth+' '+capText);

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791657
Hi

I am not sure if I correctly replaced the head code.  Here it is from the source of the page:
<style>
    .img_container{
      float:left;padding-right:10px;padding-bottom:5px;
      
    }
    .img_container{text-align:center;}
  </style>
  <script>
    $(function() {
           var capText='My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here'
      // when page loads
    var imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
      $('.caption').text('start: '+imgWidth+' '+capText);
    });
    // when window resizes
    $( window ).resize(function() {
      imgWidth=$('.img_container img').width();
      imgWidth=imgWidth*.95
    $('.caption').width(imgWidth+'px');
      $('.caption').text('changed: '+imgWidth+' '+capText);
                                            
    });
    
  </script></head>
<body>

Open in new window


And here's the html from my editor source:
<div class="row-fluid">
	<div class="span12">
		<div class="img_container">
			<img src="http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg" />
			<div class="caption">
				My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here</div>
		</div>
		<p>
			I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption. I have set up a test

Open in new window


Here's the result:  LInk to page


Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791659
In chrome I used their, I think developer's tools, (Shift-ALt J) and see this in the Console tab.

Uncaught TypeError: Object [object global] has no method 'resize' responsive-image-wrap-test:242
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

(of course I have no idea what the above means and if it is relevant.)

BTW your  two http://jsbin.com/ demo links look fine in my android phone and tablet.  Also fine on Windows IE and Chrome and Opera.  Also fine in IE 8 Browser Stack emulator.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791672
That is on this bit of script.  
<script>
    window.addEvent('load', function () {
        new JCaption('img.caption');
    });
    var Joomla = Joomla || {};
    Joomla.addCloakedMailto = function (f, g) {
        var a = document.getElementById(f);
        if (a) {
            for (var e = a.getElementsByTagName("span"), b = "", c = "", d = 0, h = e.length; d < h; d++) b += e[d].getAttribute("data-ep-afb9c"), c = e[d].getAttribute("data-ep-b6e11") + c;
            a.innerHTML = b + c;
            g && (a.parentNode.href = "mailto:" + b + c)
        }
    };
    var modal_class = 'modal_link';
    var modal_defaults = {
        opacity: '0.8',
        maxWidth: '95%',
        maxHeight: '95%',
        fixed: 'true',
        current: '{current} / {total}',
        previous: 'previous',
        next: 'next',
        close: 'close',
        xhrError: 'This content failed to load.',
        imgError: 'This image failed to load.'
    };
    var CKTEXT_PLG_MAXIMENUCK_MENU = 'Menu';
    jQuery(document).ready(function ($) {
        $('#maximenuckVisibleDesktop').MobileMaxiMenu({
            usemodules: 0,
            container: 'menucontainer',
            showdesc: 0,
            showlogo: 1,
            useimages: 0,
            menuid: 'maximenuckVisibleDesktop',
            displaytype: 'flat'
        });
    });
    jQuery(document).ready(function ($) {
        $('#EthnomaximenuckVisibleDesktop').MobileMaxiMenu({
            usemodules: 0,
            container: 'menucontainer',
            showdesc: 0,
            showlogo: 1,
            useimages: 0,
            menuid: 'EthnomaximenuckVisibleDesktop',
            displaytype: 'flat'
        });
    });
    jQuery(document).ready(function ($) {
        $('#musicOLOGYmaximenuckVisibleDesktop').MobileMaxiMenu({
            usemodules: 0,
            container: 'menucontainer',
            showdesc: 0,
            showlogo: 1,
            useimages: 0,
            menuid: 'musicOLOGYmaximenuckVisibleDesktop',
            displaytype: 'flat'
        });
    });
    jQuery(document).ready(function ($) {
        $('#MusicmaximenuckVisibleDesktop').MobileMaxiMenu({
            usemodules: 0,
            container: 'menucontainer',
            showdesc: 0,
            showlogo: 1,
            useimages: 0,
            menuid: 'MusicmaximenuckVisibleDesktop',
            displaytype: 'flat'
        });
    });
    jQuery(document).ready(function ($) {
        $('#maximenuckBottom').DropdownMaxiMenu({
            fxtransition: 'linear',
            dureeIn: 0,
            dureeOut: 500,
            menuID: 'maximenuckBottom',
            testoverflow: '0',
            orientation: 'horizontal',
            behavior: 'mouseover',
            opentype: 'open',
            fxdirection: 'normal',
            directionoffset1: '30',
            directionoffset2: '30',
            showactivesubitems: '0',
            ismobile: 0,
            menuposition: '0',
            effecttype: 'dropdown',
            fxduration: 500
        });
    });
    jQuery(document).ready(function ($) {
        $('#maximenuckBottom').FancyMaxiMenu({
            fancyTransition: 'linear',
            fancyDuree: 500
        });
    });

    function keepAlive() {
        var myAjax = new Request({
            method: "get",
            url: "index.php"
        }).send();
    }
    window.addEvent("domready", function () {
        keepAlive.periodical(3600000);
    });
    jQuery(document).ready(function () {
        jQuery('.hasTooltip').tooltip({
            "container": false
        });
    });
    var ps_settings_279 = {
        "searchText": "Search...",
        "nextLinkText": "Next",
        "prevLinkText": "Prev",
        "viewAllText": "View all results",
        "resultText": "Found {0} results",
        "readMoreText": "Read more...",
        "baseUrl": "http:\/\/dev6.musicology.ucla.edu\/",
        "ordering": "newest",
        "use_grouping": false,
        "searchType": "all",
        "pagesize": 15,
        "numsearchstart": 4,
        "use_images": true,
        "show_read_more": true,
        "areas": ["events", "content"]
    };
    pixsearches.push(279);
    jQuery(document).ready(function ($) {
        $('#musicOLOGYmaximenuckVisibleDesktop').DropdownMaxiMenu({
            fxtransition: 'linear',
            dureeIn: 200,
            dureeOut: 200,
            menuID: 'musicOLOGYmaximenuckVisibleDesktop',
            testoverflow: '0',
            orientation: 'horizontal',
            behavior: 'mouseover',
            opentype: 'slide',
            fxdirection: 'normal',
            directionoffset1: '30',
            directionoffset2: '30',
            showactivesubitems: '0',
            ismobile: 0,
            menuposition: '0',
            effecttype: 'dropdown',
            fxduration: 20
        });
    });
</script>

Open in new window

You know your code better then I do.  I am just making up classes for the sample.  In this case,  there is javascript already going after a class called caption.  Change the sample classes I gave you and see what happens. If it works in the sample link I gave you on jsbin and it is not working on your site, you just need to eliminate some items to find the problem.  This may take some time looking because there is so much code on this site.

Also it is important that your code validates especially when you are using jquery to mess with the dom.   Some of the issues in your page not validating may not make a difference but others will.

For instance <td/> should be </td>

Go through the validator first there are not many errors and fix those.  Then switch out the class names I gave you.  Maybe simply add a _test like  .caption_test for now so you know they will not clash with something else.  This needs to be done in the html, css and  jquery.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39791678
Ah,

Will do the validator and the other things you mentioned.  And change caption etc. etc.

So let me resume in the  morning, and I'm sure it will work out fine!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39792725
Hi

As I think about this, I think I will not use the jquery resizing.  

I need the solution to be very low tech because of the wide range of browsers this site will be seen on.  For example, some of the staff is using Windows XP and IE8 (in some cases with windows 7 compatibility mode turned on.)

I have quirks (i think that is what it is called) enabled in the html.  

Plus making it compatible with the large range of tablets and cells which will be accessing the site.

So I am looking back for the code that did the wrap without Jquery -- and we'll just do <br/> to get the captions to wrap correctly.  

Keeping it pure css I think is the safest??????

Anyway that's my plan.

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39792740
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39793162
OK

I combined your code with a joomla plugin I found that lets me put in a image caption via the image's Advisory Title (aka Title) metatag.  

It lets me do <br/> and bold and itallic and wraps.  


So thank you for helping me troubleshoot this!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39793164
Thanks for sticking with me on this!

Rowby
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to dynamically set the form action using jQuery.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now