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() {});
}
});
});
});
Related
So, I have a theme with an accordian option in it - however the accordian opens the first item. I would like it to be closed - I know it's controlled with JS which is not my forte.
I can see the JS adds 'open' and 'active' classes into the area but I can't seem to see how it works out the first one.
Here is the code.
function handleAccordionBox(){
$('[data-norebro-accordion]').each(function(){
var accordion = $(this);
var titles = $(this).find('div.title');
var items = $(this).find('.item');
var contents = $(this).find('.content');
var iconOpened = 'ion-minus', iconClosed = 'ion-plus';
var isOutline = $(this).hasClass('outline');
var toggle = function( num ){
var opened = accordion.find('.open');
var content = contents.eq( num );
// If not active
if( !items.eq( num ).hasClass('active') ){
// Activate this item
items.removeClass('active');
items.eq( num ).addClass('active');
setTimeout(function(){
content.css('height', '').addClass('no-transition open'); // Open new content
var height = content.outerHeight() + 'px'; // Save heights
content.removeClass('no-transition open').css( 'height', (isOutline) ? '0px' : '6px' ); // Close new content
setTimeout(function(){
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' ); // Close old content
content.addClass('open').css( 'height', height ); // Open new content
// Change titles
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
titles.eq(num).find('.control span').removeClass( iconClosed ).addClass( iconOpened );
}, 30);
}, 30);
}
else {
items.removeClass('active');
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' );
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
};
};
titles.each(function(i){
$(this).on('click', function(){
toggle( i );
});
});
toggle( $(this).attr('data-norebro-accordion') || 0 );
this.accordionToggle = toggle;
});
};
function handleAccordionBoxSize(){
$('[data-norebro-accordion]').each(function(){
var content = $(this).find('.content.open');
var wrap = content.find('.wrap');
content.css('height', wrap.outerHeight() + 'px');
});
};`
The key line is this one:
toggle( $(this).attr('data-norebro-accordion') || 0 );
toggle is the function that actually opens and closes the menu. Once everything has been declared, it's called once here, for either the element with the data-norebro-accordion attribute, or, if that's not declared, the first element (0)
If you want everything closed by default, then just comment that line:
// toggle( $(this).attr('data-norebro-accordion') || 0 );
If I have two or more divs or p tags. I want to know how can I get the center with each elements means in my fiddle example ( that I will provide below ) if I drag the the "I am title H3" ( that is my H3 tag ) to the "I am a Title H1" ( which is my H1 tag ) or to the "I am a parargraph p" ( which is my p tag ) a line that comes that indicate the two elements are center to each other.
var element = $(".draggable_element");
element.each(function() {
$(this).draggable({
zIndex: 999,
scroll: false,
refreshPosition: true,
});
});
Here is my fiddle.
The below code will help you to find the center of each element on dragging. https://jsfiddle.net/44ve3syv/4/
var element = $(".draggable_element");
element.each(function() {
$(this).draggable({
zIndex: 999,
scroll: false,
refreshPosition: true,
drag: function() {
console.log(1);
},
stop:function(){
checkIfCenter($(this));
}
});
});
checkIfCenter = function(el){
var cPos;
var elCenter = findCentre(el);
var isCenter = true;
$( ".draggable_element" ).each(function() {
cPos = findCentre($(this));
console.log(cPos);
if(cPos.x == elCenter.x && cPos.y == elCenter.y && isCenter){
isCenter = true;
}else{
isCenter = false;
}
});
if(isCenter){
alert("All elements came in center");
}
}
findCentre = function(el){
var offset = el.offset();
var width = el.width();
var height = el.height();
var pos = { x : parseInt(offset.left + width / 2),y : parseInt(offset.top + height / 2)}
return pos;
}
I'm trying to get a Jekyll site setup and I want the navigation to hide when scrolling down and show when scrolling up. I also want to setup ajax loading with pushState so that I can animate page transitions. I had the navigation hiding and showing properly with scrolling until I put in the code for doing the ajax loading. Now, the navigation will hide and show properly until I click a link, then it stays shown no matter what.
I'm assuming its breaking because I'm using two different jQuery libraries, however the navigation won't work on v2 and the ajax loading won't work on v3. They both work when used on their own. I could really use some help with this.
This is what my HTML looks like for loading the files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled/html4+html5/jquery.history.js"></script>
<script src="js/ajax.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/hide-navigation.js"></script>
Here is the navigation.js
jQuery(document).ready(function($){
var mainHeader = $('.cd-auto-hide-header'),
secondaryNavigation = $('.cd-secondary-nav'),
//this applies only if secondary nav is below intro section
belowNavHeroContent = $('.sub-nav-hero'),
headerHeight = mainHeader.height();
var isLateralNavAnimating = false;
//set scrolling variables
var scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 0;
mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length >= 0 ) isLateralNavAnimating = true;
mainHeader.toggleClass('nav-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
$(window).on('scroll', function(){
if( !scrolling && !mainHeader.hasClass("nav-open")) {
scrolling = true;
(!window.requestAnimationFrame)
? setTimeout(autoHideHeader, 250)
: requestAnimationFrame(autoHideHeader);
}
});
$(window).on('resize', function(){
headerHeight = mainHeader.height();
});
function autoHideHeader() {
var currentTop = $(window).scrollTop();
( belowNavHeroContent.length > 0 )
? checkStickyNavigation(currentTop) // secondary navigation below intro
: checkSimpleNavigation(currentTop);
previousTop = currentTop;
scrolling = false;
}
function checkSimpleNavigation(currentTop) {
//there's no secondary nav or secondary nav is below primary nav
if (previousTop - currentTop > scrollDelta) {
//if scrolling up...
mainHeader.removeClass('is-hidden');
} else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
//if scrolling down...
mainHeader.addClass('is-hidden');
}
}
function checkStickyNavigation(currentTop) {
//secondary nav below intro section - sticky secondary nav
var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
if (previousTop >= currentTop ) {
//if scrolling up...
if( currentTop < secondaryNavOffsetTop ) {
//secondary nav is not fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('fixed slide-up');
belowNavHeroContent.removeClass('secondary-nav-fixed');
} else if( previousTop - currentTop > scrollDelta ) {
//secondary nav is fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('slide-up').addClass('fixed');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
} else {
//if scrolling down...
if( currentTop > secondaryNavOffsetTop + scrollOffset ) {
//hide primary nav
mainHeader.addClass('is-hidden');
secondaryNavigation.addClass('fixed slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
} else if( currentTop > secondaryNavOffsetTop ) {
//once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset
mainHeader.removeClass('is-hidden');
secondaryNavigation.addClass('fixed').removeClass('slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
}
}
});
and finally the ajax.js
( function( $, History, undefined ) {
if ( !History.enabled ) {
return false;
}
var $wrap = $( "#wrap" );
$wrap.on( "click", ".page-link", function( event ) {
event.preventDefault();
if ( window.location === this.href ) {
return;
}
var pageTitle = ( this.title ) ? this.title : this.textContent;
pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " — Acme";
History.pushState( null, pageTitle, this.href );
} );
History.Adapter.bind( window, "statechange", function() {
var state = History.getState();
$.get( state.url, function( res ) {
$.each( $( res ), function( index, elem ) {
if ( $wrap.selector !== "#" + elem.id ) {
return;
}
$wrap
.html( $( elem ).html() )
.promise()
.done( function( res ) {
if ( typeof ga === "function" && res.length !== 0 ) { // Make sure the new content is added, and the 'ga()' method is available.
ga('set', {
page: window.location.pathname,
title: state.title
});
ga('send', 'pageview');
}
});
} );
} );
} );
} )( jQuery, window.History );
I have coded a small script for scrolling in a vertical gallery on mobile devices – in browser everything works fine, but I can't make it work on my smartphone. What am I doing wrong?
Thats my query:
jQuery( '.single-cinema-cat .next' ).on('click touchstart', function () {
alert("The btn was clicked.");
if( jQuery( this ).hasClass( 'disabled' ) )
return;
jQuery( this ).addClass( 'disabled' );
var $el = jQuery( this );
if( jQuery( window ).innerWidth() >= 970 )
scrollVertical_next( $el );
else
scrollHorizontal_next( $el );
});
the click element is a span-element in my html markup – could this be a problem? screenshot of my markup: https://picload.org/image/ralwaarg/jquerymobile.png
please save me for further headaches :-)
scrollVertical_next
function scrollVertical_next($el) {
var $wrapper = $el.closest('.single-cinema-cat').find('.inner');
var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top'));
var current_height = parseInt($wrapper.find('ul').css('top'));
var single_height = $wrapper.find('article').outerHeight() + margin;
var target_height = current_height - single_height;
var total_height = $wrapper.find('ul').innerHeight();
var stopper_height = -1 * total_height + 4 * single_height;
if (target_height < stopper_height)
return;
$wrapper.find('ul').animate({
'top': target_height + 'px'
}, 250, 'swing', function() {
if (target_height > stopper_height)
$el.removeClass('disabled');
$el.closest('.single-cinema-cat').find('.prev').removeClass('disabled');
});
}
scrollHorizontal_next
function scrollHorizontal_next($el) {
var $wrapper = $el.closest('.single-cinema-cat').find('.inner');
var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top'));
var current_height = parseInt($wrapper.find('ul').css('top'));
var single_height = $wrapper.find('article').outerHeight() + margin;
var target_height = current_height - single_height;
var total_height = $wrapper.find('ul').innerHeight();
var stopper_height = -1 * total_height + 1 * single_height;
if (target_height < stopper_height)
return;
$wrapper.find('ul').animate({
'top': target_height + 'px'
}, 250, 'swing', function() {
if (target_height > stopper_height)
$el.removeClass('disabled');
$el.closest('.single-cinema-cat').find('.prev').removeClass('disabled');
});
}
Touch event must be handled this way
jQuery('.single-cinema-cat .next').on('click touchstart', function (event) {
event.stopPropagation();
event.preventDefault();
if (event.handled !== true) {
////////// your stuff //////////////////////////
alert("The btn was clicked.");
if (jQuery(this).hasClass('disabled'))
return;
jQuery(this).addClass('disabled');
var $el = jQuery(this);
if (jQuery(window).innerWidth() >= 970)
scrollVertical_next($el);
else
scrollHorizontal_next($el);
////////////////////////////////////////////////////
event.handled = true;
} else {
return false;
}
});
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();
});
}
});