Web Development

Fonts Will Not Display As Intended Using @font-face in CSS.

28-Jan-18 9:16

There is no single "right way". It mostly depends on the hosting platform, and what the project's requirements are.

The common components between all web sites are javascript, css, and HTML5. If you are fluent in those three things, you're good, because whatever else you need to know can be learned.

You can essentially use anything anywhere, so it's mostly all about what YOU are comfortable with.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

modified 29-Jan-18 21:19pm.

Member 1364829928-Jan-18 5:04

Member 13648299

28-Jan-18 5:04

I'm trying to use the @font-face rule in CSS so that the typefaces I choose appear consistently no matter what fonts a user has available on their device. However, the fonts are not appearing even on my system. So, I wanted to make sure I'm formatting the code correctly (as I'm definitely no expert on this).

Here's some of the code from the site I'm building. Please let me know what should be done to display the fonts as intended.

@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: MrsEaves-Roman;
	src: url("/fonts/MrsEavRom.lwfn") format("lwfn");
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
}

@font-face {
    font-family: Priori-Sans-Regular;
	src: url("/fonts/PriorSanReg.ttf") format("ttf");
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
}

@font-face {
    font-family: Chalet-London;
	src: url("/fonts/Chalet-LondonNineteenEighty.otf") format("otf");
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
}


.at-hero-head {
	font-family: "MrsEaves-Roman";
	font-size: 32px;
	text-align: left;
	color: ffffff;
}

.at-hero-head-chalet {
	font-family: "Chalet-London";
	font-size: 32px;
	text-align: left;
	color: ffffff;
}

Re: Fonts Will Not Display As Intended Using @font-face in CSS.

luplup29-Jan-18 1:26

luplup

29-Jan-18 1:26

Maybe you just miss the quotes on the font-family, like at bottom "MrsEaves-Roman".
I dont use font-face so i dont know exactly if you need something other... verify the url path too.

"Appear consistently", not exactly, depending of the font file type and what the browser accept.
So you have to load 3-4 "identical" fonts files type to be "cross browser" with the same font.

modified 29-Jan-18 8:03am.

MVC5 Slow File Upload

#realJSOP26-Jan-18 9:27

Re: MVC5 Slow File Upload

26-Jan-18 9:27

Has anyone else observed the abysmal upload speed of the File Upload functionality in MVC5?

It takes a couple of minutes to upload a 25mb file, but only a second or two to download the same file.

malkovich19887-May-19 3:22

malkovich1988

7-May-19 3:22

need to configure the router 192.168.1.1

Re: MVC5 Slow File Upload

#realJSOP7-May-19 4:03

Linking database to a html page

7-May-19 4:03

0) It's not the router

1) This question is a year and a half old.

Member 1364494625-Jan-18 16:15

Member 13644946

25-Jan-18 16:15

How can I put a database into a html page.plz forgive me if I ask some wrong question as I am a beginner BCA 1ST SEMESTER.
PLS GUIDE ME

Re: Linking database to a html page

Richard MacCutchan25-Jan-18 22:31

Richard MacCutchan

25-Jan-18 22:31

You can't. The database is managed in the backend server. Take a look at Lesson 1: Basic web concepts – Part 1 – How to Build Websites[^].

Re: Linking database to a html page

Valecia_cho8-Feb-18 14:50

Re: Linking database to a html page

8-Feb-18 14:50

I'm currently working on a project that uses the very same concept. So first thing: you need more than just HTML, but let's start with databases. You can start by using MySQL. Then you're going to need PHP to handle that data i.e. taking it from your database onto your webpage. This is where learning JSON, and by extension JavaScript, is going to actually make this work. Next up on your front end, your webpage, you'll need to use JavaScript with your HTML to get that database on the screen.

Also, what's BCA?

I did have some programming knowledge before doing this and some basic grasp of HTML and JavaScript before embarking on this sort of thing.

Oh one thing that you may find useful, before your website goes live, is XAMPP. It is a local server and has MySQL rolled into one platform. I found it very useful. IT's a great way of testing out your new website without having to spend anything just yet. Although with XAMPP it's still not live, it's good the testing stage.

Please excuse the excessive amounts of info. Welcome to the world of coding.

Richard MacCutchan8-Feb-18 22:33

Richard MacCutchan

8-Feb-18 22:33

This message was not meant for me.

Putting Data Onto HTML Using JavaScript

Valecia_cho24-Jan-18 14:58

24-Jan-18 14:58

I'm trying to get some JavaScript to unpack some data using a JSON parse from a separate bit of PHP. Here's what that JSON parse looks like:

[{"ID":"0","Item":"A","Price":"100","Stock":"2214"}, {"ID":"1","Item":"B","Price":"100","Stock":"2214"}....to whatever]

Here's the Javascript that handles all of that:

JavaScript

txt += products[i].ID + ": " + products[i].Item + " \n" + "Price: " + products[i].Price + " \nStock availability: " + products[i].Stock + " \n\n";

$("#itemSelection").append($("<option></option>").text(products[i].Item  +"" + products[i].Price).val( products[i].Price ));

This is actually the body of a for loop. So that 1st line unravels the string of data from before and the next line then displays that on a HTML dropdown box. Of course it displays the item and the price, but the actual value of the selection in the background is just the price. Is there a way that the value of the selection can be both the name of the item and the price? Moreover, is there a more efficient way of doing this, since my method for getting the selected item from the drop box into a form is the next bit.

So as part of the aforementioned for loop, this just take that info and sticks it into an array:

JavaScript

sqlStockArr.push( new sqlStock(products[i].Item, products[i].Price) );

Everytime a user makes a selection, this next bit takes the text, value and position of the selection:

var a = $( "#itemSelection option:selected" ).text();
var b = $( "#itemSelection option:selected" ).val();
var c = $("#itemSelection option:selected").index();
var selArrItem = sqlStockArr[ c ].item;
	var selArrPrice = sqlStockArr[ c ].price;
	
	$( document ).ready( function(){
		$("#customerSelection").append($("<option></option>").text(a).val(b));
		
		selectedArr.push( new sqlStock(selArrItem, selArrPrice) );
	
		
		total += sqlStockArr[ c ].price;
		
		$("#printPrice").text(total);

Pretty sure I've just made a mess of this. Also please note that I've only included the main chunks of code. If it was part of a function or something, that's not really the issue. Anyways, what you can see is once something has been selected from the aforementioned itemSelection and put into the customerSelection using .text(a).val(b), it does the same kind of thing as before. Another array is made to handle all of that data. Again, is there a less messy way of doing things.

Real sorry if this is just a confusing pile of mess. If anyone can offer up some constructive critique, please go right ahead.

Nathan Minier25-Jan-18 5:17

Nathan Minier

25-Jan-18 5:17

Valecia_cho wrote:
Is there a way that the value of the selection can be both the name of the item and the price?

There sure is, and it'll save you a lot of pain down the road as well:

JavaScript

...
for(var i=0;i<products.length;i++){
   $("#itemSelection").append($("<option></option>").text(products[i].Item  +"" + products[i].Price).val(i));
}

Then your detail selection becomes:

JavaScript

var idx = $( "#itemSelection option:selected" ).val();
var selected = products[idx];

In short, don't recreate objects that you already have available. Use the same collection, it has all the data that you need and much easier to just use it than trying to update a subordinate collection. Make your presentation dance to the tune of your models, not the other way around.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Valecia_cho8-Feb-18 14:00

8-Feb-18 14:00

That worked great. Looks so much more efficient.

Could I also ask: Is there a way of controlling the position the price and the item? I want them to be on opposite ends of the form.

I'm getting along great with the backend and data handling. That was the basic premise behind this project, but I want to make this look professional. I want to be able to get this website live and give myself an edge on the career front. Any advice on that end you could provide?

Thanks

Nathan Minier12-Feb-18 1:24

Nathan Minier

12-Feb-18 1:24

Valecia_cho wrote:
Could I also ask: Is there a way of controlling the position the price and the item? I want them to be on opposite ends of the form.

I'm not exactly clear on what you're asking here. I don't want to assume, so I'm not going to speculate.

Valecia_cho wrote:
I want to be able to get this website live and give myself an edge on the career front. Any advice on that end you could provide?

This one is a bit trickier. I'm a back-system type as well, and developing good UX is definitely not a native talent for me. Fortunately, there are a number of tools to make life easier.

There are a few styling/functionality frameworks out there that will lend a real professional look and feel to your projects. I don't generally advocate framework bloat, but using something like Bootstrap can make it easy to build a clean, responsive page. There are other options, but this is the one that I prefer, largely because there are versions that I can strip jQuery out from.

Other than that, it helps to take a look at some designer-oriented blogs and sites to keep abreast of trends and techniques. Design work takes practice and is a genuine skill. One good one that I've read for years is Smashing.

I hope that helps.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Valecia_cho18-Feb-18 9:01

18-Feb-18 9:01

So if you look at a POS system in real life. Items usually on the far left, price on the far right. In my case they bunch up to the left.

How to start a job listing,directory,ad site?

Nathan Minier20-Feb-18 1:28

Nathan Minier

20-Feb-18 1:28

No clue about POS systems, last time I worked retail I was grateful that the register was even electric.

That's just a flow control issue. Seriously, take a look at Bootstrap. Not only do you get responsive content, you get a pretty decent column layout system to boot.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

savedlema22-Jan-18 11:13

savedlema

22-Jan-18 11:13

Peace be with you all,

So, I would like to set up a website with the following:

- Job listing where companies can list job openings and people can apply
- Business directory where organizations can list themselves and their main activities
- Ads component where people can put advertisements for a particular time frame

I'm looking for an advice on the best way to accomplish this. I know that there are some Joomla extensions that can do this, but also I see there are specially designed scripts/web applications that does this which have been there even before the coming of Joomla and are still in use. As an example, I want something like this website (if links will be allowed here, otherwise its zoomtanzania dot com)

Can you guys advice what would the best option/path for me to take?

Re: How to start a job listing,directory,ad site?

A_Griffin25-Jan-18 0:39

A_Griffin

25-Jan-18 0:39

The "best" option, in any endeavour, is to work to your strengths. From your post, I suspect your best option is to be a manager and find someone to work with who has the skills to do this. There are a number of different approaches / technologies available, and none is "best" in itself.

Note to self

#realJSOP21-Jan-18 3:00