WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] mouse over to show a popup (2 posts)

  1. amarstyle
    Member
    Posted 1 year ago #

    someone please help me..
    How can i insert all that in any wordpress page, where when i click on "Size Chart" it gives a popup and loads the HTML?

    I have a javascript:
    function deselect() {
    $(".pop").slideFadeToggle(function() {
    $("#sizechart").removeClass("selected");
    });
    }

    $(function() {
    $("#sizechart").live('click', function() {
    if($(this).hasClass("selected")) {
    deselect();
    } else {
    $(this).addClass("selected");
    $(".pop").slideFadeToggle(function() {
    $("#email").focus();
    });
    }
    return false;
    });

    $(".close").live('click', function() {
    deselect();
    return false;
    });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };

    /*

    <!-- my html looks like this:
    <div class ="messagepop pop">
    <div class="ASMAINHeader">
    <h3>Standard Salwar Kameez</h3>
    </div>
    <div class="ASBody">
    <ul class="ASHeader">

  2. Bust
  3. text
  4. Bust
  5. <br clear="all">
    <div id="salwar">
    <div class="asContent">
    <div class="asType"> SMALL </div>
    <div class="asNmbr coll4">
    <ul class="bdr">

    <li 32 /li>
    <li 34 /li>
    <li 36 /li>
    <br clear="all">

    • 32
    • 34
    • 36

    </div>
    </div>

    </div>

    <div class="asContent">
    <div class="asType"> Medium </div>
    <div class="asNmbr coll4">
    <ul class="bdr">

  6. 32
  7. 32
  8. 32
  9. <br clear="all">

    • 32
    • 32
    • 32

    </div>
    </div>
    <div class="asContent">
    <div class="asType"> Large </div>
    <div class="asNmbr coll4">
    <ul class="bdr">

  10. 32
  11. 32
  12. 32
  13. <br clear="all">

    • 32
    • 32
    • 32

    </div>
    </div>
    </div>
    </div>

    Size chart
    -->*/

    My css looks like this:
    a.selected {
    background-color:#1F75CC;
    color:white;
    z-index:100;
    }

    .messagepop {
    background-color:#FFFFFF;
    border:1px solid #999999;
    cursor:default;
    display:none;
    margin-top: 15px;
    position:absolute;
    text-align:left;
    width:500px;
    z-index:50;
    padding: 25px 25px 20px;
    }

    label {
    display: block;
    margin-bottom: 3px;
    padding-left: 15px;
    text-indent: -15px;
    }

    .messagepop p, .messagepop.div {
    border-bottom: 1px solid #EFEFEF;
    margin: 8px 0;
    padding-bottom: 8px;
    }
    .ASBody {
    border-top: 1px solid #999;
    }
    .ASHeader {
    float: right;
    font-weight: bold;
    }
    .ASHeader li, .ASBody li {
    float: left;
    text-align: center;
    width: 175px;
    line-height: 25px;
    }
    .asContent:first-child {
    margin-top: 0px;
    }
    .asContent {
    background: #18ECEC;
    border-radius: 5px;
    height: 55px;
    margin-top: 11px;
    clear: left;
    }
    .asType {
    padding: 10px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    float: left;
    }
    .coll4 {
    width: auto;
    }
    .asNmbr {
    float: right;
    }
    .asNmbr ul:first-child {
    float: left;
    }
    .bdr {
    border-bottom: 1px dotted #333;
    }
    ul {
    list-style-type: none;
    }
    .ASHeader li, .ASBody li {
    float: left;
    text-align: center;
    width: 125px;
    line-height: 25px;
    }
    .roundBox {
    position: absolute;
    z-index: 999;
    top: -2px;
    left: -118px;
    width: 530px;
    left: -377px;
    top: 29px;
    }
    .ASMAINHeader {
    padding: 5px;
    height: 20px;
    width: 100%;
    }
    .ASMAINHeader h3 {
    text-align: center;
    }

  14. amarstyle
    Member
    Posted 1 year ago #

    Solved it

Topic Closed

This topic has been closed to new replies.

About this Topic