Develop Reference

How to use Javascript to force "div.classname" to full screen width?

I would like to use some basic Javascript to automatically set the width of a div element (class name = "tb-megamenu-submenu") to be the full width of the screen and centered. I would also like this calculation to run any time the screen is resized.
Normally I would just use CSS for this (width: 100vw), but the parent element is position:relative and the submenu is position:absolute, so any attempt to set the width fails because the submenu cannot be centered on the screen with CSS alone.
I'm using a Drupal Module called "The Better Mega Menu." There is a working example of a websites that does this exact thing that I want (https://www.hollyhunt.com/), but I can't seem to replicate their success. Here's the code they are using on their site:
// Make submenu full browser width.
const submenuFullwidthCalc = function () {
// Get the Mega menu Level 1 sub menu.
$(".tb-megamenu-nav > .level-1 > .tb-megamenu-submenu").each(function () {
// reset to zero so it can be calculated again and again
$(this).css("left", 0);
const offsettarget = $("body").offset();
// The offset of this submenu.
const offsetthis = $(this)
.parent()
.offset();
// Calculate the offset.
$(this).css("left", offsettarget.left - offsetthis.left);
// Set the submenu full width.
$(this).css("width", $("body").width());
});
};
How can I get this kind of functionality working on my site? Oh, and I'm stuck using the old BootStrap 3 Theme, so any solutions may have to be compatible with older code standards. Thanks for any help you can give!!!

Revolution Slider - Advance once per mouse scroll

EDIT: Revolution Slider recently updated to Version 5 which by default supports mouse scrolling between slides without the need for additional javascript by the user and I've found it to work flawlessly.
Original Question:
I'm using a full screen Revolution Slider and by using the code found on the developers site I've managed to get the slides to advance using a mousewheel scroll.
The problem is that the slider is advancing more than one slide at a time depending on how much the user scrolls. I need the slide to only scroll once per mousewheel event. I tried using the solution found here but couldn't get it to work: Removing event after one scroll
I'm very new to Javascript so any help is much appreciated.
Here is the code I am currently using
(function() {
var slider = revapi1;
slider.parent().on('mousewheel DOMMouseScroll', function(event) {
if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
slider.revprev();
}
else {
slider.revnext();
}
});
})()

revprev() and revnext() is where moves happen.
Deeper you should find something like speed, steps_length...

Disable touch swipe on fullpage.js

I'm using the fullpage.js plugin for a single page marketing site.
I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.
I've been though all the documentation but I can't find out how to achieve this.
Any help is welcome. Thanks, Jack.

Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.
If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices.
In order to do so, I recommend you to do something like this.
Update 2016:
You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.
The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.
You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.
Update Sep-2014:
A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.
Update Jun-2014:
autoScrolling:false only disables the vertical scrolling.
If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.
Inside fullpage.js replaces this:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
For this:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
And then, when you initialize the plugin, call that public function in the afterRender callback like so:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
Don't call fullpage twice. Just add the afterRender function inside your initialization.

The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:
$.fn.fullpage.setAllowScrolling(false, 'left, right');

As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.
In jquery.fullPage.js you will find the function setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.

Jquery - Adding classes to multiple elements at once?

I'm having issues with jquery and bxslider on my site, i've been racking my brain over this for a while but can't seem to find any way to make it work how i'd like,
I'm building a slider using bxslider and basically i want the current slide to have a class of 'active' or an opacity of 1, whereas i'd want all other images on the sliders to have an opacity of 0.7.
i have a potential 'infinite' number of slides on my page and this is where i seem to be running into problems. (it's being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)
you can see what i've got so far at: http://jsfiddle.net/bu5cd/
$(document).ready(function(){
$('.bxslider').bxSlider({
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('img.attachment-thumbnail-size').removeClass('active');
$('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
}
});
});
you can see it works for the first slider somewhat, but it doesn't carry through to the second slider.
Cheers guys, been racking my brain over this for hours! I'm open to using another slider if that would help achieve the desired result, there doesn't seem to be an awful lot of documentation around for bxslider.

Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the "n-th" img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:
$(document).ready(function () {
$('.bxslider').bxSlider({
onSlideBefore: function ($el) {
/* remove the class from all images of this slider only */
$el.closest(".bxslider")
.find('img.attachment-thumbnail-size')
.removeClass('active');
/* add the class to the image within the current slide */
$el.find('img.attachment-thumbnail-size')
.addClass('active');
}
});
});
http://jsfiddle.net/bu5cd/3/

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!