I was wondering, normally chrome extensions appear in their little area below their icon, but how would I make one that has it's own little space on a side of the browser, like FireBug lite does for chrome? Where it pushes the page up and docks at the bottom.
I have seen the sidebar in the 'experimental.sidebar' chrome api, but I don't want to use it because you have to start chrome with the command line switch --enable-experimental-extension-apis, and not many people would do that.
Basically, until sidebars graduate from experimental status, you use a content script to set a big margin or padding on one side of body or html, inject a position: fixed element into the current page overlaid on that margin, and then draw to that.
Anything that needs to persist between pages gets stored by the extension and you re-create the pseudo-sidebar every time a page is loaded.
See the Firebug Lite or StumbleUpon extensions for examples.
People usually use DOM manipulation. You can take a look at FireBugs source to see how they did the DOM. It is quite slow, but until the sidebars go out of experimental, that is the only way to do it right now.
Related
Hay, I have problem with google cache. I want the homepage of my site in google cache will be shown correct and not broken, like the source. this is the source:
https://www.fnx.co.il.
the cahed page is here.
I googled it and I found answers to check if links are up-to-date, or to check reltive links. it is not the problem. even what is missing is font files. the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
is there way to prevent from google to add its elements to the page, or another solution that will make the cached page look good?
To start with, you have an error in your normal page that you would need to fix first:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
That means you are initialising fullPage.js multiple times and that's why scrolling down in a Macbook trackpad (or some other kinetic scrolling devices) will scroll more than one section at a time.
Make sure to fix that first.
the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
It doesn't seem to be the issue. The fullpage.js site is displayed almost correctly (besides the top margin issue) in Google cache
I would try to use the latest fullPage.js version (3.0.5) and then see if you still have the issue.
I'm trying to make a window based application for web browsers. The number of windows is considerably high, so I'm storing them as HTML files (one per window) that I asynchronously retrieve from the server according to user interaction.
To add a window to the main page, I first add the link elements (CSS) of the downloaded document to its head section, and then I append the content of the body section to a certain div. When a window is closed, I just remove these elements.
This approach seems to be working nicely, but I can see that sometimes when I add a window, its elements are visible out of position with no style, and after a brief moment they are correctly painted.
I don't have a strong background in web programming, but I suspect this might be related to what it is called "browser reflow". Does it mean that it is taking too much time to repaint everything? Is it possible to just hide these "unstyled" elements until it is safe to show them?
Any guidance would be appreciated.
Some time away from the computer seems to have relaxed my mind. I was erroneously assuming that adding new link elements to the head section would load the CSS files immediately. Obviously, the browser needs to retrieve them from the server first. So, the DOM elements I'm adding don't show their style because the CSS files have not been downloaded yet. I think this is the right answer.
I have designed the following page using BootStrap, and a Google Earth plugin as a script to the page.
http://www.northeastern.edu/sds/web/demos/coldextremes.shtml
I wonder why the right dropdown menu (Precipitation) drops behind the plugin in Chrome,Version 27.0.1453.110 m. It is working fine in Firefox and IE10
thank you for your help
You need to use an <iframe> shim. This is an <iframe> positioned and sized to match your dropdown menu. I believe this is the only reliable way to overlay other content on top of the Earth plugin in all browsers.
Does the menu system you're using have an option to use a shim? If not, then you will need to add it yourself. A good place to start would be Brandon Aaron's bgiframe plugin.
Also, you will need to get rid of the rounded corners and drop shadows. Those won't work on top of the Earth plugin. You probably noticed that in Firefox, although the menu works, it has sharp edges at the bottom and right, and a pixelated corner. You'll have the same problem with the shim—it's purely rectangular. Luckily, flat design is "in" these days, so use it in this menu: square corners and no drop shadows.
Or, you could finesse the situation…
I recommend at least considering a different approach: Live with, and embrace, the limitations imposed by the Earth plugin. The plugin really wants its own space, so give it to it. Don't try to overlay your own content on top of it. Instead, put the "menu" next to it. This could be an accordion-style list, or some kind of tree, or there are any number of ways you could put some navigation in its own panel next to the Earth plugin. This will avoid all the issues with background iframes and browser compatibility.
Source: I worked on a large Earth-plugin-based product for the educational market, and we spent literally months dealing with the issues that came up as a result of wanting to overlay various kinds of menus and similar material on top of the plugin.
Problem:
When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.
How to I keep everything in the proper, final place while the page loads?
Code:
HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N
Stylesheet: http://codepad.org/Yr4ULwi0
Additional Info:
The most obvious thing that is out of place is the
<h2>Location</h2>.
Images are all the size indicated in the HTML and CSS.
This is not the problem where the entire layout shifts as one because a scroll-bar appears.
Resources
Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.
http://jsfiddle.net/QHeG8/
I can't replicate the issue but it could be caused by the webfonts loading and rendering.
That would explain why <h2>Location</h2> moves - because it's position relies on the width of the <h3>Tagline</h3>
You could try using standard system fonts to see if that resolves it.
Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked)
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.