Will I have to face any problem if i have large number of hidden divs in my page ??
i mean that in my page there is a loop which contains some hidden divs and some buttons which when clicked shows one of the hidden div...
i just want to ask that will i have to face any problem with these hidden div..
the code here is just an example ....
any help will be appreciated..
thanks in advance
<?php
for ( $a = 1; $a < 10; $a++ ) {
<div style='display:none'>
content goes here....
</div>
}
?>
I have many pages with over half a million divs that work fine. Probably the most important thing with many hidden divs is that you enclose the hidden divs within another element which is of fixed layout. If you have a massive amount of html and a fluid layout and you change the visibility of an element, the browser must calculate all the layout again which can be slow and give the user poor responsiveness.
No problem! but It will be indexed but can be frowned upon by Google if you are hiding/showing content for SEO reasons. In other words, what Google sees should be what the user sees when clicking the link.
No problem! But if you are having more and more your websites load will be heavy. That might cause slower performance and perhaps hangs up. It would take loading time too..
That depends on what you try to do.
If you fill your hidden divs with images and other heavy stuff, it all will be loaded immediately with page and may slow things down. Also, browsers would still take time for parsing everything you hid (but that is actually not much time).
So, if you are talking about like 1000x1000 grid of buttons or something like that (for making kind of a game maybe), it will result in sad performance.
If you are talking about dynamic loading of a lot of heavy content, like a whole facebook timeline, it won't work well neither.
But if you just want to show users some blocks, which would work okay if you didn't hide it at all, you will have no problems.
Related
I am looking for some advice on how to build my first Angular2 app.
I have been playing around and done some little proff of concepts to get my head around how it works, and now want to check that I am taking the right approach as I think there is likely a better way to achieve what I want.
The project:
I am building myself a dashboard that will consist of tiles/widgets that fill the screen. Each will show different information on some topic. Each widget will also have three states/sizes: small, medium & large. Each widget will show a different amount of information based on its size.
Exg. if the widget showed the time, it may work like so:
Small: Display the time in a small font.
Medium: Display the time in a large font.
Large: Display the time in a large format and a few other timezones in a small format.
All widgets will start as medium. Clicking any widget will make it large and every other widget small. Clicking a large widget will make all widgets medium again.
My approach:
I have build an app.component that contains 1 div per widget, along with a few sample widgets that get loaded in. I would like to separate everything and be as modular as possible, so I plan that app.component will deal with positioning, moving and sizing the divs based on the screen size and number of widgets. As a result, I intend on using a pretty front end that takes care of where to position the divs. It will then also tell each widget if they should be small, medium or large.
The widget will then be responsible for displaying the correct amount of information.
Here is where I run into trouble - The app.component sets the widths as a percentage - currently 20%, 50% and 80%. I want the contents of the widget to display based on the width of its div, including as the window size changes, but I cannot pass the width in as the app.component doesn't know it (it only sets the width as a %).
What I have come up with works, but I'm sure there is a better way...
app.template.html:
<div class="widget-container" (click)="onClick1($event);" [style.width]="widget1Width + '%'"><widget-1></widget-1></div>
<div class="widget-container" (click)="onClick2($event);" [style.width]="widget2Width + '%'"><widget-2></widget-2></div>
<div class="widget-container" (click)="onClick3($event);" [style.width]="widget3Width + '%'"><widget-3></widget-3></div>
app.component.ts:
public widget1Width=50;
public widget2Width=50;
public widget3Width=50;
#ViewChild(Widget1Component) widget1: Widget1Component;
#ViewChild(Widget2Component) widget2: Widget2Component;
#ViewChild(Widget3Component) widget3: Widget3Component;
onClick1(value:any) {
this.widget1Width=80;
this.widget2Width=20;
this.widget3Width=20;
this.widget1.parentResize(this.widget1Width);
this.widget2.parentResize(this.widget2Width);
this.widget3.parentResize(this.widget3Width);
}
widget1.component.ts:
export class WidgetWeatherComponent {
panelLarge = 0;
public widgetWidth:any;
parentResize(value:any) {
console.log(value);
this.widgetWidth=value;
}
}
widget1.template.html:
<div #widget1ParentDiv>
<div *ngIf="widget1ParentDiv.clientWidth>=700"> ... </div>
<div *ngIf="widget1ParentDiv.clientWidth>=300 && widget1ParentDiv.clientWidth<700"> ... </div>
<div *ngIf="widget1ParentDiv.clientWidth<300"> ... </div>
</div>
I understand that I can also change the class and use CSS if I am changing format of text ect.
While I am very happy to take advice on the arranging, sizing, front end stuff, my main focus atm is to work out the right approach for the widgets so that I can go ahead and build a number of them. The code to resize things in app.component.ts is just to get things moving.
The problem
The main concern I have is that accessing widget1ParentDiv.clientWidth seams really bad! Normally I would handle the screen size change in the css using #media, but as each widget has 3 'states/sizes' (small, medium, large) that would cause too much effort. I really want to do exactly like #media, but for the parent div. I have read about that a little, but my understanding is that it doesn't really exist out of the box.
My other frustration with this approach is that I have to keep repeating *ngIf="widget1ParentDiv.clientWidth>400" where I would rather define that somewhere else and use *ngIf="large", but I cannot see how to do this without needing to respond to the screen size changing and update a variable.
Please let me know if this doesn't make sense or more information is needed. Any advice/thoughts would be appreciated.
This is my code:
<table>...Some content...</table>
<table>...Another content...</table>
I want to put the second table on top of the first table. This is to be used as an email template (in some clients position and margin are not available).
Those are the only two options available (outside of transform, which definitely won't work if position isn't available) that will allow one element to invade another element's space. If you can't use position or margin, then you're out of luck, and you need to re-evaluate what you are trying to achieve and why. Any chance you could do this with images?
There are always ways...not always elegant, but when you have limited options, 'works' is often all you really need. IMO, creativity is as much about solving a problem with limited options as it is thinking 'outside the box'.
Most email clients allow you to set 'height', so simply wrap the first table (the background) in a div and give that div height:0px;. the table will overflow the div, but the next element won't respect it's space because it has 0 height, and will effectively be layered in front.
http://jsfiddle.net/L0d3tnzu/
If you want the size of the tables to match exactly, you'll probably have to explicitly set heights and widths, but the fiddle above illustrates the basic concept. Hope this helps!
EDIT:
Based on the additional info in the comment (the second table should only partly overlap the first table) here is an updated fiddle: https://jsfiddle.net/acq3ob6y/1/
EDIT #2:
Dang. Outlook switching to the Word/Office rendering engine for HTML/CSS might be the only way possible to get WORSE than the IE version. Sigh. (Thanks to #Gortonington for the comment/clarification, though!)
Ok, then, the idea of a background image is only a problem for retina displays (if you want them to be all crisp and beautiful and retina-ie), and retina devices are going to be handling CSS in a more modern way (hopefully!), so how about this as a solution: Media Query targeting device resolution loads CSS with the double-size img and uses css background-size to constrain it: http://jsfiddle.net/tcyjo7ok
Third try is a charm? At least the list of options is growing...
The only way to overlay two elements across email clients is through use of background images. Even this can be broken in some clients and requires a lot of conditional and reiterate code (backgrounds.cm is good resource for email bg images).
This is the only option that will display in MOST clients. Even this is still very restricted and not very agile to use (but that is true in ALL email coding). Most other techniques will only work for a couple clients and break completely in all others.
I have an HTML table that can be more than 1K rows and a dozen or so columns.
I want the columns to be a fixed size (controllable by the user) and not grow/shrink either vertically or horizontally. So visually the contents of a particular table cell will be on one line and the overflow gets cut off at the end of the cell.
Doing performance analysis in Chrome on a large table the main performance killer is overflow:hidden.
I've tried putting the contents of each cell inside of an input, since that would replicate the same visual behavior, but that has a similar performance impact.
What do people recommend to improve performance?
If necessary I don't have to use a table tag, but would prefer to stick with the table tag if good performance can be achieved.
Update 1: I've included a file that demonstrates the performance issue here. Warning the file is pretty massive (25MB) and will slow down your computer. By default the table does not have overflow set to hidden, and once the table has been loaded (can take a while) the browser performance relatively smoothly.
However, if you edit the file and uncomment lines 12-15 and then open it. You'll see after loading browser around the table is significantly less responsive.
FYI: I have run into this problem on the iPad/iOS causing performance problems with a page that has about a hundred rows in a table with table-layout:fixed.
As soon as a cell, or a div in a cell, gets an attribute that forces it the cell to be drawn individually, it takes about 300ms instead of 100ms to draw (which causes the UI to feel abysmally slow for my situation).
Either of two properties (position:relative or overflow:hidden) caused the problem for me, removing them optimised the speed but caused text overflow if cell text was too wide for the fixed width columns.
The slowdown was happening even after tables were drawn, because I am dynamically popping up an absolute div over the table. When profiling the javascript (using (new Date).getTime()), the slowdown in measured in places in the javascript that have nothing to do with the table.
[edit: added following as part solution]
Put all cell content inside a span element (so can measure offsetWidth of content rather than width of containing block element).
After appending the row into the document, test if each span.offsetWidth is greater than the column width, if so add the "overflow:hidden" to the style (or via a class) of the containing block.
Can skip 1 and 2 above for some columns (if it is known that the cell content will never need clipping).
Caveats:
Measurements only made for iOS5 Safari (I didn't profile any other browser).
Works for us because we dynamically create table rows (processing your example using javascript would be slow?).
Most cells for our data do not overflow (clipping is only required sparsely - only a limited number of cells).
Compromised initial page load (generation of table in page went from 80ms to 800ms).
But sped up dynamic combo popup (340ms down to 130ms) giving much better keyboard responsiveness.
For your situation, might be fast to first using variable width columns, measure offsetWidth of all columns, setting column widths to pixel widths and setting overflow:hidden only on columns where offsetWidth of column is greater than the pixel width you will be using for the column.
You could try using a tiled approach. It is a pretty typical approach to making things like infinitely side-scrollable games efficiently.
Put all of your data into a Javascript array, and then have N + 1 rows in a table that has N rows visible. When you scroll down, the last item would move into view. At the moment that you have scrolled far enough that the first item moves out of view, you shift all of the data up a row and reset the scroll position back to where it started. Done correctly, the shift would be completely transparent to the user. You would only ever be working with N + 1 rows in an N-rows-visible table.
I've done this before, but under very specific UI constraints. I kind of shutter at the thought of making this consistent using the built-in browser scrollbars and such.
first off, the amount of markup required to have a table is much larger than just using divs with clear:both css for a new row. so that's the first performance hit.
also, you are setting the overflow as a class ( ? )
<style type="text/css"> .ovfl { overflow:hidden; }</style>
<td class="ovfl"></td>
As an aside, 1000 rows is a weight to deliver.
With divs you at least have an easier opportunity to throw those out of sight ( beyond the scroll ) into a div with display:none until the visitor scrolls to them.
few skins to cat mostly likely on this job,
Hope had some good thoughts.
Webkit bug 75001 is related to this problem and it covers the work being done to solve it (also see bugzilla dependencies for information).
I have a table with column contents that could be potentially long. From a design/usability standpoint, is it better to wrap the text or provide a scroll bar within the column to view the entire text?
Personally, I think wrapping the text is better. But I wanted to know what have others done in such a situation?
I ALWAYS page my content rather than wrapping or scrolling. It's super easy with jQuery DataTables and it gives the user further opportunities to filter, limit, and sort the data.
This solution also gives you the option to scroll data as well, and to dynamically adjust columns or do show/hides. But I've never gotten to that point. One one of my applications, using Ajax and Pipelining (which are supported by the plugin) it handles 3+ million records without a hiccup. Also, note that it can use jQuery's Themeroller, which can style the table simply and even from the user end on the fly if so desired.
I usually let the text wrap into the cell. But, what do you mean by "potentially long"?
I use a calendar plugin and sometimes the title gets long- i made the decision to break the string in the middle if needed- Supported in CSS3 only- other wise it just wraps
My css
.fc-event-title {
text-wrap: unrestricted;
word-wrap: break-word;
}
and will only happen if mywordisexteremlylong and wont fit properly in a small cell
But this is very extreme so that it does not overflow into the next cell.
But otherwise i dont break the word if there is enough space.
I'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.