Google results appear clustered with firefox addon - firefox-addon

I have written a firefox addon with which user can add notes to the pages they are viewing. Users can also highlight the content they like on the page. My addon adds some css and javascript files to the page once the document is loaded. The extension is working properly except with some google results pages. The results sometimes appear clustered. I found through firebug that google results page is adding some extra css rules (when my addon is present) which are messing with the results page. Does anybody know why this is happening? Here are the screenshots of the google results page when
a. my addon is disabled - http://i40.tinypic.com/m80hft.jpg
b. my addon is enabled - http://i41.tinypic.com/10zr7za.jpg
Thanks,
simil

It turns out that google keeps modifying the style elements present in the head. Moving my styles to the body element solved the problem.

Related

Google App Maker, importing and opening an existing web page onLoad

A newbie is trying to import the following existing URL with curriculum changes. The page needs to open onLoad, instead of user clicking.
So far, I have tried:
Link widget - only works, when one clicks on the link. Does not suit.
HTML widget - throws an error.
Fixed panel. Thought it was analogous to iframe. It isn't.
Tried adding a script
function openWebsite() {
window.open('http://www.2vsk.liepaja.edu.lv/Stundu_izmainas2.php','_blank');
} No errors, but the screen is blank.
Should anyone bother with embedding an existing website, Google provided the following solution.
https://developers.google.com/appmaker/samples/html-iframe/
My case is a miss, since, as Google supports replied, the website has to have SSL certificate which my organization doesn't have.

Why aren't styles loading in second page in jQuery mobile?

Below is the part of screenshot of mywebsite/index.php, a PC site with NO jQuery Mobile (JQM), with all scripts and styles.
Below the screenshot of mywebsite/mobile/options.php, a page designed to be run on mobile browsers, having JQM.
Here is the HTML script for Logout button, actually an ahchor tag:
Logout
.. refers to the main mywebsite folder out from mobile folder.
When I tap/click Logout, it should go to mywebsite/index.php, the PC site. And here's what shows up:
If I display the location using alert(document.location);, it shows - mywebsite/mobile/options.php.
I have to press F5 to view the page as it should.
I know that this is happening because JQM loads the pages AJAXually and hence ignores all scripts and stylesheets outside of BODY tag. I know this question is duplicate of many questions in StackOverflow and I have tried my level best to find a solution, but can't find one.
How do I move to the index.php without need to refresh?
You need to add additional code to your logout.php file to execute after the logout code executes. PHP headers can accomplish this. Within your PHP tags, add this to the end of your code:
header( 'Location: http://mywebsite/index.php' ) ;

Angular JS and jQuery Mobile routing - treatment of hash anchors in the URL

This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.

jQuery Mobile: How can I link to an external page without breaking web app view?

I created a web app (without browser chrome) which loads most of its pages locally from index.html. Now I have one page which i can not integrate into index.html, since it has to be refreshed when loaded. I placed it on the same server and called it stats.html and link to it like this:
Stats
When I click this link, the browser pops to the front instead switching to the page without browser chrome.
How can I link to an external page in a way that it still looks like one app?
I appreciate any hints to solve this problem.
just found https://github.com/mrmoses/jQuery.stayInWebApp that seems to be the solution.

How to get Back button working between remote and local jQuery Mobile pages?

I have a local jQuery Mobile project going (inside PhoneGap, thus file:// protocol) where I sometimes need to fetch external pages (using http://) from a server where the content too are jQM pages with almost identical markup (except for the content, which is generated from a CMS).
Setting $.mobile.allowCrossDomainPages to true gives me the page, and that is all right. Going Back, however, fails. I get stuck in a place where /www/index.html is not found on the server (like, doh, of course..). Is there a way to "remember" where I came from, taking me back to the local html page I originally came from?
We just added a docs page on PhoneGap in jQuery Mobile for RC3 that should help you out quite a bit:
http://jquerymobile.com/test/docs/pages/phonegap.html

Resources