CODEWITHSUNDEEP
jquerycss
Ahns
Ahns

Reputation: 73

dynamic hidden, visible div event on jquery

I'm implementing vote system.

When mouse over on main image, image will be grayed out, and then rating ui will be visible. Then users click rating by 1 to 5 value.

I wanna show when users trying to click rate, rating div(like a star) visible and hidden. I made hidden event on div dynamically. But once div hidden, they can't take mouseover event I think. What should I do ?

    $(document).ready(function() {
    	$(".innerDiv").hide();
    	//$(".rating").hide();
    	
    	$("#wrapperDiv").on({
    		mouseover: function() {
	    		$(".innerDiv").show();
    		}, mouseout: function() {
    			$(".innerDiv").hide();
    		}
    	});
    	
    	$(".rating").on({
    		mouseover: function() {
    			var index = $(this).attr("value");
    			
    			var i = 0;
    			for(i=0; i<5; i++) {
					if(i<index) {
    					$($(".rating")[i]).css('visibility', 'visible')
					} else {
    					$($(".rating")[i]).css('visibility', 'hidden')
					}    				
    			}    			
    		}, click: function() {
    			alert('you voted rate ' + $(this).attr("value") + '!');
    		}
    	});
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperDiv" style="cursor:pointer;width:200px;height:350px;border:1px solid;background:green;">
		<div class="innerDiv" id="topInnerDiv" style="width:200px;height:20px;border:1px solid;background:yellow;">
			<span>Main Topic Image</span>
		</div>
		<div class="innerDiv" id="mainInnerDiv" style="width:200px;height:210px;border:1px solid;background:green;">
			<span>Grayed out Topic Image</span>
		</div>
		<div class="innerDiv" id="midInnerDiv" style="width:200px;height:20px;border:1px solid;background:blue;">
			<span>rating by star</span>
		</div>
		<div class="innerDiv" id="bottomInnerDiv" style="width:200px;height:100px;border:1px solid;background:red;">
			<div class="rating" value="1" id="rating1" style="border:0px;float:left;width:30px;height:50px;background:blue">
				<span>1</span>
			</div>
			<div class="rating" value="2" id="rating2" style="border:0px;float:left;width:30px;height:50px;background:black">
				<span>2</span>
			</div>
			<div class="rating" value="3" id="rating3" style="border:0px;float:left;width:30px;height:50px;background:pink">
				<span>3</span>
			</div>
			<div class="rating" value="4" id="rating4" style="border:0px;float:left;width:30px;height:50px;background:purple">
				<span>4</span>
			</div>
			<div class="rating" value="5" id="rating5" style="border:0px;float:left;width:30px;height:50px;background:white">
				<span>5</span>
			</div>
		</div>
	</div>

Upvotes: 0

Views: 612

Answers (2)

John R
John R

Reputation: 2791

Use fadeTo method of jQuery instead of using visibility property. Because mouseover event will not trigger for hidden elements.

But this fadeTo method will changes the opacity of thediv for showing and hiding it.

$(document).ready(function () {
            $(".innerDiv").hide();
            //$(".rating").hide();

            $("#wrapperDiv").on({
                mouseover: function () {
                    $(".innerDiv").show();
                    $(".rating").show();
                }, mouseout: function () {
                    $(".innerDiv").hide();
                }
            });

            $(".rating").on({
                mouseover: function () {
                    var index = $(this).attr("value");

                    var i = 0;
                    for (i = 0; i < 5; i++) {
                        if (i < index) {
                            $($(".rating")[i]).fadeTo(1, 1);
                        } else {
                            $($(".rating")[i]).fadeTo(1,0);
                        }
                    }
                }, click: function () {
                    alert('you voted rate ' + $(this).attr("value") + '!');
                }
            });            
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapperDiv" style="cursor:pointer;width:200px;height:350px;border:1px solid;background:green;">
        <div class="innerDiv" id="topInnerDiv" style="width:200px;height:20px;border:1px solid;background:yellow;">
            <span>Main Topic Image</span>
        </div>
        <div class="innerDiv" id="mainInnerDiv" style="width:200px;height:210px;border:1px solid;background:green;">
            <span>Grayed out Topic Image</span>
        </div>
        <div class="innerDiv" id="midInnerDiv" style="width:200px;height:20px;border:1px solid;background:blue;">
            <span>rating by star</span>
        </div>
        <div class="innerDiv" id="bottomInnerDiv" style="width:200px;height:100px;border:1px solid;background:red;">
            <div class="rating" value="1" id="rating1" style="border:0px;float:left;width:30px;height:50px;background:blue">
                <span>1</span>
            </div>
            <div class="rating" value="2" id="rating2" style="border:0px;float:left;width:30px;height:50px;background:black">
                <span>2</span>
            </div>
            <div class="rating" value="3" id="rating3" style="border:0px;float:left;width:30px;height:50px;background:pink">
                <span>3</span>
            </div>
            <div class="rating" value="4" id="rating4" style="border:0px;float:left;width:30px;height:50px;background:purple">
                <span>4</span>
            </div>
            <div class="rating" value="5" id="rating5" style="border:0px;float:left;width:30px;height:50px;background:white">
                <span>5</span>
            </div>
        </div>
    </div>

I hope this helps you !!!

Upvotes: 1

alan0xd7
alan0xd7

Reputation: 1851

Use CSS opacity: 0 and opacity: 1 to change the visibility. When something is opacity: 0, it can still trigger mouseover events.

Upvotes: 1

Related Questions