I have a script that I created to show a div on-click of an <a> tag. However, what I would like to know is if anyone has an easy solution to use this same script but allow a select div to show on default? My script:
var portletToHide = new Array(
'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_');
for(a=0;a<portletToHide.length; a++){
document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}
function display(id, id2){
for(a=0;a<portletToHide.length; a++){
document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}
document.getElementById(id).setAttribute('style', 'display:block; visibility:visible;')
if(id2){
document.getElementById(id2).setAttribute('style', 'display:block; visibility:visible;')
}
$target =$('#'+id);
$('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}
See if it's possible to render the HTML with class 'hidden'.
index.css
.hidden {
display: none;
/* no purpose combined with display none */
/* visibility: hidden; */
}
index.js
var portletsToHide = [
'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_'];
function setPortletsVisibility( visible ) {
for( var a=0; a < portletToHide.length; a++ ){
setElementVisibility( portletToHide[a], visible );
}
}
function setElementVisibilityById( elementID, visibility ) {
var className = visible
? ""
: "hidden";
document.getElementById( elementID ).className = className;
}
function display(id, id2){
setPortletsVisibility( true );
setElementVisibilityById( id, true );
if(id2){
setElementVisibilityById( id2, true );
}
}
function someFunction( id, id2 ) {
display( id, id2 );
$target = $( '#' + id );
$('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}
// Default
setPortletsVisibility( false );
Please note that I dont do jQuery addClass/removeClass which might cause disturbances.
This uses HTML 5 data- attributes to allow you to select which div to toggle. Below you can use either vanilla Javascript or jQuery.
HTML
toggle mydiv
<div id="mydiv">
mydiv
</div>
Javascript
function toggleDiv(evt) {
var link = evt.target;
var toggle = link.getAttribute('data-toggle');
var div = document.getElementById(toggle);
div.style.display = (div.style.display == 'none')
? 'block'
: 'none';
if(evt.preventDefault)
{ evt.preventDefault(); }
if(evt.returnValue)
{ evt.returnValue = false; }
return false;
}
var links = document.getElementsByTagName('a')
for(var i=0,l=links.length;i<l;i++) {
var toggle = links[i].getAttribute('data-toggle');
if(toggle !== null && toggle != '' && document.getElementById(toggle)) {
if(links[i].addEventListener)
{ links[i].addEventListener('click',toggleDiv,false); }
else if(links[i].attachEvent)
{ links[i].attachEvent('onclick',toggleDiv); }
else
{ links[i].onclick = toggleDiv; }
}
}
jQuery
$('a[data-toggle]').each(function(i,link){
var a = $(link);
var toggle = a.attr('data-toggle');
var div = $('#'+toggle);
if(div.length) {
a.click(function(){
div.toggle();
});
}
});
Related
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();
}
};
...
}();
I am using
https://github.com/flesler/jquery.scrollTo
and
https://github.com/flesler/jquery.localScroll
Code:
$(document).ready(function(){
// variable to keep track of menu state
var menuToggle = 0;
$(".menu-popup-button").click(function(){
$(".menu-popup-button").toggleClass( "active" );
$(".main-menu-wrapper").toggle();
if (menuToggle == 0) {
$('body').scrollTo('90px');
menuToggle = 1;
}
else {
menuToggle = 0;
$(".main-menu-wrapper").toggle();
$(".menu-popup-button").toggleClass( "active" );
$('body').scrollTo('0px');
}
});
});
What am I missing this time?
use scrollTop not scrollTo
$(document).ready(function(){
// variable to keep track of menu state
var menuToggle = 0;
$(".menu-popup-button").click(function(){
$(".menu-popup-button").toggleClass( "active" );
$(".main-menu-wrapper").toggle();
if (menuToggle == 0) {
$('body').scrollTop(90);
menuToggle = 1;
}
else {
menuToggle = 0;
$(".main-menu-wrapper").toggle();
$(".menu-popup-button").toggleClass( "active" );
$('body').scrollTop(0);
}
});
});
try
window.scrollTo(90,0);
instead of
$('body').scrollTo('90px');
Note : window.scrollTo(xpos,ypos);
Happy Coding :)
Hi i'm try to make a static page.in my page i have the nested accordion.i have issue in overlapping of child accordion.i was hot code the active function in jquery.accordion.source.js,function below
function activate(el,effect){
$('.col-md-4 > a').attr('href','javascript:;');
$('.sub-col-md-4 > a').attr('href','javascript:;');
var paractive = $(el).parent('li.col-md-4').hasClass('active');
if(paractive){
$( ".sub-col-md-4").removeClass("active").height('');
}
var otr_pt = $( ".sub-col-md-4").parent().parent().hasClass("active");
if(!otr_pt){
$( ".sub-col-md-4" ).removeClass("active").height('');
}
var chd = $(el).parent('li').hasClass('.sub-col-md-4');
if(chd){//Own childe height close
$( ".sub-col-md-4" ).height('').css( "display", 'none' );
}
$( ".accordion li.col-md-4 > ul > li > div" ).css( "display", 'none' );
$( ".accordion li.col-md-4" ).height( "" );
$(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('slow');
$(el).parent().find('li').removeClass("active").height('');
var height = $(".active > .accordion-content").innerHeight();
var height_li = $(el).parent('li').innerHeight();
var height_ul = $(".active > ul").innerHeight();
var total_height= height + height_li;
/*alert(total_height);*/
if($(el).parent('li').hasClass("active")){//Other childe height close
$( ".sub-col-md-4" ).height('');
}
$(el).parent('li').css( "height", total_height );
$(el).parent('li').find(".active").not($(el).parent('li')).removeClass("faqopen");
if($(el).parent('li.sub-col-md-4').hasClass("active")){
var bashei = height + height_ul+30;
$(el).parent('li').parent('ul').parent().parent().parent().find('li.active').css("height", bashei );
$(el).parent('li.sub-col-md-4').css("height", height_li );
}else if($(el).parent().hasClass('sub-col-md-4')){
$(el).parent('li').parent('ul').parent().parent().parent().find('li.active').css("height", total_height );
}
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
if(!$(el).parent('li.sub-col-md-4').hasClass("active")){//Self Close of child
$( ".accordion li.col-md-4 > ul > li > div" ).css( "display", 'none' );
$(el).parent('li.sub-col-md-4').height('');
}
}
in the case 3 child no problem,the 4 child added overlapping the content check the image
Normal 3 child on no child output below
please help me, Thank in advance
At last i'm finished my code
$(document).ready(function () {
$('li.parent').each( function() {
$(this).find('a.level1').bind('click', function() {
var d = $(this).parent().find('.content-li');
$(this).parent('li').toggleClass('active').siblings().removeClass('active').find('.sub-col-md-4').removeClass('active');
if( $(d).css('display') == 'block') {
$('.sub-content-li').css('display', 'none'); // hide expanded sub child
$('li.sub-col-md-4').css('height', 97);
//$(d).parent().removeClass('active');
$(d).slideUp('slow');
$('li.parent').animate( {height:165}, 700, function() {} );
//$('li.parent').css('background-color', '#344E5C');
return;
}
$('.sub-content-li').css('display', 'none'); // hide expanded sub child
$('li.sub-col-md-4').css('height', 97);
$('li.parent > div').css('display', 'none'); // hide expanded child
$('li.parent').css('height', 165);
$('li.parent').css('background-color', '#344E5C');
var d = $(this).parent().find('.content-li');
height = $(d).height();
if(parseInt(height) >0 ){ // make sure is child div available
//$(d).parent().addClass('active');
$(this).parent().css('height', height+202);
$(this).parent().css('background','transparent');
$(d).slideDown('slow', function() {});
}
});
});
$('li.sub-col-md-4').each( function() {
$(this).find('a.level2').bind('click', function() {
var d = $(this).parent().find('.sub-content-li');
$(this).parent('li').toggleClass('active').siblings().removeClass('active');
if( $(d).css('display') == 'block') {
$(d).slideUp('slow', function() {
var ph = $(this).parent().parent().parent().height();
$(this).parent().parent().parent().parent().css('height', ph+202 );
});
$('li.sub-col-md-4').animate( {height:97}, 100, function() {} );
//$('li.sub-col-md-4').css('background-color', '#344E5C');
return;
}
$('.sub-content-li').css('display', 'none'); // hide expanded child
$('li.sub-col-md-4').css('height', 97);
//$('li.sub-col-md-4').css('background-color', '#344E5C');
var ph = $(this).parent().parent().parent().height();
$(this).parent().parent().parent().parent().css('height', ph+202 );
height = $(d).height();
if(parseInt(height) >0 ){ // make sure is child div available
//$(d).addClass('')
var ch = height+114;
$(this).parent().css('height', ch);
var ph = $(this).parent().parent().parent().parent().height();
$(this).parent().parent().parent().parent().css('height', (ph+height+18) );
$(this).parent().css('background','transparent');
$(d).slideDown('slow', function() {});
}
});
});
});
I have this code which selects multiple row when shift key is pressed. But whenever selection starts, the table text always gets selected, hence I tried to add disableSelection( ); to the table and re-enable it once mouseup. However, it is not working, the text still get selected. Any help is greatly appreciated.
$(".tableGrid tr").live("click", function(event) {
if( event.shiftKey ) {
$(".tableGrid").disableSelection( );
}
var tableRow = $(this).closest("tr").prevAll("tr").length + 1;
if ($(this).hasClass("rowSelected")) {
event.shiftKey ? $(this).removeClass("rowSelected") : $(".tableGrid tr").removeClass("rowSelected");
}
else {
if( !event.shiftKey ) {
$(".tableGrid tr").removeClass("rowSelected");
}
$(this).addClass("rowSelected");
}
if( event.shiftKey ) {
var start = Math.min(tableRow, lastSelected);
var end = Math.max(tableRow, lastSelected);
for( var i=start; i<end; i++ ) { $(".tableGrid").find("tr").eq(i).addClass("rowSelected"); }
}
else {
lastSelected = $(this).closest("tr").prevAll("tr").length + 1;
}
}).mouseup(function( ) {
$(".tableGrid").enableSelection( );
});
To disable text selection of a specific DOM element, you could try this:
var element = document.getElementById('content');
element.onselectstart = function () { return false; } // ie
element.onmousedown = function () { return false; } // mozilla
In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect.
The problem here is that the the div closes even if we click on the div itself.
Any idea on this would help ..
$(document).ready(function(){
$('.button').getit({speed: 150, delay: 300});
});
$.fn.getit = function(options){
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
$this.click(
function() {
if($('.tip').hasClass('.active101')) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
else {
setTip(tTop, tLeft);
$('body').bind('click',function(e) {
var parentElement = "button1";
var parentElement2 = "tip1"
if( e.target.id != parentElement) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
});
$('.tip').removeClass('.inactive101').addClass('.active101');
setTimer();
}
},
function() {
if($('.tip').hasClass('.inactive101')) {
stopTimer();
tip.hide();
}
}
);
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-440)+"px";
var yTip = (top-topOffset+100)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
<div class="main">
<a href="#" class="button" id="button1">
Click Me!
</a>
<div class="tip" id="tip1">Hello again</div>
</div>
Set the click event on your div to 'stopPropagation'
http://api.jquery.com/event.stopPropagation/
Perhaps you can bind a click event to the div itself and prevent the click event from bubbling up?
$("#div").click(function(e) {
e.stopPropagation();
});
Rick.
you should stop the event's propagation
you should check if any of the element's children are clicked (if you click a child of that element, the element would close)
you should probably be more careful with your selectors(if you intend to use this only on one element - because you are verifying with an id ('#button1' which is unique), you shouldn't bind the getit function to all the elements with class '.button')
if( e.target.id != parentElement
&& $(e.target).parents('#'+parentElement).length == 0) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
e.stopPropagation();
}
thanks for your answers. Tried with all of them and each worked. But I also found another solution to this by just adding another condition:
if (e.target.id != parentElement && e.target.id != parentElement2) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}