I'm having some difficulty with the accordion UI.
I want a set of divs to be an accordion when the window is a certain size (below 1024) and just divs (above 1024)
The code that I have works if the window is greater than 1024 and then I resize to a smaller window. But if I expand the window it won't turn off the accordion.
Here's the code, what am I not getting right?
<script type="text/javascript">
var width = $(window).width();
$(document).ready(function() {
if (width < 1024){
$('#accordion').accordion();
}
});
$(window).resize(function() {
var width = $(window).width();
if (width < 1024) {
$('#accordion').accordion();
} if (width > 1024) {
$('.accordion').remove();
}});
</script>
Two things in the code you posted:
The method to get rid of an accordion is not .remove() but .destroy().
You changed from an id selector ("#accordion") to a class selector (".accordion"). It's possible for that to work--assuming the elements have both that id and that class--but not recommended; you should be consistent about the selectors within a given function/context.
Related
There is another similar question, but that seems to be focused on the js library, not Highsoft.Highcharts (and I'm using v8.1.1.1) I tried some of these solutions, but they didn't seem to work.
Try to use those CSS options:
body, html {
height: 100%;
}
#container {
height: 100%;
}
Not the most elegant when you're working with a .NET wrapper, but this seemed to work (from a colleague of mine). When using the wrapper, "chart" comes from the Id of the Highcharts object. So you will need to change that if you use something else for Id.
var chart = new Highcharts { Id = "chart" };
And then this script in the .cshtml file:
<script>
$(window).load(function () {
// "chart" is the Id of the Highcharts container
var chart = $('#chart').highcharts();
var width = $('#chart').width();
// 100 is an approximation for the hight of the navbar + margin for panel. Removing that from the entire height of the window.
var height = $(window).innerHeight() - 100;
$('panel-body').height = height;
// setsize will trigger the graph redraw
chart.setSize(width, height, false);
});
$(window).resize(function () {
// "chart" is the Id of the Highcharts container
var chart = $('#chart').highcharts();
var width = $('#chart').width();
// 100 is an approximation for the hight of the navbar + margin for panel. Removing that from the entire height of the window.
var height = $(window).innerHeight() - 100;
// setsize will trigger the graph redraw
chart.setSize(width, height, false);
});
</script>
In jQuery Mobile 1.4, why isn't $(window).scroll firing? Here's a non-working example trying to detect when the user has scrolled to the end of the page:
http://jsfiddle.net/5x6T2/
$(document).on('pagecontainershow', function () {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
This was all working fine in jQuery Mobile 1.3 prior to the deprecation of pageshow:
http://jsfiddle.net/Demr7/
$(document).on('pageshow', '.ui-page', function() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
Anybody know what to do?
You don't have to use any third party plugin to achieve infinity scrolling. You simply need to listen to either scrollstart or scrollstop and do some math.
What you need is $(window).scrollTop(), $.mobile.getScreenHeight(), $(".ui-content").outerHeight(), $(".ui-header").outerHeight() and $(".ui-footer").outerHeight().
When $(window).scrollTop()'s value matches the value of viewport's height minus content div's height plus toolbars height, it means you have reached the bottom of the page.
Note that you should remove 1px of retrieved height of each fixed toolbars.
Attach scrollstop listener to document and then define heights variables.
$(document).on("scrollstop", function (e) {
/* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
/* window's scrollTop() */
scrolled = $(window).scrollTop(),
/* viewport */
screenHeight = $.mobile.getScreenHeight(),
/* content div height within active page */
contentHeight = $(".ui-content", activePage).outerHeight(),
/* header's height within active page (remove -1 for unfixed) */
header = $(".ui-header", activePage).outerHeight() - 1,
/* footer's height within active page (remove -1 for unfixed) */
footer = $(".ui-footer", activePage).outerHeight() - 1,
/* total height to scroll */
scrollEnd = contentHeight - screenHeight + header + footer;
/* if total scrolled value is equal or greater
than total height of content div (total scroll)
and active page is the target page (pageX not any other page)
call addMore() function */
if (activePage[0].id == "pageX" && scrolled >= scrollEnd) {
addMore();
}
});
Demo (1)
(1) Tested on iPhone 5 Safari Mobile
So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?
I'm trying with the jquery-visible plugin but I can't get it to respond:
http://jsfiddle.net/mmRnq/124/
$('#test-button').on('click', function(e) {
$('#confirmDialog').popup('open');
// https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
if(!$('#confirmDialog').visible(true)) {
alert('Popup not fully visible - add overflow scrolling');
$('#confirmDialog').css('overflow-y', 'scroll');
}
});
You can use
overflow-y: auto
This makes the scrollbar only visible when it is needed.
Updated FIDDLE
UPDATE:
You can also just make the content of the popup scrollable so the titlebar remains in view:
#confirmDialog .ui-content {
overflow-y: auto;
}
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 120;
$('#confirmDialog .ui-content').height(maxHeight);
}
});
DEMO
I had a popup too large, although it was because of a searchable list. As I wanted to keep the search field at the top whilst scrolling the list only, I had to do this:
$("#confirmDialog").on({
popupbeforeposition: function (e, ui) {
var maxHeight = $(window).height() - 100 + "px";
$("#confirmDialog .ui-content").css("max-height", maxHeight);
},
popupafteropen: function (e, ui) {
var maxHeight = $(window).height() - 150 + "px";
$("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
}
});
Remember do not perform arithmetic on maxHeight once assigned as it's a string, so this doesn't work:
$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);
The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});
On page-load accordion should be collapsed...but here on page-load it's expanded and I don't know how to fix this bug?
$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
Here is jsFiddle example of my code.
Remove the following part of the code from your example and it will work just the way you expect:
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
jsFiddle Working Example
for me just adding display: none to the accordion-content div seemed to do the trick:
$('.accordion-content').css({'width' : contentwidth }).css('display':'none');
Here's a demo of it in action: http://jsfiddle.net/YsY7n/1/