javascript - HTML, jQuery, CSS - Width() returning entire page width instead of div on page load? -

-

so i'm trying have function apply "padding-bottom" in div when page loaded, problem width returns entire document value instead of div value. when use function (that changes between images) function works fine.

$(window).load(function () {   $('.photoset').each(function () {     $items = $(this).find('img')      function get_height(target) {       return (($items.eq(target).height() / $(this).width()) * 100) + '%';      }       $items.css({ paddingbottom: get_height(0) });   }); }

the css follow:

.photowrapper{     width:60%;     margin:auto; } .photoset {     position: relative;      display: block;        margin:auto;     overflow:hidden; } .photoset figure{     width: 100%;     margin: 0;     padding: 0;     position: absolute;     top: 0;     left: 0;     overflow: hidden;     text-align:center; }  .photoset img {     opacity: 0;     transition:opacity 1.2s;     max-width:100%;  } .photoset .photoset-show img{     opacity: 1; }

and html

 <div class="photowrapper">    <div class="photoset center-block">      <figure class="photoset-show">      <img src="/images/5220a574-77a8-4aa6-aecc-aedf60eed6e2.jpg" />     </figure>     <figure class="">      <img src="/images/9e59af1e-de75-4ddb-b091-f816224d9f6e.jpg" />     </figure>     <figure class="">       <img src="/images/ad76e5e3-5780-4f22-bcb4-8106fc41161a.jpg" />     </figure>   </div> </div>

this function works intended, returns right width value when switching between images:

        var showcurrent = function (photoset) {         $items = photoset.find('figure');         $images = photoset.find('img');         var counter = photoset.data('counter');         var numitems = $items.length;         var itemtoshow = math.abs(counter % numitems);         $items.each(function () {             $(this).removeclass('photoset-show');         })         function get_height(target) {             return (($images.eq(target).height() / photoset.width()) * 100) + '%';         }         photoset.animate({ paddingbottom: get_height(itemtoshow) }, 400);         $items.eq(itemtoshow).addclass('photoset-show');      };

this isn't think inside get_height(). has different context inside function. store reference this or pass in argument

try

$(window).load(function () {   $('.photoset').each(function () {     var $photoset = $(this), $items = $photoset.find('img')      function get_height(target) {       return (($items.eq(target).height() / $photoset.width()) * 100) + '%';      }       $items.css({ paddingbottom: get_height(0) });   }); }

Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more