I have an accordion where open/closes on click. However I would like the accordion to be open when the page loads. Does anyone know what I need to add/remove from the below code? all suggestions are welcome.
reviewsLink.on('click', function() {
util.scrollBrowser(feefoCont.offset().top - 97);
$('.js-feefo-content').delay(500).slideDown();
if (reviewstitle.text() === originaltitle) {
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
}
});
reviewsLinkM.bind('click', function() {
util.scrollBrowser(feefoContM.offset().top);
$('.js-feefo-toggle.pdp-main__feefo-slot__toggle.js-slot-accordion.pdp-main__slot--accordion').delay(500).slideDown();
feefoContM.find('h3').addClass('pdp-main__tab--icon-minus');
});
var reviewsCont = $('.pdp-main__feefo-slot .js-reviews-toggle'),
reviewsClose = $('.js-feefo-content').find('.js-feefo-close');
reviewsCont.bind('click', function() {
$('.js-feefo-content').slideToggle();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
reviewsClose.bind('click', function() {
$('.js-feefo-content').slideUp();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
}
};
Related
Hey stackoverflow community!
I have a small issue regarding this JS logic to add a class name to my body tag to hide the side navigation menu upon window resizing. Let me try to explain the issue as clearly as I can. Currently I'm using a UI template by creativetime called Argon. The page when loaded on a full scaled width looks like this:
When I resize the window after the page has loaded it looks like this:
But when I refresh the page, the side navigation is no longer there as how it should be, which is like this:
After refreshing the page, resizing the window thereafter makes the side navigation to hide as it should. The sidenav just doesn't go hidden on first page load for some reason.
The JS for this is as follows:
var Layout = (function() {
function pinSidenav() {
$('.sidenav-toggler').addClass('active');
$('.sidenav-toggler').data('action', 'sidenav-unpin');
$('body').removeClass('g-sidenav-hidden').addClass('g-sidenav-show g-sidenav-pinned');
$('body').append('<div class="backdrop d-xl-none" data-action="sidenav-unpin" data-target='+$('#sidenav-main').data('target')+' />');
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'pinned');
}
function unpinSidenav() {
$('.sidenav-toggler').removeClass('active');
$('.sidenav-toggler').data('action', 'sidenav-pin');
$('body').removeClass('g-sidenav-pinned').addClass('g-sidenav-hidden');
$('body').find('.backdrop').remove();
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'unpinned');
}
// Set sidenav state from cookie
var $sidenavState = Cookies.get('sidenav-state') ? Cookies.get('sidenav-state') : 'pinned';
if($(window).width() > 1200) {
if($sidenavState == 'pinned') {
pinSidenav()
}
if(Cookies.get('sidenav-state') == 'unpinned') {
unpinSidenav()
}
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
if($(window).width() < 1200){
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
$('body').removeClass('g-sidenav-show');
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
$("body").on("click", "[data-action]", function(e) {
e.preventDefault();
var $this = $(this);
var action = $this.data('action');
var target = $this.data('target');
// Manage actions
switch (action) {
case 'search-show':
target = $this.data('target');
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-showing');
setTimeout(function() {
$('body').removeClass('g-navbar-search-showing').addClass('g-navbar-search-show');
}, 150);
setTimeout(function() {
$('body').addClass('g-navbar-search-shown');
}, 300)
break;
case 'search-close':
target = $this.data('target');
$('body').removeClass('g-navbar-search-shown');
setTimeout(function() {
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-hiding');
}, 150);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hiding').addClass('g-navbar-search-hidden');
}, 300);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hidden');
}, 500);
break;
}
})
// Add sidenav modifier classes on mouse events
$('.sidenav').on('mouseenter', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-hide').removeClass('g-sidenav-hidden').addClass('g-sidenav-show');
}
})
$('.sidenav').on('mouseleave', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide');
setTimeout(function() {
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
}, 300);
}
})
// Make the body full screen size if it has not enough content inside
$(window).on('load resize', function() {
if($('body').height() < 800) {
$('body').css('min-height', '100vh');
$('#footer-main').addClass('footer-auto-bottom')
}
})
})();
Working JS Fiddle: https://jsfiddle.net/Vaulient/kthw39gs/6/
In my html website i used Fullpage.js, so i have a four pages so whenever i click home page to other inner page, initially it showing the center section. but it should be show initial page of the content.
how to do this?
Actuallay barba.js also i used.
This is my barba code where i used my website;
$('document').ready(function(){
//initIndexJs();
var transEffect = Barba.BaseTransition.extend({
start: function(){
this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
},
fadeInNewcontent: function(nc) {
nc.hide();
var _this = this;
$(this.oldContainer).fadeOut(1000).promise().done(() => {
nc.css('visibility','visible');
nc.fadeIn(1000, function(){
_this.done();
})
});
},
});
Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
initIndexJs();
//callForPageLoad();
});
Barba.Pjax.getTransition = function() {
return transEffect;
}
Barba.Pjax.cacheEnabled = false;
Barba.Pjax.start();
});`
i'm doing a website for a friend of mine and I have some really wierd behaviur here, which I totally cannot understand.
main navigation
about
pictures
videos
files
contanct
in pictures and in videos, there are categorys, when you switch between the categorys, the title of the current catgeory is loaded in a DIV with the id contentRowTitle
$("#contentContainer").delegate(".catBit", "click", function() {
var catID = $(this).attr('data-id');
var pwd = $(this).attr('data-pwd');
var catType = $(this).attr('data-type');
$('#contentRowTitle').slideUp(function() {
$('.thumbContainer').fadeOut(function() {
if(pwd != "") {
$('#loginRow').show();
$('#contentRowTitle').load('./'+catType+'/contentImagesHeader?id='+catID, function() {
$('#contentRowTitle').slideDown();
});
} else {
$('#contentRowTitle').slideUp('slow', function() {
$('#contentRowTitle').load('./'+catType+'/contentHeader?id='+catID, function(responseText) { alert(responseText);
$('#contentRowTitle').slideDown();
});
});
}
$('.thumbContainer').load('./'+catType+'/contentImages?id='+catID, function() {
$('.thumbContainer').fadeIn();
//$('#thumbContainer').slideDown();
});
});
});
});
now everyhting seems to work fine.. BUT if you go to pictrures, and click on some thumbnails
(this is the function that is beeingexecuted when you click on some thumbs in a category)
$(".contentBox").delegate(".imgPreview", "click", function() {
var id = $(this).attr('data-id');
$('#wrap').fadeOut(function() {
$('#showDetailLoader').fadeIn(function() {
$('.galMainImg').attr('data-id', id);
$('#showDetail').load('./gal/show?id='+id, function() {
$('#showDetailLoader').fadeOut(function() {
$('#showDetail').fadeIn();
$('.galTitle').textillate({ in: { effect: 'flipInY' } });
$.getJSON('./gal/statsAdd?id='+id, function( data ) {
});
});
});
});
});
});
.. and now you go to videos and switch between the categorys... the DIV contentRowTitle does not react to anything.. I have put an alert inside the load() callback and it shows up.. but why does the output of the load-URL not show up in the DIV ???
I use Magento 1.9.2.4 and the following Theme
https://github.com/webcomm/magento-boilerplate
The description of it is "HTML5 Twitter Bootstrap 3.1 Magento Boilerplate Template"
It works fine with everything else of "Bootstrap responsive".
My problem is, that all of the following on this Site did not work on my
Installation:
http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
And "did not work" means you can click on next tab but the border and highlighting and so on is still on the first tab.
Same thing on "nav-pills" of Bootstrap.
In this Boilerplate there is a Workaround for Bootstrap dropdown:
jQuery.noConflict();
;(function ($) {
'use strict';
function Site(settings) {
this.windowLoaded = false;
}
Site.prototype = {
constructor: Site,
start: function () {
var me = this;
$(window).load(function () {
me.windowLoaded = true;
});
this.attach();
},
attach: function () {
this.attachBootstrapPrototypeCompatibility();
this.attachMedia();
},
attachBootstrapPrototypeCompatibility: function () {
/*// Bootstrap and Prototype don't play nice, in the sense that
// prototype is a really wacky horrible library. It'll
// hard-code CSS to hide an element when a hide() event
// is fired. See http://stackoverflow.com/q/19139063
// To overcome this with dropdowns that are both
// toggle style and hover style, we'll add a CSS
// class which has "display: block !important"
$('*').on('show.bs.dropdown show.bs.collapse active nav-tabs.active', function (e) {
$(e.target).addClass('bs-prototype-override');
});
$('*').on('hidden.bs.collapse nav-tabs', function (e) {
$(e.target).removeClass('bs-prototype-override');
});*/
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip',
'hide.bs.popover',
'hide.bs.tab'], function (index, eventName) {
all.on(eventName, function (event) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function (element) {
if (isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
},
attachMedia: function () {
var $links = $('[data-toggle="media"]');
if (!$links.length) return;
// When somebody clicks on a link, slide the
// carousel to the slide which matches the
// image index and show the modal
$links.on('click', function (e) {
e.preventDefault();
var $link = $(this),
$modal = $($link.attr('href')),
$carousel = $modal.find('.carousel'),
index = parseInt($link.data('index'));
$carousel.carousel(index);
$modal.modal('show');
return false;
});
}
};
jQuery(document).ready(function ($) {
var site = new Site();
site.start();
});
})(jQuery);
I already asked on github with no response question on github
So the Dropdown of Bootstrap is working.
My Question am i doing anything wrong or am i missing something?
Why does the nav-tabs not work in here?
Adding the "'bower_components/bootstrap/js/tab.js'," tab.js to the gulpfile.js AND
adding the tab class to the script.js solved my Problem with Bootstrap Nav Pills and Tabs.
$('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
$(e.target).addClass('bs-prototype-override');
});
$('*').on('hidden.bs.collapse', function(e) {
$(e.target).removeClass('bs-prototype-override');
});
At the end the code looks just like this:
jQuery.noConflict();
;(function($) {
'use strict';
function Site(settings) {
this.windowLoaded = false;
}
Site.prototype = {
constructor: Site,
start: function() {
var me = this;
$(window).load(function() {
me.windowLoaded = true;
});
this.attach();
},
attach: function() {
this.attachBootstrapPrototypeCompatibility();
this.attachMedia();
},
attachBootstrapPrototypeCompatibility: function() {
// Bootstrap and Prototype don't play nice, in the sense that
// prototype is a really wacky horrible library. It'll
// hard-code CSS to hide an element when a hide() event
// is fired. See http://stackoverflow.com/q/19139063
// To overcome this with dropdowns that are both
// toggle style and hover style, we'll add a CSS
// class which has "display: block !important"
$('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
$(e.target).addClass('bs-prototype-override');
});
$('*').on('hidden.bs.collapse', function(e) {
$(e.target).removeClass('bs-prototype-override');
});
},
attachMedia: function() {
var $links = $('[data-toggle="media"]');
if ( ! $links.length) return;
// When somebody clicks on a link, slide the
// carousel to the slide which matches the
// image index and show the modal
$links.on('click', function(e) {
e.preventDefault();
var $link = $(this),
$modal = $($link.attr('href')),
$carousel = $modal.find('.carousel'),
index = parseInt($link.data('index'));
$carousel.carousel(index);
$modal.modal('show');
return false;
});
}
};
jQuery(document).ready(function($) {
var site = new Site();
site.start();
});
})(jQuery);
I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside.
At the moment the popup works fine but it disappears whenever I click inside the window. When I click outside the window, it stays. How do I make it work the oppersite way around?
Code as:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.invite_room_btn').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.invite_room_btn'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And HTML is:
<span class="invite_room_btn">
<div class="messagepop pop">
</div>
</span>
Thanks!
Your question can be interpreted as "how to identify when the click is made outside the popup window"?
as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)
This can be achieved as follows:
the HTML code may be something like:
<div id="popup" class="popup">
Content
<div>DIV inside</div>
</div>
<button id="open">Open</button>
while the javascript is:
$(document).ready(function () {
$('#popup').hide()
});
$('#open').on('click', function () {
$('#popup').show(500)
});
$(document).mouseup(function (e) {
var popup = $("#popup");
if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(500);
}
});
Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/
I figured it out with the following code!
$(document).ready(function () {
$('.messagepop').hide()
});
$('.invite_room_btn').on('click', function () {
if($(this).hasClass("selected")) {
var popup = $(".messagepop");
popup.hide(150);
$(".invite_room_btn").removeClass("selected");
}
else {
$('.messagepop').show(150);
$('.invite_room_btn').addClass("selected");
}
});
$(document).mouseup(function (e) {
var popup = $(".messagepop");
if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(150);
}
});
Thanks for the help!