We Keep Coding

How to disable jQuery accordion conditionally

I want to enable and disable or better to add and remove jQuery accordion on my menu conditionally, is it possible to add or remove this on screen rotate or screen-size change ? I tried it but It does not seems to be working, The accordion is remaining for change in screen-size .
jQuery( document ).ready( function(){
apply_accordion();
jQuery(window).on("orientationchange",function(){
apply_accordion();
});
} );
function apply_accordion(){
if (jQuery(window).width() < 540) {
jQuery('.footer-area').accordion({
icons: { "header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n" },
active: false,
autoHeight: false,
navigation: true,
collapsible: true,
});
} else {
//jQuery( '.footer-area' ).accordion( "disable" );
//jQuery( '.footer-area' ).accordion( "destroy" );
// jQuery( '.footer-area' ).accordion( "refresh" );
jQuery( '.footer-area' ).accordion( "destroy" ).accordion();
}
}
update
if else part will be,
} else {
jQuery( '.footer-area' ).accordion( "destroy" );
jQuery('.footer-area').accordion('option', 'active', 0);
}
when I starts with moving from portrait to landscape, it is working, but the reverse is not working , means when I am moving from landscape to portrait it is not working . And also gives error in console cannot call methods on accordion prior to initialization; attempted to call method 'destroy'
New jsfield
I would like to remove and add accordion with screen size.
Note:
jQuery version 1.11.4
check Techbreak's answer https://jsfiddle.net/voytfj2q/20/ it seems to be working but if you will check console it will generate " Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'" . and in actual implementation it does not work when I am moving from landscape to portrait.
And I have also posted an workaround, for now in my implementation it is working for me, but I know this is only a workaround.
Here is another fiddle if you will increase and decrease the screen-size slowly you can notice the issue.
Screenshot of issue, you can notice for few of them the accordion is disabled for increase in size and for some it is not disabled.

You need to activate the accordian to expand when the size is big enough to expand the content or screen rotated completely as follows,
jQuery(document).ready(function() {
jQuery(window).on("resize", function() {
if (jQuery(window).width() < 540) {
jQuery('.footer-area').accordion({
active: false, collapsible:true, active:true
});
} else {
//reactivate the accordian so that it can be expanded again
jQuery('.footer-area').accordion('option', 'active', 0);
}
});
Working fiddle for your example : https://jsfiddle.net/voytfj2q/18/
});

OK. Actually, you have solved the issue with many different instances of the accordion, which wasn't in evidence from your original post, so the wrong selector .footer-area used here:
jQuery('.footer-area').accordion({
active: false, collapsible:true, active:true
});
has been adjusted.
Issue #1:
As you need to create and destroy the widget based on the page size, we need to check for the existence of every widget instance before calling any method of the accordion, otherwise we will raise the infamous error: ...cannot call methods on *some-widget* prior to initialization.
This issue is solved by checking for the existence of the data which has been appended to the element at widget instance creation:
var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");
Issue #2:
When you are switching back to the unstyled menu, the page height will increase and the page will show the vertical scrollbar, which is resulting in a different page width. The page is resized again and your check for window.width will behave unstable.
This is the reason why you need to check for jQuery('body').width() + scrollbar_width(). Simply take the provided function to get the scrollbar width as-is, and include it in your snippet lbrary.
Fiddle: https://jsfiddle.net/Lgx4es86/6/
/* Calculates scrollbar width in pixels */
function scrollbar_width() {
if( jQuery('body').height() > jQuery(window).height()) {
/* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append( calculation_content );
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return ( width_one - width_two );
}
return 0;
}
jQuery( document ).ready( function(){
apply_accordion();
jQuery(window).resize(function() {
apply_accordion();
});
} );
function apply_accordion(){
var ww = jQuery('body').width() + scrollbar_width();
if (ww < 540) {
jQuery('#footer-widget-area-1 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-2 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-3 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-5 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-6 .footer-area').accordion({
active: false, collapsible:true
});
} else {
var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");
if (isInstance1) {
jQuery('#footer-widget-area-1 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-1 .footer-area').accordion("destroy");
}
var isInstance2 = (typeof jQuery('#footer-widget-area-2 .footer-area').data("ui-accordion") != "undefined");
if (isInstance2) {
jQuery('#footer-widget-area-2 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-2 .footer-area').accordion("destroy");
}
var isInstance3 = (typeof jQuery('#footer-widget-area-3 .footer-area').data("ui-accordion") != "undefined");
if (isInstance3) {
jQuery('#footer-widget-area-3 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-3 .footer-area').accordion("destroy");
}
var isInstance5 = (typeof jQuery('#footer-widget-area-5 .footer-area').data("ui-accordion") != "undefined");
if (isInstance5) {
jQuery('#footer-widget-area-5 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-5 .footer-area').accordion("destroy");
}
var isInstance6 = (typeof jQuery('#footer-widget-area-6 .footer-area').data("ui-accordion") != "undefined");
if (isInstance6) {
jQuery('#footer-widget-area-6 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-6 .footer-area').accordion("destroy");
}
// var isInstance = (typeof jQuery('.footer-area').data("ui-accordion") != "undefined");
// if (isInstance){
// jQuery('.footer-area').accordion('option', 'active', 0);
// jQuery('.footer-area').accordion( "destroy" );
// }
}
}
Your workaround:
You are applying and removing the accordion styles, but not destroying the widget instances, so data event handlers are still there. You would need at least to move the jQuery('.footer-area').accordion part in another place to execute it just only one time. Moreover, beside this, the page width issue isn't solved by your workaround.
Scrollbar width function: credit Alex Mansfield (http://alexmansfield.com/javascript/css-jquery-screen-widths-scrollbars)

A work around will be removing and adding the classes and attributes when ever the screen size is changing. I am posting this workaround but would like to have an correct solution to it.
jQuery(document).ready(function() {
jQuery(window).on("resize", function() {
if (jQuery(window).width() < 540) {
jQuery('.footer-area').accordion({
active: false, collapsible:true, active:true
});
jQuery('.footer-area h2').append('<span class="ui-accordion-header-icon ui-icon ui-icon-carat-1-s"></span>');
jQuery('.footer-area div').css('display', 'none');
jQuery('.footer-area div').addClass('ui-widget-content');
jQuery('.footer-area div').addClass('ui-accordion-content');
jQuery('.footer-area h2').addClass('ui-accordion-header');
jQuery('.footer-area h2').addClass('ui-accordion-icons');
} else {
jQuery('.footer-area h2 .ui-accordion-header-icon').remove();
jQuery('.footer-area div').removeAttr('style');
jQuery('.footer-area div').removeClass('ui-widget-content');
jQuery('.footer-area div').removeClass('ui-accordion-content');
jQuery('.footer-area h2').removeClass('ui-accordion-header');
jQuery('.footer-area h2').removeClass('ui-accordion-icons');
}
});

There an option using pure css in which you can use media quires to show or hide them accordingly based on screen size:
Let's say you have ui-accordion-header class on your accordion headers when it's rendered.
Now you can put this in your style sheet:
#media screen and (min-width: 0) and (max-width: 1024px) {
.ui-accordion-header { display: block; } /* show it on small screens */
}
#media screen and (min-width: 0) and (max-width: 400px) {
.ui-accordion-header { display: none; } /* hide it elsewhere */
}
Or:
#media all and (orientation:portrait) {
.ui-accordion-header { display: none; }
}
#media all and (orientation:landscape) {
.ui-accordion-header { display: block; }
}
And you don't need to write any js code. Check the code here.

var myAccordion = null;
jQuery(document).ready(function () {
createAccordion(true);
jQuery(window).bind("resize", function (event) {
updateAccordion();
});
});
function createAccordion(value){
try{
$(".footer-area").accordion({
icons: {"header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n"},
active: 0,
// heightStyle: "fill",
collapsible: value
});
}catch(e){
alert(e);
}
}
function updateAccordion() {
try{
var w = jQuery(window).width();
if (w < 540){
$(".footer-area").accordion("option", "collapsible", false);
}else{
$(".footer-area").accordion("option", "collapsible", true);
}
}catch(e){
alert(e);
}
}

How to avoid the text cross the div element in JQuery?

When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog it is possible to create dynamic checkBoxes.
The issue is when I write some text, the text cross the div element. I don't want that. How can I avoid that?
You can see the problem in the image below:
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#Getbtn").on("click", function () {
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#boxs');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
div.appendTo(container);
}
});
Live Demo

Check these answers:
word-wrap does not work in IE
word-wrap:break-word not working in IE8
Basically you do:
div.break_word {
width: 690px; /* whatever width, if needed */
word-wrap: break-word;
-ms-word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
Related:
http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Either you can use CSS3 overflow-wrap:break-word property, word-break: break-all, or use overflow-x:hidden of your container element.
More information here, here and here.

Add this to your CSS:
.allcheckbox label
{
word-wrap: break-word;
}
This is forcing overflowing strings to break. Here is the demo: http://jsfiddle.net/62QY8/132/

you can use css for this div
word-wrap:break-word;
overflow:hidden;

Responsive menu with resizing

I need to responsive button like this:
we have 15 buttons on a menu. When the browser is resizing, some buttons add to <select>
like this:
I have this jsFiddle to demonstrate the problem:

This is too much manipulation when the window is resized. I don't know if this can be done with CSS. You should prefer that..
But here is a working but dirty fiddle with Javascript/jQuery.
You should listen to the resize event.
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});

You can use $(window).on('resize', function() { ... }); to detect ant change in width and act accordingly.
Here's a jQuery code that works
$(function() {
$("<select />").appendTo($("nav"));
var $select = $('nav select');
$select.hide();
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo($select);
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo($select);
});
$(window).on('resize', function() {
console.log($(window).width());
if($(window).width() < 960) {
$($select).show();
$('nav ul').hide();
}
else if($(window).width() > 960) {
$($select).hide();
$('nav ul').show();
}
});
$select.change(function() {
window.location = $(this).find("option:selected").val();
});
});
Code. See demo here: Demo

You could give each button and duplicated option a class, and then use media queries to show and hide the ones that you wish to display, keeping the logic in the JS to a minimum:
#media (max-width: SIZE-1) {
li.about-us,
li.support-1,
li.support-2,
li.support-3,
li.etc {
display: none;
}
option.about-us,
option.support-1,
option.support-2,
option.support-3,
option.etc {
display: none;
}
}

Do it the other way around, it's more flexible, so, the default situation is a dropdown menu.
In javascript listen to the window resize event, on resize, measure width available, start putting options from the dropdown in the menu till it's wider than the screen, remove last item, done.

I can't get 2 javascripts to work simultaneously

On a website im building on a Joomla CMS i call inside the head tag these javascripts :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
I have two javascripts inserted on my index.php
One for a slideshow (gallerific) and another one for a dropdown menu.
The slideshow javascript :
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.9;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
And the dropdown menu:
<script language="javascript" type="text/javascript">
var axm = {
openMenu: function() {
$('#newmenuheader').stop().animate({ 'height':'140px'}, "fast");
},
closeMenu: function() {
$('#newmenuheader').stop().css({'overflow': 'hidden'}).animate({'height':'55px'}, "fast");
},
};
</script>
I can get only one script run at a time not both. If one runs the other doesn't. I need to have them both.
At the time the javascript for the slideshow is running. Is there a conflict of some sort ?
Thanks in advance.

The second chunk of javascript code with the var axm needs to be added to the
jQuery(document).ready(function($) {}
Otherwise the browser doesn't know to run it. And you should re-write this function, don't use
jQuery(document).ready(function($) {}
just use
$(function(){
//your javascript and jQuery here for binding events, styles, and functions
}
this is a function that will run once the page is ready.

jquery hover on dialog

<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
<script>
var bar = '<img class="myclass" src="button.png" >&nbsp&nbsp' ;
$view = jQuery('#view') ;
$view.dialog({
height: 650,
width: 650,
buttons: { "welcome" :
function() { msg() ; }
},
open: function(event, ui)
{ if (full_toggle == 1)
{
$bar.dialog('open') ;
}
}
}) ;
bar = $(".bar", "#view").dialog({
height: 30,
width: '100%',
textAlign : "justify",
marginLeft : "auto",
marginRight:"auto"
})
</script>
</div>
In the above script since bar is a dialog how can i do a hover or mouseover property on bar

How about this:
$('.myclass').mouseover(function(){
// whatever....
});
Or
$('.myclass').hover(function(){
// whatever....
});

You don't need to mix javascript code with HTML. you can put it on the HEAD section inside $(function(){}); like the bellow code.
$(function(){
$('.bar').hover(
function(){ alert('Hover!'); },
function(){ alert('Hover Out!'); }
);
});
after saw your updated the question about the dialog:
jQuery UI dialog render some html. I suggest you hook in into the html that you want to hover.
For example:
$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );
You can also use:
$view.dialog({
open: function(){
$('.ui-dialog').hover( function(){ alert('Hover!'); } });
}
});
Look here for additional resource.

$('#bar').hover(function(){
alert('I was hovered...');
//function code here...
},
function(){
alert('No longer hovered...');
//function code here...
}
});
I would also recommend modifying your code a bit... Its cleaner to read if you put all of the HTML elements in there such as your image and then at the bottom of the page, place your document ready jQuery code that initializes all of the other items like dialogues, etc. Placing JavaScript at the bottom of your page will improve load times.