First client: Login & Register Request - (Added AJAX requests & Jquery + Javascript)

[jcvenom]

I recently started freelancing 2 weeks ago and I got a request from a client (Login + Register) I added a few bonus features only because It was my first freelance job. I hope you like what I have done and I hope To receive clients from this, I may give show to url to some people only If request.

The site login is built with CSS, HTML, PHP, JQUERY,AJAX & JAVASCRIPT, It uses AJAX requests along with Javascript along with a clever technique of mine to load content onto a page without having to create external pages and use the Jquery load function :P.Nothing on this page refreshes, everything is loaded server side (I added this as a bonus for the client :) ).

[ATTACH=CONFIG]1777[/ATTACH][ATTACH=CONFIG]1778[/ATTACH][ATTACH=CONFIG]1779[/ATTACH][ATTACH=CONFIG]1780[/ATTACH][ATTACH=CONFIG]1781[/ATTACH]

The image slider in the last picture is my custom modification it also changes every 5 secs.

Total Cost for client: £70

I would like to get some feedback or negativity thanks (I'm not a web designer btw) :P

Jcvenom

- - - Updated - - -

The design was what the client requested :)

[Tangled]

Nice look :)

[jcvenom]

Nice look :)

Thanks you :)

[SRB]

"Clever technique of mine"

Very much sounds like you're just isn't ajax as intended, as a return action.

Care to elaborate on your definition of that part?

[jcvenom]

"Clever technique of mine"

Very much sounds like you're just isn't ajax as intended, as a return action.

Care to elaborate on your definition of that part?

Could you explain your question clearer? Btw I don't have to share my technique's with you nor do I've to explain in great detail,so don't wish to answer your question

Edited December 31, 2014 by jcvenom

[Coly010]

Could you explain your question clearer? Btw I don't have to share my technique's with you nor do I've to explaon in great detail, soi don't wish to answer your question

You don't have to no, I'll agree with that, but what difference is it really going to make, its not exactly going to set you apart from him.

What he means is where is tha AJAX side to this? jQuery and AJAX are separate things. AJAX is mainly about sending requests asynchronously to the server and interpreting the results so you can update parts of the page or show certain things based on certain criteria, such as a search box that populates a <div></div> with results as a user types their search query, eliminating more and more results with every keypress.

You say you have a clever technique that loads all the pages and then it doesn't refresh.

That isn't very difficult, I did the same thing with the Login / Register page I have posted recently on here.

All it requires is to set up a <div> for each page.

• Give it an ID relevant to the page in question. Using css set the display: none; for each of the pages/divs that you don't want to show.
  
• For the page you are showing, Give it a class: class='active_page'
  
• Next you set up an onClick="" event for each of your links in the navigation.
  

 

Here comes the jQuery:

• Find the element with the active_page class : var active = $(".active_page");
  
• Hide the element with: active.hide();
  
• Remove the class from that element: active.removeClass("active_page");
  
• Add the active_page class to the page your showing: $("#page").addClass("active_page");
  
• Show the page: $("#page").show();
  

 

simplez.

I get your starting to do freelance, kudos to you for that and I hope you do get the clients you're looking for, but please don't be uptight about programming techniques etc.

Think about it, if every programmer was like you and didn't share their methods, how on earth would you for one have learned how to program and two anyone else learn how to program. Knowledge is supposed to be passed on, hence why we have education systems.

Edited December 31, 2014 by Coly010

[jcvenom]

You don't have to no, I'll agree with that, but what difference is it really going to make, its not exactly going to set you apart from him.

What he means is where is tha AJAX side to this? jQuery and AJAX are separate things. AJAX is mainly about sending requests asynchronously to the server and interpreting the results so you can update parts of the page or show certain things based on certain criteria, such as a search box that populates a <div></div> with results as a user types their search query, eliminating more and more results with every keypress.

You say you have a clever technique that loads all the pages and then it doesn't refresh.

That isn't very difficult, I did the same thing with the Login / Register page I have posted recently on here.

All it requires is to set up a <div> for each page.

• Give it an ID relevant to the page in question. Using css set the display: none; for each of the pages/divs that you don't want to show.
  
• For the page you are showing, Give it a class: class='active_page'
  
• Next you set up an onClick="" event for each of your links in the navigation.
  

 

Here comes the jQuery:

• Find the element with the active_page class : var active = $(".active_page");
  
• Hide the element with: active.hide();
  
• Remove the class from that element: active.removeClass("active_page");
  
• Add the active_page class to the page your showing: $("#page").addClass("active_page");
  
• Show the page: $("#page").show();
  

 

simplez.

I get your starting to do freelance, kudos to you for that and I hope you do get the clients you're looking for, but please don't be uptight about programming techniques etc.

Think about it, if every programmer was like you and didn't share their methods, how on earth would you for one have learned how to program and two anyone else learn how to program. Knowledge is supposed to be passed on, hence why we have education systems.

If he had asked it like that i would've glady explained but the way you have specified isn't how i did mine although it could be a good technique and AJAX isn't used to load a page only jquery, I mean't the forms use AJAX

[Coly010]

If he had asked it like that i would've glady explained but the way you have specified isn't how i did mine although it could be a good technique and AJAX isn't used to load a page only jquery, I mean't the forms use AJAX

You should realise by now that there is more than one way to do something in programming :)

[jcvenom]

You should realise by now that there is more than one way to do something in programming :)

That i know

[Sim]

You cocky little dude jcvenom.

[Coly010]

You cocky little dude jcvenom.

[MENTION=69823]jcvenom[/MENTION]

Reading your first post, and your replies to what people have said, what Sim has said, that's how you made me feel by the time I finished reading it. There's a difference in being confident and cocky. Confidence is good, cocky isn't, it borderlines arrogance, and I would never want to work with someone who is arrogant. Reign yourself in a bit. You might have got £70 from your first freelance job, there's people here that have made a hell of a lot more.

What you have done is good, I wont take that away from you, it's just your attitude in this thread isn't the greatest.

Good Luck with your next client :)

[Sim]

Regardless, since I am on PC now. I am sure he did something like this:

http://api.jquery.com/load/

 

$("example").click(function(){
   $( "#content" ).load( "something/example1_feature.html" );
});

[jcvenom]

You cocky little dude jcvenom.

Im sorry guys i didn't realize i sounded cocky, i was just trying to sound smart but it's seems like I gave you guys the wrong impression of me what you read up there isn't how I behave normally I just tried to impress and i'm very bad at and i think i went to overboard and i do apologize sorry if i offended you :)

[Sim]

I don't care how cocky you are. I am VERRRYYY cocky, but I know when to be and when not to be. My cockyness truely show's when me & some friends are argueing over Skype about method's or concept's. =]

[jcvenom]

Regardless, since I am on PC now. I am sure he did something like this:

http://api.jquery.com/load/

 

$("example").click(function(){
   $( "#content" ).load( "something/example1_feature.html" );
});

I didn't as I stated no external pages are loaded its all in the divs for example

<div class="link"><a href="about">About</a></div> <!--Link-->
<div class="something" page="about">

</div>
<!--All you would need to do is this-->
$(document).ready(function(){
$('body').on('click',"*[href]",function(e){
var page = $(this).attr("href");
e.preventDefault();
locatePage(page);
});
function locatePage(request){
if(!request) return false;
var content = $('.something'),
content.find(request).attr("page");
setTimeout(function() {
	$(".something[page='"+request+"']").fadeIn(200);
	$(".something[page!='"+request+"']").fadeOut(100);		
},500);
}
});

[Guest]

I didn't as I stated no external pages are loaded its all in the divs for example

<div class="link"><a href="about">About</a></div> <!--Link-->
<div class="something" page="about">

</div>
<!--All you would need to do is this-->
$(document).ready(function(){
$('body').on('click',"*[href]",function(e){
var page = $(this).attr("href");
e.preventDefault();
locatePage(page);
});
function locatePage(request){
if(!request) return false;
var content = $('.something'),
content.find(request).attr("page");
setTimeout(function() {
	$(".something[page='"+request+"']").fadeIn(200);
	$(".something[page!='"+request+"']").fadeOut(100);		
},500);
}
});

I'm sorry you had to, your super secret way.. is... well.... not so super

[Coly010]

Im sorry guys i didn't realize i sounded cocky, i was just trying to sound smart but it's seems like I gave you guys the wrong impression of me what you read up there isn't how I behave normally I just tried to impress and i'm very bad at and i think i went to overboard and i do apologize sorry if i offended you :)

You haven't offended anyone :) I know the way you normally are because of when I tried (and i failed lol) to help you with your zoom problem. I hope I didn't sound mean in any of my posts, I was only intending to make you aware of how you sounded.

[MENTION=69823]jcvenom[/MENTION] , you don't need to try to impress people with how you write a post. When writing a post, write it in such a way that your comfortable writing it, your work will impress for you :)

[jcvenom]

I'm sorry you had to, your super secret way.. is... well.... not so super

I never said it was super you see, you may not understand it's use but its meant to work for the layout i have built and it does so the only thing that's lost at the moment is you :)

- - - Updated - - -

 

You haven't offended anyone :) I know the way you normally are because of when I tried (and i failed lol) to help you with your zoom problem. I hope I didn't sound mean in any of my posts, I was only intending to make you aware of how you sounded.

[MENTION=69823]jcvenom[/MENTION] , you don't need to try to impress people with how you write a post. When writing a post, write it in such a way that your comfortable writing it, your work will impress for you :)

Thank you [MENTION=65530]Coly010[/MENTION] and thanks for trying to help me yesterday it really got me thinking and i finally fixed it and i'll bare this in mind next time.

[KyleMassacre]

Well I will give credit for orginality but it just seems like a lot of js for something so little Where you can do something like .show(), .hide(), or .toggle().

[Sim]

Well I will give credit for orginality but it just seems like a lot of js for something so little Where you can do something like .show(), .hide(), or .toggle().

A lot of jS? It's like 10 lines? ;\

[jcvenom]

Well I will give credit for orginality but it just seems like a lot of js for something so little Where you can do something like .show(), .hide(), or .toggle().

I do appreciate the fact that yous i giving feedback thank you but as for your response i do get theres other ways/techniques as [MENTION=65530]Coly010[/MENTION] said maybe you could show me an example? And i have individually PM yous the url

[KyleMassacre]

A lot of jS? It's like 10 lines? ;\

More like 16 ;)

 

I do appreciate the fact that yous i giving feedback thank you but as for your response i do get theres other ways/techniques as @Coly010 said maybe you could show me an example? And i have individually PM yous the url

I won't lie to you and tell you that I excel in js and anyone who knows me will tell you the same :p and I would like to add that the page does look better live than in the screenshots, I hated the Textbox looking area in the pics but going to the page it does look a lot better so I have no real complaints about it other than the colors since it looks a bit bland but it works.

As for your question I am currently mobile for the day but I will try and find something for you. I know I have an example on my computer somewhere.

[jcvenom]

More like 16 ;)

 

I won't lie to you and tell you that I excel in js and anyone who knows me will tell you the same :p and I would like to add that the page does look better live than in the screenshots, I hated the Textbox looking area in the pics but going to the page it does look a lot better so I have no real complaints about it other than the colors since it looks a bit bland but it works.

As for your question I am currently mobile for the day but I will try and find something for you. I know I have an example on my computer somewhere.

Thank you very much the live version with the login will be posted shortly

[SRB]

I didn't as I stated no external pages are loaded its all in the divs for example

<div class="link"><a href="about">About</a></div> <!--Link-->
<div class="something" page="about">

</div>
<!--All you would need to do is this-->
$(document).ready(function(){
$('body').on('click',"*[href]",function(e){
var page = $(this).attr("href");
   e.preventDefault();
   locatePage(page);
});
function locatePage(request){
if(!request) return false;
   var content = $('.something'),
   content.find(request).attr("page");
   setTimeout(function() {
       $(".something[page='"+request+"']").fadeIn(200);
       $(".something[page!='"+request+"']").fadeOut(100);        
   },500);
}
});

So no graceful degrading then?

So if a user disables javascript, the site is unusable for them?

It's better to keep the links AND pages, for people who refuse to enable it (You'd be surprised at the number that amounts to).

For example; jsFiddle

This loads divs on click IF javascript is enabled. If it's not, it would load index.php and page.php respectively.

Of course, if you are using mod rewrite (Which hasn't been stated), your code may work around it. That's a big if though.

[Coly010]

So if a user disables javascript, the site is unusable for them?

It's better to keep the links AND pages, for people who refuse to enable it (You'd be surprised at the number that amounts to).

he has a point. For a project that I'm working on (which has been set to the side for now) I use javascript and jquery a lot, so have had to consider what to do if a user disables it. One of the best solutions is what [MENTION=50378]Guest[/MENTION] has stated, another is redirect them to a mobile site that doesn't use javascript.

Finally the one I find most comical is Facebook's approach: