Develop Reference

jQuery toggle menu items and sheet

I have written code that works very well, but unfortunately it is not perfect functional. I will describe briefly the action:
When I click on '.navbar-nav li a' parent and '.sheets, .sheetsBg' get active class.
If I click again '.navbar-nav li a' is properly removed only for the menu item parent class.
code:
function manageSheetsToggle() {
var navMenuItem = '.navbar-nav li a';
$(navMenuItem).click(function (e) {
if (!isTabletResolution() && !isPhoneResolution()) {
{
var sheetId = $(this).parent().data('target');
if ($('.sheets, .sheetsBg').hasClass('active')) {
$('.sheets, .sheetsBg').removeClass('active');
}
e.preventDefault();
$(this).parent().toggleClass('active').siblings().removeClass('active');
$("#" + sheetId).toggleClass('active').siblings().removeClass('active');
$(".sheets, .sheetsBg").addClass("active");
}
} else {
$(navMenuItem).click(function (e) {
e.preventDefault();
location.href = $(this).attr('href');
}
);
}
});
$('.sheetsBg, .corpoBelt, .header').click(function () {
$(".sheets, .sheetsBg").removeClass("active");
});
}
pls help.

I hope this is what you are luking for. I changed your code a little bit, but it works fine now. Try it and let me know
<script type="text/javascript">
var sheet, ln, cn = 0;
$(document).ready(function () {
$("#toggleMenu").find("a").on("click", function (e) {
ln = $(this);
sheet = ln.parent().data('target');
$("#" + sheet).toggleClass("active").siblings().removeClass('active');
$(".sheets").find("section").each(function () {
if ($(this).hasClass("active"))
cn++;
});
if (cn) {
$(".sheets").addClass('active');
cn = 0;
} else
$(".sheets").removeClass('active');
});
$('.corpoBelt').click(function () {
$(".sheets").removeClass("active");
});
});
</script>

I think you can use siblings() selector more easier
https://jsfiddle.net/2q50kj3a/1/

Hidden menu (jquery, css)

Patient: http://demo.imatte.us/fomru/project_people.html
Screen: http://i.stack.imgur.com/GkBST.png
Hidden menu works incorrect. After click on link, menu shows, but after 'mouseover' it disappears. I need to disable this, and hide menu just after click out of menu.
(function($) {
$(function(){
var $judgments = $('.project .jugdments-list .item');
$judgments.each(function(){
limit($(this).find('.title'), 140);
limit($(this).find('.text'), 200);
});
var $filters = $('.filters-list>li');
$filters.each(function(){
var $filter = $(this);
var $filterBody = $filter.find('.filter');
$filter.find('.filter-name').click(function(){
$('.filters-list .filter').not($filterBody).fadeOut();
$filterBody.fadeToggle();
});
});
$(document).click(function(e){
if ( !$(e.target).closest('.filters-list').length || $(e.target).is('.filters-list') ) {
$('.filters-list .filter').fadeOut();
}
});
});
function limit($elem, length) {
var text = $elem.text();
if ( text.length > length ) {
$elem.text(text.slice(0, 140)+'…');
}
}
})(jQuery);

If I got right what do you mean, then this should help you:
remove
.filters .filters-list>li:hover .filter {
display: block;
}
and add this:
$('.filter-name').each(function() {
var that = $(this);
that.hover(
function() {
$('.filters-list .filter').not(that.parent().find('.filter')).fadeOut();
that.parent().find('.filter').fadeIn();
},
function() {}
)
});

select.js Select boxes overlapping on open

I am having an issue with a custom select box using a script. It is working but for instance if you start at the bottom select box and click it, then click the middle, then the top it works as it is supposed to by closing the previous box.
However, if you click the middle box after the top one, the top box will also open and this will happen with all of the boxes.
Is there any solution to this?
Here is my jsFiddle
function tamingselect()
{
if(!document.getElementById && !document.createTextNode){return;}
var ts_selectclass='turnintodropdown'; // class to identify selects
var ts_listclass='turnintoselect'; // class to identify ULs
var ts_boxclass='dropcontainer'; // parent element
var ts_triggeron='activetrigger'; // class for the active trigger link
var ts_triggeroff='trigger'; // class for the inactive trigger link
var ts_dropdownclosed='dropdownhidden'; // closed dropdown
var ts_dropdownopen='dropdownvisible'; // open dropdown
var count=0;
var toreplace=new Array();
var sels=document.getElementsByTagName('select');
for(var i=0;i<sels.length;i++){
if (ts_check(sels[i],ts_selectclass))
{
var hiddenfield=document.createElement('input');
hiddenfield.name=sels[i].name;
hiddenfield.type='hidden';
hiddenfield.id=sels[i].id;
hiddenfield.value=sels[i].options[0].value;
sels[i].parentNode.insertBefore(hiddenfield,sels[i])
var trigger=document.createElement('a');
ts_addclass(trigger,ts_triggeroff);
trigger.href='#';
trigger.onclick=function(){
ts_swapclass(this,ts_triggeroff,ts_triggeron)
ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
return false;
}
trigger.appendChild(document.createTextNode(sels[i].options[0].text));
sels[i].parentNode.insertBefore(trigger,sels[i]);
var replaceUL=document.createElement('ul');
for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
{
var newli=document.createElement('li');
var newa=document.createElement('a');
newli.v=sels[i].getElementsByTagName('option')[j].value;
newli.elm=hiddenfield;
newli.istrigger=trigger;
newa.href='#';
newa.appendChild(document.createTextNode(
sels[i].getElementsByTagName('option')[j].text));
newli.onclick=function(){
this.elm.value=this.v;
ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
return false;
}
newli.appendChild(newa);
replaceUL.appendChild(newli);
}
ts_addclass(replaceUL,ts_dropdownclosed);
var div=document.createElement('div');
div.appendChild(replaceUL);
ts_addclass(div,ts_boxclass);
sels[i].parentNode.insertBefore(div,sels[i])
toreplace[count]=sels[i];
count++;
}
}
var uls=document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++)
{
if(ts_check(uls[i],ts_listclass))
{
var newform=document.createElement('form');
var newselect=document.createElement('select');
for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
{
var newopt=document.createElement('option');
newopt.value=uls[i].getElementsByTagName('a')[j].href;
newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
newselect.appendChild(newopt);
}
newselect.onchange=function()
{
window.location=this.options[this.selectedIndex].value;
}
newform.appendChild(newselect);
uls[i].parentNode.insertBefore(newform,uls[i]);
toreplace[count]=uls[i];
count++;
}
}
for(i=0;i<count;i++){
toreplace[i].parentNode.removeChild(toreplace[i]);
}
function ts_check(o,c)
{
return new RegExp('\\b'+c+'\\b').test(o.className);
}
function ts_swapclass(o,c1,c2)
{
var cn=o.className
if (o.nodeName.toUpperCase()=='A'&&ts_check(o,c1)){
if (ts_swapclass.lst&&ts_swapclass.lst!=o){
ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron);
ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul') [0],ts_dropdownclosed,ts_dropdownopen);
}
ts_swapclass.lst=o;
}
o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
}
function ts_addclass(o,c)
{
if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;}
}
}
window.onload=function()
{
tamingselect();
}

I was unable to fix the code so I found a quick work around that works perfect.
Thanks to everyone that tried.
*Fix
$( ".d2" ).click(function() {
$('.d3 .dropcontainer').css("display", "none");
});
$( ".d1" ).click(function() {
$('.d2 .dropcontainer').css("display", "none");
});
$( ".d1" ).click(function() {
$('.d3 .dropcontainer').css("display", "none");
});
$( ".d3" ).click(function() {
$('.d1 .dropcontainer').css("display", "none");
});
$( ".d3" ).click(function() {
$('.d2 .dropcontainer').css("display", "none");
});
$('.d3').click(function() {
$('.d3 .dropcontainer').css("display", "block");
});
$('.d2').click(function() {
$('.d2 .dropcontainer').css("display", "block");
});
$('.d1').click(function() {
$('.d1 .dropcontainer').css("display", "block");
});

$(document).mouseup(function (e){
div_cld = $('.dropcontainer');
div_par = $('.activetrigger');
if (!div_cld.is(e.target) && !div_par.is(e.target) && div_cld.has(e.target).length === 0) {
div_cld.find('ul').removeClass('dropdownvisible');
div_cld.find('ul').addClass('dropdownhidden');
}
});

javascript rotate what to change

I have ,
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
});
my problem is when I click outside arrow do not return first position what I must change ?
i can't use css and toggle whit jquery I need to use images with outside place
http://jsfiddle.net/cYCnD/9/

You should add the following handler:
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
$('.arrow').attr('src', 'select_arrow.png');
}
});
See my fiddle: http://jsfiddle.net/cYCnD/10/
The whole code should look like this:
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
allArrows.attr('src', 'select_arrow.png');
}
});
});

If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page.
If so, I believe this will work:
$(document).click(function(e){
if(!$(e.target).hasClass('arrow'))
$(".arrow").attr("src", select_arrow.png)
});

get id of child element when parent is clicked

Hello I have seen similar posts but none answer what I want to accomplish
I made a sample here
http://jsfiddle.net/edgardo400/R6rVJ/
What i basically want is when a click happens in the parent you get the id of the child
and store it in a variable so i can pass the variable currentID to the code below otherwise I will have to replicate this code 9 times for each id from box1 to box9
jQuery(currentID).delegate("a", "hover", function(event){
var $img = jQuery(this).parent("li").find('img');
var image = jQuery(this).attr('data-img');
jQuery('.defaultimg').stop(true, true).fadeOut();
if( event.type === 'mouseenter' ) {
if($img.length){
$img.show();
}else{
jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
}
}else{
if($img){
$img.hide();
}
jQuery('.defaultimg').stop(true, true).fadeIn();
}
});
});

$('#boxes').on('click', function(e) {
var currentID = e.target.id;
console.log(currentID);
......rest of code

In javascript it would be:
var a = document.getElementById('#boxes');
a.onclick = function(e){
console.log(e.target.id);
}

If you only wish to make your code working and displaying on your console the box name, you should probably set
jQuery('#boxes').bind('click', function(event) {
var currentID = jQuery(event.srcElement).attr('id');
/* rest of your code */
});
You might want to do something easier
jQuery('#boxes').children().bind('click', function() {
jQuery(this).delegate...
});
Although I'm not sure why you are doing this ...
fixed http://jsfiddle.net/nxTDA/