i am using jquery mobile .i Have one header and dynamically created table .But when i check my code on browser it working fine but when i check on ipad simulator Whole page is scrolling with header .How to prevent header scrolling in Ipad .I need only table view scroll with fixed height .Here is my code in fiddle
http://jsfiddle.net/ravi1989/Q9QmF/1/
var content = "<table>";
for (i = 0; i < 30; i++) {
content += '<tr class="row" id="' + i + '"><td>' + 'result ' + i + '</td></tr>';
}
content += "</table>"
$('#here_table').append(content);
$(".row").click(function() {
alert(this.id);
});
Give an ID to your header bar and try this script.
JQUERY
$(document).ready(function() {
$("#your_header").fixedtoolbar({ tapToggle: false });
});
Related
I have pieced together information on eliminating iframe scrollbars in favour of the browser scroll bars when rendering a reportviewer in an iframe. MVC does not support rendering a report viewer in a view, hence the need for an iframe.
Edit: i struggled to find this solution (below) hence i thought i would share.
In the aspx page (the page that will be rendered in the iframe)
$(function () {//jQuery document.ready
// attach an event handler, whenever a 'property' of the reportviewer changes, the function will be called to adjust the height of the iframe
Sys.Application.add_load(function () {
$find("ReportViewer").add_propertyChanged(viewerPropertyChanged); // $.find("ReportViewer") will return the reportviewer with id "ReportViewer"
});
function adjustIframeSize() {
// you can play around with these figures until your report is perfect
var extraHeightToAvoidCuttingOffPartOfReport = 100;
var extraWidthToAvoidCuttingOffPartOfReport = 10;
// '#ReportViewer_fixedTable' is a portion of the report viewer that contains the actual report, minus the parameters etc
var reportPage = $('#ReportViewer_fixedTable');
// get the height of the report. '#ParametersRowReportViewer' is that top part that contains parameters etc
var newHeight = reportPage.height() + $('#ParametersRowReportViewer').height() + extraHeightToAvoidCuttingOffPartOfReport;
// same for width
var newWidth = reportPage.width() + extraWidthToAvoidCuttingOffPartOfReport;
// get iframe from parent document, the rest of this function only works if both the iframe and the parent page are on the same domain
var reportIframe = $('#ReportViewerFrame', parent.document);
// just make sure that nothing went wrong with the calculations, other wise the entire report could be given a very small value for height and width, thereby hiding the report
if(newHeight>extraHeightToAvoidCuttingOffPartOfReport)
reportIframe.height(newHeight);
if (newWidth > extraWidthToAvoidCuttingOffPartOfReport)
reportIframe.width(newWidth);
}
function viewerPropertyChanged(sender, e) {
// only change the iframe dimensions when 'isLoading'
if (e.get_propertyName() == "isLoading") {
if (!$find("ReportViewer").get_isLoading()) {
adjustIframeSize();
}
}
};
});
Solved a similar problem using a set of extensions in ReportViewer for MVC.
#Html.ReportViewer(
ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer,
new { scrolling = "no" })
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
I have a method used in an onclick handler, from within the content of a collapsible in jQuery Mobile.
The idea of this method is to access the collapsible and make the collapsible button green to mark it as ok, when viewing the collapsible set with all items collapsed.
No matter what i've tried i have had no success in this.
I have tried to add a custom theme file and call .attr("data-theme", "b") for instance, to no avail. I have also tried to add a custom class, that does not work.
The thing is, it is dynamic so when page is first switched to it does not have any custom styling. Only upon clicking an element in the content of collapsible X should X be turned to green backcolor.
When inspecting the element when run i can see that it appends the new attributes and/or correctly, but it does not render.
I tried calling .trigger("create") on the element as well after appending styles, to no avail.
Example of something i tried. The element is given an id of "Stop" + id when dynamically inserted into the set, i just use that to find the correct element to attempt to style. This works and i can see that it is appended to the correct element.
function markAsOk(id, index)
{
//Color the line green, use set id (computed, less costly than find by attribute value , switch to swatch B = green
$( "#Stop" + id ).attr("data-theme", "b");
$( "#Stop" + id ).attr("data-content-theme", "b");
//$( "#Stop" + id ).enhanceWithin(); */
$( "#Stop" + id ).trigger("create");
//Refresh main list
$( "#activestopslist" ).trigger("create");
}
above this the collapsible is declared dynamically as follows:
html += "<div data-role=\"collapsible\" id=\"Stop" + activeObj.id + "\" data-wonum =
\"" + activeObj.id + "\" data-index = \"" + activeObj.index + "\">";
//Set content
html += "<h3>" + activeObj.name + "</h3>";
html += "<a href=# onclick=\"markAsOk(" + activeObj.id + "," + activeObj.index +
")\"><img src = \"resources/okicon.png\" /></a> <img src=\"resources/failicon.png\">";
//Icons for buttons
html += "<p>" + processInstructions(activeObj.instructions) + "</p>";
//End tag
html += "</div>";
Here you also see the onclick event, added to the ok button embedded in content...
I would need some suggestions, it seems.
If you are just trying to change the color of the collapsible header, you don't need a theme swatch. Instead create a CSS rule for the green coloring, e.g:
.greenCollHeader {
background-color: #7FAF1B !important;
text-shadow: #aaa 0 1px 0 !important;
}
Then on your image click, just add this class to the link with class .ui-collapsible-heading-toggle within the collapsible widget:
$("#Stop" + id).find(".ui-collapsible-heading-toggle").addClass("greenCollHeader");
DEMO
I am trying to run jQuery code on elements contained within a jQuery tab which is not selected. If i quickly click the tab before the Ajax loading has completed it works, but if i leave it running without being selected the code will not be executed.
As ou can see below, the tab i want to load data into were not defined from the beginning, it was created when the user clicked a button.
The functionality i want to achieve is tabs, where the user will search for X in the start tab, then the new tab is created, content is loaded in the background (needs jQuery code for grids and format). Then the user can click the tab and see the results.
jQuery 1.10
jQuery-UI 1.10
Example:
<script>
$(document).ready(function(){
var myindex = 1;
$("#startsearch").click(function() {
search = escape(($("#search").val()));
searchdate = ($.datepicker.formatDate('yy-mm-dd', new Date()));
var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
// Add new tab
newhtml = "<li id='henrik_tab_" + myindex + "Selector'><a href='#henrik_tab_" + myindex + "'>Search: " + searchdate + "</a></li>";
newhtml2 = "<div id='henrik_tab_" + myindex + "'></div>";
ul.append(newhtml);
tabs.append(newhtml2);
tabs.tabs( "refresh" );
// Load data into tab
$( "#henrik_tab_" + myindex).load("dosearch.php?data=" + search, function(responseTxt,statusTxt,xhr) {
if(statusTxt=="success") {
!! DOING STUFF WITH ELEMENTS CONTAINED IN THE NEW TAB HERE !!
}
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
// increse the counter for next tab
myindex++;
});
$( "#tabs" ).tabs();
});
</script>
Any help would be much appreciated.
Try change code
tabs.append(newhtml2);
to
$( "#tabs" ).append(newhtml2);
If not fix, would like show the code should be executed but not.
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/