Hide/toggle div animation not working properly & close when click outside of sidebar

Question

Hello I'm having a problem in animation of show and hiding a div specially width. The maincontent div should take all the 100% width, and when the sidebar show it goes right. And when sidebar close maincontent goes back into 100% width. And how to close the sidebar when I click in maincontent div?

Here's the fiddle. http://jsfiddle.net/8nhmU/

Script

$(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        marginLeft: "150px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        marginLeft: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = true;
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });
});

CSS

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

.framecontentLeft, #framecontentTop{
position: absolute; 
top: 0; 
left: 0; 
width: 150px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: silver;
color: #000;
}

#framecontentTop{ 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: green;
color: white;
}

#maincontent{
position: fixed; 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 

    background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent;
    border-color: rgb(154, 205, 50);
    padding-top: 10px;
    padding-bottom:10px;
    z-index: 1;
    border-width: 20px medium 20px;
    border-style: solid none;
    box-shadow: 1px 2px 4px 1px rgba(204, 204, 204, 0.2);
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

.sidebar-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: black;
}

Any help please.

Biby Augustine · Accepted Answer · 2014-01-14T06:19:52.107

2

use below code to close the side bar when you clicked maincontent

 $(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = true;
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });

    var iframeDoc = $('#iframe1').contents().get(0);
    $(iframeDoc).bind('click', function( event ) {
    if(!sidebarStatus)
        {
                   $('.sidebar-toggle').click();
        }
    });
});

New Fiddle updated.... http://jsfiddle.net/8nhmU/9/

edited Jan 14 '14 at 06:19

answered Jan 14 '14 at 05:47

Biby Augustine

425
1
3
16

when the sidebar close, the maincontent only stretching. I need to take the width of sidebar and add to maincontent when sidebar is closed – user3097736 Jan 14 '14 at 05:51
@user3097736 please check this fiddle http://jsfiddle.net/8nhmU/3/... i think your question satisfied.. because main content div taking full width as you specified..... :) – Biby Augustine Jan 14 '14 at 05:54
@BibyAugustine Okay btw how the close function when I clicked in maincontent div? – user3097736 Jan 14 '14 at 05:57
@user3097736 that too added there... click on the main content div, then sidebar will automatically closed.... just check it... :) – Biby Augustine Jan 14 '14 at 05:59
@BibyAugustine pardon me. It's okay :) my mistakes. Because I have an iframe in maincontent so the whole maincontent is being an iframe. – user3097736 Jan 14 '14 at 05:59
@BibyAugustine my . Is it possible to close it when I click in the iframe? – user3097736 Jan 14 '14 at 06:04
@user3097736 you mean that you need to expand iframe width when you are closing that sidebar? can you show me a fiddle example? – Biby Augustine Jan 14 '14 at 06:07
@BibyAugustine http://jsfiddle.net/8nhmU/8/ I just add the iframe and your script. I try $('#maincontent,#iframe').click(function(){ but doesn't work. Bcoz my iframe take's all 100% height and width of maincontent div – user3097736 Jan 14 '14 at 06:13
@user3097736 hello......updated new fiddle with your requirements.. please check it http://jsfiddle.net/8nhmU/9/ – Biby Augustine Jan 14 '14 at 06:20
@BibyAugustine WOW great work ! :D answer accepted and +1 for nice work !! Cheers – user3097736 Jan 14 '14 at 06:28
@BibyAugustine problem shows again :( when iframe has url src="index.php" :( – user3097736 Jan 14 '14 at 06:34
@user3097736 I added and src field and working perfectly... just look at here please.... http://jsfiddle.net/8nhmU/10/ – Biby Augustine Jan 14 '14 at 06:37
@BibyAugustine I think just only in fiddle. If you put http://stackoverflow.com in iframe scr="" it will not work. I really don't have index.php, I give this just for example url. Look http://jsfiddle.net/8nhmU/11/ – user3097736 Jan 14 '14 at 06:53
@user3097736 ok.... code modified.... just look at this fiddle and check it please... http://jsfiddle.net/8nhmU/12/ – Biby Augustine Jan 14 '14 at 07:01
@user3097736 i think there conflicting javascript used in your index.php page with your main page.... please check that too....... – Biby Augustine Jan 14 '14 at 07:55
@BibyAugustine I check it. I saw this http://stackoverflow.com/questions/6452502/adding-onclick-event-to-iframe if don't mind please take a look – user3097736 Jan 14 '14 at 08:00
@user3097736 did you referenced jquery both home page and iframe? i updated some minor fixes in this fiddle check those too..... http://jsfiddle.net/8nhmU/14/ – Biby Augustine Jan 14 '14 at 08:09
@BibyAugustine has a same result. :/ – user3097736 Jan 14 '14 at 08:16
@user3097736 i tried many more things too but didn't work.... :( ... open your website in web browser and see if there any error occured in console.... check it too... please.. – Biby Augustine Jan 14 '14 at 08:34
@BibyAugustine in console it only say Use of getPreventDefault() is deprecated. Use defaultPrevented instead. – user3097736 Jan 14 '14 at 08:36
@user3097736 i found an answer ... just look at this fiddle that showing an html page and plain page loaded.... http://jsfiddle.net/rathoreahsan/gJtkW/.... i think we cannot add event in html loaded frames... :( – Biby Augustine Jan 14 '14 at 08:59
@BibyAugustine how sad :( take a look of this http://stackoverflow.com/questions/15080222/add-click-event-to-iframe – user3097736 Jan 14 '14 at 10:34
@BibyAugustine I tried it here. I clicked the iframe. $('#iframe1').load(function(){ $(this).contents().find("body").on('click', function(event) { alert('test'); }); }); $('#iframe1').attr("src","po.php"); http://jsfiddle.net/4HQc4/ – user3097736 Jan 14 '14 at 10:51
@user3097736 i showed you an example that it works perfectly in plain iframe and doesn't work with html content included iframe... this one.. don't you remember? :( http://jsfiddle.net/rathoreahsan/gJtkW/ – Biby Augustine Jan 14 '14 at 10:55
@BibyAugustine I did it :D – user3097736 Jan 14 '14 at 11:42
1

$('#iframe1').load(function(){ $(this).contents().find("body").on('click', function(event) { if(!sidebarStatus) { $('.sidebar-toggle').click(); } }); }); by this :D – user3097736 Jan 15 '14 at 00:34
1

@BibyAugustine it's not working in fiddle but working in my code :) – user3097736 Jan 15 '14 at 00:35

kamus · Answer 2 · 2014-01-14T05:58:52.067

just change the properties correctly:

http://jsfiddle.net/8nhmU/4/ Fiddle Updated

just add , #maincontent on the selector

   $(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle , #maincontent').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
      //sidebarStatus = true; if you want show-hide uncomment this
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });
});

when the sidebar close, the maincontent only stretching. I need to take the width of sidebar and add to maincontent when sidebar is closed — user3097736, Jan 14 '14 at 05:49

Hide/toggle div animation not working properly & close when click outside of sidebar

2 Answers2