<div id="wrapper">
<button id="ppp">button</button>
<div id="content" style="display:none;"></div>
</div>
if i click the button,the content will be show(open),
if the content is on show(open),when i click document(except the content),the content will be close.
var $ = function (id){
return !id ? null : document.getElementById(id);
}
var addEventSimple = function(obj, evt, fn) {
if (obj.addEventListener){ // W3C
obj.addEventListener(evt, fn, false);
}else if (obj.attachEvent) // Microsoft
obj.attachEvent('on' + evt, fn);
}
var button = $('ppp'),
content = $('content');
var init = function() {};
init.handleObj = button;
init.showbox = content;
init.flag = false;
init.allowcls = false;
init.open = function () {//open the content
if (this.flag == false) {
this.showbox.style.display = "block";
this.flag = true;
this.allowcls = true;
}
};
init.close = function () { // close the content
if (this.flag && this.allowcls) {
this.showbox.style.display = "none";
this.flag = false;
this.allowcls = false;
}
};
init.load = function() { // button click
//e = e ||window.event;
//e.preventDefault();
if (this.flag) {
this.close();
} else {
this.open();
}
};
init.clickClose = function(e) { // document click
if (!this.allowcls) {
return;
}
e = e ||window.event;
var target = e.target;
if (target === this.showbox) { // button
return;
}
this.close();
};
addEventSimple(button, 'click', function (){
init.load();//the code run here OK
})// error on here,but i don't know why?
addEventSimple(document, 'click', function (e){
init.clickClose(e);
})
code in here :http://jsfiddle.net/DCty3/
To toggle element display, you can use function like this:
function toggleDisplay(id) {
var elem = document.getElementById(id);
elem.style.display = (elem.style.display != 'none' ? 'none' : '');
}
There is unlimited id toggle script too:
function toggle() {
for ( var i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(id);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
With jQuery it will be just:
function toggleDisplay(id) {
$('#' + id).toggle();
}
I like getting fancy with objects, here is another multifunctional method:
var display = {
show : function() {
for ( i=0; i < arguments.length; i++ ) {
document.getElementById(arguments[i]).style.display = '';
}
},
hide : function() {
for ( i=0; i < arguments.length; i++ ) {
document.getElementById(arguments[i]).style.display = 'none';
}
},
toggle : function() {
for ( i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(arguments[i]);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
};
To use it, do something like this:
display.show('content','content2','content3');
display.hide('content','content2','content3');
display.toggle('content','content2','content3');
For convenience, you can add another function to enable button:
function toggleDisplayButton(bId, cId) {
document.getElementById(bId).onclick = (function() {
toggleDisplay(cId);
});
}
window.onload = (function() {
toggleDisplayButton('ppp','content');
});
To enable function, when user clicks "outside" the box, and it closes, there is used an easy trick, by creating another element in background, that covers all area around:
<div id="wrapper">
<button id="ppp">button</button>
<div id="outerBox" style="display:none;"></div>
<div id="content" style="display:none;">1</div>
</div>
CSS should make your container relative positioned and "trick box", absolutely positioned, with maximum size of screen, and z-indexed under container like this:
#content{width:100px;height:100px;background-color:#efefef;border:1px solid #555555;z-index:56;position:relative;}
#outerBox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:55;}
And make it work like this:
var display = {
toggle : function() {
for ( i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(arguments[i]);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
};
function toggleBox() {
document.getElementById('ppp').onclick = (function() {
display.toggle('content','outerBox');
});
document.getElementById('outerBox').onclick = (function() {
display.toggle('content','outerBox');
});
}
onload = function() {
toggleBox();
}
The result looks like this.
Your question is exactly same as this one:-
Check out this post :-
jQuery on click $(document) - get clicked element
Hope this will help.
Related
I'm struggeling with this functionality of hiding a row based on a select:
<tr data-param-name="nodeGroup">
in web api, Program.cs:
app.UseSwaggerUI(options => {
options.InjectJavascript("/custom.js");
});
The javascript custom.js:
var providerSelect = null;
var nodeGroup = null;
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
// document ready
providerSelect = document.querySelector("[data-param-name='provider'] select");
nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
if (providerSelect) {
providerSelect.addEventListener("change", function () {
var text = providerSelect.options[providerSelect.selectedIndex].text;
if (text == "EcoPlatform") {
nodeGroup.setAttribute("visibility", "visible");
}
else {
nodeGroup.setAttribute("visibility", "collapse");
}
});
}
}
};
The above does not work.
The page is not actually shown on readystate === 'complete'
providerSelect does not get populated before I click the downarrow on the "accordion". <noscript> is replaced on click.
Was solved like this:
document.addEventListener("change", function (event) {
var providerSelect = document.querySelector("[data-param-name='provider'] select");
if (event.target == providerSelect) {
var nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
var selectedText = providerSelect.options[providerSelect.selectedIndex].text;
var dataset = document.querySelector("[data-param-name='datasetType']");
if (selectedText == "EcoPlatform") {
nodeGroup.style["visibility"] = "visible";
dataset.style["visibility"] = "visible";
}
else {
nodeGroup.style["visibility"] = "collapse";
dataset.style["visibility"] = "collapse";
}
}
});
I want to select element have no child.
This is js code
var elements = document.body.getElementsByTagName("*");
elements.each(function(element) {
if (element.childElementCount == 0) {
element.addEventListener(
"click",
function() {
makeBorder(selectedElement, false);
selectedElement = element;
makeBorder(element, true);
},
false
);
} else {
element.removeEventListener("click", null, false);
element.removeEventListener("onclick", null, false);
}
});
From link "m.naver.com", class["grid1 id_cui_cupid_news _MM_AIRS_CONTAINER"]'s real childElementCount is not 0.
But in code, childElementCount is 0.
I'm running this code in android webview.
How can I get the element that has no child?
reference : Select element inside WebView and get details
[[[[[[[ Edited ]]]]]]
Object.prototype.each = function(fn, bind) {
for (var i = 0; i < this.length; i++) {
if (i in this) {
fn.call(bind, this[i], i, this);
}
}
};
var selectedElement = null;
document.getElementsByTagName("*").addEventListener("click", function(e) {
if(e.target && e.target.childElementCount == 0) {
makeBorder(selectedElement, false);
selectedElement = element;
makeBorder(element, true);
}
});
// here
var makeBorder = function(element, selected) {
if (element) {
element.style.cssText = selected ? 'background: #CDEA90;' : '';
}
};
I use a plugin so when I click on a table row it goes to that url. Now this works fine but I would like it to open as a new tab. I know that " window.open('urlhere','_blank');" opens the url into a new tab but I cant figure out where I should put it. Does anyone know how or has experience with this plugin?
Plugin I use : https://github.com/DeOldSax/clickable-tr-jquery
Plugin code:
(function ( $ ) {
var disableClickClass = 'disable-row-click';
var defaults = {};
var settings;
$.fn.clickableTable = function( options ) {
settings = $.extend( defaults, options);
var rows = this.find('tr[data-href], tr[data-event]');
rows.css("cursor", "pointer");
rows.find("td." + disableClickClass).css("cursor", "default");
addClickEvent(rows);
return this;
};
function addClickEvent(rows) {
rows.click(function(e) {
if (notClickable(e)) {
return;
}
var dataEvent = $(this).data("event");
if ( dataEvent ) {
if (settings && settings[dataEvent]) {
settings[dataEvent].call( this, e );
} else {
var fun = window[dataEvent];
if ( typeof fun === "function" ) {
fun.call( this, e );
}
}
}
var dataHref = $(this).data("href");
if ( dataHref ) {
var isRemote = $(this).data("remote");
var id = "uniquy-id-id";
var aTag = buildATag(id, dataHref, isRemote);
document.getElementById(id).click();
aTag.remove();
}
});
}
function notClickable(e) {
var target = $(e.target);
return e.target.localName == 'a' ||
e.target.localName == 'button' ||
target.hasClass(disableClickClass) ||
target.closest('td').hasClass(disableClickClass);
}
function buildATag(id, dataHref, isRemote) {
var a = $('<a></a>');
a.css('display', 'none');
a.attr('data-remote', isRemote);
a.attr('href', dataHref);
a.attr('id', id);
a.insertAfter($("body"));
return a;
}
}( jQuery ));
Just use this code: jsFiddle
$("tr").click(function(){
var $href = $(this).data("href");
window.open($href,'_blank');
});
Exclude the last td Element: jsFiddle
$("tr").click(function(){
var $href = $(this).data("href");
window.open($href,'_blank');
});
$("tr > td:last-child").click(function(event){
event.stopPropagation();
});
I am trying to display content in full screen in IE using Full Screen API everything works fine except IE below is code, any help would be great.thank you in advance.
JAVASCRIPT CODE:
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
var fsButton = document.getElementById('fsbutton');
var fsElement = document.getElementById('container');
if (window.fullScreenApi.supportsFullScreen) {
// handle button click
fsButton.addEventListener('click', function() {
//alert(fsElement);
window.fullScreenApi.requestFullScreen(fsElement);
//alert("hi");
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
alert("yes");
//fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
alert("no");
// fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
alert("no");
// fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
</script>
HTML CODE:
<div>
<div id="container" >
..... content goes here
</div>
<input type="button" id="fsbutton" title="View Full Screen">
</div>
I didn't try it but I think that it's because IE doesn't use the camelCase for "Fullscreen" in "cancelFullscreen" and "requestFullscreen", which is the actual live standard recommandation btw.
Other browsers are wrong this time.
I am creating a Javascript/jQuery slider class which builds a slideshow on a page when invoked.
Here is my Cycler object code:
//Cycle
var Cycler = function(options) {
this.cycleElement = options.cycleElement;
this.speed = options.speed || 5000;
this.effect = options.effect || "linear";
this.currentItem = null;
this.children = this.addItemsToCycler();
this.buttons = null;
if(options.buttonsEl.length != "") {
this.buttons = this.generateButtons();
}
}
Cycler.prototype.addItemsToCycler = function() {
var children = [];
jQuery(this.cycleElement + " > div.cycle-object").each(function(item, value) {
children.push(value);
});
return children;
}
Cycler.prototype.generateButtons = function() {
var buttons = "<ul>";
var counter = 0;
this.children.forEach(function(item) {
buttons += "<li><a href='#' data-rel='" + counter + "'></a></li>";
counter++;
});
buttons += "</ul>";
jQuery("#cycle-buttons").html(buttons);
}
Cycler.prototype.showItem = function() {
jQuery(this.children).fadeOut("slow");
jQuery(this.children[this.currentItem]).fadeIn("slow");
}
Cycler.prototype.start = function() {
if(this.currentItem == null || this.children.length <= this.currentItem) {
this.currentItem = 0;
}
this.showItem();
var self = this;
interval = window.setInterval(function() {
self.next();
}, this.speed);
}
Cycler.prototype.next = function() {
if(this.currentItem >= (this.children.length - 1)) {
this.currentItem = 0;
} else {
this.currentItem++;
}
this.showItem();
}
Cycler.prototype.prev = function() {
if(this.currentItem <= 0) {
this.currentItem = this.children.length - 1;
} else {
this.currentItem--;
}
this.showItem();
}
Cycler.prototype.pause = function() {
if(this.interval == null) {
console.log("Cycler is already paused");
} else {
window.clearInterval(this.interval);
this.interval = null;
}
}
Cycler.prototype.gotoItem = function(gotoItem) {
this.currentItem = gotoItem;
this.showItem();
}
The markup:
<div id="cycle-wrap">
<div id="background-cycle">
<div data-rel="0" class="cycle-object"></div>
<div data-rel="1" class="cycle-object"></div>
<div data-rel="2" class="cycle-object"></div>
</div>
<div class="inner">
<div id="cycle-buttons">
</div>
</div>
</div>
And my client code which creates an instance of the class:
//Cycler
var cycler = new Cycler({
cycleElement : "#background-cycle",
speed : 5000,
effect : "linear",
buttonsEl : "#cycle-buttons"
});
cycler.start();
Now, if a user supplies an element in the 'buttonsEl' variable which is passed to the class, I want the class to generate a list of li elements which when clicked will take the user to that slide. I have done this via the 'generateButtons' function I have already created the prototype function for this called 'goToItem' as you can see above. I am linking the li elements and the corresponding html using a 'data'rel' attribute.
What I would like to do is add click listeners onto each list element (that is generated in the 'generateButtons' function) which will pass the data-rel attribute through to my 'goToItem' function. Does anyone know of the best way this would be incorporated into my code, keeping it nice and OOP.
Thanks
In your Cycler constructor we could pass the buttonsEl to the generateButtons. Then this method will be able to insert the buttons in the desired element.
// Not sure if you want this comparison. If works by coercion but it's tricky. And it
// will fail if your client doesn't pass a buttonsEl option.
// I would prefer something like this:
// if(options.buttonsEl && options.buttonsEl.length > 0) {
if(options.buttonsEl.length != "") {
this.buttons = this.generateButtons(options.buttonsEl);
}
The generateButtons could be something like this:
Cycler.prototype.generateButtons = function(buttonsEl) {
var $buttons = jQuery("<ul></ul>");
this.children.forEach(function(item, counter) {
$buttons.append("<li><a href='#' data-rel='" + counter + "'></a></li>");
});
// Capture cycler this to be able to invoke the gotoItem method
// within the event handler
var that = this;
$buttons.on('click', 'li', function () {
that.gotoItem($(this).find('a').data('rel'));
});
jQuery(buttonsEl).html($buttons);
return $buttons;
}