javascript - jquery scroll to element then lock to that element regardless of changes on window size -


i'm trying use jquery scroll specific element inside of wrapping element. works intended work, long screen width isn't resized. screen width changes, scroll doesn't stick. here current code:

javascript

function pageinit(pageid) {     $('.page-wrapper').animate({ scrollleft: $('#' + pageid).offset().left }, 500);     $('#' + pageid).css('postion', 'fixed');     console.debug('page #' + pageid + ' initiated.'); }  pageinit('about');

html

<div class="page-wrapper"> <div class="page main-page" id="root" data-pos="0">     <div class="group-container">         <div class="book"></div>         <div class="promo">             <div class="button">                 <a href="/about">                 <div class="button-logo cover-button-logo"></div>                 <div class="button-text">read summary</div>                 </a>             </div>              <div class="button">                 <a href="#" onclick="return false;">                 <div class="button-logo yt-button-logo"></div>                 <div class="button-text">watch trailer</div>                 </a>             </div>              <div class="button">                 <a href="#" onclick="return false;">                 <div class="button-logo wattpad-button-logo"></div>                 <div class="button-text">coming on wattpad</div>                 </a>             </div>              <div class="button">                 <a href="//localhost/internals/close_tab" target="twitter">                 <div class="button-logo twitter-button-logo"></div>                 <div class="button-text">#ghifari160sbeingtheone</div>                 </a>             </div>              <div class="button">                 <a href="//localhost/internals/close_tab" target="facebook">                 <div class="button-logo facebook-button-logo"></div>                 <div class="button-text">share on facebook</div>                 </a>             </div>         </div>     </div> </div>  <div class="page about-page" id="about" data-pos="100">     <div class="group-container">         <div class="summary">             %summary%         </div>         <div class="promo">             <div class="button">                 <a href="#" onclick="return false;">                 <div class="button-logo yt-button-logo"></div>                 <div class="button-text">watch trailer</div>                 </a>             </div>              <div class="button">                 <a href="#" onclick="return false;">                 <div class="button-logo wattpad-button-logo"></div>                 <div class="button-text">coming on wattpad</div>                 </a>             </div>              <div class="button">                 <a href="//localhost/internals/close_tab" target="twitter">                 <div class="button-logo twitter-button-logo"></div>                 <div class="button-text">#ghifari160sbeingtheone</div>                 </a>             </div>              <div class="button">                 <a href="//localhost/internals/close_tab" target="facebook">                 <div class="button-logo facebook-button-logo"></div>                 <div class="button-text">share on facebook</div>                 </a>             </div>         </div>     </div> </div>

the wrapping element should scrolled right until element id of "about" fills entire screen. current code works part. need find way same thing when screen width changes, way "about" element fills entire screen. i've tried checking every few seconds , rescroll element if screen width change, fails every once in awhile. there way can make browser scroll element intended scroll to, rescroll element after detecting changes on screen width?

edit: jsfiddle here: https://jsfiddle.net/ghifari160/sy3qgtqe/1/

the question difficult answer since there's no way see results without fiddle or pen. but, considering you're needing trigger event on window resize, should @ window.resize global event handler.

window.resize event handler other, use pageinit() function callback parameter handler. make sure still call function initial time, otherwise function won't run until window has been resized.

edit: might add example clarity.

window.onresize = pageinit('about');

-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more