Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35597
    Hi there,

    I am creating a sticky type panel that opens to the left when you click on the button. You can see an illustration below:

    http://d.pr/i/3jfC

    And when you click a button the following action should happen:

    http://d.pr/i/A4NA

    The only problem with this is the panel that flies out will not align with the button and the text or divs on the page move out of the way too instead of the panel floating over the top. Here is my CSS and html:

    Code:
    .panel_like {
    float: right;
    top: -555px;
    display: none;
    background: #EBEBEB;
    border:2px solid #000;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    width: 580px;
    height: 200px;
    padding: 10px 120px 10px 10px;
    filter: alpha(opacity=85);
    opacity: .85;
    z-index: 99999;
    }
    
    .panel_links {
    float: right;
    top: 100px;
    display: none;
    background: #EBEBEB;
    border:2px solid #000;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    width: 690px;
    height: 240px;
    padding: 10px 120px 10px 10px;
    filter: alpha(opacity=85);
    opacity: .85;
    z-index: 99999;
    }
    
    .panel p,.panel-like p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }
    
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }
    
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }
    
    a.trigger-chat, a.trigger-support{
    position: absolute;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:black;
        width: 100px;
        height: 20px;
    padding: 5px 15px 5px 10px;
    font-weight: 500;
    background:#EBEBEB;
        border-right: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    -moz-border-radius-topri: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: block;
    }
    
    a.trigger-chat:hover, a.trigger-support:hover{
        width: 120px;
        height: 20px;
    position: absolute;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:black;
    padding: 5px 15px 5px 10px;
    font-weight: 500;
    background:#EBEBEB;
        border-right: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    -moz-border-radius-topri: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: block;
    }
    
    a.active.trigger-chat, a.active.trigger-support {
    background:#222222 url(images/minus.png) 15% 55% no-repeat;
    }
    
    a.trigger_links, a.trigger_like{
    position: absolute;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:black;
        width: 30px;
        height: 30px;
    padding: 0px 15px 0px 10px;
    font-weight: 500;
    
        border-right: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    -moz-border-radius-topri: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: block;
    }
    
    a.trigger_links{background:#EBEBEB url(/images/share.png) no-repeat;}
    a.trigger_like{background:#EBEBEB url(/images/thumb.png) no-repeat;}
    
    a.trigger_links:hover, a.trigger_like:hover{
        width: 120px;
        height: 25px;
    position: absolute;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:black;
    padding: 0px 15px 0px 10px;
    font-weight: 500;
        border-right: 2px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    -moz-border-radius-topri: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: block;
    }
    a.trigger_like:hover{background:#EBEBEB url(/images/social.png) no-repeat}
    a.trigger_links:hover{background:#EBEBEB url(/images/share.png) no-repeat;}
    
    a.active.trigger-links, a.active.trigger-like {
    background:#222222 url(images/minus.png) 15% 55% no-repeat;
    }
    
    #slide-container {top: 400px;height: 100px;position: absolute;}
    #slide-ocntainer ul{list-style-type: none; display:block}
    #slide-container li{padding-bottom:40px}
    here is the html:

    HTML Code:
    <div id="slide-container">
    <ul>
                          <li><a class="trigger-chat" href="#"><img style="float: left;padding-right: 5px;" src="/images/chat.png" alt="link" height="25" width="18" />Live Chat</a></li>
                          <li><a class="trigger-support" href="#"><img style="float: left;padding-right: 5px;" src="/images/support.png" alt="link" height="25" width="18" />Support</a></li>
                          <li><a class="trigger_links" href="#"></a></li>
                          <li><a class="trigger_like" href="#"></a></li>
    
                      </ul>
    
                            </div>
    
                            <div class="panel_links">
                                <img src="/images/link-content.png" alt="thumb"  />
                            </div>
                            <div class="panel_like">
                                <img src="/images/like-content.png" alt="thumb" />
                            </div>
    Can anyone assist me with this one please?

  2.  

  3. #2
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    So those buttons are basically toggle switches built using purly css that make a certain div visible? If so why not just use jquery which is simpler and faster with an added bonus of making the transitions animated?

    You can even use AJAX for this; Not necessary but its possible.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  4. #3
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35597
    Quote Originally Posted by Andrew Yurlov, post: 248887
    So those buttons are basically toggle switches built using purly css that make a certain div visible? If so why not just use jquery which is simpler and faster with an added bonus of making the transitions animated?

    You can even use AJAX for this; Not necessary but its possible.
    hi Andrew,

    thank you so much for your reply. Yes they are just toggle switches and I use the following jquery plugin to complete the toggle action:

    Code:
    $(document).ready(function() {
        $(".trigger_like").click(function() {
            $(".panel_like").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    
        $(".trigger_links").click(function() {
            $(".panel_links").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    
    });
    I am aware of simple CSS using z-index but when i toggle this panel it still move the text down and opens at the bottom of the page instead of inline with the button. It would be very helpful if you have an example of one using pure jquery.

  5. #4
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I still don't understand what the problem is. Can you upload your site to a test server so we can see for ourselves?

    When I looked at your post at first I though this was PURE css meaning you weren't using jquery. When you make a post, make sure to include all the code so we know what we are dealing with. I'm also not sure what you mean by pure jQuery.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Here is the code i'm using for my own toggle switch without the css.

    You will need a link to serve as your toggle switch
    Code:
    <a href="javascript:toggleDiv('ThisIsTheDiv');">
    <div id="ThisIsTheDiv"></div>
    </a>
    and of course the jquery
    Code:
    function toggleDiv(divId) {
      $("#"+divId).slideToggle('fast');
    }
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  7. #6
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35597
    Hi,

    Forget the Pure Jquery comment, I think we had crossed wires mainly because I didnt post the jquery code. Well the action works fine on the test site, in fact it works as it should do. But when i try it out on the live system the page moves. Can you send me a personal message and I will give you the link because I dont want to display it here if thats ok?

  8. #7
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by chrisguk, post: 248895
    Hi,

    Forget the Pure Jquery comment, I think we had crossed wires mainly because I didnt post the jquery code. Well the action works fine on the test site, in fact it works as it should do. But when i try it out on the live system the page moves. Can you send me a personal message and I will give you the link because I dont want to display it here if thats ok?
    Yea you can do that. Actually come to think of it I had the EXACT same problem. My site would be fine on my system but on the host server the toggle action would always make the page move. I did solve it I just don't remember how. I will try to find out what I did to fix it.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com