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();
});
});
Related
An item I've submitted to themeforest.net got soft rejected with the following message:
PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible
I have no idea what to do actually and would appreciate some help.
This is my code (it’s quite long sorry):
jQuery(document).ready(function($) {
"use strict";
// PRELOADER
$(window).load(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
});
// NAV BR RESIZING
$(document).on("scroll", function() {
if ($(document).scrollTop() > 50) {
$("header").removeClass("large").addClass("small");
} else {
$("header").removeClass("small").addClass("large");
}
});
// MOBILE MENU TRIGGER
$('.menu-item').addClass('menu-trigger');
$('.menu-trigger').click(function() {
$('#menu-trigger').toggleClass('clicked');
$('.container').toggleClass('push');
$('.pushmenu').toggleClass('open');
});
// SEARCH
$('.search').click(function(e) {
$(".search-overlay").addClass("visible");
e.preventDefault();
});
$('.close-search').click(function(e) {
$(".search-overlay").removeClass("visible");
e.preventDefault();
});
// FOUNDATION INITIALIZER
$(document).foundation();
// LIGHTCASE
$('a[data-rel^=lightcase]').lightcase({
showSequenceInfo: false,
});
// CONTDOWN
$('[data-countdown]').each(function() {
var $this = $(this),
finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('' +
'<span class="time">%D <span>days</span></span> ' +
'<span class="time">%H <span>hr</span></span> ' +
'<span class="time">%M <span>min</span></span> ' +
'<span class="time">%S <span>sec</span></span>'));
});
});
// SCROLLDOWN BUTTON
$(".show-scrolldown-btn").append("<div class='scrolldown-btn reveal-from-bottom'></div>")
$('.scrolldown-btn').on('click', function() {
var ele = $(this).closest("div");
// this will search within the section
$("html, body").animate({
scrollTop: $(ele).offset().top + 70
}, 500);
return false;
});
// ISOTOPE MASONRY
$(window).load(function() {
var $container = $('.grid');
$container.isotope({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
});
var $optionSets = $('.filter'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
var $optionSet = $this.parents('.filter');
$optionSet.find('.active').removeClass('active');
$this.addClass('active');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
changeLayoutMode($this, options);
} else {
$container.isotope(options);
}
return false;
});
});
//BACK TO TOP
var offset = 300,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $('.backtotop');
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'): $back_to_top.removeClass('is-visible fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('fade-out');
}
});
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
So you would change event listener assignments like the following:
$('.search').click(function(e) {
$(".search-overlay").addClass("visible");
e.preventDefault();
});
...to use the corresponding on method instead, passing the event name as an argument:
$('.search').on("click", function(e) {
$(".search-overlay").addClass("visible");
e.preventDefault();
});
Event delegation is avoiding adding several event listeners to specific nodes and instead adding a single event listener to a common parent element, which then looks to see which child element was clicked on.
There's a good article here:
https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp
I attach the link of my code here. in this, the slider animates correctly when clicking on the corner but I need is that working on the scroll.
$(document).ready(function () {
$('.corner').click(function() {
var $parent = $(this).parent();
$parent.removeClass("active");
if ($parent.next().length){
$parent.next().addClass("active");
} else {
$parent.prevAll().last().addClass("active");
}
});
});
https://jsfiddle.net/freer4/cqqxjjgu/1/
Try out this:
$('.corner').bind('mousewheel',function() {
alert(1);
var $parent = $(this).parent();
$parent.removeClass("active");
if ($parent.next().length){
$parent.next().addClass("active");
} else {
$parent.prevAll().last().addClass("active");
}
});
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() {}
)
});
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');
}
});
I am developing a responsive website. There are two functions: nested functions are used in both, handling event $(document).click(). Both hide the same elements — .dropdown.slide-out. However, in the first case, the function refers to the selector .dropdown, and in the second case to the selector .slide-out. The first works only: where am I going wrong?
/*
|---------------------------------------
| Dropdowns
|---------------------------------------
*/
$(function () {
var label = $('.dropdown-toggle');
var allDropDowns = $('.dropdown-menu, .rmb-popup');
var el = $(this);
label.click(function () {
if (Modernizr.mq('only screen and (min-width: 768px)')) {
allDropDowns.hide();
$(this).parents('.dropdown').children('.dropdown-menu').toggle('fast');
label.removeClass('active');
$(this).addClass('active');
return false
}
});
// Conflict point #1. Hide .dropdown.slide-out-right
$(document).click(function () {
allDropDowns.hide();
label.removeClass('active');
});
allDropDowns.click(function (event) {
event.stopPropagation();
});
});
/*
|---------------------------------------
| Slide-outs
|---------------------------------------
*/
$(function () {
var soRight = $('.slide-out-right');
$('.btn-menu-secd').click(function () {
if (Modernizr.mq('only screen and (max-width: 767px)')) {
soRight.animate({
right: 0
}, 400)
}
return false
});
// Conflict point #2. Slide out .dropdown.slide-out-right
$(document).click(function () {
if (Modernizr.mq('only screen and (max-width: 767px)')) {
if (soRight.attr('style')) {
soRight.animate({
right: '-270px'
}, 400, function () {
soRight.removeAttr('style')
})
}
}
});
soRight.click(function (event) {
event.stopPropagation();
});
});
UPD: I was wrong. JQuery starts from 1.7 let to attach more than one or more handlers on 1 event. It will execute it in order of binding Documentation
FIDDLE
1:
$(function(){
var allDropDowns = $('.dropdown-menu');
$('.dropdown-toggle').click(function() {
allDropDowns.show();
return false;
});
$(document).click(function() {
allDropDowns.hide();
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
});
2:
$(function() {
var slideOut = $('.slideout');
$('.btn-menu').click(function() {
slideOut.show();
return false;
});
$(document).click(function() {
slideOut.hide();
});
$('.slideout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
});