SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile slideToggle / slideUp/ slideDown

    Hi friends,

    On sliding up, the div1 above the slide gets hidden and the link goes up and changes word as slide down and arrow changes to downwards and there is a div2 that shows below. On sliding down, the div2 hides and div1 shows. And the word on link change back to slide up and arrow pointing up.
    This is the scenario I am currently working. I identify the functions that I need to use in JQuery like,slidetoggle,toggle,slideup,visibility in css but I am stuck on how I write code to combine these JQuery functions.

    The code I have slides up and hides the div. but does not show the below div and I am wondering how to change the words and arrow on sliding up and sliding down. Now, I need help from experience persons on how to implement it.

    The code I posted below is what I have. If anyone can modify this or give a whole new code for the above scenario, would be of great help.

    <script>
    $(document).ready(function(){
    $(".heading").click(function(){
    $(".mytable").slideToggle();

    })
    });

    </script>


    <body>

    <div id="childtable">

    <div class="mytable">
    Hi I am a table
    </div>

    <div class="sliding">
    <p class= "heading"> slide up </p>
    <div class="show">
    This content needs to displayed on slide up
    </div>
    </div>

    </div>

    </body>




    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    On sliding up, the div1 above the slide gets hidden and the link goes up and changes word as slide down and arrow changes to downwards and there is a div2 that shows below. On sliding down, the div2 hides and div1 shows. And the word on link change back to slide up and arrow pointing up.
    It sounds like you're wanting an accordian, and as you're already using jQuery you may be interested in the jQuery UI accordian that they provide for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, i have already tried to use accordian, it doesnot work. After going through lot of articles and examples ,it's,toggle that makes it work .

    Below, i have posted the code. here on clicking the button , first it slides down , show div and then again clicking it slides up and shows below div.

    Now, i want it vice-versa. first, the top div should show,click the button, slide up , hide top div , button goes up and changes word to slide down and show bottom div and then again click,slide down, and show above div. can anyone modify the code below to get this. also, i need to add arrow, and i am wondering on code to change an arrow up and down as the button slide up and down.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script>
    $(document).ready(function(){
    $("#myButton").toggle(function(){

    $("#content").slideDown();
    $(this).val("Slide Up");
    $("#content1").hide();

    },function(){

    $("#content").slideUp();
    $(this).val("Slide down ");
    $("#content1").show();




    })

    });

    </script>

    <style type="text/css">
    #content{
    display:none;
    }

    #content1{
    display:none;
    }
    </style>

    </head>

    <body>

    <div id="content">
    bla bla bla bla bla bla bla bla blabla bla blabla bla bla
    </div>
    <input type="button" id="myButton" value="Slide down"/>

    <div id="content1">
    hgggjjjghjhj

    </div>

    </body>
    </html>



    Thanks a ton.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    Hi, i have already tried to use accordian, it doesnot work.
    Perhaps that needs to be investigated then. It's much much easier to implement one from a library that's dedicated to making it as easy as practical, than it is to get a custom attempt at an accordion working.

    Having said that though, I'll be able to take a look at your attempt of a custom one at some stage soon.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    After going through lot of articles and examples ,it's,toggle that makes it work .
    The problem that you are facing is that the toggle method does not work in the manner that you are attempting. It hides the element(s) that you use it on, that being the button, and it ignores those functions that you pass to it.

    So instead of that, you can use .on('click', ...) and inside of that function you can check if the button value is what it starts with, which lets to easily switch between one set of statements or another.
    Last edited by paul_wilkins; Apr 19, 2013 at 03:12.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm...If you can put here in code, it would help in completing the work . This script part is where I am stuck.
    So, can you give me the sloution in the form of code. Very much appreciate it.

    Thanks a ton.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    So, can you give me the sloution in the form of code. Very much appreciate it.
    Well okay - the event part of things is:

    Code javascript:
    $("#myButton").on('click', function() {
        ...
    });

    and in there is where you check if the button value is what it starts with, which is:

    Code javascript:
    if (this.value === 'Slide down') {
        ...
    } else {
        ...
    }

    Or, a potentially better different solution is to toggle a class on the button, which could be useful for the presentation side of things too.

    Code javascript:
    $(this).toggleClass('active');
    if ($(this).hasClass('active')) {
        ...
    } else {
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    As another solution, you can bring the once-deprecated toggle function back again under another name.

    Code javascript:
    $.fn.toggleClick = function(){
        var functions = arguments ;
     
        return this.click(function(){
                var iteration = $(this).data('iteration') || 0;
                functions[iteration].apply(this, arguments);
                iteration = (iteration + 1) % functions.length ;
                $(this).data('iteration', iteration);
        });
    };

    Which should result in your original code working once again, when you use:

    Code javascript:
    $("#myButton").toggleClick(function() {
        ...
    }, function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Here's some sample code that demonstrated each of these techniques.
    http://jsfiddle.net/pmw57/Y2ZFE/1//

    If I had my preference, it would be none of the above-mentioned techniques.

    The last one on the sample code is my preferred technique, where standard visibility toggle methods are used instead.

    Code javascript:
    // Toggling visibility
    $('#button4').on('click', function () {
        var text = $('#content4before').is(':visible') ? 'Slide down' : 'Slide up';
        $(this).val(text);
        $('#content4before').slideToggle();
        $('#content4after').toggle();
    });

    Or perhaps even using a goingDown boolean, which helps to guarantee that content4afterwards will have the opposite visibility of content4before

    Code javascript:
    $('#button4').on('click', function () {
        var goingDown = $('#content4before').is(':visible');
        $(this).val(goingDown ? 'Slide down' : 'Slide up');
        $('#content4before').slideToggle();
        $('#content4after').toggle(goingDown);
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul ,

    Thanks for such a detail explanation. This is great. It works.

    Thanks a ton.

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi paul, got a question related to this topic.

    I am using this concept in 3 pages in different scenarios. it works perfect in 2 scenarios. the third one is of the table.

    i need to hide and show the body of the table, the header remains the same. just the body alone i need to show /hide , with the button on click goes up and comes down back to same position again onclick. the button would come after <tbody>. so, i introduced a class for the table body and tried to call that in script. but it does not do anything.I have given the table outline.

    Can you give an insight in to- how to do this?

    <div class="csi-table">
    <table class="csi-table-one">
    <thead>
    <tr>
    <th>ID</th>
    <th>First Name </th>
    <th>Last Name </th>
    <th>CSI No </th>
    <th>Department</th>
    </tr>
    </thead>
    <tbody class="csi-body-one">
    <tr>
    <td> datas display </td>
    <td> datas display </td>
    <td>datas display</td>
    <td>datas display</td>
    <td>datas display</td>
    </tr>
    </tbody>
    </table>
    </div>

    thanks.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    i need to hide and show the body of the table, the header remains the same. just the body alone i need to show /hide , with the button on click goes up and comes down back to same position again onclick.
    That much of things seems to work without trouble.

    Quote Originally Posted by Shankari2004 View Post
    the button would come after <tbody>. so, i introduced a class for the table body and tried to call that in script. but it does not do anything.I have given the table outline.
    The content that you showed seems to be okay. What info can you reveal about the button, and how you are triggering it? Can you provide a test page that demonstrates the problem so that we can troubleshoot it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by paul_wilkins View Post
    The content that you showed seems to be okay. What info can you reveal about the button, and how you are triggering it? Can you provide a test page that demonstrates the problem so that we can troubleshoot it?

    Hi,

    I am posting a mock up (code). sorry, did not have time to create this in external site.


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function () {
        $('#button1').on('click', function () {
            $(this).toggleClass('active');
            if ($(this).hasClass('active')) {
               
                 $('.content4before').slideUp();
                $(this).val('Slide down');
                $('.content4after').show();
                
            } else {
                 $('.content4before').slideDown();
                $(this).val('Slide Up');
                $('.content4after').hide();
                
               
            }
        });
    });
    </script>
    
    
    
    <style type="text/css">
    
    .table-5 {
    	background-color: #f5f5f5;
    	padding: 5px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border: 1px solid #ebebeb;
    }
    .table-5 td, #table-5 th {
    	padding: 1px 5px;
    }
    .table-5 thead {
    	font: normal 15px Helvetica Neue,Helvetica,sans-serif;
    	text-shadow: 0 1px 0 white;
    	color: #999;
    }
    .table-5 th {
    	text-align: left;
    	border-bottom: 1px solid #fff;
    }
    .table-5 td {
    	font-size: 14px;
    }
    .table-5 td:hover {
    	background-color: #fff;
    }
    
    .content4after
    {
    	display:none;
    }
    
    
    </style>
    
    </head>
    <body>
    <div class="content4before">
    
    <table class="table-5">
    	<thead>
    		<th>First Name</th>
    		<th>Last Name</th>
    		<th>Email Address</th>
    		<th>Website</th>
    	</thead>
    	<tbody>
    		<tr>
    			<td>John</td>
    			<td>Smith</td>
    			<td>johnsmith@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    		<tr>
    			<td>Peter</td>
    			<td>James</td>
    			<td>peterjames@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    		<tr>
    			<td>Ronald</td>
    			<td>Weeley</td>
    			<td>ronweeley@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    	</tbody>
       
        <tbody>
        <tr>Slide up and show content below</tr>   <!-- anoter tbody,would handle class , thought i could use this to slide but again that messed up-->
        </tbody>
    </table>
    
    </div>
    
    <input id="button1" type="button" value="slide up" />
    
    <div class="content4after">
    
    
    <table class="table-5">
    	<thead>
    		<th>First Name</th>
    		<th>Last Name</th>
    		<th>Email Address</th>
    		<th>Website</th>
    	</thead>
    	<tbody>
    		<tr>
    			<td>John</td>
    			<td>Smith</td>
    			<td>johnsmith@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    		<tr>
    			<td>Peter</td>
    			<td>James</td>
    			<td>peterjames@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    		<tr>
    			<td>Ronald</td>
    			<td>Weeley</td>
    			<td>ronweeley@example.com</td>
    			<td>http://www.example.com</td>
    		</tr>
    	</tbody>
        
    </table>
    
    </div>
    
    
    
    
     </body>
     </html>
    i have used the previous script concept here.
    There are 2 things in this html and jquery. One, i need to add button at the end of the body of the table and the button should take the whole body width, colspan=4. i tried , did not work. second, the script part. only the body of the table should slide up/down and button too goes up and down along with the body sliding. the header of the table does not change or move. it has to be static.

    for this demonstration , i display this with 2 separate tables. i am wondering how to handle only body slideup/down.what should i do? Is it possible demonstrate it?

    Thanks.
    Last edited by cpradio; Apr 25, 2013 at 09:53.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shankari2004 View Post
    i need to add button at the end of the body of the table and the button should take the whole body width, colspan=4
    A footer section would easily achieve that. It needs to go between thead and tbody.

    HTML Code:
    <thead>
    ...
    </thead>
    <tfoot>
        <tr>
            <td colspan="4"><input id="button1" type="button" value="slide up" /></td>
        </tr>
    </tfoot>
    <tbody>
    ...
    </tbody>
    The button can then be made to take up the whole width of the table, with the following CSS:

    Code css:
    #button1 {
        width: 100%;
    }

    Quote Originally Posted by Shankari2004 View Post
    only the body of the table should slide up/down and button too goes up and down along with the body sliding. the header of the table does not change or move. it has to be static
    In order to achieve that, the header would need to be extracted out to a separate table that goes before the first one. That can eb tricky to achieve while maintaining things such as the columns in the same position, so jQuery plugins such as Fixed Header Table have been created to make that task easier for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul just ignore the above questions. As I am modifying the tasks and working on them. If needed, will get back.

    But curious to find out the solution for above. If you can, plz post it.

    Thanks a ton.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •