I want to develop a firefox addon sdk to show a sidebar or a panel that contains an embedded browser with a navigation bar.
I have constraint too : Since the page shown in the embedded browser, I want to be able to inspect the dom, to hightlight some specific text and also to be able to select text from and send it to a specific input in sidebar with right menu.
Is there some examples or ideas how can I do this?
P.S : I'm sorry for my bad English ;)
Use sidebar module, create HTML file with a fixed textarea top:0, left:0, width: 100%. Create an iframe that takes up the rest of the sidebar. User enters text into the textarea, then listen for enter keystroke, use regex to see if it's a URL, and set iframe source to the URL if it's a URL or to a Google search if not.
Loading a whole browser into the sidebar seems like overkill, but if you really want to, try to load chrome://browser/content/browser.xul into the sidebar.
Related
I am working on creating an app navigation using a tabs module and the first tab includes a shortcode for a community wall similar to Facebook. There is supposed to be an option for adding a gif a poll or a photo but when I use the shortcode inside the tab content only the option to add the photo is there. Just looking for some direction as to what could be causing this ? Would it be in the php file ?
For further clarification when the shortcode is published it is returning this in the html
when not housed inside a tab it is displaying correctly and this is the html output:
My Chrome app contains two pages A1.html and A2.html. How can i navigate from A1.html to A2.html without creating a new window?
The page A1.html contains 10 div's and A2.html contains a back link to A1.html. My need is to load directly a specific div of A1.html when the back link in A2.html is pressed.
You can't navigate within a Chrome App window (Content Security Policy), although you can navigate to an external browser if you set the target attribute of the <a> element to "_blank". What you have to do, if you really want links to appear to work normally, is intercept the click on the link by setting an event handler and then changing the DOM from within JavaScript.
One easy way to change the DOM from JavaScript if you have an HTML fragment is to use the insertAdjacentHTML API (Google it for documentation).
While this might seem awkward, even limiting, think of a Chrome App as an app, and not a web page. After all, with a native Mac OS X or Windows app, you wouldn't expect to entirely change the UI in a window by simply clicking on a button, right? You'd expect that the app would do that via the native API. Same the Chrome Apps.
Alternatively, you can position a webview in the Chrome App window, and then HTML within the webview works normally, because that really is a "web view."
I have included share button in my website. The share button works fine in web browsers.
But when access through mobile, after clicking the share button, the share popup size is same as web browser. So it is not getting displayed properly.
Can anyone please suggest, how to alter the height and width of the feed popup?
Thanks.
Afaik you cannot change the appearance and size of the popups made with FB.ui. You could try opening your own popup:
https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.0
See "URL Redirection".
One other possibility is to use the "sharer.php", it is even easier to handle because you only need to add the URL as parameter and it will automatically get the Open Graph data from that URL.
Information: I suppose you've seen this dark box appear around a link when you click it on an iPad/iPod/iPhone. If not, click a link, and you'll see it appear and disappear when the new page has loaded.
I have a webapp that is going to be used on all platforms. I use p-tags as links because I don't want a lot of the a-tag default functionality and appearance, and the links are executed via JavaScript.
The problem is that even though I use p-tags, the iPad displays this annoying dark box around the link when you click on it. The dark box is useful to tell the user that they actually managed to click the link while the next page loads, but this webapp loads stuff from localStorage, so there is no need to have this box that clutters the GUI...
How can this box be removed?
Your reason to use paragraph (p-tags) for links is completely a mystery to me. You can control styling via CSS, no matter what tag it is. P-tags are for paragraphs, A-tags are for links. That's the most basic thing in HTML semantics I can think of.
The box you are refering to is "-webkit-tap-highlight-color"
See http://css-infos.net/property/-webkit-tap-highlight-color
On Facebook you can browse the site without affecting the floating chat windows. Seems like if the main page was inside an iFrame and the footer and chat windows where floating outside.
(source: k-director.com)
Is the main content inside an iframe or are the footer and chat windows the ones inside an iframe?
The later doesn't seem possible because int this case when you click in a link in the main page everything would have to reload, including the footer iframe.
If you refresh the page the chat windows are reloaded, but if you browse the site by clicking links they are not.
Thank you.
If you install FireBug and enable the net monitor for Facebook, you'll see that when you click most links inside the application, you're not doing a full page refresh, but rather an AJAX call which updates the page with the new content.
It looks like a new page, but in reality you're on the same page with just about everything but the chat-bar replaced.
Probobly just an absolutely positioned div, containing a scrolling div for the content. Ajax would provide the content.
The chat windows do indeed refresh when you load a new page, they maintain their viewstate however (open/close/chat history).
It's an absolutely positioned div, positioned at the bottom of your browser window. It's not hard, I cloned the Facebook chat for ClockingIT from scratch in a weekend.