Develop Reference

Browser resize add event width min-max with Js / Javascript

/*Add Click show To Menu*/
(function ($) {
$.fn.openActive = function (activeSel) {
activeSel = activeSel || ".active";
var c = this.attr("class");
this.find(activeSel).each(function () {
var el = $(this).parent();
while (el.attr("class") !== c) {
if (el.prop("tagName") === 'UL') {
el.show();
} else if (el.prop("tagName") === 'LI') {
el.removeClass('tree-closed');
el.addClass("tree-opened");
}
el = el.parent();
}
});
return this;
}
$.fn.treemenu = function (options) {
options = options || {};
options.delay = options.delay || 0;
options.openActive = options.openActive || false;
options.activeSelector = options.activeSelector || "";
this.find("> li").each(function () {
e = $(this);
var subtree = e.find('> ul');
var toggler = $('<span>');
toggler.addClass('toggler');
e.prepend(toggler);
if (subtree.length > 0) {
subtree.hide();
e.addClass('tree-closed');
e.find(toggler).click(function () {
var li = $(this).parent('li');
li.find('> ul').toggle(options.delay);
li.toggleClass('tree-opened');
li.toggleClass('tree-closed');
});
$(this).find('> ul').treemenu(options);
} else {
$(this).addClass('tree-empty');
}
});
if (options.openActive) {
this.openActive(options.activeSelector);
}
return this;
}
})(jQuery);
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
jQuery(document).ready(function ($) {
var dcwidth=$(window).width();
if(dcwidth <= 1024) {
$("#nav_menu ul.menu").treemenu({}).openActive();
}
});
I have Add click show to menu width treemenu jQuery.
My jQuery working on > 1024px and add Active treemenu on <= 102px.
But when my Browser > 1024px i resize to <= 1024px my jQuery not add event Active treemenu. How to resize Browser to <= 1024px add Active treemenu and resize to > 1024px clear Active treemenu.
Thanks!

Need help changing menu from hover to click

--- Original Hover code ---
function bind_dropdown() {
$('div#quick_nav div.search_dropdown').on('hover', function() {
var thisid = $(this).attr('id').split('_');
var this_action = thisid[1];
var this_width = 950;
var add_class = 'dropdown_full';
if(this_action == 4) {
this_width = 200;
add_class = 'dropdown_small';
}
if($('div#quick_nav div#dropdown_'+escape(this_action)).is(':visible')) {
$('div#quick_nav div#dropdown_'+escape(this_action)).addClass(add_class).slideUp(100);
}
else{
$('div#quick_nav div.dropdown').hide();
$('div#quick_nav div#dropdown_'+escape(this_action)).addClass(add_class).slideDown(100).width(this_width);
}
return false;
});
}
--- End Original Code ---
I did try and change hover to click. It works however to close the menu you now have to click on the menu icon again. Any help would be greatly appreciated. I would like to be able to click to show menu and when the mouse moves off the menu it would close automatically.
Thank you in advance
J

Use the below code
function bind_dropdown() {
$('div#quick_nav div.search_dropdown').on('click', function() {
var thisid = $(this).attr('id').split('_');
var this_action = thisid[1];
var this_width = 950;
var add_class = 'dropdown_full';
if(this_action == 4) {
this_width = 200;
add_class = 'dropdown_small';
}
if($('div#quick_nav div#dropdown_'+escape(this_action)).is(':visible')) {
$('div#quick_nav div#dropdown_'+escape(this_action)).addClass(add_class).slideUp(100);
}
return false;
}).on("mouseleave", function() {
var thisid = $(this).attr('id').split('_');
var this_action = thisid[1];
var this_width = 950;
var add_class = 'dropdown_full';
if(this_action == 4) {
this_width = 200;
add_class = 'dropdown_small';
}
$('div#quick_nav div.dropdown').hide();
$('div#quick_nav div#dropdown_'+escape(this_action)).addClass(add_class).slideDown(100).width(this_width);
});
}

Uncaught TypeError: $(...).find(...).once is not a function in bootstrap/js/bootstrap.js?

I have installed bootstrap theme for building responsive theme then I installed jquery_update module as documentation in theme project and everything seems ok expect below js error appears in inspect elements console:
Uncaught TypeError: $(...).find(...).once is not a function in
bootstrap/js/bootstrap.js?o5l669
Any one please can help me?
this is the bootstrap.js:
/**
* #file
* bootstrap.js
*
* Provides general enhancements and fixes to Bootstrap's JS files.
*/
var Drupal = Drupal || {};
(function($, Drupal){
"use strict";
Drupal.behaviors.bootstrap = {
attach: function(context) {
// Provide some Bootstrap tab/Drupal integration.
$(context).find('.tabbable').once('bootstrap-tabs', function () {
var $wrapper = $(this);
var $tabs = $wrapper.find('.nav-tabs');
var $content = $wrapper.find('.tab-content');
var borderRadius = parseInt($content.css('borderBottomRightRadius'), 10);
var bootstrapTabResize = function() {
if ($wrapper.hasClass('tabs-left') || $wrapper.hasClass('tabs-right')) {
$content.css('min-height', $tabs.outerHeight());
}
};
// Add min-height on content for left and right tabs.
bootstrapTabResize();
// Detect tab switch.
if ($wrapper.hasClass('tabs-left') || $wrapper.hasClass('tabs-right')) {
$tabs.on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
bootstrapTabResize();
if ($wrapper.hasClass('tabs-left')) {
if ($(e.target).parent().is(':first-child')) {
$content.css('borderTopLeftRadius', '0');
}
else {
$content.css('borderTopLeftRadius', borderRadius + 'px');
}
}
else {
if ($(e.target).parent().is(':first-child')) {
$content.css('borderTopRightRadius', '0');
}
else {
$content.css('borderTopRightRadius', borderRadius + 'px');
}
}
});
}
});
}
};
/**
* Bootstrap Popovers.
*/
Drupal.behaviors.bootstrapPopovers = {
attach: function (context, settings) {
if (settings.bootstrap && settings.bootstrap.popoverEnabled) {
var elements = $(context).find('[data-toggle="popover"]').toArray();
for (var i = 0; i < elements.length; i++) {
var $element = $(elements[i]);
var options = $.extend(true, {}, settings.bootstrap.popoverOptions, $element.data());
$element.popover(options);
}
}
}
};
/**
* Bootstrap Tooltips.
*/
Drupal.behaviors.bootstrapTooltips = {
attach: function (context, settings) {
if (settings.bootstrap && settings.bootstrap.tooltipEnabled) {
var elements = $(context).find('[data-toggle="tooltip"]').toArray();
for (var i = 0; i < elements.length; i++) {
var $element = $(elements[i]);
var options = $.extend(true, {}, settings.bootstrap.tooltipOptions, $element.data());
$element.tooltip(options);
}
}
}
};
/**
* Anchor fixes.
*/
var $scrollableElement = $();
Drupal.behaviors.bootstrapAnchors = {
attach: function(context, settings) {
var i, elements = ['html', 'body'];
if (!$scrollableElement.length) {
for (i = 0; i < elements.length; i++) {
var $element = $(elements[i]);
if ($element.scrollTop() > 0) {
$scrollableElement = $element;
break;
}
else {
$element.scrollTop(1);
if ($element.scrollTop() > 0) {
$element.scrollTop(0);
$scrollableElement = $element;
break;
}
}
}
}
if (!settings.bootstrap || !settings.bootstrap.anchorsFix) {
return;
}
var anchors = $(context).find('a').toArray();
for (i = 0; i < anchors.length; i++) {
if (!anchors[i].scrollTo) {
this.bootstrapAnchor(anchors[i]);
}
}
$scrollableElement.once('bootstrap-anchors', function () {
$scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle],[data-target])', function(e) {
this.scrollTo(e);
});
});
},
bootstrapAnchor: function (element) {
element.validAnchor = element.nodeName === 'A' && (location.hostname === element.hostname || !element.hostname) && element.hash.replace(/#/,'').length;
element.scrollTo = function(event) {
var attr = 'id';
var $target = $(element.hash);
if (!$target.length) {
attr = 'name';
$target = $('[name="' + element.hash.replace('#', '') + '"');
}
var offset = $target.offset().top - parseInt($scrollableElement.css('paddingTop'), 10) - parseInt($scrollableElement.css('marginTop'), 10);
if (this.validAnchor && $target.length && offset > 0) {
if (event) {
event.preventDefault();
}
var $fakeAnchor = $('<div/>')
.addClass('element-invisible')
.attr(attr, $target.attr(attr))
.css({
position: 'absolute',
top: offset + 'px',
zIndex: -1000
})
.appendTo(document);
$target.removeAttr(attr);
var complete = function () {
location.hash = element.hash;
$fakeAnchor.remove();
$target.attr(attr, element.hash.replace('#', ''));
};
if (Drupal.settings.bootstrap.anchorsSmoothScrolling) {
$scrollableElement.animate({ scrollTop: offset, avoidTransforms: true }, 400, complete);
}
else {
$scrollableElement.scrollTop(offset);
complete();
}
}
};
}
};
})(jQuery, Drupal);

I have same issue and my solution is exclude bootstrap.js on my custom theme.
also you can alter bootstrap.js
Maybe The problem is because of two version ov jquery load on your page, inspect your javascript and if there is two version of jquery, let one exist and remove another.

In my case, there are 2 jquery files (core, theme). I removed it from theme. it works perfectly fine.

Changing windows width with JQuery without reloading the page again

I have a JQuery rotator in my website with a slides images and I want to make the website responsive. I'm using CSS media queries to do it. I want to change the slide width (which defines in JS) when the windows width is less than 800px.
So long, I did something like this:
var responsiveSlideWidth;
if ($(window).width() < 800) {
responsiveSlideWidth = 700;
}
else {
responsiveSlideWidth = 960;
}
var defaults = {
container: '.rotatorWrapper',
animationduration: 1000,
slideWidth: responsiveSlideWidth
};
The problem is that it is working just after page reload. Thats means: if I resize the window size its is not working until I reload the page.
Any suggestions?
Thanks.
EDIT: My full code:
(function ($) {
$.fn.Rotator = function (options) {
var responsiveSlideWidth;
if ($(window).width() < 800) {
responsiveSlideWidth = 700;
}
else {
responsiveSlideWidth = 960;
}
var defaults = {
container: '.rotatorWrapper',
animationduration: 1000,
slideWidth: responsiveSlideWidth
};
options = $.extend(defaults, options);
elm = this;
var pageIndex = 0,
slideCount = 0;
var _init = function () {
slideCount = elm.find(options.container).children().children().length;
elm.find(options.container).children().width(slideCount * options.slideWidth);
_bindEvents();
_togglePager();
};
var _bindEvents = function () {
var jElm = $(elm);
jElm.find('.prev').on('click', _previous);
jElm.find('.next').on('click', _next);
};
var _next = function (e) {
e.preventDefault();
if (pageIndex >= 0 && pageIndex < slideCount - 1) {
pageIndex++;
elm.find(options.container).children().animate({
left: "-=" + options.slideWidth
}, options.animationduration);
}
_togglePager();
};
var _previous = function (e) {
e.preventDefault();
if (pageIndex <= slideCount) {
pageIndex--;
elm.find(options.container).children().animate({
left: "+=" + options.slideWidth
}, options.animationduration);
}
_togglePager();
};
var _togglePager = function () {
var $elm = $(elm);
var prev = $elm.find('.prev');
var next = $elm.find('.next');
console.log('slide count' + pageIndex + ' Page Index' + pageIndex)
if (pageIndex >= slideCount - 1) {
next.hide();
} else {
next.show();
}
if (pageIndex <= 0) {
prev.hide();
} else {
prev.show();
}
}
return _init(elm);
}
})(jQuery);

Splitting HTML page into different sections using sliding panel dividers? How is it done?

I'm wanting to divide a web page up into different sections as shown here. I'm trying to figure it out what this technique is called and an efficient way to implement it?
The page is divided up into different sections giving the user the flexiblity to expand and contract the different sections using panel handles.
I'm assuming these aren't regular frames (which I'd like to avoid using anyways).
Does anybody know of a tutorial or good example out there besides the one on jsfiddle?

the idea is quite simple.
you break up the screen with some elements, it does not really matter which (say divs) with a given height.
then attach a onclick event to the handle that starts the drag. what the onclick does is attach a mousemove event to the body which will resize the elements.
here is something i wrote a while back (before my jquery days), i'm sure it could be written much better, and you might find a plugin for this, i don't know of one:
function WidenHandle(widenedELement, handleElement, ondblClick, startWidth, withCoverDiv, onDrop)
{
this.Handle = handleElement;
this.IsClosed = false;
this.Element = widenedELement;
this.LastX = 0;
this.LastY = 0;
this.AttachedDragFunction = null;
this.AttachedDropFunction = null;
this.StartWidth = startWidth ? startWidth : 300;
this.CoverDiv;
this.OnDrop = onDrop;
this.IsDragging = false;
if (withCoverDiv)
{
var coverDiv = document.createElement("div");
coverDiv.style.width = "2000px";
coverDiv.style.height = "2000px";
coverDiv.style.display = "none";
coverDiv.style.position = "fixed";
coverDiv.style.zIndex = "1000";
// coverDiv.style.backgroundColor = "red";
// coverDiv.style.opacity = "0.3";
coverDiv.style.top = '0px';
this.CoverDiv = coverDiv;
document.body.appendChild(coverDiv);
}
if (this.Handle.addEventListener)
{
this.Handle.addEventListener("mousedown", function(element)
{
return function(event)
{
element.StartDragging(event);
if (element.CoverDiv)
element.CoverDiv.style.display = "";
if (event.preventDefault)
event.preventDefault();
}
} (this), true);
this.Handle.addEventListener("dblclick", function(element)
{
return function(event)
{
element.Close(event);
if (element.CoverDiv)
element.CoverDiv.style.display = "none";
ondblClick(element);
}
} (this), true);
}
else
{
this.Handle.attachEvent("onmousedown", function(element)
{
return function(event)
{
element.StartDragging(event);
if (element.CoverDiv)
element.CoverDiv.style.display = "";
if (event.preventDefault)
event.preventDefault();
}
} (this));
this.Handle.attachEvent("ondblclick", function(element)
{
return function(event)
{
element.Close(event);
if (element.CoverDiv)
element.CoverDiv.style.display = "none";
ondblClick(element);
}
} (this), true);
}
}
WidenHandle.prototype.StartDragging = function(event)
{
this.IsDragging = true;
if (this.CoverDiv)
this.CoverDiv.style.display = "none";
this.ClearAttachedEvents();
this.LastX = this.GetX(event);
// ** attach mouse move and mouse up events to document ** //
this.AttachedDragFunction = function(element)
{
return function(event)
{
element.OnDragging(event);
}
} (this);
this.AttachedDropFunction = function(element)
{
return function(event)
{
element.OnDropping(event);
}
} (this);
if (window.attachEvent) // ie
{
document.attachEvent('onmousemove', this.AttachedDragFunction);
document.attachEvent('onmouseup', this.AttachedDropFunction);
}
else // ff
{
document.onmousemove = this.AttachedDragFunction;
document.onmouseup = this.AttachedDropFunction;
}
}
// ** for repositioning popup while dragging ** //
WidenHandle.prototype.OnDragging = function(event)
{
clearHtmlSelection();
this.WidenCell(event);
}
// ** for release popup movement when dropping ** //
WidenHandle.prototype.OnDropping = function(event)
{
this.IsDragging = false;
if (this.CoverDiv)
this.CoverDiv.style.display = "none";
this.ClearAttachedEvents();
if (this.OnDrop)
this.OnDrop();
}
WidenHandle.prototype.ClearAttachedEvents = function()
{
// ** detach events from document ** //
if (window.attachEvent) // ie
{
document.detachEvent('onmousemove', this.AttachedDragFunction);
document.detachEvent('onmouseup', this.AttachedDropFunction);
}
else // ff
{
document.onmousemove = null;
document.onmouseup = null;
}
}
WidenHandle.prototype.GetX = function(event)
{
// ** return x position of mouse ** //
var posx = 0;
if (!event) event = window.event;
if (event.pageX)
{
posx = event.pageX;
}
else if (event.clientX)
{
posx = event.clientX;
}
return posx;
}
WidenHandle.prototype.WidenCell = function(event)
{
if (!this.Element.style.width)
this.Element.style.width = this.Element.offsetWidth - 9 + "px";
var width = parseInt(this.Element.style.width) + (this.GetX(event) - this.LastX);
if (width > 13)
this.Element.style.width = width + "px";
// ** remember last mouse position ** //
this.LastX = this.GetX(event);
}
WidenHandle.prototype.Close = function(event)
{
var width = parseInt(this.Element.style.width);
if (width < 30)
{
this.IsClosed = false;
this.Element.style.width = "";
return;
// width = this.StartWidth;
}
else
{
width = 14;
this.IsClosed = true;
}
this.Element.style.width = width + "px";
}
function clearHtmlSelection()
{
var sel;
if (document.selection && document.selection.empty)
{
document.selection.empty();
}
else if (window.getSelection)
{
sel = window.getSelection();
if (sel && sel.removeAllRanges) sel.removeAllRanges();
}
}