Develop Reference

how to make dropdown keep open on hover and disappear when leave it

i really need help. i tried but it is still not working. i want to make a dropdown menu that will appear on hover and will disappear when leave that dropdown.
$(document).ready(function(){
$('.navigation-menu').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation-dropdown').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
});
ul{
margin: 0;
}
.container{
background-color: rgb(0,0,0);
height: 30px;
padding: 10px;
}
.container-dropdown{
background-color: rgb(125,125,125)
}
.dropdown-menu{
display: inline-block;
}
.navigation-dropdown{
display: none;
}
.navigation-menu{
display: inline-block;
height: 100%;
}
.visible{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<img src="" alt="">
<div class="navigation">
<ul>
<li class="navigation-menu">home</li>
<li class="navigation-menu">home</li>
<li class="navigation-menu">home</li>
</ul>
</div>
</div>
<div class="navigation-dropdown">
<div class="container-dropdown">
<ul>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
</ul>
</div>
</div>
</header>
So, i just want to make that gray div disappear when i move my mouse leave the navigation-menu class
my problem: i have to move the mouse to the gray div first to make the gray div disappear. all i want is make the gray div can disappear without have to move the mouse to the gray div first

There are much better design options for you to look forward to, to get what you want. But if you just want to stick to the current layout and design, I would make a couple of changes to get what you are looking for.
.container{
background-color: rgb(0,0,0);
height: 20px;
padding: 10px;
padding-bottom: 0px; --to remove any space between menu title and the dropdown
}
and
$(document).ready(function(){
$('.navigation-menu').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation-dropdown').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
$('.navigation-dropdown').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
$('.navigation-menu').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
});
to hide dropdown menu if mouse leaves navigation div.
hope this helps.

Jquery- Full screen popup overlay on href click

Hi I want to show Full Screen Overlay Popup on clicking href tag. I tried a lot but couldn't find a particular solution. So far I am able to show/hide popup but i am failed to show full screen popup. So far working fiddle and necessary code is mentioned below.
$(document).ready(function(){
$('.opop').click(function(){
$('.pops').fadeIn();
});
$('.cls-pop').click(function(){
$('.pops').fadeOut();
});
});
.pops{
display:none;
height: 100%;
width: 100%;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<ul>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
</ul>
Open Popup
<div class="pops">
Some Content
<ul>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
</ul>
<p> Some More Content </p>
Close Popup
</div>
</div>
Fiddle: http://jsfiddle.net/hTQb8/128/
Thanks in advance...

#Ashish working fiddle :
http://jsfiddle.net/hTQb8/134/
html
<div class="items">
<ul>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
</ul>
Open Popup
</div>
<div class="pops">
Some Content
<ul>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
</ul>
<p> Some More Content </p>
Close Popup
</div>
css
.pops{
display:none;
height: 100%;
width: 100%;
background-color: gray;
position : absolute;
z-index:1;
top:0;
}
jquery
$(document).ready(function(){
$('.opop').click(function(){
$('.pops').fadeIn();
});
$('.cls-pop').click(function(){
$('.pops').fadeOut();
});
});

try this ashish
.pops{
display:none;
height: 100%;
width: 100%;
background: #fff;
position:absolute;
z-index:1;
top:0;
}

.pops{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: #fff;
}

its better to move your popup html out of container and inside body.
HTML
<div class="items">...</div>
<div class="pops">....</div>
and some changing in your css code to make it cover window with CSS main properties.
CSS (Key properties to achieve with any kind of html):
position:absolute;
top:0;
bottom:0;
z-index:999;
have a look at fiddle

Easy and best way to implement modal box without using any external file..
$(document).ready(function(){
$('#link').on('click', function () {
$('#modal-overlay, #overlay-wrapper').fadeIn(500);
});
$('#close').on('click', function () {
$('#modal-overlay, #overlay-wrapper').fadeOut(500);
});
})
html, body {
width : 100%;
height : 100%;
}
#modal-overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay-wrapper {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link" href="#">click me</a>
<div id="modal-overlay"></div>
<div id="overlay-wrapper">
<a id="close" href="#">Close</a>
<span>modal box value</span></div>
alue

jQuery Mobile: Position of external panel / always visible?

Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?

The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});

There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>

Put fixed content to flex slider

Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li):
Flex slider default code:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding.
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>

Use a div outside positioned absolute; You can use css tricks to center.
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>

Trying to get scrollTo to work horizontally

I'm trying to get the jQuery scrollTo plugin to work horizontally, so I've put together a little jsfiddle.
http://jsfiddle.net/P9B5y/15/
Now, without the javascript, it simply replaces each image (img 1, img 2, etc), but once the jQuery is instituted it doesn't fire.
Any help would be greatly appreciated!

Based on your comment:
I would live each id="image#" to
scroll horizontally, and replace,
rather than just replacing. Like so;
jsfiddle.net/P9B5y, except there would
be a cut-off, that would only allow
one id to be shown at one particular
time, as oppose to some waiting
I don't believe the scrollTo plugin is what you want. I believe what you want is to create a viewport, and animate a list behind the viewport, like this http://jsfiddle.net/7SLrL/1/:
HTML:
<div id="viewport">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<li>
<img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" />
</li>
<li>
<img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" />
</li>
<li>
<img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" />
</li>
</ul>
</div>
<div id="nav">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<li>
<img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" />
</li>
<li>
<img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" />
</li>
<li>
<img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" />
</li>
</ul>
</div>
JQuery
$('#nav li').click(function(){
var _this = $(this);
$('#viewport ul').animate({
left: -1* _this.index() * $('#viewport ul li').eq(_this.index()).children('img').width()
},500);
});
CSS:
#viewport {
width:350px;
height:350px;
overflow:hidden;
margin-bottom:10px;
border:1px solid #000;
}
#nav {
width:350px;
height:40px;
}
#viewport ul {
padding:0;
margin:0;
width:1400px; /* 350px per photo * 4 photos*/
position:relative;
}
#viewport img {
width:350px;
height:350px;
}
#nav img {
width:40px;
height:40px;
cursor:pointer;
}
li {
float:left;
}