Support

Account

Home Forums Front-end Issues If checkbox ticked then add a class

Solved

If checkbox ticked then add a class

  • Hi all,

    First time posting a question. 🙂 This is probably going to be a very basic one and I do normally find the answers to my questions from doing a quick search here, but after lots of searching I just can’t seem to find a combination that works. So, before I pull the rest of my hair out, I thought I’d just speed up the process and ask if a kind soul here can help with a basic problem.

    I have an ACF Custom Field (for videos with a title, image and URL) that also contains a Checkbox. Just one checkbox called YES with a question.

    I have a page full of video thumbnails. If you click on one, it opens a modal/popup containing the video player.

    If the user clicks on a video, where the Checkbox is checked, I want it to add a class to the modal/popup <div>.

    That’s it.

    The Checkbox name is: vid_freelance
    The Checkbox value is: yes : Yes
    And the modal/popup div class is: lity-info

    Many thanks in advance 🙂

  • Hi Nick,

    I’m no php expert so there might be a better solution than this, but maybe you should rather use the True / False field type.

    Add the if statement to your modal:

    <div <?php if( get_field('vid_freelance') ): ?>>
    	<?php echo 'class="lity-info"'; ?>
    <?php endif; ?>Modal content</div>
  • Thanks for your reply @barrycrous.

    Having the True/False option was a better idea. I’ve also changed it so instead of having to select true/false on every single video. You just choose under each director (true/false now named: ‘dir_signed’).

    Unfortunately, the modal is added using Javascript’s ‘prepend’. This is why I was hoping to check True/False separately. And then add a class to the ‘lity-info’ <div> if it was true. Like: <div class=”lity-info istrue”>

  • So are you having difficult adding the class because the modal gets generated by JavaScript?

  • Yes and no. I only mentioned the Javascript part, because I couldn’t use your PHP method.

    I’m just trying to detect if the chosen video is by a ‘signed’ director (or not) and if it is, then add the class.

    So, not actually changing the modal code at all. Except for the add class, of course.

  • Would it be possible to view the webpage?

  • It’s still under construction. If you check out the Home page, you will see all the thumbnails. The first one of the girls face is a ‘freelance’ the others are ‘signed’.

    If you choose a video and you hover the player, you should see the director’s name <h1> and the client/title of the video <h2>. There is also an <h3> with a static text about getting in contact. At the moment it’s set to: display: none;.

    What I want is, if the True/False field is set to ‘Freelance’, then the <h3> gets changed to display: block;.

    I’ve tried a gazillion things and if they don’t work I remove them, so at the moment, there is no code attempting to make it do anything.

    http://nickverburgt.com/theproducers.co/

    Many thanks in advance.

  • What if you add a class to the thumbnail’s <a> tag (that initiates the modal) which has the Freelance value as true.

    Use JavaScript to check if an <a> tag with your class is clicked, if so, add another class to the modal which you can then reference to show the hidden <h3>.

  • No offence, but isn’t that an even more complicated way of doing it? I say that only because I’m not smart enough to figure out either way.

    I’ve Googled all evening. I’ve tried to find how to add a class using PHP. Why is that so difficult? I’ve tried to detect the value of the True/False using PHP and then add the class using Javascript. No luck there.

    Not sure why this is so difficult for me to figure out.

    If the True/False value is “Signed”, then add the class “issigned” to <div class=”lity-info”>.

  • It does seem like a long way around but since the modal is created by JavaScript, we’ll most likely have to use JavaScript to influence to the modal.

    The <a> tag is our link between the HTML and the corresponding JavaScript modal.

    In your page template file
    Check if the video has Signed set to TRUE, if so add a class (let say “issigned”) to it’s <a> tag.

    
    <a href="your-url" 
    	<?php if( get_field('signed') ): ?>
    		<?php echo 'class="issigned"'; ?>
    	<?php endif; ?>
    >
    

    In your Javascript file
    When an <a> with class issigned is clicked, add another class to the modal.

    As I mentioned, I’m no expert developer and there might be a better solution to this.

  • Starting to make more sense. Thanks for sticking with me on this one.

    Only problem is the thumbnail <a> isn’t written in a way that I can just add your code.

    <?php
    	$args = array(
    		'post_type' => 'Videos'
    	);
    	$loop = new WP_Query( $args );
    	while ( $loop->have_posts() ) : $loop->the_post();
    		echo '<div class="grid-item thumb ';
    		foreach (get_the_terms(get_the_ID(), 'category') as $cat) { echo $cat->slug . ' '; }
    		echo '"><a href="';
    		the_field('vid_url');
    		echo '" data-lity data-director="';
    		foreach (get_the_terms(get_the_ID(), 'director') as $cat) { echo $cat->name; }
    		echo '" data-title="';
    		the_title();
    		echo '">';
    		the_post_thumbnail();
    		echo '</a></div>';
    	endwhile;
    ?>

    So what you’re saying is: it checks if the T/F value is Signed and adds the class “issigned” to the above <a>. Then, if you click on an <a> that has the class “issigned”, that will in turn add a class to <div class="lity-data">? Is that what you’re thinking?

  • Exactly, I gotta head out and will check back later this eve or tomorrow morning. If you got it sorted let me know.

  • Huzzah! I had a friend have a look at it and not only did he clean up my code, he also solved the problem. I’ll post it here for anyone that may be stuck on the same thing.

    PHP

    <?php
    	$args = array(
    		'post_type' => 'Videos'
    	);
    	$loop = new WP_Query( $args );
    	while ( $loop->have_posts() ) : $loop->the_post();
    		echo '<div class="grid-item thumb ';
    		foreach (get_the_terms(get_the_ID(), 'category') as $cat) { echo $cat->slug . ' '; }
    		echo '"><a href="';
    		the_field('vid_url');
    		echo '" data-lity data-signed="';
    		echo get_field('vid_signed') ? 'true' : 'false';
    		echo '" data-director="';
    		foreach (get_the_terms(get_the_ID(), 'director') as $cat) { echo $cat->name; }
    		echo '" data-title="';
    		the_title();
    		echo '">';
    		the_post_thumbnail();
    		echo '</a></div>';
    	endwhile;
    ?>

    JAVASCRIPT

    jQuery(document).on('lity:ready', function(event, lightbox) {
    	var $target 	= jQuery(event.currentTarget.activeElement),
    		director 	= lightbox.opener().data('director'),
    		title 		= lightbox.opener().data('title'),
    		signed 		= lightbox.opener().data('signed');
    	$target.find('.lity-container').prepend('<div class="lity-hover"><div class="lity-info"><h1>' + director + '</h1><h2>' + title + '</h2></div></div>');
    	if ( !signed ) {
    		$target.find('.lity-container h2').after('<h3>Here is a line about getting in contact</h3>');
    	}
    });
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.