Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 873
Home > Forums > JavaScript >

Scroll is not working while mouse hover

Posted by Nismeh under JavaScript on 5/7/2014 | Points: 10 | Views : 2528 | Status : [Member] | Replies : 7
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
Hi,

I am having one footer in which I am displaying content when mouse get hover on text. Now an issue is, this logic is working in IE and Firefox. But in chrome I am getting div in visible mode but it should extend scroll bar so that i can scroll my screen at below direction. But its not extending scroll bar. I am able to see half footer rest get cropped from bottom.

Can any one help me on this?

IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It

Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Chandradev819 on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
Hi

Could you please share the code with us ? so that we can check the exact issue in your code.

Thanks and Regards
Chandradev
My Blog

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nismeh on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
<script type="text/javascript">
function ShowPatentInfoOnMouseOver()
{
document.getElementById("divxyz").style.display = "block";
}

function HidePatentInfoOnMouseOut()
{
document.getElementById("divxyz").style.display = "none";
}

<div id="divxyz" class="PatentInfoDiv" onmouseout="HidePatentInfoOnMouseOut();"
style="margin-right: 5px;">
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
</div>

<a id="lnkPrivacyPolicy" href="#" onmouseover="ShowPatentInfoOnMouseOver();">xyz</a>
So now when i hover to xyz it enables divxyz. but its at bottom of page. So after enabling that xyz scroll should get extended. But its not getting extended. So not able to scroll down and read "bla bla bla......"

IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nismeh on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
This issue is in Chrome only. In rest browsers its working fine.

IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chandradev819 on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
Hi

I tested your code. It is only working with Firefox. It is not working with chrome and IE 10.

You can use Jquery or CSS approach to do this task like this

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery Hover Effect</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            //Attach the hover event of button
            $('#<%=Label1.ClientID %>').hover(function () {
                //Show the values on mouse over
                $(".slidingDiv").show(500);
            },
            function () {
                //Hide the value on mouse out
                $(".slidingDiv").hide(500);
            });
        });
    </script>
    
</head>
<body>
    <div>
        <form id="form1" runat="server">
        <asp:Label ID="Label1" runat="server" Text="HoverHere"></asp:Label><br />
        <div id="sampleValues" class="slidingDiv" style="display: none">
            Test Value 1<br />
            Test Value 2<br />
            Test Value 3<br />
            Test Value 4<br />
            Test Value 5<br />
            Test Value 6
        </div>
        </form>
    </div>
</body>
</html>



Thanks and Regards
Chandradev
My Blog

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chandradev819 on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
Using CSS 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication5.WebForm2" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

   .showme{ 

 display: none;

}

.showhim:hover .showme{

display : block;

}



    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>



      <div class="showhim">Asp.net<div class="showme">Asp.net is the microsoft web based technology.</div></div>

    </div>

    </form>

</body>

</html>



Thanks and Regards
Chandradev
My Blog

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nismeh on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
Hi Chandradev,
Thanks for your effort.

My issue is not for hide/show div. Its working fine for me.

Issue is, div which i've to hide/show is at bottom of page. So when div get visible page height get increased. So in IE and Firefox scrollbar gets resized according to page. But in Chrome its not getting enlarged.



IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chandradev819 on: 5/7/2014 [Member] Starter | Points: 25

Up
0
Down
Hi

I tested your code in my system. In chrome height is getting increased.

what have written in this class PatentInfoDiv. If your code is not working as per as expected you can try with other approach like using CSS or Jquery. it will support all browser.

Thanks and Regards
Chandradev
My Blog

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts