I come from no server-side programming knowledge, so I have an issue. Here is the situation:
I have a large group of pictures, about 1000, that are related to each other in some way. I have written a function in C that creates an index table of relation between each picture. It is very long and complicated, no need to put it here, all you need to know: If they aren't related whatsoever, the index is 0, if they are very close, it goes up to 99, with 100 being the same picture. I can output the table into any sort of file that would be useful for retrieval online.
Now, I want to use this idea for a website. I have a domain and a file system, but I haven't messed with any server scripts or anything, because I don't know where to start. I have an html/css setup with several divs set up in decreasing size, and my goal is that when a certain picture is selected, it will be loaded by the biggest div, and then subsequently load related images in descending order into the smaller divs. I am not sure how to do this, both in terms of the 'relation' attribute and in terms of retrieving said attribute. Thanks for your time, I know this is very long question so sorry.
edit: to avoid confusion, I only have a few total divs, not the thousand all at once haha
Related
I have been researching and studying various HTML code with similar questions but wanted to try something a little different: (And please forgive me for my silly sounding questions here. I am still quite new with this kinds of things so still experimenting with a lot)
1) I want to know if it's possible to write code in HTML that will allow the display of an image at a certain time. Like let's say for example, the image will only appear at midnight local time from wherever someone is searching.
2) If this is possible, how to I first display one image on a website and then at a specified time have that image replaced by a different image and then after let's say one minute everything will revert back to the original image on the website?
3) How do I "store" the image I want to have displayed at a certain time of the day? I mean, how do I program in HTML to show that new image but obviously not make it possible to be known in the source code?
4) Last, is it possible to prevent proxy servers from being used or other means that could potentially manipulate the time.
Thank you much!
How many divs can you have on a webpage at one time? And what would be controlling that limit?
There's nothing limiting the number of divs on a website (other than the memory on your machine).
There isn't a hard limit in any modern browser. I've literally iterated and printed thousands of divs on pages before. Your real limiting factors are going to be how big you want your page to be and of course, eventually your page will take a very long time to load.
I just ran a test case where I inserted 2,097,152 divs in a page and though it was slow to respond, it did eventually come up without choking either IE or Chrome.
If you need more information, or perhaps help figuring out an approach that wouldn't take so many divs as to require this question, just let us know.
I have been tasked with optimizing a marketing landing page for speed. It already does really well, but the problem is its very graphic heavy.
The entire thing I would guestimate is 30+ pages long all on one page (It must be like this, and everything must be images due to conversion reasons).
Here's what I've done so far but I'm not sure if there's something else I'm missing
I re-compressed over a 140 jpg's on the page to slightly smaller sizes
I played around with sprites but most of the images are all large (like entire testimonial boxes that are 600px wide). The sprite images ended up being like 2mb. That page actually took longer to load for some reason (by almost 2s) so I took them off
The MOST important thing is that everything immediately at the top loads as fast as humanly possible and before anything else so that the sale isn't lost by someone starting at a bunch of images loading out of order. I used some preaching images with this method: http://perishablepress.com/press/2009/01/18/css-image-caching/ - It did seem to work quite well on the smaller images, but when I add the background (which is very graphic intensive) everything seems to slow down at once, like its trying to do a certain number (5?) of images at a time. Ideally I'd love to group the first 4 smaller images being pre-cached, and then follow it up with focusing all bandwidth on the background, then the rest of the entire page in standard order..
Google Page Speed score is 90/100. the only thing its concerned about is unused styles but that I'm not really concerned about because its about 2kb total... the overhead from the 7mb of images is way more important.
I have the option to use a CDN for the images but I'm not sure how I'd go about doing this or if it would actually help?
I feel I've done all I can but then again I could totally be missing something...
A CDN would definitely help. And with 140 pictures, I hope it
contains more than just server. Just link directly to the IP of
the servers, to avoid unnecessary DNS lookup.
Minimize HTTP requests. You mention that you've been experimenting
with sprites. I still believe sprites to be the way to go, but you
might not want to create just one, huge image. If you have 140
images, you should probably have about 10 sprites.
Make sure that you have set headers to make the client cache all
content. Remember ETags.
Gzip/compress content for browsers that allow it.
If the source code is lengthy, make sure to flush the buffer early.
Consider lazily loading images below the fold? There are a number of javascript plugins to accomplish this
scrolling pagination + combining images as sprites on a per-page basis.
im making a memberlist for my website, we got 500+ members and want them on 1 page. we used tables before but this makes many dom elements and firefox says it gets slow.
is there a way to make a list with 3/4 colums with css to avoid the nr. of dom elementst?
greets. stefan
In cases like this, the best way to display 500 elements is with Javascript. Having 500 records as JSON is not that big of a memory hog, totally acceptable. You'd have to make a dynamically updating table that takes the records from memory and displays only 40 rows at a time. You could also implement search etc in JS to make it more user friendly.
I have an html table that literally has like 30 columns of data, and I'm having a hard time framing it in such a way that it can be visible without massive left/right scrolling.
One thing I was wondering is if anyone has ever seen anything clever with column headers? Some of them just can't be abbreviated down enough, but the column header is something like "Interview" and the value is numeric (lots of wasted space for the header alone). Granted, I could try and name these columns like INT or whatever, but there are lots of similarly named columns that it could become confusing.
Maybe some sort of auto collapsing columns based on mouse movement? Not sure.. I just need some creative suggestions on how to display this data!
Most likely the user will have a devil of a time comprehending 30 columns of data, regardless of scrolling.
I would recommend showing the most fundamental columns (things like name, description, identifying numbers -- core stuff, hopefully there are only 10 of them or less), and then letting the user toggle on or off whatever columns they need. A bit like google squared.
Use Jquery and CSS to accomplish this in a clean fashion. There may also be Javascript UI libraries that do this for you (Jquery UI, YUI, others...)
create images for the column names and rotate the text in the image 90 degrees. you can then have a long name with equally small widths.
Josh
I agree with the answer from ferocious, toggling columns is a good idea. Also, depending on the data, I would recommend only having a few columns displayed, and when the user clicks on the row they are interested in, it moves to a new page dedicated to the data in that record. This will work for some types of data and not for others