I know there're some threads regarding the following issue but I didn't find anyone that suits me.
I'm trying to create a chrome extension that creates a dynamic table inside a div.
The div fills the whole window and the table is being position at the top right corner. Another important thing - the table is draggable. Till here all is good.
Unfortunately on some sites the tables ui looks a bit different due to css overwritten.
Most of the solutions suggest the use of iframe, now because of the drag-and-drop and that iframe consume all the mouse events I cannot use them.
Any other suggestion would be great!
Related
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 am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:
http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm
The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).
I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.
I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.
BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.
If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.
The extra height is there because of a div "add_button" inside a div "container".
You can see it is this screenshot:
I'm working on a page that has some ads on it. One of them loads in an ad with wmode=window. I don't have the ability to change that flash code. I need to put a modal box on top of that flash element, but every combination of using z-indexes and iframe shims has failed (both manually and using bgiframe). Is there a way to place html content on top of a flash element with wmode=window? I'm testing this in chrome so far... figuring if I can't at least get it to work there, it won't work anywhere.
I'm afraid there is no way around it.
WMODE-window forces the browser to render the element on the very top layer, and it will overlap everything.
Rob
Yes it is possible, i had done this before using php and Css, your right though i did use the index "z" properties in my CSS Sheets than i had used php divs to what your trying to do, i maned to get 3 transparent flash Movies on top of each other , it was a pain for me and not much documents on this at the time,
trial and error is your best go, i had deleted my old web server i had used this method for, if you get desperate i will have a look through backup drives, but it is possible so dont give up