Maybe I am going about this wrong, but I have a form with part of it's content temp removed ...
.form_jquery {display: none;}
and I am displaying the content when the parent div and title are hovered...
$(document).ready( function () {
$(".deliver").hover(
function () {
$(".form_jquery").css({'display':'block'});
},
function () {
$(".form_jquery").css({'display':'none'});
}
)
});
The problem is, I have a "main content" area under this form title/toggle and when we...
css({'display':'block'})
The lower block element is pushed down. I have tried a few display element options on the lower block with adverse reactions. My last resort will be to set my form as "fixed", but I did want it to simulate a menu title and scroll with that group.
http://www.testinr.com/
You should add the following items to your css
.deliverOnHover
{
position:relative;
z-index: 99;
display: block;
}
body{
position: absolute;
table-layout:fixed;
}
And Jquery will be something like this:
$(document).ready( function () {
$(".deliver").hover(function(){
$(".form_jquery").toggleClass('deliverOnHover');
});
});
and add position:absolute to the css of the div below.
Related
When you enter my website (goerann.com) the dropdown register-box is down by default.
If I click in Register, the register-box toogles it visibility as I want, but it doesn't start hidden by default.
$(document).ready(function() {
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
I want it to only show when you click on it. How can I make this happen?
Here's my jsfiddle (http://jsfiddle.net/bdv2doxr/)
Since you're already using the $(document).ready event, you can hide the menu there:
$(document).ready(function() {
$('.signupmenu').hide();
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
And here is your fiddle updated.
You need to make two changes, both involving the removal of display: block. When you toggle this div, it will make the display block. Therefore, you can initialize it as display: none.
Change this:
<div class="signupmenu" style="display: block;">
to this:
<div class="signupmenu">
And also change this:
.signupmenu {
background-color: #FFF;
display: block;
...
to this:
.signupmenu {
background-color: #FFF;
display: none;
...
Updated fiddle here
I have a div called title, and another one called description.
I have managed to make the div description appear while hovering on title.
here is the fiddle
Now I want to make the div description stay visible while I'm hovering on it (ON THE DESCRIPTION DIV).
Once i remove the hover form the div description, it should hide.
Here is my html
<span class="title">Last</span>
<div class="description">some description</div>
Here is my JS
var cancel = false;
$("div.description").hide();
$(".title").hover(function () {
cancel = (cancel) ? false : true;
if (!cancel) {
$("div.description").hide();
} else if (cancel) {
$("div.description").show();
}
});
And this is the CSS
.title { background: red; }
.description { background: yellow; }
You may not need jQuery to do this.
Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +:
Example Here
.description {
display: none;
}
.title:hover + .description,
.description:hover {
display: block;
}
If you need to use jQuery, you can just include the .description element in your jQuery selector:
Updated Example
$(".title, .description").hover(function () {
// ...
});
I have some code here and cannot find out how to make this work because I am still really new to javascript and jquery. I will have a demo below so you can see what I have going on. In the demo there is div positioned left:-60px so it is hidden, this div also has class of 'show' which positions the div to left:0 There is also the long black box which is another div. I want to make it so when you hover over the long black box, it will activate the 'show' property of the other div. Here is my code:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
function(showSidemenu){
$showSidemenu.onmouseover($sidemenuShowButton).addclass('show');
}
#sidemenuShowButton {
width:60px;
height:100%;
background:#000000;
top:0;
left:0;
position:fixed;
}
#sidemenu {
width: 60px;
height:100%;
background-color: #383D3F;
position: fixed;
top: 0;
left:-60px;
float: left;
z-index:0;
}
#sidemenu.show {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidemenuShowButton"></div>
<div id="sidemenu"></div>
try this jQuery:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$(document).ready(function(){
$sidemenuShowButton.on('mouseover',function(){
$('#sidemenu').addClass("show");
});
$sidemenuShowButton.on('mouseout',function(){
$('#sidemenu').removeClass("show");
});
// to make the showed div stay while the mouse is still over it
$('#sidemenu').on('mouseover',function(){
$(this).addClass("show");
});
$('#sidemenu').on('mouseout',function(){
$(this).removeClass("show");
});
});
if you want a little animation, you can use CSS3 Transition for that, like this one:
#sidemenu {
transition: 1s;
}
HERE'S A WORKING DEMO
Use JQuery's show and hide functions. If you set your #sidemenu to display: none;. And then use this this function it will work:
$('#sidemenu').mouseenter(function(){
$("#sidemenuShowButton").show();
}).mouseleave(function(){
$("#sidemenuShowButton").hide();
});
No classes are needed in this way.
Your JS should looks like this:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$sidemenuShowButton.on('mouseover', function(){
$showSidemenu.addClass('show')
});
First of all you are using function which never used and cannot be used since it have no name. Second, there is no onmouseover method in jQuery (read the manual ;-). Third you have to pass there a callback function which will be involved when 'mouseover' event occurs.
And if you wanna hide your div when mouse leaves add
$showSidemenu.on('mouseleave', function(){
$showSidemenu.removeClass('show')
});
You should use $showSidemenu in this case instead of $sidemenuShowButton because when $showSidemenu apears mouse leaves $sidemenuShowButton and enters $showSidemenu. But if you wanna use css3 animation - it's better to make appearing div nested to control div and use event bobbling.
And jsfiddle
Solution:Use mouseover and mouseout events to add and remove class "show"
I have intentionally added mouseout event on showSidemenu as when it slides in it goes over sidemenuShowButton div and comes on top of it, so attaching mouseout to sidemenuShowButton will cause flickering effect.
http://api.jquery.com/category/events/mouse-events/
$sidemenuShowButton.mouseover(function(){
$showSidemenu.addClass("show");
}
);
$showSidemenu.mouseout(function(){
$showSidemenu.removeClass("show");
}
);
Working JS Fiddle Example: http://jsfiddle.net/2cjjdm7j/1/
Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}
See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/
CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">
You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/
Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.
I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});
I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.
http://jsdo.it/mretchin/4Ewk
It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.
Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.
Thanks for helping! I appreciate it!
Should I just give up and make it work in CSS?
You can do something like this:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function() {
$('ul.file_menu').stop(true, true).slideUp('medium');
}
});
});
And here an example with sub-menus:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').slideDown('medium');
},
function() {
$('ul.file_menu').slideUp('medium');
}
);
$(".file_menu li").hover(
function() {
$(this).children("ul").slideDown('medium');
},
function() {
$(this).children("ul").slideUp('medium');
}
);
});
For anyone who finds this in the future Aram's answer can be shortened with .slideToggle() to handle both up and down.
Here's the modified fiddle
http://jsfiddle.net/4jxph/2009/
If you have a sub-menu set to display: none; it will trigger it also, so what you'll want to do is set it to block, then add something like this
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
And place it right below your first slideToggle. Why don't I just show you?
$(document).ready(function () {
$(".hoverli").hover(function () {
$(this).find('ul').slideToggle('medium');
});
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
});
Not sure if you care but you want to make sure that you run the .stop() method that way the animations dont build themselves up and run over and over. Here's an example
http://jsfiddle.net/4jxph/1335/
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function () {
$('ul.file_menu').stop(true,true).slideUp('medium');
}
);
});
Use the finish function in jQuery to prevent the bug where you rapidly hover your mouse over the menu and out of the menu. Finish is better than the stop function previously suggested.
$(document).ready(
function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').finish().slideDown('medium');
},
function () {
$('ul.file_menu').finish().slideUp('medium');
}
);
});
Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu:
http://jsfiddle.net/4jxph/3418/
I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1
here is link to jFiddle:
http://jsfiddle.net/4jxph/3423/
Here is the code:
--------------- HTML:
<div id="divMenuWrapper1" class="divMenuWrapper1">
<div id="hoverli">
<div class="lbtn">
Actions
</div>
<div id="actions_menu" class="file_menu">
<div>File</div>
<div>Edit</div>
<div>View</div>
<hr />
<div>Insert</div>
<div>Modify</div>
<div>Control</div>
<div>Debug</div>
<div>Window</div>
<div>Help</div>
</div>
</div>
</div>
<div>
testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu
</div>
--------------- Css:
.lbtn
{
display:inline-block;
cursor:pointer;
height:20px;
background-color:silver;
background-repeat:repeat-x;
border:1px solid black; /* dark navy blue */
text-decoration:none;
font-size:11pt;
text-align:center;
line-height:20px;
padding:0px 10px 0px 10px;
}
.divMenuWrapper1
{
height: 25px;
width: 75px;
}
.file_menu
{
display:none;
width:250px;
border: 1px solid #1c1c1c;
background-color: white;
position:relative;
z-index:100000;
}
.file_menu div
{
background-color: white;
font-size:10pt;
}
.file_menu div a
{
color:gray;
text-decoration:none;
padding:3px;
padding-left:15px;
display:block;
}
.file_menu div a:hover
{
padding:3px;
padding-left:15px;
text-decoration:underline;
color: black;
}
--------------- jQuery (to be placed in document.ready or pageLoad()):
$("#hoverli").hover(
function () {
$('#actions_menu').finish().slideDown('fast');
},
function () {
$('#actions_menu').finish().slideUp('fast');
}
);
I know this is probably a bit late but just found this thread saw that your question above about things below the menu 'getting a bit screwy' was unanswered.
If you give your div with the class 'file menu' a position of absolute then it should cease to affect any elements ahead of it as you will have taken it out of the normal flow.
To get a select box to open on hover to the exact height required by its contents, figure out how many elements there are:
JavaScript
function DropList(idval) {
//
// fully opens a dropdown window for a select box on hover
//
var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
var numOptions = document.getElementById(idval).getElementsByTagName('option').length;
document.getElementById(idval).size = numOptgroups + numOptions;
}
HTML
<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
<option value="0">Any height</option>
etc.
</select>