Div mouse hover - javascript

Work on ASP.NET 2.0 C# on the web. In my site, I have three divs. Each div contain several elements. When I mouse hover a div then it expands on vertically, initially, all div are in Collapsible. How to write this mouse hover event. How to set all div content in collapsible. I want Accordion but the Accordion header takes place vertically not horizontally.

Sounds like you want an Accordion

You can use a jquery Accordion.
To make the sections expand and collapse on mouse over, use this:
$('.selector').accordion({ event: 'mouseover' });

Related

Horizontal DIV with children elements to be scrolled to by Id

I have an ASP.NET Core Razor Page where is a collection of elements scroll-able horizontally on touch or on nav button click.
I am not js specialist and I need one more functionality:
On button click, I need to "JUMP" to element that has given ID.
How can I achieve that on horizontal scroll div?
This answer here can help.
This is a quote from that answer
call this when you need to scroll the screen to an element which has id="yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

Scroll bar inside a sortable div

I am using jQuery sortable. Inside the sortable div is div that has a vertical scrollbar. If I click the vertical scroll bar, the sortable is triggered but doesn't see the unclick event. I then need to right click in order to drop the sortable div. How can i propagate the unclick or even make it so the scrollbar does not trigger the sortable drag?
$('#sortHolder').sortable();
Example http://jsfiddle.net/L2hWv/
There is this similar question here, but I have a scrolling div inside my sortable.
I have faced your issue with a flash object inside the div. You could try using a drag handle. Docs: http://api.jqueryui.com/sortable/#option-handle

How do I create div that can be dragged up to reveal content?

I have a div with an image and some text. I want the whole div to be draggable, but only upwards. When the visitor drags the div upwards with their mouse, there is content under the div, that doesn't move. That means that that content is already there. The draggable div is overlapping it. A good example of what I want to do is the Microsoft Windows 8 lock-screen. You drag up, and the login screen is under it. Thanks!
I was trying to do something very similar to your problem not a while ago. If you want an element which can be dragged up use the axis option in the draggable() tool in jQuery UI. You would need:
$(document).ready(function() {
$("div").draggable({
axis: "y"
});
});
This defines it as draggable, and only on the Y-axis (vertical).
One option would be to use jQuery UI's draggable feature.
http://jqueryui.com/demos/draggable/

Why doesn't my drop-down menu stay visible when I hover over it?

Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error
You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.
Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.

CSS Show active element above the div with overflow:hidden

I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
In your .product hover event handler, get the offset of the product. This will give you the position of your product in relation to the document.
Next create your overlay product information div and append it directly to the <body>.
Set the overlay div to position: absolute and use the values returned from the offset call to position it.
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.

Categories

Resources