css - making jQuery .show() AND .hide() run side by side with UI effect -

-

i'm trying make nice menu sliding effects in jquery: http://jsfiddle.net/rxjmv/5/

$(".goback").click(function() {     $(this).parent().hide('slide', {         direction: 'right'     });     $("#parentsidebar").show('slide', {         direction: 'left'     }); }); $(".sidebarmover").click(function() {     var newmenu = $(this).attr('name');     $(this).parent().hide('slide', {         direction: 'left'     });     $("#" + newmenu + "sidebar").show('slide', {         direction: 'right'     }); });

notice if click on football menu slides left , other comes right come 1 below other instead of side side..

tried many things, display: inline , using delay() jquery queue, problam css think, nut jquery... ideas?

add position: absolute; width: 100%; in container that:

<div id="sidebar">     <div id="sidehead">ticket menu</div>     <hr id="sideheadseperator">        <div class="sideitemcontainer" id="parentsidebar" style="position:absolute;width:100%; ">           <div class="sideitem sidebarmover" name="football">football<i class="fa fa-caret-right"></i></div>           <div class="sideitem sidebarmover" name="tennis">tennis<i class="fa fa-caret-right"></i></div>           <div class="sideitem">rugby<i class="fa fa-caret-right"></i></div>           <div class="sideitem">basketball<i class="fa fa-caret-right"></i></div>        </div>        <div class="sideitemcontainer" id="footballsidebar" style="display: none;position:absolute; ;width:100%;" >           <div class="sideitem">arsenal<i class="fa fa-caret-right"></i></div>           <div class="sideitem">chelsea<i class="fa fa-caret-right"></i></div>           <div class="sideitem">liverpool<i class="fa fa-caret-right"></i></div>           <div class="sideitem">manchester utd<i class="fa fa-caret-right"></i></div>           <div class="sideitem">manchester city<i class="fa fa-caret-right"></i></div>           <div class="goback"><i class="fa fa-caret-left fa-inverse"></i> go back</div>         </div>         <div class="sideitemcontainer" id="tennissidebar" style="display: none;">            <div class="sideitem">wimbledon<i class="fa fa-caret-right"></i></div>            <div class="sideitem">rome masters<i class="fa fa-caret-right"></i></div>            <div class="sideitem">us open<i class="fa fa-caret-right"></i></div>            <div class="sideitem">roland garros<i class="fa fa-caret-right"></i></div>            <div class="sideitem">madrid masters<i class="fa fa-caret-right"></i></div>            <div class="goback"><i class="fa fa-caret-left fa-inverse"></i> go back</div>       </div> </div>

Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more