After installing and configuring cluetip, i realized that the urls you hover over to see the tooltip don't work when you click on them. It's like this on all of their examples - http://plugins.learningjquery.com/cluetip/demo/ (tested in firefox and safari at least)
How can I enable the urls that invoke the tooltip to be clicked?
After futher reasearch I found out there's a configurable variable in the cluetip javascript called 'clickThrough'. Assigning this to true enables the urls the hoverable urls to function.
Related
The disable pager functionality is not working as I would expect when using ajax with tablesorter. The pager controls are disabled but the complete set of rows is not retrieved and shown. When not using ajax, it works fine - ie the complete set of rows is shown.
I notice that clicking on the disable pager button triggers the showAllRows function in the jquery.tablesorter.pager file. Then showAllRows calls pagerArrows if ajax is being used. This last function only seems to manipulate the css for the pager controls and does not re-render the table. Is this working properly for others?
Thanks
This does sound like a problem. I would recommend opening an issue so that it can be tracked and addressed.
I am on a sabbatical at the moment, so if the caretakers of the repository are unable to take care of it, I will look into this issue upon my return. Sorry for the delay.
Overview
I've set up a site using jQuery Mobile. The problem I'm having is that when I enter the site from an interior page (like the blog pages) and click on the navigation buttons in the header, I can go back to the homepage but then none of the ajax/hash-based navigation links work. In my header navigation I've linked the left-side navigation buttons directly with hrefs, not using data-rel="back". I'm not trying to use the buttons to imitate the browser's back button, but rather for absolute navigation. I've tested this on the desktop in Chrome and Firefox and on an iPhone running iOS 5 in Mobile Safari; the behavior is the same in all browsers.
Edit: (Note specific questions below in bold italic.)
What works and what doesn't
For example, if you go to the interior page http://slawson.org/blog/ and then click the < Kim button in the header to go back to the homepage, then you can only go to absolute links (like Blog) but none of the hash-based links (the other links under the "Portfolio" and "About" headers) work... clicking on the links does not fire a page transition, instead the links just blink and do nothing.
If you enter the site from the homepage — http://slawson.org/ — or one of the subpages of the homepage — like http://slawson.org/#web — this problem does not occur.
index.html — contains most of the other pages that use hash-based navigation (these don't work), e.g.:
Web Sites
iOS Applications
Print Publications
Logos & Branding
...
blog/index.html and blog/.../*.html — regular pages loaded via JQM's ajax loader (these work).
Question
Is there a problem with JQM and ajax navigation when entering sites from interior pages, or is this something that can be fixed by restructuring things or adding some jQuery somewhere? I'd like to avoid breaking every page into a separate html file.
Versions
I'm using jQuery 1.8.2 and jQuery Mobile 1.2.0.
Edit:
I looked at the JQM multi-page template docs and at these related StackOverflow questions:
jQuery mobile page navigation behaviour
Facing an issue in jquerymobile's multi page template stucture
JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)
Things I've tried:
data-url
I tried adding data-url to the multi-pages in index.html, like so:
<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">
but that didn't help.
data-rel="external"
I tried adding data-rel="external" to links to the homepage, like this link on the navigation button on the blog page:
Kim
but that didn't help either.
data-ajax="false"
I tried adding data-ajax="false" to links to the homepage, like this link on the navigation button on the blog page:
Kim
This works (i.e., you can go to the homepage, then all of the multi-pages work) BUT the transition does not fire going to the homepage. Is there a way to add a transition to this link, perhaps by giving it a class and then using some jQuery to bind to that class to fire the transition? or is there a better way? (Of note, the back button works fine after I add data-ajax="false" to the link to the homepage. Clement Ho's answer here implies that adding it breaks the back button, but I'm not seeing that)
The problem is that the hash-based pages don't exist on the page when you're clicking the links to them. (<div data-rolw="page" id="#web">...</div> isn't there)
If you have a back-end framework set up, you could return the the hash-based pages, along with the requested page, whenever a non-ajax (the initial) request is made. Then those pages will be in the DOM no matter what page is loaded first.
The other alternative is, like you said, to break every page into its own file.
I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden).
I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box."
I tested this on a rather simple dummy page viewed in various browsers.
My problem is that on two pages in our production application the default property is different, and we can't figure out why this is.
One one page we see a box-sizing property of "border-box" in the Web Inspector or console. It's assigned to the CSS selector input:not([type="image"]), textarea.
On the other page there is no mention of the box-sizing property in the Web Inspector or console.
Does anyone know if there's some way to directly affect the box-sizing definition in the user agent stylesheet for a particular page? Maybe there's a library that does this? We're using prototype.js and swfobject.js in the application...
UPDATE: In case I wasn't clear on almost every page in my web application and in every "dummy" page I've tested on the box-sizing property has the default "content-box" value. For some reason one particular page in my web application shows in the web inspector that the user agent stylesheet (the one used by the browser for its defaults) has set that property to "border-box." I can't for the life of me figure out why this is. I'm looking for anything that might cause Firefox to change what its default value for that property is.
Just had this same issue. What was happening in my case was that someone had put a snippet of Javascript code above the <!doctype html>. As a result, when I inspected DOM through firebug, it appeared that the document didn't have a doctype.
When I removed the snippet of JS code such that the doctype declaration was at the very top of the file, the doctype reappeared and fixed the box-sizing problems I was seeing (the same one you had).
See:
Hope this helps.
I had the same issue on chrome which by default added the following user agent style rule:
input:not([type="image"]), textarea {
box-sizing: border-box;
}
After adding the doctype property <!DOCTYPE html> the rule no longer appeared.
No, you can't touch the browser default stylesheet, and yes, browsers do have different rules for box-sizing specifically in respect to form fields. This is for compatibility with old browsers that used to implement form fields entirely with native OS widgets that CSS couldn't style (and so which didn't have ‘border’ or ‘padding’ as such).
Why not just put your box-sizing/-moz-box-sizing/-webkit-box-sizing rule in the site stylesheet? Works for me, I often use this to make inputs with set widths line up across modern browsers. (IE 6–7 don't support it, though, so need some extra help.)
I'm trying to create firefox addon which will add an icon near the address bar, and when the user will click it, it will show an iframe which I'll set.
Something similiar to chrome extension, as like this:
http://code.google.com/chrome/extensions/images/hello-world.png
Thanks
Here is an overlaying method.
Article : Creating toolbar button # MDC
XUL of popup box can refer to notification-popup and identity-popup(suggested) at chrome://browser/content/browser.xul
And iframe is avaiable in XUL.
<panel id="sth-popup" type="arrow" hidden="true" noautofocus="true" onpopupshown="(initial action)" level="top">
<iframe id="sth-body" src="chrome://(extenstion name)/(sth html)" flex="1"/>
</panel>
For the listeners (onclick, onkeypress) of toolbar button , please refers to gIdentityHandler . handleIdentityButtonEventat chrome://browser/content/browser.js
If your addon is a bootstrapped extension, please refers to Playing with windows in restartless (bootstrapped) extensions at Oxymoronical.
Javascript DOM control technique is required.
Refers to the XUL example and create the elements simply by document.createElement method or even bydocument.createElementNS(XULNS, "(tag name)") method, whereconst XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; had been written.
Feel free to ask more and to be one of our registered users. :-)
Your problem is with the creation of the iframe? or with creating the iframe content? (for instance u can't set a src attribute to a file which is not the domain of the page where u want to display the iframe)
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?