Develop Reference

jQuery Card Switching Active Class

The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/

I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');

a robust way to toggle item display in Jquery

I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.

you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>

You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}

Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>

You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))

change background image of buttons(each with its indivisual id) using jquery

I have tried to create a voting system similar to that in reddit. Each post have two buttons, and each button associated with specific post have different id. I have set the image of all the buttons as uncolored arrow.
<div class="details">
<li>AAAAA</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/aaaaa" title="Up" class="up " onclick="vote('e/aaaaa', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/aaaaa"><span>51</span></div>
</div>
<div class="vote-down"><button id="down-e/aaaaa" title="Down" class="down" onclick="vote('e/aaaaa', 0, 'swap')" ></button>
</div></div>
</div>
<div id="content">
<div class="details">
<li>MIT</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/mit" title="Up" class="up " onclick="vote('e/mit', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/mit"><span>40</span></div>
</div>
<div class="vote-down"><button id="down-e/mit" title="Down" class="down" onclick="vote('e/mit', 0, 'swap')" ></button>
</div></div>
</div>
This is the voting system which is working fine.
with this style
vote-up button{
height: 32px;
width: 32px;
border: 0;
background: url("upvote.png");
}
.vote-down button
{
height: 32px;
width: 32px;
border: 0;
background: url("downvote.png");
}
up to this each post has up and down arrow. when the user clicks the button the image of button should change, for that i have written this function in jquery
function vote(id, vote, userid){
if(!logged)
{
alert("You must be logged in to vote");
}
else {
if(vote==1){
$("#up-"+id).css({'background', 'url("upvoted.png")'});
$("#down-"+id).css('background', 'url("downvote.png")');
$("#up-"+id).attr('disabled', true);
$("#down-"+id).attr('disabled', false);
}
else {$("#down-"+id).css('background', 'url("downvoted.png")');
$("#up-"+id).css('background', 'url("upvote.png")');
$("#down-"+id).attr('disabled', true);
$("#up-"+id).attr('disabled', false);
}}
the "downvoted.png" and "upvoted.png" stores the images which are to be places in place of the former images when user clicks the button.
When i click the buttons the images are not changing.

You are using the .css method incorrectly. You need to have colons not commas between your attribute and the applier. Currently you have:
.css({'background', 'url("upvoted.png")'});
And you need to update it to:
.css({'background':'url("upvoted.png")'});
Or remove the brackets since you are only updating one style:
.css('background', 'url("upvoted.png")');
In addition you might be running into an issue with jQuery finding the Id since it has a slash in it. If you run into this issue use the following as your selector instead:
$("button[id*='down-" +id + "']")
And here is a working codepen:
http://codepen.io/egerrard/pen/EZvYpQ

hover over one element, transition another element

I have two divs A and B. div A is an image. Div B is a paragraph underneath div A.
I am trying to make it so that if I put the mouse over div A, the background and font colour of div B transition to different colours without affecting div A.
I currently have the :hover selector so div B changes if someone hovers over it. But I don't know how to affect div B while hovering over div A.
Any clues on how to achieve this?
EDIT:
Please see below for the structure of my code. I'm trying to make it so that if I hover over #image1, the background of #info1 and the font colour of its paragraph would change and so on so forth for the other two images.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out"> 1 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
</div>
<div id="info2" class="col-md-12 col-sm-6">
<p class="washed-out"> 2 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
</div>
<div id="info3" class="col-md-12 col-sm-6">
<p class="washed-out"> 3 </p>
</div>
</div>
</div>
</div>
css:
.washed-out{
background: white;
color: black;
transition: background-color 300ms linear, color 1s linear;
}
.washed-out:hover{
background: black;
color: white;
}

You use the sibling selector ~ or the immediate sibling selector +
img:hover + div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
Update based on comment, possible CSS version
.hoverme:hover + div .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6 hoverme">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
Update based on comment, possible JS version
window.addEventListener('load', function() {
var imglist = document.querySelectorAll('img.img-responsive');
for (var i = 0; i < imglist.length; i++) {
imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos');
})
imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos');
})
}
})
div.infos .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>

You're looking for the adjacent sibling selector - element:hover + element:
.container {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s;
}
.container:first-child {
margin-bottom: 10px;
}
/** if the 1st element is hovered, changed the 2nd **/
.container:hover + .container {
background: blue;
color: white;
}
<div class="container">Div 1</div>
<div class="container">Div 2</div>

What you want can be done by javascript event handler.
Something like this:
var d1 = document.getElementById("div1"); // on hover on this div
var d2 = document.getElementById("div2"); // bring changes to this
d1.addEventListener("hover", callfun, false);
function callfun(){
d2.style.backgroundColor = 'blue';
}
Good luck

Basically you need to register a hovering in and out handler as shown in the following answer:
Event listener hover changing other element
Here is a slightly modified version of it to fit more closely to your need.
document.getElementById("Div-A").addEventListener("mouseenter",function (){
document.getElementById("Div-B").style.backgroundColor = "red";
document.getElementById("Div-B").style.backgroundColor = "Yellow";
});
document.getElementById("Div-A").addEventListener("mouseout",function (){
document.getElementById("Div-B").style.backgroundColor = "";
document.getElementById("Div-B").style.text = "";
});

Use successor siblings ~ or immediate successor siblings + to make any change on hover
img:hover ~ div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
<div>Hey there...I also get red when you hover the image</div>

<script>
function Myfunc1(){
document.getElementById("div1").style.backgroundColor = "green"
document.getElementById("div2").style.backgroundColor = "white"}
function Myfunc2(){
document.getElementById("div2").style.backgroundColor = "red"
document.getElementById("div1").style.backgroundColor = "white"}
</script>
<pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
<div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>

Add id to a child of a visible element

How can I write in jQuery this:
If .horse is visible, then add #cat to .dog (but only to .dog which is child of the visible .horse)?
<div id="tabs-1" class="horse" style=" margin-right: 20px; display: none;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
<div id="tabs-2" class="horse" style=" margin-right: 20px; display: block;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>

Use following, it will work
$('.horse:visible .dog').attr('id','cat')

If you want to add the ID cat to .dog, use this:
$(".horse:visible .dog").attr("id", "cat");
Here is an example.

Try,
$('.horse:visible .dog').append($('#cat'));
The above code would append #cat into .dog which is a descendant of visible .horse
If you want to add id to the particular element then do,
$('.horse:visible .dog').attr('id','cat');

We can combine jQuery's :visible selector with jQuery's attr() method to set the id:
$('.horse:visible .dog').attr('id', 'cat');
This will give the .dog element contained within your visible .horse element an id of "cat".