jquery - Slide div out of screen and other div into screen at the same time -


i'm building mobile web app (apk not link) , know how compile. i'd give real app feel (effects).

i have far:

enter image description here

is there way make whole div slide left while div slides right fill in place when click category? i'm looking simple code so, i'll take anything.

thanks!

based on comment here basic code started.

$('.button').click(function() {    if ($(this).hasclass('button-right')) {      $('.block1').css('marginleft', '-100%')    } else { // hasclass button-left      $('.block1').css('marginleft', '0%')    }  })
html, body {    height: 100vh;    margin: 0; padding: 0;    background-color: green;  }  div {    display: flex;    height: 100%;  }  .container {    position: relative;    display: flex;    flex: 1;  }  .blocks {    display: flex;    justify-content: center;    align-items: center;    flex: 1;    min-width: 100%;    transition: 0.3s ease;  }  .block1 {    margin-left: 0;    background-color: red;  }  .block2 {    background-color: yellow;  }  .button {    position: absolute;    top: 50%; transform: translatey(-50%);    display: flex;    justify-content: center;    align-items: center;    width: 30px; height: 30px;    border-radius: 100%;    color: white;    background-color: black;    font-variant: small-caps;    font-size: 14px;    font-weight: bold;    cursor: pointer;  }  .button:hover {background-color: green;}  .button-left { left: 10px; }  .button-right { right: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <div class="blocks block1">div 1 (left)</div>    <div class="blocks block2">div 2 (right)</div>    <div class="button button-left">l</div>    <div class="button button-right">r</div>  </div>

fiddle

https://jsfiddle.net/hastig/kfbwxye8/


Comments

Post a Comment

Popular posts from this blog

android - ConstraintLayout: Realign baseline constraint in case if dependent view visibility was set to GONE -

Image
is there way realign baseline constraint textview in case if dependent view visibility set gone? my layout code: <android.support.constraint.constraintlayout android:layout_width="match_parent" android:layout_height="wrap_content"> <textview android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test title" android:textcolor="@color/black" android:textsize="24sp" app:layout_constraintleft_toleftof="parent" app:layout_constraintright_torightof="parent"/> <textview android:id="@+id/subtitle1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="subtitle 1" android:textsize="11sp" app:layout_constraintb...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more