You can also use DIVs in place of figure and figcaption if those aren't your
thing. Just turn the names into classes an add div. Or name the classes
whatever you want.
Eg:
.figure {
...
}
<div class="figure">
...
</div>
$(document).find(".figure");
...
Etc...
Just make sure to convert all of them in the script as well or things won't
work.
HTH,
Best,
Karl
Sent from losPhone
On Jul 19, 2013, at 5:44 AM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Quick update. Caption wasn't resizing when you rotate your phone.
>
> [Code] >--------------------------------------
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> <meta charset="utf-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
>
> <title>Fit caption to bottom of image of unknown width in a responsive
> layout</title>
> <meta name="description" content="">
> <meta name="keywords" content="">
> <meta name="viewport" content="width=device-width; initial-scale=1,
> minimum-scale=0.8, user-scalable=1">
> <meta name="apple-mobile-web-app-status-bar-style" content="black">
> <meta name="apple-mobile-web-app-capable" content="yes">
>
> <style>
> <!--
>
> /*! normalize.css v2.1.2 | MIT License | git.io/normalize
> */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin
> dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em
> 0}abbr[title]{border-bottom:1px
> dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C"
> "\201D" "\2018"
> "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px
> solid si
lver;margi
> n:0 2px;padding:.35em .625em
> .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html
>
> input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html
>
> input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
>
> * {
> -webkit-box-sizing: border-box;
> -moz-box-sizing: border-box;
> box-sizing: border-box;
> }
>
> body { text-align: center;}
>
> img {
> width: auto; /* IE */
> height: auto;
> max-width: 100%;
> max-height: 100%;
> vertical-align: middle; /* Remove the gap between images and
> the bottom of their containers. */
> -ms-interpolation-mode: bicubic;
> }
>
> figure {
> width: auto;
> height: auto;
> max-width: 100%;
> max-height: 100%;
> background: #eee;
> border: 1px solid #ccc;
> margin: 20px auto;
> padding: 0px;
> display: inline-block;
> }
>
> .figureIMG {
> margin: 0px;
> padding: 0px;
> display: inline-block;
> }
>
> figcaption {
> width: 100%; /* IE */
> height: 100%;
> text-align: left;
> background: #ddd;
> margin: 0px;
> padding: 10px;
> }
>
> -->
> </style>
> <script type="text/javascript"
> src="http://code.jquery.com/jquery-1.9.1.js";></script>
> </head>
> <body>
> <figure>
> <img class="figureIMG" src="600px-CMB_Timeline300_no_WMAP.jpg"
> alt="">
> <figcaption> </figcaption>
> </figure>
>
> <script type="text/javascript">
> var $wrapper = $(document).find("figure");
> var $img = $($wrapper).children(".figureIMG");
> var newString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Suspendisse in mauris nunc. Vivamus dictum dapibus egestas. Maecenas id
> rutrum elit.";
> $($wrapper).ready( function() {
> $($img).one('load', function() {
> $($wrapper).children("figcaption").css("max-width",
> $($img).width()+"px").html( newString );
> }).each(function() {
> if(this.complete) $(this).load();
> });
> });
>
> $(window).resize(function() {
> $($wrapper).children("figcaption").css("max-width", $($img).width()+"px");
> });
> </script>
> </body>
> </html>
>
> ---------------------------------< [End Code]
>
> Here is a live example. Tested in Safari, Firefox and Chrome on Mac desktop
> and Safari on iOS 6.1.4.
>
> http://designdrumm.com/responsive_caption.html
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>>
>>
>>
>> On Jul 18, 2013, at 10:58 PM, Micky Hulse wrote:
>>
>>> Hi Karl! Thanks for the help! Much appreciated. :)
>>>
>>> On Thu, Jul 18, 2013 at 8:35 PM, Karl DeSaulniers <k...@designdrumm.com>
>>> wrote:
>>>> Firefox and Safari on my machine are doing the same thing here. FYI.
>>>> Although the one on the bottom does not have the same text in it so it is
>>>> kind of hard to tell if it is working.
>>>> The text on the bottom doesn't pass the width of the image.
>>>
>>> Ah, good observation! I totally missed that. Here's a version where
>>> the text is the same for both examples:
>>>
>>> <http://jsbin.com/eruxew/4>
>>>
>>> Sorry about the inconstancy.
>>>
>>> On Thu, Jul 18, 2013 at 8:45 PM, Karl DeSaulniers <k...@designdrumm.com>
>>> wrote:
>>>> Actually correction, I thought you were talking about the width of the
>>>> text below matching the image, I see now your talking about the responsive
>>>> image sizing.
>>>
>>> No worries at all! I really appreciate the feedback, it's all very helpful.
>>> :)
>>> ______________________________________________________________________
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> ______________________________________________________________________
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
