1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Border Radius For Forum Jump

Discussion in 'HTML & Website Design' started by tunescool, Dec 30, 2013.

0
  1. #1
    i need help with the border radius. i want the bottom when its closed to have rounded corners and when its open to have rounded corners, all i can do is get the corners for when its open but it doesnt turn out rite

    heres what i have

    by default 2013-12-27 at 12.00.29 PM.jpg

    heres what i want it to look like. the rounded corners for the closed part have to disappear when its open

    by default 2013-12-27 at 2.06.09 AM.jpg

    by default 2013-12-27 at 12.00.29 PM.jpg 

    <html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style type="text/css">
#panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#panel { padding: 0px; text-align: left; font-size: 10px; display: none; }
</style></head><body>
<div id="flip">Forum Jump</div>
<div id="panel">
<table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump">
<tbody><tr>
    Code (markup):
    how can i get the cellspacing border solid black

    http://thenotablenook.com/viewforum.php?f=5

    i got the corners when its closed but somehow i need to get the white part thats not rounded black

    by default 2013-12-27 at 11.55.13 AM.jpg
     
    tunescool, Dec 30, 2013 IP
  2. ThisIsSpartaaaa

    ThisIsSpartaaaa Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2 
    #panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid
    Code (markup):
    Change 
    1px solid
    Code (markup):
    to 4px or higher, until it covers the white space.

    let me know if it works.
     
    ThisIsSpartaaaa, Jan 9, 2014 IP
  3. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #3
    no
     
    tunescool, Jan 12, 2014 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    You can just make a class which removes the radius when attached. Pretty simple thing to do with CSS and jQuery. I haven't tested the code below but it should work.

    
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow").toggleClass('closed');
  });
});
</script>
<style type="text/css">
#panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#panel { padding: 0px; text-align: left; font-size: 10px; display: none; }
.closed{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
</style></head><body>
<div id="flip">Forum Jump</div>
<div id="panel">
<table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump">
<tbody><tr>
    Code (markup):
     
    HuggyStudios, Jan 17, 2014 IP
  5. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #5
    im sorry to say but nothing was different or changed at all
     
    tunescool, Jan 17, 2014 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    Well you should at least be able to work this out from the code I've started you out with. I mean it's not exactly difficult is it?
     
    HuggyStudios, Jan 18, 2014 IP
  7. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #7
    no i have no idea what im doing
     
    tunescool, Jan 18, 2014 IP
  8. Murugesan.quadraincorp

    Murugesan.quadraincorp Greenhorn

    Messages:
    15
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #8
    Hi,
    Your code is correct. But you not set any Height.... U will try this code ..

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script><script>
    $(document).ready(function(){
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
    });
    });
    </script>
    <style type="text/css">
    #panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
    #panel { height:100px; padding: 0px; text-align: left; font-size: 10px; display: none; }
    </style>
    </head>

    <body>
    <div id="flip">Forum Jump</div>
    <div id="panel">
    <table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump">
    <tbody><tr>


    </body>
    </html>
     
    Murugesan.quadraincorp, Jan 23, 2014 IP
  9. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #9
    that just did this, nothing about border radius

    by default 2014-01-24 at 11.04.39 AM.jpg
     
    tunescool, Jan 24, 2014 IP
  10. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #10
    Try out this code. I've actually had some time to test it out so it should help you. You should be able to take what I've done and put it into your own.

    
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><script>
$(document).ready(function(){
  $('.panel-container h2').click(function(){
      var _this = $(this);
    $(this).parent().children('.panel').slideToggle('fast', function() {
        _this.toggleClass('closed');
    });
  });
});
</script>
<style type="text/css">
.panel-container h2{  
    margin-bottom:0;
}
.panel, .flip, .panel-container h2 {
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: #000;
    border: 1px solid #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.panel {
    padding: 0px;
    text-align: left;
    font-size: 10px;
    display: none;
}
.panel table.tablejump{
    border-left: 0px;
    border: 1px solid #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width:100%;
}
.panel-container h2.closed{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
</style></head><body>
<div class="panel-container">
    <h2>Forum Name</h2>
    <div class="panel">
        <table cellspacing="0" border="1" class="tablejump">
            <tbody>
                <tr>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                </tr>
                <tr>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                </tr>
                <tr>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                </tr>
                <tr>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                    <td>Body</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    Code (markup):
     
    HuggyStudios, Jan 24, 2014 IP
  11. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #11
    alrite were getting somewhere

    that took care of the part when its open, the border radius isnt there and its all flat like its supposed to look, thank you

    i have this border all thick so i tried taking any border i could out

    by default 2014-01-24 at 2.58.18 PM.jpg 

    .panel, .flip, .panel-container h2 {
    padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 0px solid #000; border-bottom-left-radius: 10px;  border-bottom-right-radius: 10px;
}
    Code (markup):
    changing this to 0 inside the above makes it fine

    border: 0px solid #000;
    Code (markup):
    but it takes the border radius out of the forum jump when its closed

    by default 2014-01-24 at 3.06.57 PM.jpg

    theres this on each side, it looks like the forum jump when its open, which is the table, is inside the whole forum width

    or theres some border left rite problem

    and when its open thers all that white left over hanging there on the bottom

    the pic i took was too big so i just posted a link

    http://forumbytunes.com/viewforum.php?f=13

    it ultimately should look smooth and clean like this

    by default 2013-12-27 at 2.06.09 AM.jpg

    by default 2013-12-07 at 10.52.50 AM.jpg 

    <html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><script>
$(document).ready(function(){
  $('.panel-container h2').click(function(){
      var _this = $(this);
    $(this).parent().children('.panel').slideToggle('fast', function() {
        _this.toggleClass('closed');
    });
  });
});
</script>
<style type="text/css">
.panel-container h2{ 
    margin-bottom:0;
}
.panel, .flip, .panel-container h2 {
    padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 0px solid #000; border-bottom-left-radius: 10px;  border-bottom-right-radius: 10px;
}
.panel {
    padding: 0px; text-align: left; font-size: 10px; display: none;
}
.panel table.tablejump {
    border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 100%;
}
.panel-container h2.closed {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0;
}
</style></head><body>
    Code (markup):
     
    tunescool, Jan 24, 2014 IP
  12. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #12
    alot to be done yet
     
    tunescool, Jan 28, 2014 IP
  13. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #13
    You need to stop speaking to me like I must help you. You can pay me my hourly rate of £28.00 if you want me to help you any further. I'v helped you enough, you need to learn to code or hire someone!!! Is it that hard?
     
    Last edited: Jan 29, 2014
    HuggyStudios, Jan 29, 2014 IP
    ryan_uk and malky66 like this.
  14. tunescool

    tunescool Well-Known Member

    Messages:
    430
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    158
    Digital Goods:
    1
    #14
    i wasnt taking to you ust bumping the thread
     
    tunescool, Jan 29, 2014 IP