Jump to content

Nic727

Members
 View Profile  See their activity

  • Posts

    269

  • Joined

  • Last visited

 Content Type 

Posts posted by Nic727

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    6 hours ago, dsonesuk said:

    You just need to create a PHP script to validate, and return a specific message for the error that relates to an input if validation fails. Check if specific error is not blank, then you can add a specific class  or styling attribute, as you already have for JavaScript to represent that there was an error. You can either validate on same php form page, until it passes validation then send to different page for further processing.

    ok, because for now I have that : 

    // Check that data was sent to the mailer.
        if (empty($prenom) || empty($nom) || empty($courriel) || empty($suj) || empty($message) || !filter_var($courriel, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

    If I had the same if as in Javascript, but for the PHP validation, is it a http_response_code(400) or it's another code?

    Also, I guess I can't actually change my border colors via the php code right? Since I can't retrieve input and add css via the php file...

     

    Thank you

    Form validation help (regex and PHP)

    in JavaScript

    Posted

    Ok thank you.

     

    I also found out how to make it works. Is it correct like that or I can make it shorter? 

    $("#ajax-contact").submit(function(event) {
    
    event.preventDefault();

    // Get the form.
    var form = $("#ajax-contact");
     
    // Get the messages div.
    var formMessages = $("#form-messages");
    var prenomMessage= $("#prenom-message");
    var nomMessage= $("#nom-message");
    var emailMessage= $("#email-message");
    var sujetMessage= $("#sujet-message");
    var messageMessage= $("#message-message");

    // TODO
    // Serialize the form data.
    var formData = form.serialize();

    // Get the inputs
    var $prenom = $("#prenom");
    var $nom = $("#nom");
    var $email = $("#courriel");
    var $sujet = $("#sujet");
    var $message = $("#message");
    // Regex              
    var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
    
    // Testing Regex
    if(regex1.test($prenom.val())==false){
        $prenom.css({"border-color":"red"});
        prenomMessage.addClass('error');
        prenomMessage.text("Votre prénom est requis ou est invalide");
    }else{
        $prenom.css({"border-color":""});
        prenomMessage.removeClass('error');
    }
    if(regex1.test($nom.val())==false){
        $nom.css({"border-color":"red"});
        nomMessage.addClass('error');
        nomMessage.text("Votre nom est requis ou est invalide");
    }else{
        $nom.css({"border-color":""});
        nomMessage.removeClass('error');
    }
    if(!$.trim($email.val()).length){
        $email.css({"border-color":"red"});
        emailMessage.addClass('error');
        emailMessage.text("Votre adresse email est requise ou est invalide");
    }else{
        $email.css({"border-color":""});
        emailMessage.removeClass('error');
    }
    if(!$.trim($sujet.val()).length){
        $sujet.css({"border-color":"red"});
        sujetMessage.addClass('error');
        sujetMessage.text("Un sujet est requis");
    }else{
        $sujet.css({"border-color":""});
        sujetMessage.removeClass('error');
    }
    if(!$.trim($message.val()).length){
        $message.css({"border-color":"red"});
        messageMessage.addClass('error');
        messageMessage.text("Un message est requis");
    }else{
        $message.css({"border-color":""});
        messageMessage.removeClass('error');
    }
    if(regex1.test($prenom.val())==true && regex1.test($nom.val())==true && $.trim($email.val()).length && $.trim($sujet.val()).length && $.trim($message.val()).length){
        // Submit the form using AJAX.
            $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: formData,
            success: function(response) {
                // Make sure that the formMessages div has the 'success' class.
                formMessages.removeClass('error');
                formMessages.addClass('success');
     
                // Set the message text.
                formMessages.text(response);
     
                // Clear the form.
                $('#prenom').val('');
                $('#nom').val('');
                $('#courriel').val('');
                $('#sujet').val('');
                $('#message').val('');
            },
            error: function(data) {
                // Make sure that the formMessages div has the 'error' class.
                formMessages.removeClass('success');
                formMessages.addClass('error');
    
               // Set the message text.
               if (data.responseText !== '') {
                    formMessages.text(data.responseText);
                } else {
                    formMessages.text('Oops! An error occured and your message could not be sent.');
                }
            }
        })
    }                                   
})

    I added the if statement that verify if everything is true or have a length higher than 0 and included the ajax inside.

    Now need to add my website on the server and test some PHP codes. Now with PHP validation, just a little question, is it possible to change styling via PHP? For example, if someone remove JavaScript and I also want him to have border-color in red if false or show a message in my formMessages div? I guess the the message showing in my div is related to response and data.responseText here, but it still Javascript lol.

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    Thank you. Typing mistake is annoying because you can re-read the same thing multiple time without seeing the mistake hahaha.

    About the Required, I'm just thinking if it's not a bad move to remove the required attribute since it's a good HTML5 attribute. One way I could use that + JS is if I remove my submit function and make it a click function when clicking on the "submit" button. Like that it doesn't send any information to the browser yet and can add the submit() after my validation.

    Almost finished the Javascript part. Just a little issue that make the form submit. I know that I need something between my validation and my submit .ajax, but I don't know why or how. 

    $("#ajax-contact").submit(function(event) {
    
    event.preventDefault();

    // Get the form.
    var form = $("#ajax-contact");
     
    // Get the messages div.
    var formMessages = $("#form-messages");
    var prenomMessage= $("#prenom-message");
    var nomMessage= $("#nom-message");
    var emailMessage= $("#email-message");
    var sujetMessage= $("#sujet-message");
    var messageMessage= $("#message-message");

    // TODO
    // Serialize the form data.
    var formData = form.serialize();

    // Get the inputs
    var $prenom = $("#prenom");
    var $nom = $("#nom");
    var $email = $("#courriel");
    var $sujet = $("#sujet");
    var $message = $("#message");
    // Regex              
    var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
    
    // Testing Regex
    if(regex1.test($prenom.val())==false){
        $prenom.css({"border-color":"red"});
        prenomMessage.addClass('error');
        prenomMessage.text("Votre prénom est requis ou est invalide");
    }else{
        $prenom.css({"border-color":""});
        prenomMessage.removeClass('error');
    }
    if(regex1.test($nom.val())==false){
        $nom.css({"border-color":"red"});
        nomMessage.addClass('error');
        nomMessage.text("Votre nom est requis ou est invalide");
    }else{
        $nom.css({"border-color":""});
        nomMessage.removeClass('error');
    }
    if(!$.trim($email.val()).length){
        $email.css({"border-color":"red"});
        emailMessage.addClass('error');
        emailMessage.text("Votre adresse email est requise ou est invalide");
    }else{
        $email.css({"border-color":""});
        emailMessage.removeClass('error');
    }
    if(!$.trim($sujet.val()).length){
        $sujet.css({"border-color":"red"});
        sujetMessage.addClass('error');
        sujetMessage.text("Un sujet est requis");
    }else{
        $sujet.css({"border-color":""});
        sujetMessage.removeClass('error');
    }
    if(!$.trim($message.val()).length){
        $message.css({"border-color":"red"});
        messageMessage.addClass('error');
        messageMessage.text("Un message est requis");
    }else{
        $message.css({"border-color":""});
        messageMessage.removeClass('error');
    }
                 
        // Submit the form using AJAX.
        //...
}

    That's so long...

     

    But if I add the same kind of validation to my PHP (server side), will it not overwrite what I did in Javascript?

    Form validation help (regex and PHP)

    in JavaScript

    Posted

    5 minutes ago, Ingolme said:

    Could you explain what kind of result you're expecting from this statement? I can't tell you how to fix it if I don't know what it is supposed to do. 

    
(regex1.test($prenom.val())==true).onkeydown

    The trim() method belongs to the String object, it works like this: 

    
var x = "   String   ";
x = x.trim();

    It doesn't matter where you get the string,  but you have to call the trim() method on the string itself.

    About the keydown, my idea was that if the entry is false, make the border red like I already have, but when typing a true value, change border to default, but not sure it's possible without a keydown function. I think I will just forget this idea if it's too complicated.

     

    About the trim I was following this https://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery

    It seems to work for them. They are using This, but can I replace This by my variable?

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    24 minutes ago, justsomeguy said:

    That's why you need to validate it on the server also.  Pick one client-side validation method and use that, don't try to mix them.  Regardless of which one you choose, also validate on the server because they don't need to use your form or your Javascript to submit to your page.

    Ok thank you. Didn't know that.

    Also 

    if($.trim($email.val()).length == 0){
        $emaill.css({"border-color":"red"});
    }

    Doesn't work. Maybe something wrong in the way I wrote it.

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    ok… now how should I write that?

     

    I'm trying to make verification and if everything is good, submit with ajax, but I don't know how I should write it.

    For the moment I tried with multiple if statement like. 

    // Get the inputs
    var $prenom = $("#prenom");
    var $nom = $("#nom");
    var $email = $("#courriel");
    var $sujet = $("#sujet");
    var $message = $("#message");
    // Regex              
    var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
    
    // Testing Regex
    if(regex1.test($prenom.val())==false){
        $prenom.css({"border-color":"red"});
        console.log("TEST");
        return false;
    }
    else if(regex1.test($nom.val())==false){
        $nom.css({"border-color":"red"});
        return false;
    }
    else if($.trim($email.val()).length == 0){
        $emaill.css({"border-color":"red"});
        return false;
    }
    else if($.trim($sujet.val()).length == 0){
        $sujet.css({"border-color":"red"});
        return false;
    }
    else if($.trim($message.val()).length == 0){
        $message.css({"border-color":"red"});
        return false;
    }else{

        // Default style for inputs
        $prenom.css({"border-color":""});
        $nom.css({"border-color":""});
        $email.css({"border-color":""});
        $sujet.css({"border-color":""});
        $message.css({"border-color":""});                
        // Submit the form using AJAX.
        $.ajax({

    But I have two new problems. Since I now know that my code need to be perfect to prevent "Required" from stopping browser.

    1. Now it check only one at a time. So if $prenom is not correct, it doesn't check $nom. How to make it check all? I think I could make it work with OR statement by adding || between each of my verification, but how do I change CSS only for the one who has an error?

     

    2. Is it possible to verify email from the type="email" without using Regex? I tried with the trim, but it still add the default box shadow to my input box because the email is invalid. I would like to make that if the email is invalid, don't submit form (return false).

     

    Also, my border-color reset doesn't work if I change only one with an error, but not the other one. Is it possible to correct that? I put that into the else statement, but since it doesn't read it if some are not correct, it doesn't work. OR I could make another if where it change the border-color when typing a valid entry? But it's like #1, how to change only the border of the input I'm currently typing into?

    Form validation help (regex and PHP)

    in JavaScript

    Posted

    Ok I found the problem.

    The problem are the "required" inside my input. In fact, when clicking on the submit button, it's blocked by the required input. If I fill them all correctly but the one I have the code, my alert will shows up.

     

    Now instead of having a regex for the subject,  message (which can be whatever people want) and email (the browser already have the validation), is it possible with javascript to look if the entry is invalid (no text) to add my red border?

    Is this code correct for that? 

    if ($.trim($(anotherinput).val()).length == 0){

    From what I know the trim is removing all white space right?

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    ok thank you will look at that. I updated my post above with a regex problem, but I will sort it out later.

     

    EDIT: Yes it recognize the form as one object. Not sure why it doesn't submit.

    [object Object]: {0: Object, length: 1, prevObject: Object}
    0: Object
    length: 1
    prevObject: Object
    __proto__: Object

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    Look like it doesn't submit at all.

    But according to https://api.jquery.com/submit/

    I have wrote it correctly no?

     

    EDIT: If I change for .click instead of .submit it works. Something is wrong with my submit button… But I have it correctly written, I don't understand.

    <button id="submit" class="submit btn btn-dark" name="submit" type="submit" value="envoyer">

     

    Like that it can works, but I don't think it's the proper way to do that. 

    $("#submit").click(function() {

                    
                  
                    var $prenom = $("#prenom");
                    
                    console.log($prenom.val());
                  
                    var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
                  
                    if(regex1.test($prenom.val())==false){
                      $prenom.css({"border-color":"red"});
                      alert("ERROR!");
                      console.log('false');
                      return false;
                    }else{
                      console.log('true');
                      console.log('Submit');
                      $("form").submit();
                      return true;
                      
                    }
                  })

    Also, my regex doesn't work. My goal for the regex is to not allow numbers and special characters (\d\W) allow just one (\-\s\') at a time for a max of 20 characters, but I think I messed up since it doesn't work correctly.

    Form validation help (regex and PHP)

    in JavaScript

    Posted

    Even like that it doesn't work and no error. 

    $("form").submit(function(event) {
                    
                    var $prenom = $("#prenom");

                    var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
     
                    if(regex1.test($prenom.val())==false){
                        $prenom.css({"border-color":"red"});
                        alert("ERROR!");
                        return false;
                    }else{
                        return true;
                    }
                 })

    One thing is certain… My regex work outside of the submit function (but a little bit broken since I can't write 123 as a name, but can write Ba123 which is weird) and I tried to move my code around, but nothing work. I even tried with the variables outside the function. Also the fact that I don't have errors showing make it very hard.

     

    Here are my files if you want to look into it.

     

    That's the last page of my project and I will be working on it for a week :(

     

    contactform.zip

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    50 minutes ago, dsonesuk said:

    And don't reply with "its still not working" look at web developer tools, it should show a error why its not working, that's more helpful.

    I know, but I don't get errors. That's weird.

     

    Maybe my function is wrong. I tried to remove everything and just keep the regex and I added an new alert for "else" and it didn't show up either. I think my function is not working at all...

    I tried: 

    $(function() {
        // Get the form.
        var form = $('#ajax-contact');
     
        // Get the messages div.
        var formMessages = $('#form-messages');
     
        // TODO: The rest of the code will go here...
    // Set up an event listener for the contact form.
    $(form).submit(function(event) {
        // Stop the browser from submitting the form.
        event.preventDefault();
     
        // TODO
        // Serialize the form data.
        var formData = $(form).serialize();
     
        //REGEX
        var $prenom = $('#prenom');

        var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i;
     

        if(regex1.test($prenom.val())==false){
            $prenom.css({"border-color":"red"});
            alert("ERROR!");
            return false;
        }else{
          alert("GOOD");
        }
    });
});

    EDIT: If I only had my if outside the function, I have an alert when loading the page and everything is alright since it load my regex when loading the page. Not sure what is wrong with the function.

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    15 minutes ago, dsonesuk said:

    It's .val() NOT .value()

    Not working. Maybe something wrong with my regex or where I placed it? I'm sure I did the good thing by placing it before the .ajax, so it's not submitting, but something doesn't work.

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    I forgot to update my thread last night, but I already changed to that:

      

    //REGEX
        var $prenom = $('#prenom').value();
        /*var $nom = $('#nom');
        var $email = $('#courriel');*/

        var regex1 =  /[^\d\W]{2,20}[\-\s\']{0,1}/i;
     

        if(regex1.test($prenom)=false){
            $prenom.css({"border-color":"red"});
            alert("ERROR!");
            return false;
        }else{

    But still not working. I did try to add an alert, but doesn't show up.

    If I understand the verification correctly.

    - Javascript validation to add style

    - PHP validation to prevent mailing wrong things? If someone disable JS, is it possible to add styling with PHP or not? For example, my border-color will not change if JS is disable right?

     

    Also, I read somewhere that I don't need a Regex if my input type is "email" since the browser already check if it's ok or not. Is it correct?

    Form validation help (regex and PHP)

    in JavaScript

    Posted · Edited by Nic727

    Hi,

    I have some problems with my form validation. Here is my HTML which look good. 

    <div id="form-messages"></div>
                     
            <form id="ajax-contact" name="email" method="post" autocomplete="off" action="contact.php">
                <p>Les champs sont obligatoires*</p>
                    <div class="rowform"> 
                        <div class="half left">   
                            <label>Prénom*</label>
                            <input name="prenom" id="prenom" type="text" autocomplete="off" required>
                        </div>
                        <div class="half right">  
                            <label>Nom*</label>
                            <input name="nom" id="nom" type="text" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="rowform">
                        <label>Courriel*</label>
                        <input name="courriel" id="courriel" type="email" autocomplete="off" required>
                    </div>
                    <div class="rowform"> 
                        <label>Sujet*</label>
                        <input name="sujet" id="sujet" type="text" autocomplete="off" required>
                    </div>
                    <div class="rowform"> 
                        <label>Votre message*</label>
                        <textarea id="message" name="message" autocomplete="off" required></textarea>
                    </div>
                    <div class="end-form">    
                        <button id="submit" class="submit btn btn-dark" name="submit" type="submit" value="envoyer"><i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer</button>
                    </div>    
                </form>

    Here is my JS. For some reasons, my regex doesn't work. If I put it outside the submit part, it add the red border when loading the page, which is good for the code, but if I have it as bellow, it doesn't prevent the form from submitting and it doesn't add the red border. Do you have any ideas how it can do something like when submitting, check if regex ok, if all good, submit the form or don't submit. 

    $(function() {
        // Get the form.
        var form = $('#ajax-contact');
     
        // Get the messages div.
        var formMessages = $('#form-messages');
     
        // TODO: The rest of the code will go here...
    // Set up an event listener for the contact form.
    $(form).submit(function(event) {
        // Stop the browser from submitting the form.
        event.preventDefault();
     
        // TODO
        // Serialize the form data.
        var formData = $(form).serialize();
     
        //REGEX            <------------------------------ DOESNT WORK!
        var $prenom = $('#prenom');
        /*var $nom = $('#nom');
        var $email = $('#courriel');*/

        var regex1 =  /[^\d\W]{2,20}[\-\s\']{0,1}/i;
     

        if($prenom != regex1){
            $prenom.css({"border-color":"red"});
            return false;
        }else{

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData,
            success: function(response) {
                // Make sure that the formMessages div has the 'success' class.
                formMessages.removeClass('error');
                formMessages.addClass('success');
     
                // Set the message text.
                formMessages.text(response);
     
                // Clear the form.
                $('#prenom').val('');
                $('#nom').val('');
                $('#courriel').val('');
                $('#sujet').val('');
                $('#message').val('');
            },
            error: function(data) {
                // Make sure that the formMessages div has the 'error' class.
                formMessages.removeClass('success');
                formMessages.addClass('error');
     
                // Set the message text.
                if (data.responseText !== '') {
                    formMessages.text(data.responseText);
                } else {
                    formMessages.text('Oops! An error occured and your message could not be sent.');
                }
            }
        })
    }
    });
    

    });

    $('form').each(function() { this.reset() }) //reset form when refresh or reload the page instead of keeping the infos.

    Also, should I add regex to PHP or not? Is it ok just like that? 

    / Only process POST requests.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $prenom = strip_tags(trim($_POST["prenom"])); //Obligatoire
        $nom = strip_tags(trim($_POST["nom"])); //Obligatoire
        $nom = str_replace(array("\r","\n"),array(" "," "),$nom);
        $courriel = filter_var(trim($_POST["courriel"]), FILTER_SANITIZE_EMAIL);//Obligatoire
        $suj = strip_tags(trim($_POST["sujet"])); //Obligatoire
        $message = trim($_POST["message"]); //Obligatoire

        // Check that data was sent to the mailer.
        if (empty($prenom) || empty($nom) || empty($courriel) || empty($suj) || empty($message) || !filter_var($courriel, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $destinataire = "contact@nicolas-duclos.com"; //to or recipient

        // Set the email subject.
        $sujet = $suj; //Obligatoire

        // Build the email content. (Corps du message)
        $email_content = "Prenom : $prenom \r\n";
        $email_content .= "Nom : $nom \r\n";
        $email_content .= "Courriel : $courriel \r\n";
        $email_content .= "Sujet : $sujet \r\n";
        $email_content .= "Message :\r\n \r\n $message \r\n";
	
        // Build the email headers.
	    $semi_rand = md5(time());
	    $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
        $headers = 'From: '.$prenom.' ' .$nom.'<' .$courriel. '>'."\r\n";
        $headers .= 'Reply-To: '.$courriel."\r\n";
        $headers .= "Content-type: text/plain; charset=UTF-8"."\r\n";

        /* Variable email très importante sinon cela envoie deux fois */
        $mail = mail($destinataire,$sujet,$email_content,$headers);

        // Send the email.
        if ($mail) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

    Thank you for your help.

     

    PS: Should I keep last name as required? I know most people will skip last name and only write the first name… If I remove the required, should I keep the regex for it and if empty, make it like it's good to submit? Just don't want to have fake or impossible last name even if it's not required.

    changing color of required input when submitted

    in CSS

    Posted · Edited by Nic727

    33 minutes ago, Ingolme said:

    The :invalid selector is the one that you have to use for form fields that had an error. The default border is probably using the outline property or box-shadow property, try setting those to "none". Don't just copy the example code I gave, you have to use the :invalid pseudo-class along with a selector to the specific element you want to change. You also should experiment with different CSS properties to see which one overrides the default style.

    Well… I found that https://css-tricks.com/almanac/selectors/i/invalid/

    Look like it show my empty required field as invalid even if I didn't submit yet. Look like it will be better to use JavaScript for that.

    My topic should be moved to Javascript…

    field.png

     

    From what I saw from other contact form out there is that they don't have the "required" in the input and they only have some JS function to check if it's empty. A good idea for customization, but I think that the "required" option is important… But the "required" option prevent the form from submitting, so can't work with ajax text.

    changing color of required input when submitted

    in CSS

    Posted

    37 minutes ago, Ingolme said:

    You can use the CSS :invalid pseudo-class as in the following example:  

    
input[type=text]:invalid {
  border: 1px solid blue;
}

     

    Doesn't work. For some reasons it makes all my required field having my :invalid styles and if I try to submit empty field, the default borders are still appearing. I'm in MS Edge.

    2 Javascript questions

    in JavaScript

    Posted · Edited by Nic727

    Hmm.. Not working. Maybe it's because of this error.

     

    HTML1521: Unexpected "/body>" or end of file. All open elements should be closed before the end of the document.

     

    EDIT:

    Ok fixed. In fact it was because of an other script that I added for another page. I think it was creating a conflict. I did add the "check if element exist" before adding the script and it now works.

    I still have the unexpected end of file and I don't know why.

    2 Javascript questions

    in JavaScript

    Posted

    7 hours ago, justsomeguy said:

    If the code depends on elements on the page being there, then you need to put it in a ready handler.

    I already have one at the beginning of my js file

    $(document).ready(function(){

    For some reasons, if I replace that for $(function(){ it's not working even if in the jQuery website it shows as valid code.

    My code look like something like that: 

    $(document).ready(function(){
  
   var dateOptions = { year: 'numeric', month: 'long', day: '2-digit' };
            var exposure_feed={
    
                options:{
                    target:"exposure-feed",
                    username:null,
                    data:null,
                    fetch_url:null,
                    story_count:6,
                    show_title:!0,
                    show_subtitle:!0,
                    show_publish_date:!0,
                    cover_size_width:800,
                    cover_size_height:400,
                    format_date:function(e){
                        return e?e.toLocaleDateString('fr-CA', dateOptions):""
                    }},
    
                init:function(e){for(var o in e)e.hasOwnProperty(o)&&exposure_feed.options.hasOwnProperty(o)&&(exposure_feed.options[o]=e[o]);exposure_feed.fetch()},fetch:function(){if(null==exposure_feed.options.username)throw new Error("Missing username.");var e=new XMLHttpRequest,o="https://exposure.co/api/3/site/"+exposure_feed.options.username+"/stories";null!=exposure_feed.options.fetch_url&&(o=exposure_feed.options.fetch_url),e.open("GET",o,!0),e.send(null),e.onload=function(){exposure_feed.options.data=JSON.parse(e.response),exposure_feed.render()}},render:function(){for(var e=document.querySelector("#"+exposure_feed.options.target),o=exposure_feed.options.data,t="",s=o.site,r=0,i=o.stories.stories.length;i>r;r++)if(!(null!=exposure_feed.options.story_count&&r>+exposure_feed.options.story_count-1)){
                    var n=o.stories.stories[r];
                    t+='<div class="ex-story">',
                        t+='<a class="ex-stoy-link" rel="noopener noreferrer" target="_blank" href="'+n.urls.story_web+'" title="Link to '+n.title+" by "+s.full_name+'">',
                            t+='<div class="ex-story-img" style="background-image:url('+n.cover_photo.url+')">',
                                t+='<div class="bg-filter"></div>',
                                t+='<div class="infos-container">',
                                    t+='<div class="infos-left">',
                                        t+='<div class="infos">',
                                            0!=exposure_feed.options.show_publish_date&&(t+='<div class="blog-date travel"><h3>'+exposure_feed.options.format_date(new Date(n.published_at))+"</h3></div>"),
                                            0!=exposure_feed.options.show_title&&(t+='<div class="blog-name"><h1>'+n.title+"</h1></div>"),
                                        t+="</div>",
                                    t+="</div>",
                                    t+='<div class="infos-right">',
                                        t+='<div class="infos">',
                                            0!=exposure_feed.options.show_subtitle&&null!=n.subtitle&&(t+='<div class="blog-description">'+n.subtitle+"</div>"),
                                            t+='<div class="blog-authorname">'+s.full_name+'</div>',
                                        t+="</div>",
                                    t+="</div>", 
                                t+="</div>", 
                            t+="</div>",
                        t+="</a>",
                    t+="</div>"}e.innerHTML=t}};
    
            
            exposure_feed.init({
                'username': 'wwf', //Account username
                'story_count': 9, //Total number of stories to display (Maximum of 18)
                'show_title': true, //Show title of story
                'show_subtitle': true, //Show Sub-title of story
                'show_publish_date': true //Show publish date of story
                });
  });

    and on my HTML page I have this:

    <div id="exposure-feed"></div>

    2 Javascript questions

    in JavaScript

    Posted · Edited by Nic727

    Hi,

     

    I didn't want to create two topics, so here are my two questions regarding Javascript.

     

    1. I use the same Javascript file for all my pages. The problem is that I get some errors on some page because I don't use X script. Is it possible to make a script activating only when on a specific page like if page name is XX, load this code?

     

    2. I have a code working when between <script> on my HTML page, but when adding the code in my JS file, it doesn't work. What should I do to make the code working from the file?

     

    Thank you

    body height 100%

    in CSS

    Posted

    Hi,

    For my homepage I need html and body to be 100% of height.

    The reason is that I have a background slider which is 100% height and without body/html 100% height, it become 0 and background image doesn't show up.

    The problem is that on other pages, elements (images and texts) are out of body/html since they only take 100% of browser height. Can I use class to html tag or not? I tried with height auto and 100% to body only, but doesn't work for my homepage.

     

    One of the solution is to put height 100vh to my slider, but I know that 100vh is a bit buggy on Safari (IOS) since it doesn't take the bottom bar into consideration…

    Is there any way to get a true 100% height of my slider without html/body to be 100% too?

     

    Thank you

×
×
  • Create New...