Develop Reference

When hovering over an element with a certain index, change the styles of the element in another parent with the same index

I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.
I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).
Code for text menu:
<ul>
<li class="page_item">
Test 1
</li>
<li class="page_item">
Test 2
</li>
</ul>
Code for Pictures menu:
<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
</div>
Screen shot with Picture and text menu:
Screen shot with Picture and text menu
I will be grateful for any help!
Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don’t even have ideas on how to do this.
All thanks in advance for any help!

If you like for this behaviour you can do this
hover: nav1 > imageNav1 ect...
You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter
$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});
.image-list__item--selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>

Here's a solution with pure js, works for elements that are not parents using ids.
html
<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>
and heres the js
function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}

there are many solutions , with an without using libraries. I think you may use some jquery if possible , and if not you should search for addeventlistener (the advanced way)
https://api.jquery.com/hover/
is a good example of doing what you are trying todo .
var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});
The above part is for php , still can be used in a plugin.
If you are in wordpress environment , you have to dig into how to write wp plugins also. Trying to achieve this in an environment , and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.

Change Title of link in Navigation Block

I've tried a few different ways to change the title of a link within the navigation block through Javascript, but to no avail.
Is there something that I am missing?
Here's the original code via the site:
<div id="left-side" class="ic-app-course-menu list-view" style="display: block">
<span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span>
<nav role="navigation" aria-label="Courses Navigation Menu"><ul id="section-tabs"><li class="section">Home</li><li class="section">Course Syllabus</li><li class="section">Modules</li><li class="section">Grades</li><li class="section">People</li></ul></nav>
</div>
Here is the Javascript I'm using to attempt to change the title "Course Syllabus" to just "Syllabus"
if (ENV.current_user_roles.indexOf("admin") < 1){
$( document ).ready(function() {
document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";
});
}
Would appreciate some help :-)

You have the exact right idea, and your code should work as expected. However, your conditional to check whether the user is an admin should really come inside of your $(document).ready(). Having said that, it will still trigger the way you have it now.
As such, there can only be two possible things causing your script not to work for you:
You have forgotten to include jQuery
Your condition is not evaluating to be truthy
Including jQuery and substituting the condition for one that is always true shows the name change working, as can be seen in the following example:
$(document).ready(function() {
if (1) {
document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-side" class="ic-app-course-menu list-view" style="display: block">
<span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span>
<nav role="navigation" aria-label="Courses Navigation Menu">
<ul id="section-tabs">
<li class="section">Home</li>
<li class="section">Course Syllabus</li>
<li class="section">Modules</li>
<li class="section">Grades</li>
<li class="section">People</li>
</ul>
</nav>
</div>
Hope this helps! :)

Click button with hide and show

Need get this fixed as I've been trying for a month. Can you look at my website for the button that doesn't work?
http://www.insightenergy.eu/about-us.php
What is wrong with it?

try the following code to expand or minimize the container.
$('.expander').click(function(){
if(condition){
$('.expander').next().show();
}
else{
$('.expander').next().hide();
}});

You need to attach an event to your buttons, and when I debug I get nothing on click.
Looking at your web I think you maybe need something like that:
Your HTML structure is similar to this one:
HTML
<ul class="blog-post-full-list">
<li >
<div >0</div>
<div class="expandible">Content</div>
</li>
<li >
<div >1</div>
<div class="expandible">Content</div>
</li>
<li >
<div >2</div>
<div class="expandible">Content</div>
</li>
<li >
<div >3</div>
<div class="expandible">Content</div>
</li>
</ul>
So in your code you can use the JQuery function toggle:
JS
$(".blog-post-full-list>li").on('click',function(){
/*
*The object this is the li you've clicked on
*The jQuery function toggle swiches the display ON OFF
*The number 300 means the duration of the animation. If you don't
* want to animate it just remove the parametter
*/
$(this).find(".expandible").toggle(300);
})
http://jsfiddle.net/vzkUL/2/
You can add it into a JS file or inline in your code as follows:
<script>
//JQuery onReady
$(function(){
$(".blog-post-full-list>li").on('click',function(){
//The object this is the li you've clicked on
//The jQuery function toggle swiches the display ON OFF
//The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
$(this).find(".expandible").toggle(300);
})
});
</script>

Sort one list based on the order of a second list

i'm new to Jquery and am struggling to work out how to solve my problem.
I have two unordered lists, List A and List B. List A is sortable using .sortable({ axis: 'y' }) method. When List A is reordered, i would like to automatically reorder List B (which is not user sortable) to reflect the changes in List A.
I'm struggling to know where to start, if anyone can help, that would be greatly appreciated.
Thanks
Update: Here's some extra code from my page to put things into context.
<div class="cvOverview">
<h4>CV Overview</h4>
<ul class="sortable" id="listA">
<li id="item_1" class="editContent"><span></span>About me</li>
<li id="item_2" class="editContent"><span></span>Personal profile</li>
<li id="item_3" class="editContent"><span></span>Employment history</li>
<li id="item_4" class="editContent"><span></span>Skills & Qualities</li>
</ul>
<p class="backButton editButton"><span>Completed</span></p>
</div>
<div class="cvMainContent">
<h3>Dean Bates</h3>
<ul class="sortable" id="listB">
<li id="item1">
<div class="cvContactDetails">
Some text here
</div>
</li>
<li id="item2">
<div class="cvPersonalProfile">
Some text here
</div>
</li>
<li id="item3">
<div class="cvEmploymentHistory">
Some text here
</div>
</li>
<li id="item4">
<div class="cvSkillsFromJobs">
Some text here
</div>
</li>
</ul>
</div>
The two lists will contain the same items and the same number of items, eventually i'd like to add the functionality where if a list item is deleted or inserted into List A, the a corresponding item is deleted or added to List B.
From a design point of view, List A represents an overview to the user of what's in List B, so they can re-order and change the contents of the simplified list on one side and have these changes reflected in a more detailed list on the other.
Hope this helps.
Thanks again for your help.

Use the update event to sort the other list
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});
Then you need to loop thru' your first list and move the items in your second list, if you supply the HTML / JS we might be able to help you with that.
try jsfiddle.com

Not sure if you are just storing the data as HTML or how complex the model is, but here the idea:
Use the sortable update function:
var userSortbaleList = $('#usersortableList');
var nonUserSortableList = $('#nonUserSortableList');
userSortbaleList.sortable({
axis: 'y',
update: function(event, ui) {
$.each(userSortableList.children(), function(index, html){
/** Need to see html or JS to do sorting */
}
}
});

Here's a complete solution that works with your precise markup:
$('#listA').sortable({update: sortListB});
function sortListB(){
$('#listA li').each(function(){
$('#listB [id=' + $(this).attr('id').replace('_', '') + ']')
.remove()
.appendTo($('#listB'));
});
}
See it in action here:
http://jsfiddle.net/LnvEM/1/
How does it work? One by one, you go through each item in list A in order from top to bottom, remove the corresponding item from list B .remove(), and re-attach it to the back of list B .appendTo($('#listB')). Once you do this for each item in B, the one you started with will be on top, etc.
(Note: added extra text to the items in list B to visually differentiate them and indicate for each which item it tracks in list A. Not necessary for the solution, however.)

Creating a javascript function to switch classes between list elements depending on which one has been clicked

I am trying to create a function to change the class on a series of 5 list elements depending on which has been clicked. The goal is to change the style of the element depending on which one is the current element.
I had tried something like this:
function addClass(obj)
{
obj.className="highlight";
}
and then added this to my elements:
onclick="addClass(this);
but this only added the class to the first element in the list and then did not remove the class when a different one was clicked.
My list elements look like this:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="addClass(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="addClass(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="addClass(this);"><h3>Media</h3></li>
<li id="management_link" onclick="addClass(this);"><h3>Management</h3></li>
</ul>
When an item is clicked the url changes, maybe this could be the way to set up the function to change classes depending on the url? I am very new with javascript any ideas on how to make this work would be greatly appreciated.
The current way I have it coded is to change each item when hovered, but I would like the change to remain until a different item is clicked. It can be viewed here: http://perksconsulting.com/dev/capabilties.php The items I am referring to are the black dots on the left side of the page.

First, you should use the jQuery addClass() method. You don't need to write your own (your addClass() implementation is buggy, by the way).
Try this:
function selectInList(obj)
{
$("#circularMenu").children("a").removeClass("highlight");
$(obj).addClass("highlight");
}
Then:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="selectInList(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="selectInList(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="selectInList(this);"><h3>Media</h3></li>
<li id="management_link" onclick="selectInList(this);"><h3>Management</h3></li>
</ul>
Or even better, keep your html clean and let jQuery simplify things:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link"><h3>Branding</h3></li>
<li id="marketing_link"><h3>Marketing</h3></li>
<li id="media_link"><h3>Media</h3></li>
<li id="management_link"><h3>Management</h3></li>
</ul>
Then, somewhere in your page:
$(document).ready(function()
{
$("#circularMenu").children("a").click(function() { selectInList(this) });
});

Try this out.
function addClass(obj)
{
$(obj).addClass("Highlight");
}