javascript - Auto-scroll to a div when clicking on another div -

-

when click on 1 of smaller divs on left (inside of div class "smallitems", want div on right (with class "items") auto-scroll appropriate larger div.

html:

 <div class="smallitems">     <div class="col">1</div>      <div class="col"> 2 </div>      <div class="col"> 3</div>      <div class="col">4</div>      <div class="col"> 5 </div>      <div class="col">6 </div>      <div class="col"> 7</div>     <div class="col">8</div>  </div>       <div class="items">     <div class="item">1</div>     <div class="item">2</div>     <div class="item">3</div>     <div class="item">4</div>     <div class="item">5</div>     <div class="item">6</div>     <div class="item">7</div>     <div class="item">5</div> </div>

javascript (with jquery):

$('.smallitems .col').on("click", function(){    //how use scroll items show  });

example:

this before click on div in left div ("smallitems").

before clicking on div

i've clicked on number 5 (<div class="col">5</div>) in left div. can see right div has scrolled 5th div (<div class="item">5</div>).

scrolling 5th div

similar above, i've clicked on number 4, , subsequently have had right div auto-scroll 4th div.

scrolling 4th div

see jfiddle http://jsfiddle.net/h7blk/

$('.smallitems .col').on("click", function(){     var index =  $(this).index();     var items = $('.items');     var item =  items.children().eq(index);     items.scrollleft((item.width() - 50)  * index); });

when add new div items play around value of 50.


Comments

Post a Comment

Popular posts from this blog

sql server - MSSQL Text and Varchar(MAX) fields shown (MEMO) in DBGrid -

-
Image
i have encountered problem in mssql & delphi xe3. text , varchar(max) fields seemed (memo) or (widememo) in tdbgrid & tdbadvgrid (tms dbgrid). in first screenshot can see table fiels, in second screentshot can see sample data in database: in screenshot, see how in dbgrid or in query results. i figured out changing field type char , varchar not max solves issue don't know why having problem. can please let me know?
Read more

qml - Is it possible to implement SystemTrayIcon functionality in Qt Quick application -

-
i writing qtquick desktop application. use both c++ (for functionality) , qml (for ui) in it. use qquickview show interface written in qml. i want application reside in system tray when minimised. i mean functionality similar example. http://qt-project.org/doc/qt-4.8/desktop-systray.html . trying implement feature not find way in qt quick application. here main.cpp code: #include <qguiapplication> #include <qqmlengine> #include <qqmlcontext> #include <qqmlfileselector> #include <qquickview> #include "myapp.h" int main(int argc, char* argv[]) { qguiapplication app(argc,argv); app.setapplicationname(qfileinfo(app.applicationfilepath()).basename()); qdir::setcurrent(qapp->applicationdirpath()); myapp myappobject; qquickview view; view.connect(view.engine(), signal(quit()), &app, slot(quit())); view.rootcontext()->setcontextproperty("myappobject", &myappobject); new qqmlfilese...
Read more

mysql - Flyway migration, Unable to obtain Jdbc connection from DataSource -

-
i trying use flyway create , manage mysql database. here code have got far. flywaymigration.java : class applys migration public class flywaymigration { public flywaymigration(databaseconfiguration configuration, flyway flyway) { flyway.setdatasource(configuration.getdatasource()); flyway.migrate(); } public static void main(string[] args) { new flywaymigration(new databaseconfiguration("database.properties"), new flyway()); } } databaseconfiguration.java : configuration class, class configure datasource applyed flyway.setdatasource method public class databaseconfiguration { private final logger logger = loggerfactory.getlogger(this.getclass()); private propertiesutil prop = null; public databaseconfiguration(string file) { prop = new propertiesutil(file); } public string getdatasourceclass() { return prop.getproperty("mysql.data.source.class"); } pu...
Read more