I have one problem with click function. I have created this demo from jsfiddle.net.
In this demo you can see there are smile buttons. When you click those buttons then a tab will be opening on that time. If you click the red button from tab area then the tab is not working there are something went wrong.
Anyone can help me here what is the problem and what is the solution?
The tab is normalize like this working demo
var response = '<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active"> TAB1</li>
<li class="tab"> TAB2</li>
<li class="tab"> TAB3<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive"> a </div>
<div id="lannisters-panel1" class="panel"> b </div>
<div id="targaryens-panel1" class="panel"> c </div>
</div>
</div>
</div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.emoticon').addClass('eactive');
});
}
});
}
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
$(this).on( "click", function() {
$(this).find('.user-container').html("");
});
var componentHandler = function() {
'use strict';
var registeredComponents_ = [];
var createdComponents_ = [];
function findRegisteredClass_(name, opt_replace) {
for (var i = 0; i < registeredComponents_.length; i++) {
if (registeredComponents_[i].className === name) {
if (opt_replace !== undefined) {
registeredComponents_[i] = opt_replace;
}
return registeredComponents_[i];
}
}
return false;
}
function upgradeDomInternal(jsClass, cssClass) {
if (cssClass === undefined) {
var registeredClass = findRegisteredClass_(jsClass);
if (registeredClass) {
cssClass = registeredClass.cssClass;
}
}
var elements = document.querySelectorAll('.' + cssClass);
for (var n = 0; n < elements.length; n++) {
upgradeElementInternal(elements[n], jsClass);
}
}
function upgradeElementInternal(element, jsClass) {
if (element.getAttribute('data-upgraded') === null) {
element.setAttribute('data-upgraded', '');
var registeredClass = findRegisteredClass_(jsClass);
if (registeredClass) {
createdComponents_.push(new registeredClass.classConstructor(element));
} else {
createdComponents_.push(new window[jsClass](element));
}
}
}
function registerInternal(config) {
var newConfig = {
'classConstructor': config.constructor,
'className': config.classAsString,
'cssClass': config.cssClass
};
var found = findRegisteredClass_(config.classAsString, newConfig);
if (!found) {
registeredComponents_.push(newConfig);
}
upgradeDomInternal(config.classAsString);
}
return {
upgradeDom: upgradeDomInternal,
upgradeElement: upgradeElementInternal,
register: registerInternal
};
}();
function MaterialTabs(element) {
'use strict';
this.element_ = element;
this.init();
}
MaterialTabs.prototype.Constant_ = {
MEANING_OF_LIFE: '42',
SPECIAL_WORD: 'HTML5',
ACTIVE_CLASS: 'pactive'
};
MaterialTabs.prototype.CssClasses_ = {
SHOW: 'materialShow',
HIDE: 'materialHidden'
};
MaterialTabs.prototype.initTabs_ = function(e) {
'use strict';
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
for (var i=0; i < this.tabs_.length; i++) {
new MaterialTab(this.tabs_[i], this);
}
};
MaterialTabs.prototype.resetTabState_ = function() {
for (var k=0; k < this.tabs_.length; k++) {
this.tabs_[k].classList.remove('pactive');
}
};
MaterialTabs.prototype.resetPanelState_ = function() {
for (var j=0; j < this.panels_.length; j++) {
this.panels_[j].classList.remove('pactive');
}
};
function MaterialTab (tab, ctx) {
if (tab) {
var link = tab.querySelector('a');
link.addEventListener('click', function(e){
e.preventDefault();
var href = link.href.split('#')[1];
var panel = document.querySelector('#' + href);
ctx.resetTabState_();
ctx.resetPanelState_();
tab.classList.add('pactive');
panel.classList.add('pactive');
});
}
};
MaterialTabs.prototype.init = function() {
if (this.element_) {
this.initTabs_();
}
}
window.addEventListener('load', function() {
componentHandler.register({
constructor: MaterialTabs,
classAsString: 'MaterialTabs',
cssClass: 'MaterialTabs'
});
});
});
There is updated and working version.
What we have to do, is to move the target on the same level as the icon is (almost like tab and content). Instead of this:
<div class="emoticon">
<div class="emoticon_click" data-id="1">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
<div class="user-container" data-upgraded></div>
</div>
</div>
We need this
<div class="emoticon">
<div class="emoticon_click" data-id="1">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
// not a child
<!--<div class="user-container" data-upgraded></div>-->
</div>
// but sibling
<div class="user-container" data-upgraded></div>
</div>
And if this is new HTML configuration, we can change the handlers
to target click on div "emoticon_click"
change the content of the sibling (not child) div "user-container"
The old code to be replaced
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
$(this).on( "click", function() {
$(this).find('.user-container').html("");
});
will now be replaced with this:
//$('body').on('click', '.emoticon', function(e) {
$('body').on('click', '.emoticon_click', function(e) {
// clear all user container at the begining of this click event
$('body').find('.user-container').html("");
// find id
var id = $(this).attr('data-id');
// find the parent, which also contains sibling
// user-container
var parent = $(this).parent()
// let the target be initiated
showProfileTooltip($(parent), id);
});
$(this).on( "click", function() {
//$(this).find('.user-container').html("");
});
Check it in action here
NOTE: the really interesting note was in this Answer by pinturic
If we want to extend the first and complete answer with a feature:
close all tabs if clicked outside of the area of tabs or icons
we just have to
add some event e.g. to body
and do check if the click was not on ".emoticon" class elements
There is a working example, containing this hook:
$('body').on( "click", function(e) {
// if clicked in the EMOTICON world...
var isParentEmotion = $(e.toElement).parents(".emoticon").length > 0 ;
if(isParentEmotion){
return; // get out
}
// else hide them
$('body').find('.user-container').html("");
});
I have been debugging your code and this is the result:
you are adding the "tab" under ; any time you click within that div this code is intercepting it:
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
and thus the "tab" are built again from scratch.
Related
I'm trying to learn javascript and jquery lately so I'm not so good yet.
The page I'm currently struggling with is a news page. Basically news are article tags and are contained in two different main category divs.
<body>
<div class="a">
<article> ... </article>
<article> ... </article>
<article> ... </article>
...
</div>
<div class="b">
<article> ... </article>
<article> ... </article>
<article> ... </article>
...
</div>
</body>
In each article there's a slideshow with pictures and this is the code in JS:
//dots functionality
dots = document.getElementsByClassName('dot');
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
It worked fine until I made the news data load on scroll with ajax. The JS code doesn't work anymore and I don't know how to fix it.
Here is the ajax code:
$(document).ready(function() {
function getDataFor(category) {
var flag = 0;
function getData() {
$.ajax({
type: 'GET',
url: 'get_data.php',
data: {
'offset': flag,
'limit': 3,
'cat': category
},
success: function(data) {
$('.' + category).append(data);
flag += 3;
}
});
}
getData();
var $window = $(window);
var $document = $(document);
$window.on('scroll', function() {
if ($window.scrollTop() >= $document.height() - $window.height()) {
getData();
}
});
}
getDataFor('a');
getDataFor('b');
});
I would like to limit click event loop in jquery. I have categories list which will have in the following format and also after 5 click in the loop i have to disable click event.
<div class="col-md-2 col-sm-4 col-xs-6 home_s">
<a class="get_category" id="36" href="javascript:void(0)">
<img class="img-responsive img-center" src="">
<span>xxxxx</span>
</a>
<input type="hidden" value="36" id="categories36" name="categories[]">
</div>
$(document).ready(function() {
$(".get_category").on('click', function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
})
});
You can use off() to unbind event handler
$(document).ready(function() {
// variable for counting clicks
var i = 1;
var fun = function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
// checking and increment click count
if (i++ == 5)
// unbinding click handler from element
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
Example :
$(document).ready(function() {
var i = 1;
var fun = function() {
alert('clicked'+i);
if (i++ == 5)
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="get_category">click</button>
If you have multiple .get_category in your html the solution from Pranav C Balan won't work.
$(document).ready(function() {
function clickFunc() {
var click_count = $(this).data('click-count') || 0;
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
if (++click_count >= 5)
$(this).off('click', clickFunc);
$(this).data('click-count', click_count);
});
$(".get_category").on('click', clickFunc);
});
This way you store the click count on the data-click-count attribute of each .get_category
i would like to ask for help in a simple task i really need to do at my work (I am a javascript newbie). I made a simple collapsible list with script provided by this guy http://code.stephenmorley.org/javascript/collapsible-lists/ but what i need right now are two simple buttons as stated in the title: expand all and collapse whole list. Do you guys know if something like that can be implemented in this certain script? Please help :)
var CollapsibleLists = new function () {
this.apply = function (_1) {
var _2 = document.getElementsByTagName("ul");
for (var _3 = 0; _3 < _2.length; _3++) {
if (_2[_3].className.match(/(^| )collapsibleList( |$)/)) {
this.applyTo(_2[_3], true);
if (!_1) {
var _4 = _2[_3].getElementsByTagName("ul");
for (var _5 = 0; _5 < _4.length; _5++) {
_4[_5].className += " collapsibleList";
}
}
}
}
};
this.applyTo = function (_6, _7) {
var _8 = _6.getElementsByTagName("li");
for (var _9 = 0; _9 < _8.length; _9++) {
if (!_7 || _6 == _8[_9].parentNode) {
if (_8[_9].addEventListener) {
_8[_9].addEventListener("mousedown", function (e) {
e.preventDefault();
}, false);
} else {
_8[_9].attachEvent("onselectstart", function () {
event.returnValue = false;
});
}
if (_8[_9].addEventListener) {
_8[_9].addEventListener("click", _a(_8[_9]), false);
} else {
_8[_9].attachEvent("onclick", _a(_8[_9]));
}
_b(_8[_9]);
}
}
};
function _a(_c) {
return function (e) {
if (!e) {
e = window.event;
}
var _d = (e.target ? e.target : e.srcElement);
while (_d.nodeName != "LI") {
_d = _d.parentNode;
}
if (_d == _c) {
_b(_c);
}
};
};
function _b(_e) {
var _f = _e.className.match(/(^| )collapsibleListClosed( |$)/);
var uls = _e.getElementsByTagName("ul");
for (var _10 = 0; _10 < uls.length; _10++) {
var li = uls[_10];
while (li.nodeName != "LI") {
li = li.parentNode;
}
if (li == _e) {
uls[_10].style.display = (_f ? "block" : "none");
}
}
_e.className = _e.className.replace(/(^| )collapsibleList(Open|Closed)( |$)/, "");
if (uls.length > 0) {
_e.className += " collapsibleList" + (_f ? "Open" : "Closed");
}
};
}();
It is important to understand why a post-order traversal is used. If you were to just iterate through from the first collapsible list li, it's 'children' may (will) change when expanded/collapsed, causing them to be undefined when you go to click() them.
In your .html
<head>
...
<script>
function listExpansion() {
var element = document.getElementById('listHeader');
if (element.innerText == 'Expand All') {
element.innerHTML = 'Collapse All';
CollapsibleLists.collapse(false);
} else {
element.innerHTML = 'Expand All';
CollapsibleLists.collapse(true);
}
}
</script>
...
</head>
<body>
<div class="header" id="listHeader" onClick="listExpansion()">Expand All</div>
<div class="content">
<ul class="collapsibleList" id="hubList"></ul>
</div>
</body>
In your collapsibleLists.js
var CollapsibleLists =
new function(){
...
// Post-order traversal of the collapsible list(s)
// if collapse is true, then all list items implode, else they explode.
this.collapse = function(collapse){
// find all elements with class collapsibleList(Open|Closed) and click them
var elements = document.getElementsByClassName('collapsibleList' + (collapse ? 'Open' : 'Closed'));
for (var i = elements.length; i--;) {
elements[i].click();
}
};
...
}();
In my html page I have 2 divs with toggle function.
I need to modify this js to let it close other div when one is open
my js
jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});
My html
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">First Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
</div></div>
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">Second Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
</div></div>
I would appreciate some help to toggle divs one at a time.
Working demo http://jsfiddle.net/f492H/
Solution below will toggle div one at a time. you could play around with other Jquery ways as well !like is(':visible')
API used:
.slideToggle: http://api.jquery.com/slideToggle/
.parents : http://api.jquery.com/parents/
Hope it fits your needs :)
Code
$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
$('.bk-toggle-content-outer-wrap').hide();
$(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});
I can offer you an accordion class I've written for a previous project. It's fairly flexible and should accomplish what you're asking and more. Documentation is... non-existent, but I'm happy to answer any implementation questions if you choose to use it.
Here it is in a fiddle: http://jsfiddle.net/YjAgb/1/
UPDATE:
Here is another fiddle working with your html structure: http://jsfiddle.net/WfWEP/
And, for the sake of being thorough, here's the demo code.
HTML
<div id='accordion'>
<div class='accHead'>Head 1</div>
<div class='accBody'>Body 1</div>
<div class='accHead'>Head 2</div>
<div class='accBody'>Body 2</div>
<div class='accHead'>Head 3</div>
<div class='accBody'>Body 3</div>
</div>
JavaScript
function accordion(options){
this.index = options.index;
var openChild = false;
var self = this;
var cEvent = {};
var slideSpeed = 200;
var headClass = '.accHead';
var bodyClass = '.accBody';
var $parent = options.parent;
var $heads = $parent.find(headClass);
var $bodies = $parent.find(bodyClass)
$heads.on('click', function(e){
var headClicked = $heads.index($(this)) + 1;
var wasTriggered = (!e.clientX);
var previousOpen = (headClicked == openChild) ? headClicked : openChild;
var newOpen = (headClicked == openChild) ? false : headClicked;
$heads.add($bodies).removeClass('on');
if (!openChild) {
var type = 'open';
} else if(headClicked == openChild) {
var type = 'close';
} else {
var type = 'swap';
}
cEvent = { clicked: headClicked,
triggered: wasTriggered,
previousOpen: previousOpen,
openChild: newOpen,
headElement: $(this),
bodyElement: $bodies.index(headClicked - 1),
type: type,
accordion: self
};
options.click_callback(cEvent);
if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild);
if ((!openChild) || (headClicked != openChild)) openLevel(headClicked);
openChild = newOpen;
});
var openLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$headEl.addClass('on');
$bodyEl.addClass('on').slideDown(slideSpeed, function(){
options.open_callback(cEvent);
})
}
var closeLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$bodyEl.slideUp(slideSpeed, function(){
options.close_callback(cEvent);
});
}
this.closeAll = function()
{
$heads.add($bodies).removeClass('on');
$bodies.slideUp(0);
return this;
}
this.click = function(levelId, caller)
{
if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click');
}
this.getHead = function(levelId)
{
return $heads.eq(levelId - 1);
}
this.getBody = function(levelId)
{
return $bodies.eq(levelId - 1);
}
this.getParentAcc = function()
{
return $parent;
}
}
newAcc = new accordion({
parent: $('#accordion'),
click_callback: function(){},
open_callback: function(){},
close_callback: function(){},
})
.closeAll();
This is a code with jQuery 1.7:
<div class="test">
<div class="bu">
<a>
bu here
</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).on('click', '.test', function () { alert(0); return false; });
$(document).on('click', '.bu', function () { alert(1); return false; });
$(document).on('click', '.bu', function () { alert(2); return false; });
</script>
Xlicking on .test > .bu will alert "1" and alert "2", but not alerts "0"
My question is: how to do the same WITHOUT jQuery (on native DOM API)? Seems, I can't do it with Native DOM API without implementing my own library...
Here you go:
document.addEventListener( 'click', function ( e ) {
if ( hasClass( e.target, 'bu' ) ) {
// .bu clicked
// do your thing
} else if ( hasClass( e.target, 'test' ) ) {
// .test clicked
// do your other thing
}
}, false );
where hasClass is
function hasClass( elem, className ) {
return elem.className.split( ' ' ).indexOf( className ) > -1;
}
Live demo: http://jsfiddle.net/Nrxp5/30/
<div class="a">
<div class="b">
<div class="c" style="border: 1px solid silver; width: 80px; text-align: center;line-height: 80px;">
click me!
</div>
</div>
</div>
<script>
// Element.prototype.matchesSelector
(function (x) {
var i;
if (!x.matchesSelector) {
for (i in x) {
if (/^\S+MatchesSelector$/.test(i)) {
x.matchesSelector = x[i];
break;
}
}
}
}(Element.prototype));
Document.prototype.on =
Element.prototype.on = function (eventType, selector, handler) {
this.addEventListener(eventType, function listener(event) {
var t = event.target,
type = event.type,
x = [];
if (event.detail && event.detail.selector === selector && event.detail.handler === handler) {
return this.removeEventListener(type, listener, true);
}
while (t) {
if (t.matchesSelector && t.matchesSelector(selector)) {
t.addEventListener(type, handler, false);
x.push(t);
}
t = t.parentNode;
}
setTimeout(function () {
var i = x.length - 1;
while (i >= 0) {
x[i].removeEventListener(type, handler, false);
i -= 1;
}
}, 0);
}, true);
};
Document.prototype.off =
Element.prototype.off = function (eventType, selector, handler) {
var event = document.createEvent('CustomEvent');
event.initCustomEvent(eventType, false, false, {selector: selector, handler: handler});
this.dispatchEvent(event);
};
document.on('click', '.b', function () {
alert(2);
});
document.on('click', '.a', function () {
alert(1);
});
document.on('click', '.b', function (event) {
alert(3);
event.stopPropagation();
});
</script>
Here is a prototype based version
Document.prototype.on = function(event, target = null, callBack){
this.addEventListener(event, function(event){
let len = target.length, i = 0;
while(i < len){
if(event.target === target[i]){
callBack.call(target[i], event);
}
i ++;
}
}, false);
};
Usage is like jQuery has:
let btns = document.getElementsByTagName('button');
document.on('click', btns, function(event){
console.log(this.innerText)
});
And a live example is below:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="#000">
<button>hello1</button>
<button>hello2</button>
<script type="text/javascript">
Document.prototype.on = function(event, target = null, callBack = function(){}){
this.addEventListener(event, function(event){
let len = target.length, i = 0;
while(i < len){
if(event.target === target[i]){
callBack.call(target[i], event);
}
i ++;
}
}, false);
};
//example of usage
let btns = document.getElementsByTagName('button');
document.on('click', btns, function(t){
alert(this.innerText);
})
//add elements after delegating an event
let newBtn = document.createElement('button');
newBtn.innerText = 'btnNew';
document.body.appendChild(newBtn);
//delay to create
setTimeout(function(){
let newBtn = document.createElement('button');
newBtn.innerText = 'another btnNew';
document.body.appendChild(newBtn);
},2000);
</script>
</body>
</html>