I'm currently trying to rearrange the module header and portfolio image for odd-numbered portfolio items. Feel free to check out my sandbox here.
I thought the code below might do the trick, but it's a no-go.
jQuery(document).ready(function($){
if ( $( this ).is(".et_pb_portfolio_item:nth-child(2)") ) {
$(".et_pb_module_header").insertBefore(".et_portfolio_image");
}
});
Having trouble isolating just the header and image of the module without affecting everything else.
Feel free to utilize the following script
jQuery(document).ready(function($){
$('.et_pb_portfolio_item:nth-child(odd)').each(function(){
$(this).find(".et_pb_module_header").insertBefore(".et_portfolio_image");
});
});
Avoid the use of :nth-child(2), as it only selects the 2nd element.
Instead, opt for :nth-child(odd) to target all odd elements within your block.
jQuery(document).ready(function($){
$('.et_pb_portfolio_item:nth-child(odd)').each(function(){
$(this).find(".et_pb_module_header").insertBefore(".et_portfolio_image");
});
});
For further information, please visit:
https://www.w3schools.com/cssref/sel_nth-child.asp https://www.w3.org/Style/Examples/007/evenodd.en.html
Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...
I'm facing an issue with looping through my JSON data. Although I am only looping through "id_first", after printing 1 and 2 correctly, it then moves on to "id_second" and prints undefined. How can I make sure that my loop only prints id first? Here ...
Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...
Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...
Recently, I've been working on coding my personal website and have successfully created a single page application using ajax. The content is dynamically loaded between the header and footer whenever a navigation bar link is clicked. To enable the back ...
Currently, I am updating my WordPress website with a goal of minimizing the number of plugins used. To achieve this, I prefer writing code only for essential functionalities. In order to optimize my work with php, css, and javascript files, I have been exp ...
I have a square block measuring 100*100px. The container block it is within can be resized. I need the inner block to adjust its size dynamically so that it always fits inside the parent container without overflow and maintains its square shape. Important ...
Something strange is happening when I use .fadeIn() When I try this code: $('#MyDiv').show(); The div displays perfectly. But, when I try this code: $('#MyDiv').fadeIn(400); The div appears, but with opacity 0! The line before th ...
Struggling with generating an HTML table from JSON data, I'm inexperienced and having trouble with the logic. The JSON data I have needs to populate a complex dynamic HTML table. The design of the table is intricate, making it challenging for me to i ...
I'm currently developing a JavaScript script for WhatsApp Web that will automate responses to messages in a specific group. Here is a snippet of my code: console.log('WhatsappWeb On'); function sleep(num){ setTimeout(num); } var eve ...
Typically, a dialog is centered using the following code: $(el).dialog('option', 'position', 'center'); Is there a method to specify a "minimum" distance from the side? For example, ensuring that the top position is always a ...
I am dynamically adding elements to my view and setting their attributes using the jQuery attr function as demonstrated in the code snippet below: var input = $("<input type='text' name='"+inputFieldName+"' '>"); input.attr( ...
Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...
I'm trying to retrieve the object names "channelA" and "channelB". Here is the JSON data: [ { "channelA": { "programmes": [ { "start_utc": 1522208700, "stop_utc": 152220 ...
I am dealing with a specific tag: <button onclick="setLocation('http://mysite.com/checkout/cart/add/product/17/')" /> My goal is to trigger an ajax request when the button is clicked. I want to extract the URL segment "product/17" and app ...
Let's consider a scenario where you have an HTML form: <form> <select name="vehicles"> <option value="all">All Vehicles</option> <option value="car1">Car 1</option> <option value="car2">Car 2< ...
Improve the user experience on my website by implementing a search feature for US states and Canadian territories. When visitors type in their selection, I want them to be able to click on an icon that will reveal relevant information about that choice. T ...
Is it possible to bind CSS files to style JavaFX components and also change properties dynamically in code? I'm struggling with the setStyle() method as there's limited documentation available on how to use it effectively. Instead of modifying t ...
I'm trying to make my button take up the full width on smaller screens like mobile devices. Here's what I have so far... Large Device https://i.sstatic.net/TJex1.png Medium Device https://i.sstatic.net/Hvkan.png Small Device https://i.sstatic ...
I am developing a form with an input field for entering a URL and a submit button. I want to incorporate JavaScript validation to show an alert box when a correct URL is entered. Is it achievable using JavaScript? If so, can you please guide me on how to i ...