|
I am learning CSS so dont shoot me with bad attitude.
In this code I am learning how to use sprite in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
body {background-color: powderblue;}
#img1{
background: url("testCSS.png") 0px 0px;
background-repeat: no-repeat;
width: 60; height: 30px;
background-size: 100px 50px;
}
#img2{
position: absolute;
width: 25px; height: 25px;
left: 50px; top: 50px;
background: url("testCSS.png") -0px -25px;
background-size: 100px 50px;
}
#img3{
position: absolute;
width: 25px; height: 25px;
left: 100px; top: 100px;
background-image: url("testCSS.png") ;
background-size: 100px 50px;
background-position: 75px 25px;
}
.square{
position: absolute;
width: 30px; height: 30px; ;
left: 150px; top: 150px;
Background-color: #FF0000;
}
</style>
</head>
<body>
<img id="img1" src="test.png" > hi1</img>
<img id="img2" src="test.png" > hi2</img>
<img id="img3" src="test.png" > hi3</img>
<div class="square">box</div>
</body>
</html>
I have a real problem to resolve, that's why I have to learn this CSS ?language?helper?
I have 1350 images to load into a single plain html page. The images, i made them as small as I could 150x120; barely to distinguish the message. And is taking 20 seconds until the page is finished loading. At higher resolution per image, higher load time!
I want the page to load close to instant.
It's not for a public website, its a local file only for me.
And I google-find that there are some ways to shorten load time.
The best one that suit my case are the sprites. I read about them all day. And this code is my practice on this thing. But I am worried about it. Probably i am so new to this thing.
This code here; every img# instance i have here, is loading !A NEW! png image?
If it does, it is loading a ton of images and it beats the purpose of using sprites.
I want to load one time the sprite image(in a string variable) and reference it in CSS code.
Again, i am new to this thing. Please make some sense for me.
Thank you!
#img1{
background: url("testCSS.png") 0px 0px;
}
#img2{
background: url("testCSS.png") -0px -25px;
}
#img3{
background-image: url("testCSS.png") ;
}
|
|
|
|
|
This isn't really a CSS problem, but rather a latency/synchronous call one.
Here's the deal: your CSS operates in a synchronous manner, which means that it makes one request, receives a response, then makes the next, and so on. In your case it's doing that at least 1350 times. It's never ever going to be instant with your current design.
Now, I'm assuming that the user (you in this case) are not viewing/consuming 1350 image files at once, so there's a workaround called AJAX. You pull down the images that you need instantly, and have a JavaScript running that will pull down images as you scroll.
One jQuery library that does this is GitHub - webcreate/infinite-ajax-scroll: Turn your existing pagination into infinite scrolling pages with ease
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
very cool response! - thank you mister Nathan Minier.
(Intuitively) I was afraid of this part actually. This sucks.
I was thinking to make multiple pages with fewer number of images to load (as my backup plan).
Your plan to load as I scroll, ugh, it's hard (for me as a beginner into html helper languages).
Is a good idea - dont take me wrong. It's not impossible, but hard for me at my level.
Another idea is to use variable in javascript... i have no idea if it will work. I'm thinking on variants. I will have to test/try. But is faster to ask. If you have other alternatives (to load faster) put your answer here please.
Thank you!
|
|
|
|
|
Another option: if you don't have an actual need for the images to be individual, make sheets, each of which has a lot of images. Now, each call will load hundreds of images at a time, depending upon how many you put on a sheet -
Then - if you need individual image access, have the option to load images from a single sheet as individual when (something, like a button) on that sheet is clicked.
You may even be able to put larger images on the image-sheets (first paragraph) for better visibility.
Ravings en masse^ |
---|
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
|
You are using tunnel vision (i.e., fixed on a single idea) with the sprites.
Open your favorite image editor.
Create a blank page.
Paste a lot of your little images on it
Save it as a single image (jpg, for example (smaller than png))
Now a single image will allow your users to view many images.
Something you've seen before, like this: https://assets.awwwards.com/awards/external/2017/07/59689b0d0ea87.jpg[^]
Ravings en masse^ |
---|
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Greetings experts,
I am not sure if this question fits into this forum but please let me know if not.
We have a domain name, let's call it serverA.
This server hosts our website.
This website is hosted internally.
Currently, employees view this site by typing the following on address bar:
http://serverA/departments/
We would like to mask this domain URL so that employees can type:
http://public/departments/
and the website will display same content it was displaying under http://serverA/departments/
We have asked our infrastructure team to handle this by using forwarding under DNS but they tell us this is not possible.
Is this true that it is not possible?
If this is not possible as they say, any ideas how we can handle this?
This is a WordPress site hosted in IIS.
Thanks in advance.
modified 19-Nov-18 9:12am.
|
|
|
|
|
If you're looking at bare machine names (no "." in the name), then you'll need a new "A" or "CNAME" record on your internal DNS server pointing to your web server.
If it's public domains, then you'll need to control the domain you want to use. Again, you'll need an "A" or "CNAME" record on your public DNS server pointing to your web server.
It should be fairly straightforward to set up, so it sounds like there's been some miscommunication somewhere along the line.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thank you very much sir.
I thought as much.
|
|
|
|
|
new to php and trying to understand the use of and management of sessions
assumptions are: The entire site would be https and users would have to login to do anything and clicking on a saved link would realise the user wasn't logged in and auto redirect to the login page
session seems to be the appropriate? way to control whether logged in or not by doing session_start() at the beginning of each page and then looking at the variables that are set by the login page
my searching and reading suggests that sessions can be copied/hijacked and used to access pages as a user and certainly closing the page and then re-opening doesn't crash the session although closing the browser does
question 1. providing my logout function clears the session using array() and then destroys it, is there any other reason/time for me to use session_regenerate_id() ?
question 2. if hijacking/copying is possible how does a regular (timed?) obliterate, destroy, regenerate help this in any way? because it seems to me that my target page wouldn't be able to tell the difference between a copy and a valid new session
question 3. is there anything else I need to do for good practice
|
|
|
|
|
Hi, I have a web API method and it returns IEnumerable<cases>. Cases is a wrapper class of "Proc" Class. I am consuming this web API from my client. If Proc has count 0, I can able to get data in my client from Web API. When Proc has value (greater than count 0), I get error "Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host". I am working in VS 2017 and .Net Core 2.1 Please advise
Cases.cs
public partial class Cases
{
public CaseDetails()
{
CaseProcedures = new HashSet();
}
public int Id { get; set; }
public int UniqueNumber { get; set; }
public HashSet Proc { get; set; }
}
Proc.cs
public partial class Proc
{
public int Id { get; set; }
public int CasesId { get; set; }
}
Balasubramanian K.
|
|
|
|
|
Yeah, you do know that a 401 code is an authorization failure, I trust.
The W3C is your friend! The HTTP 1.1 status codes apply to 1.2 as well.
HTTP/1.1: Status Code Definitions
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Greetings experts,
My partner that handles classic ASP (yes, we still use it) but he is on vacation for a month and I am backing her up.
I have not used classic ASP in more than 10 years.
Yesterday, one of our users tried to search for her parcel on the website and ran into the following error:
The system cannot find message text for message number 0x80040e4b in the message file for OraOLEDB
D:\config/FunctionSubTyler1.inc, line 62
Here is the function where the error is coming from:
Function check_null_var(var)
If IsNull(var) Then
check_null_var = ""
Else
check_null_var = var
End If
End Function
and the offending line (line 62) is on this bolded line:
Else
check_null_var = var
I tried to rewrite that function like this:
Function check_null_var(var)
check_null_var = "'" & Replace(var,"'","''") & "'"
End Function
However, this function is giving me an error. Not sure if it is because it is wrapped around oracle query.
Any ideas why this is causing the problem?
Thanks in advance for your help
|
|
|
|
|
while looking for some pre-made style sheet to save me figuring out styling a button (minimal web page, but default button is terrible looking)
through in the link to a style sheet, and almost nothing.
"Well, actually that is okay, any style sheet I add on, I don't really want changing all the basic elements"
look up documentation,
button, where is button css?
add stuff
These are not old resources that I am finding, so my question and confusion is why use an anchor tab instead of button?
- YES - do this if actual behaviour is that of anchor link.
- when using as button for interaction. this is the target question.
- [push up on nerd glasses] Not all browsers support styling button, but do support styling the tag, so its better to do it this way.
|
|
|
|
|
maze3 wrote: but default button is terrible looking) It is not meant to look sexy, it is meant to be a recognizable button.
I'm confused why the world is spending so much money on a solved problem, just for the (temporary) "look" of things.
Take a look at your scissors - are they adorned in any way? Sexy-looking? Or do they look like tools that are built for a specific job?
Bastard Programmer from Hell
If you can't read my code, try converting it here[^]
"If you just follow the bacon Eddy, wherever it leads you, then you won't have to think about politics." -- Some Bell.
|
|
|
|
|
Hi,
I have build/bind treeview of bootstrap dynamically (runtime ) using json
I have 2 problems
1) white color with tree node .how can I solve this issue (attached is snap short for reference)
2) click "+" tree node is not working on any node … as I told I build these node on runtime what to do to solve these issue
Note:
1)Red color showing white spaces which need to remove.
2) yellow color showing click is not working on "+" sign which I build runtime
3) green color showing ( "+" ) click is working fine because its design tree on design time not run time build (its static )
)
what to do to remove Red and yellow mark error or bug
|
|
|
|
|
Hi,
How can I tell Apache Tomcat 9 to run on ipv4 instead of ipv6 on Windows? I know you have to create setenv.bat in Tomcat 9.0\bin, but I haven't find what to add in it for Windows, only for Linux.
|
|
|
|
|
|
I m facing a problem while login on a website.
as i click on login after filling my user name & password en error comes.
which is this..
System.Net.WebException: The remote server returned an error: (405) Method Not Allowed. at System.Net.HttpWebRequest.GetResponse() at AwasPlusRegistration.APServiceConsume.consumePostWebMethod(String url, String data) at AwasPlus_APLogin.LoginUse
This is full error massage
Please give me a proper solution.
i stuck in this issue.
Awaiting for response
|
|
|
|
|
If it's your website, then you need to fix your code.
If it's not your website, then you need to contact the owners of the site, and tell them to fix their code.
NB: We can't tell you how to fix the code, because we can't see the code.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi everybody
When I try to open my website (URL)/login.aspx in chrome, it switches in the bar to (URL)/login and goes to "HTTP Error 404.0 - Not Found" page.
but in IE, it works fine.
any idea about this problem
|
|
|
|
|
Please do not post the same question in multiple forums.
|
|
|
|
|
What would be a better design for CRUD pagination.
1: Send the Page and Show to the controller and just grab the records needed.
Get the record count first so I have a total, then get the records
2: Get all the records, send them down and use the client to take the ones I need.
Since I have all the records, I can get a count.
3: Or change my model, so I have a column for count, and then shift the records to an array for 1 single call.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 1-Oct-18 18:29pm.
|
|
|
|
|
In most LOB (WPF) applications I have built the number of records is quite limited <1000 usually. So I get the entire data set.
When doing web apps I treat the UI the same as a desktop app IE you can scroll horizontally in a grid but the vertical is a fixed size and the user scrolls WITHIN the grid, never using pagination but implementing filtering.
I know this is anathema to most web developers but I find it much easier to use and control the grid.
Never underestimate the power of human stupidity
RAH
|
|
|
|
|
I get what your saying.
I have cards or square tiles, 4 across for large displays, 1 for cell phones and a pagination of buttons at the bottom.
I ended up creating a new model with count and an array of records, choosing to create a specific query for skip and take.
It's pretty fast still and just one call for data.
I suppose the question boils down to preference.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|