My goal is to rearrange the brand divs (strips with paper aeroplanes) based on the selected language at the top of the page. I will be implementing this feature on a WordPress site using a translation plugin. While I have some understanding of onclick events, my knowledge is limited and I am unsure where to begin. You can view the current development site here:
To clarify, it seems like you are wanting to connect the language with the brand divs at the top. One way to achieve this is by incorporating a data-lang attribute in your HTML and assigning IDs to your links. Using (data-something) allows you to create custom attributes for use with jQuery.
<a class="lang" href="#0" id="german">German</a>
<a class="lang" href="#0" id="english">English</a>
<div id="container">
<div data-lang="german">This is a brand div</div>
<div data-lang="english">This is another brand div</div>
<div data-lang="english">This is an English brand div</div>
</div>
Next, in your jQuery code, you can implement the following:
//variables (caching)
var langLink = $('.lang');
var langId;
var dataLang;
langLink.on('click', function(event) {
// prevention of page refresh upon link click
event.preventDefault();
// obtaining the clicked links' IDs using $(this)
langId = $(this).attr('id');
// locating the divs with matching data-lang values within a shared parent element (in this case, body)
dataLang = $(this).parent('body').find('div[data-lang="' + langId + '"]');
// temporary array to store found divs
var temp = [];
// storing located divs in temp array
temp.push(dataLang);
// removing them from the DOM
dataLang.remove();
// looping through temp array and prepending divs to the container
for (var i = 0; i < temp.length; i++) {
$('#container').prepend(temp[i]);
}
});
This approach outlines one method to accomplish the task, though there may be alternative ways to achieve the same result. To see this process in action, feel free to check out this JSFiddle.
For those utilizing wordpress, there are several approaches to accomplish this task. One easy method involves modifying the wordpress theme header (preferably through a child theme) and implementing an "if condition" to recognize the current wordpress language and assign a class to the body accordingly; this can be achieved using the wordpress get_locale() function. Additionally, a bit of javascript or preferably jQuery may be necessary to select the brand divs and rearrange them based on the body class.
I've been attempting to keep the current page active after submitting a form, but for some reason it's not working. After piecing together some code I found online, this is what I have in my process.php file: <?php // Collect Data $name = ...
Encountering issues on an iPhone while attempting to display a "timeline" consisting of a table content. The problem arises when 30 rows are present, but only 28 are visible on the screen. The remaining two rows are hidden behind the footer, requiring scro ...
Apologies for my poor English... I am facing a small issue with HTML commands. The problem is that I have two CSS commands with the same name (I hope this makes sense). Secondary Navigation Primary Navigation Is there a way to separate them? My tutor ...
I've been struggling with this issue for the past 2 days and I'm a bit of a novice when it comes to task runners. I decided to ask for help because I can't seem to figure it out on my own. Currently, I am using Gulp with Slush generated by ...
I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...
Currently, I am displaying multiple values from a controller list of objects to a JSP page. Here is an example of how I am doing it: <tr> <td>Name</td> <td>Email</td> <td>Address</td> ...
I'm currently working on creating a form with autocomplete functionality. The goal is to have a user input part of a name, which will then trigger suggestions from our database. Upon selecting a suggestion, I want the entire form to be populated with ...
Looking to switch the height attribute to min-height This is how I usually update the value, but uncertain about changing the attribute $('.mySelector').css('height','650px') <div class="mySelector" style="cursor: -moz-g ...
Currently, I'm engrossed in an intriguing article that delves into the concepts of host and visibility. In particular, it sheds light on the significance of the viewProviders metadata property within the Component decorator: The article discusses h ...
Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far: HTML <div id="root"> <h1> ...
My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...
I have a horizontal menu that includes mid-dots (inserted using the ::after pseudo element) to separate the menu items. I want to prevent these mid-dots from being clickable. This works fine in Safari, but in Firefox (v.47), the pointer-events: none prope ...
I'm facing a challenge in creating a class with chained functions, and I could really use some assistance. Currently, this is what I have: robin = new batman("myiv"); var batman = (function() { var me = this; function batman(id){ me._ ...
I have integrated the qTranslate plugin from WordPress, enabling me to translate posts and fields with ease. The primary language is English, while the secondary language is Arabic, requiring a design that supports RTL. After consulting both their FAQ an ...
I am currently working on implementing a fade transition between text slides that can be swiped instead of just using arrow keys. Any assistance would be greatly appreciated. You can view the page at Here is the JavaScript code I am utilizing: $(doc ...
I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...
Since version 125, the use of THREE.Geometry has been deprecated. As we update our code base, we are encountering errors that are proving difficult to resolve. Our current task involves creating a sphere and applying a raycaster on it to determine the int ...
I have successfully implemented a Vue Multiselect feature that retrieves options from my database using an axios call. This functionality works great as it allows users to select existing options or add new ones to create tags. While this setup is working ...
My search functionality works well, but I'm facing an issue when the item is not found in the array. I attempted using objects.Keys to handle this situation, but it's displaying on render instead of when the book is not found as expected. Should ...
I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening? ...