i am currently creating an ipad app using the slablet template.
i have customised it so i have a left navigation and a main window.
i have implemented some ajax so that when a user clicks a link on the left navigation, the page that has been selected appears in my main window. this works fine.
i now want to include some jqtouch so that when, when a user clicks one of the links from my left navigation, the page appears in my main window but with an animation like slidein, slideup, pop etc.
how can i do this??
any help will be greatly appreciated
thanks
i have included some of my code below:
Navigation links:
home
Latest News
Important Uploads
Personal Details
Timetable
Tasks
Staff Lookup
University Informtion
ajax that makes pages load in window:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
jqTouch (and jQuery mobile) are both optimized for phones and don't support independently scrolling areas that you normally see on tablets. If you want that you'll need to go Sencha Touch (my project) or an equivalent.
Related
I am using UberGallery for my site:
http://www.ubergallery.net/
Here is a sample of the page with Uber Gallery called directly in the HTML
http://www.goloyal.com/clients/dealers-mlm.php
If you click on a thumbnail it opens the popup div.
Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time:
/old-dealers-mlm.php
The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)
I am calling THIS div in my ajax
/div-dealers-mlm.php
Which also has the popups showing correctly.
I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?
THANKS!
The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:
$(document).ready(function(){
$(document).on("click", "a[rel='colorbox']", function(e){
e.preventDefault();
var url = this.href;
$.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});
});
});
This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.
So I've decided to use the jQuery Mobile framework to build my new mobile website. It has this feature of loading any local href link by ajax, which is great. But the new page that loads doesn't respond to any of the javascript. I've got a home page and page 2, both of which have the same html layout which a few changes in the content, I'll give an example.
I have made a navigation menu that slides in from the left and pushes the main content to the right. When I click on a page link, it loads the new page through ajax, but then on the new page, if I click the menu button, jQuery doesn't pick this up and so nothing happens (the menu doesnt slide out).
$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
console.log("1")
if ($( 'nav' ).hasClass('navTransform')) {
console.log("2")
$( 'nav' ).removeClass('navTransform');
$( 'article' ).removeClass('articleTransform');
}
else {
console.log("3")
$( 'nav' ).addClass('navTransform');
$( 'article' ).addClass('articleTransform');
}
});
});
This jQuery script is in a seperate .js file thats included in the header of both the pages. I know the script works normally because when i refresh the page, the menu trigger works. Is there a known work around for this?
The workaround for this is to use appropriate jQM handler pageinit() instead of jQuery ready handler.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
So, your code might look like this:
$(document).on("pageinit", "#page1", function(){
//Your init code for page 1 goes here
});
$(document).on("pageinit", "#page2", function(){
//Your init code for page 2 goes here
});
My client is using Magento, and after clicking the submit button, the form submits to the controller and then the same page reloads. What he asked me is once he clicks on the submit button he wants a popup displayed. So I used a div with a disabled background as a popup in a dynamic way (JavaScript), but since the button is "submitting", the page refreshes and I lose the popup, so is it possible to keep that div displayed even after submitting?
Jquery example:
$(document).ready(function(){
$('#form_selector').submit(function(){
showDialog();
//stop submit
return false;
});
$('#dialog_button_selector').click(function(){
//submit form
$('#form_selector').submit();
});
});
I'm not familiar with Magneto, but generally speaking, couldn't you look for a form submit in the controller when the page reloads and call for the popup, if true?
Why don't you use slide panel instead of pop-up panel?
For instance, check isLoggedin function of Magento :
<?php
if ($this->helper('customer')->isLoggedIn() ) {
echo "Welcome!";
} else {
echo "Please log in.";
}
?>
if customer is logged, show necessary information of customer inside the slide panel.
If you want just one time show this panel, try to event observer methods of magento :
app/code/core/Mage/Customer/Model/Session.php
Event names :
customer_login
customer_session_init
For jQuery Sliding Panel, you can use jqEasy which is supporting showOnLoad property.
jqEasy
Given that you don't want to hold submission of the page, you basically need to echo the popup after the page is submitted. So, using some generic event (catalog_product_add_to_cart_after), add a session variable like this:
public function observer($event) {
Mage::getSingleton("customer/session")->setNeedsCartPopup(true);
}
Then, in your template, you can check for the existence of this variable to show your popup:
$session = Mage::getSingleton("customer/session");
if($session->getNeedsCartPopup()) {
$session->->setNeedsCartPopup(false);
// echo HTML to display popup as the page loads
}
This is not tested code, but it should give you the gist of how to capture the event and respond to it in the template. Hope that helps!
Thanks,
Joe
Hi I have a page with a navigation menu on the left and when any link
on this menu is clicked , an Ajax get call is sent to the server and
the right side gets updated with the new page.
How I am currently doing this is by creating 2 columns, the left col
contains the navigation link and the right col contans a div named the
content which has a dojotype of dojox.layout.ContentPane.Now when the
data is received from the server, I change its content like this
dijit.byId("thecontent").setContent=data
Now when I click on the navigation link , the right side gets
displayed properly(this page has dijits and also some scripts to
handle onclick events). But firebug returns an error saying
"Tried to register widget with id==thecontent but that id is already registered"
my main dojo include looks like this:-
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"djConfig="parseOnLoad:false"></script>
I do a dojo.parser.parse() in the function dojo.addOnLoad like this:-
dojo.addOnLoad(function(){
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit.Editor");
dojo.addOnLoad(function(){
dojo.parser.parse();
sendgetrequest();//this initiates the xhrget request
dojo.removeClass(dojo.byId("doc3"),"hiddendiv");
}
);
})
I am also unable to run any scripts in this new loaded page. No onclick event is working, just the dijit widgets are displayed...
The error means, as Ken already said, that you are creating a dijit with an id that already exists. My guess would be that you load the AJAX content in the right panel without destroying the old right panel first.
Try calling destroyRecursive on the main dijit container in the right panel before loading the new content. Also, if you do not need to set the id of the dijit, you just might drop the id (but that would leave a memory hole because the old dijits are not destroyed).
I have a task to change envelope icons on the main Activities view page (Work Place, My Work -> Activities) for every row in the grid, depending on the custom status of the row in crm 4.0. I need to do it using JavaScript. Does anybody know if there is a way to do that and where should the JavaScript code be placed? I am assuming that I need to intercept grid onLoad event, go through the grid, check the condition and flip the url of the icon. But I cannot figure out how to hook into that event...
Thanks very much!
I got several very useful advices and here is what I got so far.
1. I added SiteMap to load a custom page, instead of default one (/workplace/home_activities.aspx)
2. Here is the code of the custom page, placing onreadystatechange in the html was the only way I could get this function to run. Do not know why.
HTML>
HEAD>
TITLE>
script language="javascript" type="text/javascript">
function Run()
{
var objIframe = getIframe();
if(objIframe.readyState == "complete")
{
var docFrame = objIframe.contentWindow.document;
var grid = docFrame.getElementById("crmGrid");
var allRecords = grid.InnerGrid.AllRecords;
for(var i=0; i
function getIframe()
{
return document.getElementById("wraperActivitiesFrame");
}
/script>
/HEAD>
body >
iframe id="wraperActivitiesFrame" src="/workplace/home_activities.aspx" WIDTH="100%" HEIGHT="100%" onreadystatechange="Run()">
/HTML>
The issue I am having now is that the function does not run again when I try to page the grid. I have 2 pages of Activities; when the page loads for the first time - I have my alert boxes, but when I click on "page 2" arrow - nothing happens. Why??? What I am doing wrong?
You kinda can hook into that event. You create a "wrapper" HTML page that you load in CRM instead of the default activities grid via Sitemap. This wrapper contains a full-size IFrame in which you load the actual grid, and in the IFrame's onreadystatechange handler (for readyState == 4), you traverse the grid's DOM (jQuery might make this a little easier, but I haven't used jQuery much myself) and do whatever changes you need to do (that means the JavaScript goes within the wrapper HTML page). If you call this via setInterval and put a try-catch around it, this will even be safe against grid refreshes and browsing through the pages.