CODEWITHSUNDEEP
jqueryjquery-uijquery-selectors
MdeVera
MdeVera

Reputation: 647

using removeAttr does not work for me

I have an image that is presented after you hover over with your mouse. When I click on the image I would like the image to stay intact by using the removAttr method. But using removeAttr does not seem to work for me ....thanks for any suggestions.

Here is my HTML MARKUP

<table class="ovalControl">
    <tr>
        <td class="oval">
        </td>
        <td class="ovalSibling" align="center" >
            <div id="divOvalSibling" style="height:15px; width:30px;">
                <img id="imgOvalSibling" 
                     height="15px" 
                     width="30px" 
                     src="../Images/sib.PNG"
                     alt=""
                     onclick="respond0(); return false;"
                     style="display:none"/>
            </div>
        </td>
    </tr>
    <tr>
        <td class="ovalChildWidth" align="center">
          <div id="divOvalChild" style="height:25px; width:20px;">
             <img id="imgOvalChild"
                 height="25px"
                 width="20px"
                 src="../Images/Child.PNG"  
                 alt=""
                 onclick="respond1(); return false;"
                 style="display:none"/>
           </div>
        </td>
        <td class="blank">
            &nbsp;</td>
    </tr>
</table>

Here is my JQUERY code:

<script language="javascript" type="text/javascript">

        var prmRegister = Sys.WebForms.PageRequestManager.getInstance();
            prmRegister.add_initializeRequest(initializeRequest);
            prmRegister.add_endRequest(endRequest);

        $(document).ready(function () {
            $('#divOvalSibling').hover(
            function () {$('#imgOvalSibling').show();}, 
            function () {$('#imgOvalSibling').hide();})
        })

        $(document).ready(function () {
            $('#divOvalChild').hover(
            function () { $('#imgOvalChild').show();},
            function () { $('#imgOvalChild').hide();})
        })

        function initializeRequest(sender, args) {
        }

        function endRequest(sender, args) {               
        }

        function respond0() {

            var startX = $("#imgOvalSibling").offset().left + 15;
            var startY = $("#imgOvalSibling").offset().top + 7;

            $("#respond0").drawLine(startX, startY, 850, 250);
            $("#imgOvalSibling").removeAttr("style");
        }

        function respond1() {

            var startX = $("#imgOvalChild").offset().left + 10;
            var startY = $("#imgOvalChild").offset().top + 12;

            $("#respond1").drawLine(startX, startY, 400, 500);
            $("#imgOvalChild").removeAttr("style");

        }

    </script>

Thanks, Michael

Upvotes: 0

Views: 1212

Answers (3)

wdm
wdm

Reputation: 7189

You can unbind the hover on a click event. Doing so will prevent the mouseleave event and the image will stay in view.

$('#imgOvalSibling').click(function() {
    $('#divOvalSibling').unbind('mouseenter mouseleave');
});

Demo: http://jsfiddle.net/wdm954/YG6pq/1/

Upvotes: 0

skajfes
skajfes

Reputation: 8265

It seems that the problem is that when you are not hovering over the #divOvalSibling or #divOvalChild elements that the image gets hidden. You can remove the style, but after that the event handler kicks in and sets display: none on the image.

Quick fix would be to have your respond functions set some data on the image:

function respond0() {
    var startX = $("#imgOvalSibling").offset().left + 15;
    var startY = $("#imgOvalSibling").offset().top + 7;

    $("#respond0").drawLine(startX, startY, 850, 250);
    /* You set the flag on the image */
    $("#imgOvalSibling").data("isShown", true)
}

And you modify your hover event handler to check for the flag before hiding the image:

$(document).ready(function () {
    $('#divOvalSibling').hover(
    function () {$('#imgOvalSibling').show();}, 
    function () {
        if (!$('#imgOvalSibling').data("isShown")) {
            $('#imgOvalSibling').hide();
        }
    })
})

Upvotes: 0

braindamage
braindamage

Reputation: 2256

$("#imgOvalSibling").attr("style","");

also its better to bind the events instead of using inline javascript

$("#imgOvalChild").click(function() { respond1(); });

if you want to show a element with display: none; you can just:

$("#imgOvalSibling").show();

Upvotes: 2

Related Questions