I’m using WordPress. For client testimonials, I have created Custom Post Type which is working fine. After that, I’m creating a shortcode to display post data at the frontend.

Problem – I get all the post data, but I’m not getting a slider.
Output I get – current result

1. I have included slick js and CSS in function.php properly.

function ec_theme_scripts() {
        
        wp_enqueue_style( 'style', get_stylesheet_uri() );
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/style.css' );
        wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
        wp_enqueue_style( 'fontawesome-css', 'https://pro.fontawesome.com/releases/v5.15.4/css/all.css' );
        
        
        wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true);
        wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array(), true);
        wp_enqueue_script('slick', get_template_directory_uri() . '/js/slick.min.js', array(), true);

    }
    add_action( 'wp_enqueue_scripts', 'ec_theme_scripts' );

2. Here is the WordPress loop code snippet, where I’m fetching slider data from custom post type.

    function create_testimonials_shortcode() {

        $args = array(
            'post_type' => 'Testimonials',
            'publish_status' => 'published',
        );

        register_post_type('Testimonials', $args);

    
        ?>            

            <?php
                $query = new WP_Query($args);
                if( $query -> have_posts() ) :
            ?>        
                        
            <div class="testimonial_slider">

                <?php while( $query -> have_posts() ):
                    $query -> the_post() ;
                ?>
                
                <div class="testimonial-slide">
                    
                    <div class="testimonial-content"> 
                        <p> <?php the_content(); ?> </p>
                    </div>
                    
                    <div class="image-title-wrapper">
                        <?php $img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?> 
                        <img src = "<?php echo $img_url; ?>" >
                        <h4 class="testimonial-name"> <?php the_title();?> </h4>
                    </div>

                </div>
                
                <?php endwhile; ?>

            </div>
    
            <?php 
                endif;
                wp_reset_postdata();
            ?>
            
        <?php
    }

    add_shortcode( 'testimonials', 'create_testimonials_shortcode' );

3. At last, Here is the jquery for the slick slider.

$(document).ready(function() {
    $('.testimonial_slider').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        autoplay: true,
        autoplaySpeed: 5000
    });
});

I have checked everything but didn’t get what has gone wrong exactly.

I was watching YouTube tutorial about welcome messages. I copied whole code etc. When I’m using this code on discord.js v13 it doesn’t work. When I use this code on discord.js v12 everything works. Bot after joining new member send welcome message. On discord.js v13 bot didn’t say nothing and I don’t have any errors in terminal. Can someone help me with that? I’m beginner in codding and have only few tutorials knwededge. Please help.

Here’s index.js:

const Discord = require('discord.js');
const client = new Discord.Client({ intents: ["GUILDS", "GUILD_MESSAGES" , "GUILD_MESSAGE_REACTIONS" , "DIRECT_MESSAGE_REACTIONS" ] , partials: ["MESSAGE" , "CHANNEL" , "REACTION"]  });

client.commands = new Discord.Collection();
const fs = require('fs');
const commandFiles = fs.readdirSync('./commands/').filter(file => file.endsWith('.js'))
for(const file of commandFiles){
    const command = require(`./commands/${file}`)
    client.commands.set(command.name, command) 
}

const { prefix, token } = require('./config.json')
const welcome = require('./commands/welcome'); // Add This


client.once('ready', () => {
    console.log('Ready.')
    welcome(client) // Add This
})

client.on('message', message => {
    if(!message.content.startsWith(prefix)||message.author.bot) return

    const args = message.content.slice(prefix.length).split(/ +/)
    const command = args.shift().toLowerCase()

    if(command === 'ping'){
        client.commands.get('ping').execute(message, args)
    } else if(command === 'yt'){
        client.commands.get('yt').execute(message, args)
    } else if(command === 'purge'){
        client.commands.get('purge').execute(message, args)
    }
})

client.login(token)

Here’s welcome.js:

module.exports = (client) => {

  // Welcome Message Command
    const welcomechannelId = '' //Channel You Want to Send The Welcome Message
    const targetChannelId = `` //Channel For Rules

    client.on('guildMemberAdd', (member) => {
        console.log(member)
        
        const welocmemessage = ` <@${member.id}> Welcome To Our Server,
Please Read ${member.guild.channels.cache.get(targetChannelId).toString()}
Have A Nice Time!`
        const channel = member.guild.channels.cache.get(welcomechannelId)
        channel.send(welocmemessage)
    })
    
    // Leave Message Command

    const leavechannelId = '' //Channel You Want to Send The Leave Message

    client.on('guildMemberRemove', (member) => {
        const leavemessage = `<@${member.id}> Just Left Server.`

        const channel1 = member.guild.channels.cache.get(leavechannelId)
        channel1.send(leavemessage)
    })
}

Here’s config.json:

  
{
    "token": "Your-Token",
    "prefix": "+"
}

someone helped me with webscraping using tracker.gg’s API and puppeteer but since the season change, the API returns this error message

{"errors":[{"code":"CollectorResultStatus::InvalidParameters","message":"One of the provide parameters is invalid.","data":{}}]}

when it used to return an array with all the data needed for the program.
Can anybody help me find the right website for the new season’s statistics ?

If I pass the main code to a different function, how do I pass the e variable? Is there any clean way I can add a fake event to the addEventListener parameters just for the purpose of removing it or something?

containers.forEach(container => {
  container.addEventListener('dragover', e => {
    //main code, uses e
  })
})

function f() {
  containers.forEach(container => {
    container.removeEventListener('dragover', ? ? ? )
  })
}

HI I AM NEW HERE AND I WAS WONDERING HOW TO MAKE A SIMPLE AIMBOT SCRIPT USING JAVASCIPT

I use the “The event calendar” plugin in its free version to generate a music event calendar. All ok with the design, the problem comes with the plugin view format which adds a “Find out more” button:

http://prntscr.com/26nmr4u

I want to modify the text of that button, for example, to say “buy tickets” but I have not found any good way. I have verified this guide that is the most approximate, I have replicated it but it seems obsolete since I have no change:

https://theeventscalendar.com/support/forums/topic/edit-find-out-more-button/

Additionally, when editing the text, I want the link to be a button, which, inspecting the page, takes me to the post:

http://prntscr.com/26nmrg5

I want it to redirect to an external page using the event URL of the plugin that has the function “tribe_get_event_website_url”
Is there any functional way to achieve that?
Thanks!

I’ve been working on an application for a couple of months while learning node js and express. It used to work fine on heroku but after my latest changes it stopped working, showing application error which happened many times before but this time I can’t figure out what’s going wrong. I’m pretty sure the deploy is done well, as it worked a couple of days ago and stopped working now, so the problem is likely somewhere in all of the express code.

Here is my entry point (app.js):

    const mainRoutes = require('./routes/mainRoutes');
const marketplaceRoutes = require('./routes/marketplaceRoutes');
const usersRoutes = require('./routes/usersRoutes');
const isUserLogged = require('./middlewares/isUserLogged');

const express = require('express');
const path = require('path');
const session = require('express-session');
const cookieParser = require('cookie-parser');

let app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'));

const publicPath = path.resolve(__dirname, '..', './public');
const viewsPath = path.resolve(__dirname, './views')

app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static(publicPath)); //Hacer publica la carpeta Public
app.use(express.static(viewsPath)); //Hacer publica la carpeta views

app.use(session({
    secret: "secreto starknights",
    resave: true,
    saveUninitialized: false,
})); //Configurar session

app.use(cookieParser());

//app.use(userCookie);

app.use('/', isUserLogged, mainRoutes);
app.use('/marketplace', isUserLogged, marketplaceRoutes);
app.use('/users', isUserLogged, usersRoutes);

app.listen(process.env.PORT || 3000, () => {
    console.log('Servidor corriendo en el puerto 3000');
});

also here’s my Procfile:

web: node src/app.js

I’ll also leave a link to the github repository where this is all located. By the way the app works perfectly fine when hosted locally. The problem comes only when deployed to heroku. Thanks

I recently built an 6 image carousel for our website. I want it to hide the next/previous buttons when it is on the first and last images in the carousel.

The carousel initially loads correctly. However, upon clicking through, it is allotting an extra click for the last image. If I go backwards from the last image to the first, it does the same thing. It displays the first/last image, I hit the button, and then it shows the same image but the button is gone.

I want the button to disappear upon the first time the first/last image is shown. There is a redundant click. I can’t seem to figure out what is causing it.

Here is the snippet of code that I suspect is causing the problem:

var counter = 0;

    if (counter === 0) { prevBtn.style.display = "none"; }
    if (counter === myimages.length-1) { nextBtn.style.display = "none"; }

    prevBtn.addEventListener("click", function(){
        if (counter > 0 && counter < myimages.length){
                counter--;
                myimage = myimages[counter];
                mycaption = mycaptions[counter];
                imageContainer.innerHTML = '<img src="'+myimage+'" />';
                captionContainer.innerHTML = mycaption;
                prevBtn.style.display = "block";
                nextBtn.style.display = "block";
            } else if (counter === 0) {
                prevBtn.style.display = "none";
            }
        });

    nextBtn.addEventListener("click", function(){
        if (counter < myimages.length-1){
            counter++;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            prevBtn.style.display = "block";
            nextBtn.style.display = "block";
        } else if (counter === myimages.length-1) {
            nextBtn.style.display = "none";
        }
    });

Here is the full code, so you can see for yourself what I am talking about:

 // Declaring variable array of images. You can put as many as you want.
    const myimages = ["https://i.imgur.com/wv4IFTH.jpeg", "https://i.imgur.com/e9rdR6C.jpeg", "https://i.imgur.com/008kJgA.jpeg", "https://i.imgur.com/GBLGV8F.jpeg", "https://i.imgur.com/TuatGBH.jpeg", "https://i.imgur.com/niI3Ye6.jpeg"];
    const mycaptions = ["Test Caption 1", "Test Caption 2", "Test Caption 3", "Test Caption 4", "Test Caption 5", "Test Caption 6"]; 
    const prevBtn = document.getElementById("p-10-s-i-s-prev-btn");  // assigning variable for previous button
    const nextBtn = document.getElementById("p-10-s-i-s-next-btn");  // assigning variable for next button
    const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
    const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
    var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
    var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.

    imageContainer.innerHTML = '<img src="'+myimage+'" />';
    captionContainer.innerHTML = mycaption;


   var counter = 0;

if (counter === 0) { prevBtn.style.display = "none"; }
if (counter === myimages.length-1) { nextBtn.style.display = "none"; }

prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            prevBtn.style.display = "block";
            nextBtn.style.display = "block";
        } else if (counter === 0) {
            prevBtn.style.display = "none";
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
        prevBtn.style.display = "block";
        nextBtn.style.display = "block";
    } else if (counter === myimages.length-1) {
        nextBtn.style.display = "none";
    }
});

 .p-10-s-i-s-page-background{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      justify-content: center;
        align-items: center;
    }

    .p-10-simple-image-slider-wrapper{
        max-width: 45%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center
        margin-bottom: 20px;
    }

    #p-10-s-i-s-image-container{
        max-width: 100%;
        height: auto;
        display: flex;
        justify-content: center
    }

    #p-10-s-i-s-image-container img{
        max-width: 90%;
        justify-content: center;
        height: auto;
        display: flex;
        align-items: center;
        animation: p-10-image-animation 1s;
        
    }

    #p-10-s-i-s-prev-btn, #p-10-s-i-s-next-btn{
        width: 50px;
        font-family: 'Open Sans', sans-serif;
        font-size: 50px;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: orange;
    }

    #p-10-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
        
        transition: all 1s;
        
    }

    .p-10-s-i-s-page-background h1{
        color: rgb(243, 236, 176);
    }

    @keyframes p-10-image-animation{
        0%{
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }

    #p-11-s-i-s-caption-place-holder{
        padding: 5px 150px 5px 150px;
        font-family: 'Open Sans', sans-serif;
        color: #565555;
        text-align: left;
        font-size: 18px;
        line-height: 150%;
        margin-bottom: 20px;
    }

 <div class="p-10-s-i-s-page-background">
        
      
      <div class="p-10-simple-image-slider-wrapper">
            <div id="p-10-s-i-s-prev-btn">&#60;</div>
            <div id="p-10-s-i-s-image-container" ></div>
            <div id="p-10-s-i-s-next-btn">&#62;</div>
        </div>
      <div id="p-11-s-i-s-caption-place-holder">
        </div>
    </div>

So far I have something that works, but it feels like there should be a better/correct way to handle that. First, the client is making a call to the API as follows:

fetch(API_URL, request)
      .then((response) => response.json())
      .then((url) => {
        url = API_VIDEO_URL;
      });

This calls for a function to generate a video, after the process is over it saves said video on disk. After the process is over the function returns jsonify({}), 200.
As you can see, I’m not doing anything with that response as I didn’t find a way to make it work in any other way, instead, I tell the client to head to API_VIDEO_URL, another function within Flask that takes the video and sends it over.

@app.route("/video")
@cross_origin()
def api_video():
    def generate():
        with open(VIDEO_PATH, "rb") as frames:
            data = frames.read(1024)
            while data:
                yield data
                data = frames.read(1024)

    return Response(generate(), mimetype="video/mp4")

This gets the video generated by the original call and serves it to the client.(VIDEO_PATHis the path to the video). I was not able to make this work within the same function.

Is there a better way to achieve this?

ESLint: Invalid Options: – Unknown options: env, parserOptions, rules – ‘parserOptions’ has been removed. Please use the ‘overrideConfig.parserOptions’ option instead. – ‘rules’ has been removed. Please use the ‘overrideConfig.rules’ option instead.. Please see the ‘ESLint’ output channel for details.

My package.json is :
package.json code

Background

I have built my React app in ElectronJS.

During development, the app ran perfectly and didn’t have any errors fetching the JS/CSS.

However, AFTER compiling, meaning electron-builder compiled successfully and output the EXE file, ElectronJS can’t locate the JS/CSS but the index.html loads.

I tried modifying buildResources from guides on other Stackoverflow threads to no avail

Expected

It loads the app and it works just like in development

Actual result

It’s a blank white screen and the network logs look like this

Reproduction:

• Clone https://github.com/ericwang401/echo-soundboard
• Run npm run electron:build
• Open output executable in /dist
• Open devtools in the ElectronJS app
• Click network (you might have to refresh to see the errors)

I have a parent div with a few children:

<div id="main">
   <div id="child1">
      <div id="child2">
         <div id="child3">content</div>
      </div>
   </div>
</div>

The CSS is:

#main {width: 700px;}
#child1 {width: 150px;}
#child2 {width: 100%;}
#child3 {width: 100%;}

On hover, I want #child3 to expand to 90% width of #main, not be constrained to the 150px of its parent.

I tried giving #child3 a fixed width in px, but that caused a lot of issues with content spilling outside the #main div. I want to keep the expanded content of #child3 inside #main at all times.

Can this be done with JavaScript or jQuery? Please advise. Thanks!

JSFiddle here.

Specifically, I need to make an if/else statement that changes the content based on the Jewish month, Parsha, and date.

https://www.hebcal.com/home/developer-apis

I was told that this link has what I need, but I don’t know how to access it…

//start transaction
addContactToCustomer = (id, data) => {

let customerContact = realm.objects('Customer').filtered('_id=$0', id)[0].Contacts;

realm.write(() => {
    customerContact.push(data)
})

        let Book = realm.objects('Book').filtered('_id=$0', id)[0].Contacts;
    
        realm.write(() => {
            Book.push(data)
        })
    
    }

}
//end transaction

I am using Google App Script..

var string = “Test 11 Test 22 Test 33”;
var multiplier = 4;

What I want to do is extract all numbers from string and multiply them by the multiplier.. so the desired output should be “Test 44 Test 88 Test 132”