how to enable menu bar when mouse is placed on it - javascript

i have a menu which contains home,patient,reports etc. This menu should be present in each and every page and it should be present at the top right of each page. I know how to design this.Now i wanted to make it hidden and it should display only when mouse is placed at the top right side of a page.Please guys tell me how to do this.If you want the code for menu bar then here is this
<html class="no-js" lang="en-US">
<head>
<style type="css/text">
body{
overflow:hidden;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Home</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="base.css">
<script src="jquery.min.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.5.1" />
</head>
<body >
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="links">
<li>Home</li>
<li>Patient</li>
<li>Appointments</li>
<li>Reports</li>
<li>logout</li>
</ul>
</div>
</nav>
</section>
</header>
</body>
</html>

hi i have made a example for u i hope this helps the first example shows that whenu hover over the menu show but when u stop the hover on the box the menu will disapear
http://jsfiddle.net/nFwWG/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
$("#righttopbox").on('mouseleave',function(){
$("#global-nav").hide();
});
the second one show when u hover once the menu will stay
http://jsfiddle.net/nFwWG/1/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
also dont forget to put jquery script on the header you can use this hosted by google by typing in google jquery google.
or you can download it at
www.jquery.com
hope this helps

Assuming global-nav is at top right
JS:
$("#global-nav").mouseenter(function(){
$(".links", this).show();
}).mouseleave(function(){
$(".links", this).hide();
});
CSS:
#global-nav .links {
display:none;
}

If it is hidden and you want to make it appear when the mouse is at top right, then you probably have to use JavaScript with mousemove event on the body or such. Then check the mouse co-ordinates and if it's in your pre-defined range (top-right) then show up the menu. As you can see e.screenX and e.screenY will give you the mouse coords relative to screen.

Related

I want to make a website that triggers css animations on scroll, no vertical or horizontal movement. Is this possible?

I have seen multiple website that have unique scrolling features, but one that stood out to me was this website that only triggered animations on scrolling, is there a way that I could do this?
I have looked up a few ways to make unique scrolling effects, but none provide me with what I need.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title></title>
</head>
<body>
<div class="center">
<a class="elementA">A</a>
<a id="elementN">n</a>
<a id="elementD">d</a>
<a id="elementR">r</a>
<a id="elementE">e</a>
<a class="elementW">w</a>
<a class="elementP">P</a>
<a class="elementAA">a</a>
<a class="elementNdrew">n</a>
</div>
</body>
</html>
I just want to make a website that will trigger some CSS animations whenever I scroll, without any movement. Thank you!
You should try to use the wheel envent and check if e.deltaY > 0
window.addEventListener('wheel', function(e) {
if (e.deltaY > 0) {
console.log('scrolling down');
document.getElementById('status').innerHTML += "<p><strong>hello world</strong></p>";
}
});
<div id="status"></div>

Position a bootstrap dropdown menu on a different control

Is it possible to move the dropdown menu from a bootstrap dropdown-menu to be below a different control? (An input in my case.)
The dropdown is usually based off the button that causes it to dropdown.
The idea is that I have a user that is going to put a value into the input box and then press the button and there will be some floating search results in the "dropdown-menu" box that they can select from.
It will look odd for my UI to have that positioned from the button.
I can create my own popup, but I would rather just use the dropdown-menu if it supports this.
<!DOCTYPE html>
<html>
<head>
<title>Web page template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><input type="text" placeholder="blabla"></a>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
Isn't this what you are trying to achieve or maybe I didn't understand your intentions clearly enough? You can always include any kind of element in a link tag and position your menu with CSS.

How to make collapsible menus jQuery Mobile

I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(
You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again

When I use jQueryMobile, scrolling has appear

I just make a example site because I want to make a mobile site..
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link href="./framework/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.min.js"></script>
<script src="./framework/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button</h1>
button
</div>
<div data-role="content">
button
button <br/>
button <br/>
button <br/>
button <br/>
button
</div>
<div data-role="footer">
<h1>Copyright</h1>
</div>
</div>
</body>
</html>
But when it is started in Mobile, a scrollbar has appeared..
When I don't use jQueryMobile, the scrollbar has gone..
I'm curious why scrollbar is made..
Because of ajax-loader? or Because of jQuery-css setting?
The scrollbar just conduct 1mm scrolling.. I want to remove it
Sample site is http://mbtistudy.cafe24.com/jstest.html
I'll appreciate your help..
Ok then you have to remove the min-height from ui-page ui-body-c ui-page-active which is causing the scrollbar. Also remove min-height where ever it's found also to .ui-mobile, .ui-mobile .ui-page if it's still showing then add overflow: hidden to this.
Add following style class into your page it will remove scroll bar.
.ui-mobile .ui-page
{
min-height: 300px;
overflow: hidden;
}
Add this in your CSS this will probability help:
.ui-content .ui-listview, .ui-panel-inner>.ui-listview { margin:0em}

jQuery .load function gets slow after few clicks

I am trying to load different external HTMl files into a DIV in my parent HTML. Here is the code I am using
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BeautyDish Photography | Wedding and Beauty Photographer</title>
<meta name="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<div id="wrapper" style=" max-width:1920px; min-width:1024px;">
<nav>
<div id='MainMenu'>
Home
About Us
Portfolio
Contact Us
</div>
</nav>
<div id="content" style="width:1200px; padding:0; margin:auto;">ff
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
$(function(){
$("#MainMenu a").click(function(e) {
//load home.html on click
e.preventDefault();
$("#content").load($(this).attr('href')+".html", null, function(){
alert('Load Done');
});
});
});
</script>
</body>
</html>
Whenever I click any link for the first time it works perfectly, from second click onward the loading is taking longer and the alert is coming more than once.
I have also hosted a working version at http://www.jbasuphotography.com/index_new.html
I am new to jQuery, please let me know how to solve the problem.
The problem seems to be that you're loading the whole page inside a div of itself.
And it's included with its script and event binding which can only make it worse.
A solution could be to reduce to the part that really interests you (a different page). But this solution would have to be designed for your real need which isn't clear.
before the load you can do a remove first, because its loading multiple files in.
$('#wrapper #content').remove();
$('#wrapper').append('<div id="#content"></div>')

Categories