I using phonegap with jquery, jquery mobile min and a custom page swipe code to build an app. It is basically one main menu, leading to ten sub-menus, leading to approx 200 static html pages.
I combined it all into one single page so that it didn't have to reload the scripts every page change. This worked initially, but as I continued to add to the page, after a certain point in the page none of the links work, nothing happens when they are clicked.
I'm confident it's not a problem with the html for those links, every link after that point fails. If I cut/paste the link to the start of the doc it works fine, but then the next in line after it's original position no longer works.
At the point it stopped, the page was approx 250kb in size and 3500 lines of code.
I temporarily fixed it by creating 10 single pages, one for each submenu, which does work, but introduces it's own problems that I want to avoid if I can.
Do phonegap, jquery, or jquery mobile min have caps on how large a single page can be before they start to ignore the remainder of the code? And is there anything I can do to get around this?
This is the custom scrolling script I am using:
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "none"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "none",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
And this is what the html looks like:
<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>
<div class="title"><h1> App Title</h1><img class="home" src="img/home.png"></div>
<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->
<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
Main Menu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg"> Link to First Submenu</a></p>
<p class="line"><img src="img/redline.png" width="100% of window";></p>
And then:
<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
1st Submenu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg"> First Plot Page</a></p>
<p class="line"><img src="img/line.png" width="100% of window";></p>
And then:
<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
First Content Page
</h2></ul> <div data-role="content">
<img src="img/01001.jpg" class="plotimg"> <ul data-role="listview" data-inset="true">
<p>A few lines of text for this page
</ul></div></div></div>
I'd messed up an html tag. Fixed now.
Related
I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.
Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});
have been struggling a bit with this.
How can I determine whether my jquery accordion tab is opened or closed?
<div id="accordion3" class="accordion">
<!-- D1 -->
<h3 class='ach plus' id="1">Assignment Initiation Form</h3>
<div style="width:100%;">
content
</div>
<!-- D2 -->
<h3 class='ach plus' id="2">Flag potential candidates</h3>
<div style="width:100%;">
content
</div>
</div>
was thinking along the lines of
$(document).on("opened", #accordion3, function(){
var id = $(this).find("id");
$(id).removeClass("plus").addClass("minus");
});
I want to swop a class from 'plus' to 'minus' on opening of accordion and vice versa.
help appreciated
$( ".selector" ).accordion({
beforeActivate: function( event, ui ) {
//write your code here
ui.newHeader.removeClass('minus').addClass('plus');
$('.ach').not('.plus').addClass('minus');
}
});
This link will help you know more http://api.jqueryui.com/tabs/#option-active
To get active tab index you can try below code:
var active = $( ".accordion" ).tabs( "option", "active" );
Also remember index starts with 0
I have the following html:
<div class="guide-block" id="energy_guide">
<div class="guide-block-inner">
<div class="guide-block-head">
<a class="guide-block-link" href="#">
<h3 class="guide-block-title">Guides</h3>
</a>
</div>
<div class="guide-block-image">
<div class="guide-block-image-inner" id="energy_guide">
<img src="images/Energy-Saving-Bulb-01.png" alt="Guide">
</div>
</div>
<div class="guide-block-more">
<ul class="guide-block-list us-list" id="energy_guide">
<li>News</li>
<li>Guides</li>
</ul>
</div>
</div>
</div>
and the following js:
$( "#energy_guide" ).mouseenter(function()
{
$(".guide-block-image #energy_guide")
.fadeOut("fast", function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeIn("fast");
});
});
$( "#energy_guide" ).mouseleave(function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeOut("fast", function ()
{
$(".guide-block-image #energy_guide")
.fadeIn("fast");
});
});
The list is hidden by default in the css and what i want to achieve is to replace the image with the list while hovering the mouse over the whole guide-block div. Everything is fine and dandy until you move your mouse too fast, the mouseleave function not being triggered for some reason.
Just a first idea that hit me was that actually your events are totally fine, rather the way jQuery constructs Animations and builds them in the queue.
a probable fix would be to .stop() your subsequent animations (anim. buildups) so an overall code could look like:
$( "#energy_guide" ).hover(function() {
$(this).stop().fadeToggle();
});
(Without seeing a demo of your code with CSS it's a bit hard to guess but here you go)
The way you use your selectors is wrong:
.featured_news .guide-block-inner .guide-block-more #energy_guide
jQuery will select only #energy_guide and taking in considerations that it's the only ID in your document (as it should be) there's no need to use parent Class selectors.
I'm trying to change dynamically the content of a dialog, but when I change to content, the layout is changed.
Basically, I have a ... that I took from the jquery-ui demo and want to change the content of a ... using html();
here my HTML
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<br />
<ul id="suggestions0">
<li id="suggestion0-0" class="suggestion">BLO</li>
<li id="suggestion0-1" class="suggestion">BLU</li>
<li id="suggestion0-2" class="suggestion">BLL</li>
<li id="suggestion0-3" class="suggestion">BOO</li>
<li id="suggestion0-4" class="suggestion">CLA</li>
</ul>
<div id="footer">
<span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
</div>
<br />
</div>
That's the plan dialog that I want to show.
I have 2 buttons, if we click on OK, it will just show the current dialog without modification, and the important part is that the "li" elements are on 2 lines
like
BLO BLU BLL BOO
CLA XXX ....
but when I change the content dynamically, the "li" elements became aligns on one line instead of 2 are more.
I'm trying to figure out what I did wrong.
here the HTML for the click
<body>
<?prettify lang=java linenums=false?>
<pre class='prettyprint' >
<code>
<span class="highlightOK" id="highlight-0">OK</span>***********************<span class="highlightNOTOK" id="highlight-1">NOT OK</span>
</body>
$('span.highlightOK').click(function() {
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
$('span.highlightNOTOK').click(function() {
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
I have here a live demo
http://jsfiddle.net/survivant/cyFxp/
It seems that adding line breaks between the li elements to the dynamic html solves this
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li>\n<li id='test0-2' class='suggestion'>BLO</li>\n<li id='test0-3' class='suggestion'>BLO</li>\n<li id='test0-4' class='suggestion'>BLO</li>\n<li id='test0-5' class='suggestion'>BLO</li>\n<li id='test0-6' class='suggestion'>BLO</li>");
http://jsfiddle.net/Qjbb3/
I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:
<ul id="tabUL" class="tabs js-tabs same-height">
<li class="current">
<a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
</li>
</ul>
My success command is :
success: function(data, textStatus, XMLHttpRequest) {
$('#tabUL').find('li.current a').trigger('click');
}
This seems not working... Any help is appreciated :) Regards Andrea
Try using the a[href=""] selector:
$('#tabUL a[href="#tabProducts"]').trigger('click');
I put together a jsfiddle demo to show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...
Edit
Here is the contents of the jsfiddle:
HTML
<div id="tabs">
<ul>
<li>Address</li>
<li>Shipping</li>
<li>Parts</li>
<li>Datasheets</li>
</ul>
<div id="tab0">
<h1>This is the first tab (0)</h1>
</div>
<div id="tab1">
<h1>This is the second tab (1)</h1>
</div>
<div id="tab2">
<h1>This is the third tab (2)</h1>
</div>
<div id="tab3">
<h1>This is the fourth tab (3)</h1>
</div>
</div>
<br/>
Select the
<select id="tabSelect">
<option value="0">1st</option>
<option value="1">2nd</option>
<option value="2">3rd</option>
<option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others
jQuery
$(document).ready(function () {
$('#tabs').tabs();
$('#tabSelect').change(function () {
//pass empty array to unlock any locked tabs
$('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');
if ($('#tabHide').prop('checked')) {
//hide will be an array like [0,2,3]
var hide = Array();
$('#tabs li').not('.ui-tabs-active').each(function () {
hide.push($(this).index());
});
$('#tabs').tabs({disabled: hide});
}
});
});
If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below:
This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.
$( "#myTabs" ).tabs( "option", "active", 0 );
$( "#myTabss" ).tabs( "option", "active", 1 );
Also you can catch tabs active event like below for performing any operations
$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
// your custom code on tab click
});
rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler