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');
}
});
Related
I wanted to create a small and lean as possible menu that hides itself on scroll at certain viewport height, shows itself after You click a button, and I did, but I have 2 problems with it:
Here is a Fiddle for You to follow along.
When you show the menu by clicking the button it appears, but the only way for it to go away is if You scroll down or up. How can I make it dissapear if I click somewhere out of the #sideBar container e.g. the site.
When You refresh the page using a soft-refresh (F5) the menu appears because the browser understands that as if the page have been scrolled. Is there a way to bypass this as well?
Here is some code, just because the fiddle requires it:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
} else {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
});
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
});
Thanks in advance!
Test the target:
DEMO
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
if ($(document).scrollTop() < 400) showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
Here is a shorter version
DEMO
function toggleIt(show) {
if (show) {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
else {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
}
$(document).scroll(function () {
var y = $(this).scrollTop();
toggleIt(y > 400);
});
$(function(){
toggleIt($(document).scrollTop()<400);
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) toggleIt(false);
});
});
I can help with the first question, you can change your JQuery code below so that when the parent 'content' container is clicked the menu slides up.
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
I'm not sure I follow the second question? Please can you provide more information on what you mean.
For Question 1, Just put the following code in ready function
$('#content').click(function(){
$('#sideBar').slideUp();
});
EDITED
For Question 2, put following code in ready function
$(document).trigger('scroll');
In short, your ready function should look like
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
A child, combination of #mplungjan and #Gagan Jaura's responses seems to do the job:
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
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/
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() {}
)
});
<script type="text/javascript">
$(".productOptions a").click(function(){
var datafilter = $(this).attr('data-filter');
$('.productOptions a').css( "color", "#898989" );
$('.productOptions a').not('.'+datafilter).css( "color", "#eee" );
if(!$('.productOptions a').is('.' + datafilter)){
$('#urunDurum').html("true");
}else{
$('#urunDurum').html("false");
}
/*
if ($('.productOptions a.'+datafilter)) {
$('#urunDurum').html( "yok" );
}else{
$('#urunDurum').html( "var" );
}*/
});
$(".productOptions").on('click','li', function(){
var datafilter = $(this).find("a[href]").attr('data-filter');
$(this).addClass('selected').siblings().removeClass('selected');
})
</script>
when i click two active buttons i need true, active and passive = false, passive + passive = false. after i need change urunDurum div inner. check the link please http://jsfiddle.net/Mh3d7/
Based on your fiddle provided in comments of your question here http://jsfiddle.net/Mh3d7/,
I think you're looking for this code: Demo here http://jsfiddle.net/robschmuecker/Mh3d7/1/
$(".productOptions a").click(function () {
var datafilter = $(this).data('filter');
$('.productOptions a').css("color", "#898989");
$('.productOptions a').not('.' + datafilter).css("color", "#eee");
if (!$(this).hasClass(datafilter)) {
$('#urunDurum').html("true");
} else {
$('#urunDurum').html("false");
}
});
I am using a jQuery collapsible panel from Right to Left but it's not working properly, when clicking to close and Highlight the active Link...
Please, find the link :
http://jsfiddle.net/egUHv/
and the code is :
$(function() {
$('#nav').stop().animate({'marginRight':'-100px'},1000);
function toggleDivs() {
var $inner = $("#nav");
if ($inner.position().right == "-100px") {
$inner.animate({right: 0});
$(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
$inner.animate({right: "100px"});
$(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
toggleDivs();
});
});
See this : http://jsfiddle.net/egUHv/5/
$(function() {
$('#nav').stop().animate({'margin-right':'-100px'},1000);
function toggleDivs() {
var $inner = $("#nav");
if ($inner.css("margin-right") == "-100px") {
$inner.animate({'margin-right': '0'});
$(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
$inner.animate({'margin-right': "-100px"});
$(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
toggleDivs();
});
});
jQuery's .position() does not return an object with a right property so your current code always go in the else condition (since $inner.position().right === undefined !== '-100px').
.position() returns an object with left and top properties.
Here's a solution using class toggle on the #nav element to determine if the nav is closed/opened instead of checking the position of the element:
$(function() {
$('#nav')
.stop()
.animate({'marginRight':'-100px'},1000, function() { $(this).addClass('closed'); });
function toggleDivs() {
var $inner = $("#nav");
var $img = $(".nav-btn img", $inner);
if ($inner.hasClass('closed')) {
$inner.animate({ right: "100px" });
$img.attr('alt', 'close');
} else {
$inner.animate({ right: 0 });
$img.attr('alt', 'open');
}
$inner.toggleClass('closed');
}
$(".nav-btn").bind("click", function() {
toggleDivs();
});
});