We Keep Coding

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

JQuery Activate hover status using other element

I must to activate hover on an svg based element map.
So I got the map that can change color of a region hovering in selected region. Near this map I got a list of regions as link that must to highlight the relative region on the map hovering on that link.
Example Fiddle
https://jsfiddle.net/fgsh896b/
I got something like this:
Example
function mouseEnt(id) {
$('#' + id).trigger('hover');
}
.item {
width:100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="item">
Item 1
</div>
<div id="2" class="item">
Item 2
</div>
<div id="link">
Link1
Link2
</div>
My function is wrong, I've tried with others jquery functions but maybe my logic is incorrect. how to reach this?

As #j08691 linked to in the comments on your question, you cannot cause a CSS :hover pseudo selector to fire by faking an event in JS.
However what you can do is set a class on the target element manually when you hover over the required link. To improve the logic you can use a data attribute to link them together and use an unobtrusive event handler, something like this:
$(function() {
$('#link a').hover(function() {
$('#' + $(this).data('rel')).toggleClass('hover');
});
});
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover,
.item.hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="1" class="item">Item 1</div>
<div id="2" class="item">Item 2</div>
<div id="link">
Link1
Link2
</div>

How do I stop my toggle function at the first and last list items?

I have an unordered list of numbers that scroll.
The selected/middle list item needs to show in a yellow font color.
I have applied a class toggle function to my scroll buttons. I just need help figuring out a solution that will stop the class toggle function when I get to my first and last list item.
The solution I need must allow for the addition and removal of list items without the need to adjust the JavaScript if possible.
As usual, I know this is light work for you guys.
Any and all help is very much appreciated.
HTML
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2" class="target">2</li>
<li id="3" class="active">3</li>
<li id="4" class="target">4</li>
<li id="5" class="active">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>
CSS
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {height: 22px;}
JavaScript
$(document).ready(function() {
$('.scroll').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
});
$(document).ready(function() {
$('.scrollup').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});

When toggleClass() has two parameters, the second parameter is expected to be a boolean (and not just truthy/falsy).
Therefore, 'target' is ignored in this code:
$('li').toggleClass('active', 'target');
What you could do is set the first li as "active," then move the active class to the previous or next li, depending on which button is pressed.
If the next li is the last child, or the previous li is the first child, then don't move the active class.
Snippet
$(document).ready(function() {
$('.scroll').click(function() {
var current= $('li.active'),
next= current.next().not(':last-child');
if(next.length) {
next.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
$('.scrollup').click(function() {
var current= $('li.active'),
prev= current.prev().not(':first-child');
if(prev.length) {
prev.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {
height: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>

There are two solutions:
Solution #1
You can use the .first and .last functions of jQuery:
$('li').not($('li').first()).not($('li').last())
I am choosing all "li" elements,and then remove the first one and the last one.
https://api.jquery.com/last/
Solution #2:
You can also use slice function, like in arrays:
$('li').slice(1,-1)
This will remove the first and last item in the 'li' array of elements.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Answer of Rick Hitchcock is perfect, however I would just like to add one point.
For every jQuery function you call, you don't need to encapsulate it in a $(document).ready(function() or jQuery(document).ready(function($). A page manipulation begins only when the page has been loaded. So you don't need to check it twice whether the page has been loaded or not.

How to use anchor links to scroll within a div without scrolling the main page

I am trying to use links to scroll the content within a div.
HTML is here:
<header>
<div class="wrapper">
<img src="/img/header.jpg" alt="Ace Land Surveying">
</div>
<nav>
<div class="wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Types of Surveys</li>
<li>About Us</li>
<li>Links</li>
<li>Request a Survey</li>
<li>Past Projects</li>
<li>Contact</li>
<li>SOQ</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper">
<div class="content">
<div class="column left">
<ul class="survey-type-list">
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
</ul>
</div>
<div class="column right" id="survey-column">
<div class="survey-type" id="type1">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type2">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type3">
<p> ... long text ... </p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
<div class="wrapper"></div>
</div>
</footer>
and the CSS:
header {
float: left;
width: 100%;
height: 200px;
}
.wrapper {
width: 90%;
margin: auto;
}
.content {
float: left;
width: 100%;
padding: 20px;
background: #02274b;
}
.column {
min-height: 500px;
padding: 20px;
border-radius: 20px;
color: #fff;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}
.column.left {
float: left;
width: 20%;
}
.column.right {
float: right;
width: 60%;
}
.survey-type-list li {
margin: 0 0 4px 0;
list-style: none;
}
.survey-type-list h2 {
font-size: 13px;
}
#survey-column {
overflow: hidden;
height: 460px;
}
.survey-type {
float: left;
width: 100%;
height: 460px;
}
The problem is that the entire page moves with the content inside the div.
Here is a fiddle:
http://jsfiddle.net/q8a1s5wj/8/
I tried several other threads here but none could solve my problem.
How can I prevent the whole page from scrolling and just scroll inside the right column with my anchor links?
I want to be able to click the link in the left column and see the right column scroll but not the move the entire page.

Fiddle
Some minor adaptations to the CSS - not doing this gave the wrong element offset :
#survey-column {
position: relative;
}
This one's just so the last div can scroll to the top completely :
.survey-type {
height: 520px;
}
And a bit of script to make it work :
$(function() {
$('.column.left a').click(function() {
var goal = $(this.hash).position().top-20,
aim = goal+$('#survey-column').scrollTop();
$('#survey-column').scrollTop(aim);
return false;
});
});
The 20 pixels deduction of goal is just done to keep the same top padding as was started with...

you can add position as fixed on top div element, i have checked your code on jsfiddle and added position style attribute in wrapper div element
<div class="wrapper" style="position:fixed; margin-top:10px">

just add this
.stop-scrolling {
height: 100%;
overflow: hidden;
}
this class to your body tag.
Reference: How to disable scrolling temporarily?
Updated Fiddle: http://jsfiddle.net/q8a1s5wj/2/

How to force DIV inside an LI (with overflow hidden styling) still show

I've got 3 LI with class=box and they are styled with overflow hidden. I need to create a DIV with class=badge inside one box (in this case the 3rd/blue box).
My objective is:
1. that this badge DIV (set as position absolute) follows or can use as reference the relative position of that particular box.
2. that this yellow badge DIV can be displayed outside of the blue box.
I have been trying a lot of things to make this mission impossible code, but I was wondering if anybody here has already done this before.
Preferred solution: Javascript or jQuery and workable in IE8 if possible if not at least IE9.
HTML:
<div class="container">
<li class="box" style="background-color: red;">
red
</li>
<li class="box" style="background-color: green;">
green
</li>
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="badge">badge</div>
blue
</li>
</div>
css:
.container {
border:1px solid black;
width: 500px;
height: 120px;
margin: 20px auto 0px;
background-color: grey;
}
.badge {
position: absolute;
width:100px;
height: 100px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
bottom: -55px;
}
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
/*overflow: hidden;*/
}
NOTE: overflow hidden code is commented, for you to see the output I need to have.
I have a jsfiddle here for quick reference: http://jsfiddle.net/philcyb/1m73qewm/

You could try something like this:
var $badge = $('div.badge'),
xOffset = $badge.offset();
$badge.appendTo('body').css({
top: xOffset.top,
left: xOffset.left
});
You probably need to add scrollTop() and the like too.

So the simplest solution that is supported by what you require would be to add another parent that does your clipping for you.
Simple have the structure such as .box > .box-inner > text + badge
An example of how that would look for your blue box would be.
<li class="box" style="background-color: blue;">
<div class="box-inner">
Blue
</div>
<div style="background-color: #ff0;" class="badge">badge</div>
</li>
The CSS for the inner box would be
.box-inner {
width:100%;
height:100%;
overflow:hidden;
}
I have updated your fiddle with what that would look like.
FIDDLE
http://jsfiddle.net/1m73qewm/12/

HTML:
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="box">badge</div>
blue
</li>
CSS:
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
overflow: hidden;
}
I presume this is what you mean't ! Just see the changes in the above code.