Jquery ui: How to toggle backup when mouse out? - javascript

I have the following code. When I mouse over/hover over the drop down box it opens up.
How do I make the drop down box toggle back up for the mouseout?
CSS in the <head>
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a {color:0092DD !important;text-decoration:none; outline:none;}
.dropdown a:visited { color:#0092DD; text-decoration:none; outline:none;}
.dropdown a:hover { color:#0092DD;}
.dropdown dt a:hover, .dropdown dt a:focus
{ color:#0092DD !important; border: 1px solid #0092DD;}
.dropdown dt a {background:#fff url(./img/arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #0092DD; width:47px; border-radius:6px;
-moz-border-radius:6px }
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#ccc none repeat scroll 0 0; border:1px solid #000; color:#0092DD; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:117px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block; color:#000 !important;}
.dropdown dd ul li a:hover { background-color:#777; color:#fff !important}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
HTML
<!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>
<title>drop down with CSS and jQuery - demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Actions</span></dt>
<dd>
<ul>
<li>UK<img class="flag" src="br.png" alt="" /><span class="value">UK</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
Javascript also in the <head>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").hover(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
alert(getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('hover', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").hover(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>

Related

Drag Menu Item element from Submenu Jquery

I am total noob in Jquery. I created submenu in xhtml.
<p:panelMenu style="width:200px" id="menus">
<p:submenu label="Add Control" styleClass="ctl-tiered-submenu-1"
rendered="true">
<p:menuitem value="Bilance" actionListener="#{myIndexBean.addControl}"/>
<p:separator />
<p:menuitem value="Average Salary" />
</p:submenu>
</p:panelMenu>
Now I want have draggable MenuItem. I created this using JQuery:
$(".ui-panelmenu-content").draggable({revert:true });
Now I have draggable MenuItem, but I can't move this element outside of Submenu. How I can correct this?
HTML
<!Doctype html>
<html>
<body>
<ul>
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
</ul>
<div class="ui-widget-header">
<p>Drag a menu item over me!</p>
</div>
</body>
</html>
CSS
ul li {
display:inline-block;
position:relative;
text-align:center;
}
#media screen and (min-width:480px) {ul li{width:33.33%;}}
#media screen and (max-width:479px) {ul li{width:50%;}}
#media screen and (max-width:195px) {ul li{width:100%;}}
ul li a {
display:block;
padding:20px 0;
text-decoration:none;
color: black;
text-transform:uppercase;
}
ul li:nth-child(1) a{background-color: green;}
ul li:nth-child(2) a{background-color: red;}
ul li:nth-child(3) a{background-color: #ff8400;}
ul li:nth-child(4) a{background-color: purple;}
ul li:nth-child(5) a{background-color: #49a7f3;}
ul li:nth-child(6) a{background-color: yellow; }
.ui-widget-header {
height:56px;
padding:18px 0;
margin:auto !important;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
jQuery
$(function () {
$("ul li").draggable({
snap: ".ui-widget-header",
snapMode: "inner",
revert: "invalid"
});
$(".ui-widget-header").droppable({
accept: "li",
drop: function (event, ui) {
location = $(ui.draggable).children('a').data('address');
}
});
$(window).resize(function () {
var droppable = $('.ui-widget-header');
droppable.width($('li').outerWidth() - parseInt(droppable.css('borderLeftWidth'), 10) - parseInt(droppable.css('borderRightWidth'), 10));
}).resize();
});

Iterating through a custom UL LI A list and isolating only items that have the selected classname attributed to them

I need your help,
Similar to what the code does below for multi-select boxes that are selected, how can I create a new function that would iterate through my custom UL LI A list and isolating only items that have the "selected" classname attributed to them:
var sel = document.getElementById('selectbox');
c = 1
for (var i=0, len=sel.options.length; i<len; i++) {
if (sel.options[i].selected) {
alert(sel.options[i].value)
c++
}
}
Here is the HTML, CSS and Javascript:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
.dropdown dd {
position:relative;
}
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000;}
.dropdown dt a:hover, .dropdown dt a:focus {
border: 1px solid rgb(128,128,128);
}
.dropdown dt a {
background:#e4dfcb url(arrow.png) no-repeat scroll right center;
display:block;
padding-right:20px;
border:1px solid rgb(170,170,170);
width:150px;
}
.dropdown dt a span {
cursor:pointer;
display:block;
padding:5px;
}
.dropdown dd ul {
background:#e4dfcb none repeat scroll 0 0;
border:1px solid rgb(170,170,170);
display:none;
left:0px;
padding:5px 0px;
position:absolute;
top:2px;
width:auto;
min-width:170px;
list-style:none;
}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.selected{
background-color:#d0c9af;
}
</style>
<script type="text/javascript">
/*
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
*/
$(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function(e) {
var text = $(this).html();
if (e.ctrlKey) {
$(this).addClass('selected');
}
else {
var text = $(this).html();
$(".dropdown dd ul li a").removeClass('selected');
$(this).addClass('selected');
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
}
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});
</script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Please select the country</span></dt>
<dd>
<ul>
<li>Brazil<span class="value">BR</span></li>
<li>France<span class="value">FR</span></li>
<li>Germany<span class="value">DE</span></li>
<li>India<span class="value">IN</span></li>
<li>Japan<span class="value">JP</span></li>
<li>Serbia<span class="value">CS</span></li>
<li>United Kingdom<span class="value">UK</span></li>
<li>United States<span class="value">US</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
Can you just use jQuery to select them and check the length? e.g.
var c = $(".dropdown dd ul li a.selected").length
Or you can iterate through it in the normal jQuery way

Converting a UL LI Single Select Box to a Multiple Select Box

I really need the help of an expert here on this site. I'd like to be able to, add on and build functionality such that my custom UL LI single select boxes, would be able to handle multiple user selections.
Here's the typical scenario, the user holds down the CTRL Key on their keyboard and selects multiple values from the select box.
Here is a quick fiddle: http://jsfiddle.net/c2ezuw24/1/
Here is the existing Markup:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
.dropdown dd {
position:relative;
}
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000;}
.dropdown dt a:hover, .dropdown dt a:focus {
border: 1px solid rgb(128,128,128);
}
.dropdown dt a {
background:#e4dfcb url(arrow.png) no-repeat scroll right center;
display:block;
padding-right:20px;
border:1px solid rgb(170,170,170);
width:150px;
}
.dropdown dt a span {
cursor:pointer;
display:block;
padding:5px;
}
.dropdown dd ul {
background:#e4dfcb none repeat scroll 0 0;
border:1px solid rgb(170,170,170);
display:none;
left:0px;
padding:5px 0px;
position:absolute;
top:2px;
width:auto;
min-width:170px;
list-style:none;
}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Please select the country</span></dt>
<dd>
<ul>
<li>Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
<li>Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></li>
<li>India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></li>
<li>Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></li>
<li>Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></li>
<li>United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></li>
<li>United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
use built in html feature.
http://jsfiddle.net/2v8foz90/
<select multiple>
<option value="DEDE">Hello</option>
<option value="FEFE">bonjour</option>
<option value="SESE">Ciao</option>
<option value="AEAE">hallo</option>
</select>

A block element isn't displayed in Chrome under Mac OS

The submenu (the "lvl2" class) gets displayed upon mouseover in all browsers but MacOS Chrome.
OS version: 10.10.4,
chrome version: 45.0.2454.85
Here's the code: http://jsfiddle.net/166nj6rp/2/
JS
$(document).ready(function () {
$('#main_menu ul.lvl1 > li').on('mouseenter', function () {
$(this).find('ul').show(); //.css('display', 'block');
}).on('mouseleave', function () {
$(this).find('ul').hide();
});
});
HTML
<div id="main_menu">
<ul>
<li> Main
<ul class="lvl1">
<li> Mouseover here
<ul class="lvl2">
<li> First
</li>
<li> Second
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Styles
#main_menu {
background:#333;
color:#cccccc;
height:43px;
position:relative;
}
#main_menu ul {
list-style:none;
display:block;
padding-left:0px;
}
#main_menu > ul {
height:43px;
}
#main_menu > ul > li {
display:inline;
position:relative;
line-height: 37px;
}
#main_menu > ul > li > a {
padding:9px 3px 10px 8px;
}
#main_menu > ul > li > ul {
display:block;
background:#333;
position:absolute;
left:-1px;
top:30px;
min-width:180px;
z-index:999;
}
#main_menu > ul > li li a {
display:block;
}
#main_menu > ul > li li a:hover {
background:#555;
}
#main_menu ul.lvl1 > li:hover {
background:#555;
}
#main_menu ul.lvl1 > li {
position:relative;
}
#main_menu ul.lvl2 {
display:none;
position: absolute;
top:0px;
left:150px;
background:#333;
min-width:150px;
max-width:300px;
}
#main_menu > ul li > a {
color:#ccc;
font-size:15px;
}
If think its all with (absolute positioning inside inline element):
#main_menu > ul > li {
/* display: inline; */
}
Solution: wrap your second ul in div or get rid of "inline" property.
Change 'display:inline' into 'display:block'. It worked.
#main_menu > ul > li {
display:block;
position:relative;
line-height: 37px;
}

keep same selected option (using ul li) after refresh page

I have made a select option using ul li JavaScript. it works fine. The issue is that I want to keep the same selected option after the page is refreshed. Now it is reset after the page is refreshed.
Here is my code:
HTML:
<dl class="dropdown" id="ajaxselect">
<dt><span>Keywords</span></dt>
<dd>
<ul>
<li>Start With <span class="value">startwith</span></li>
<li>Contains <span class="value">contains</span></li>
<li>End With <span class="value">endwith</span></li>
</ul>
</dd>
</dl>
JS:
$(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
var data = getSelectedValue("ajaxselect");
//alert(data);
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});
CSS:
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; top:2px; width:auto; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
Any solution for this? Thanks.

Categories