I have jsfiddle demo.
I want to show specific div hover of specific hover.
I have made function also in that will show div on hover but it's not working.
and I am confused that how to make one function for each tag.
right now I have made only one function for that.
Code :
<a class="cart" href="#"> show </a><br>
<a class="cart1" href="#"> show1 </a><br>
<a class="cart2" href="#"> show2 </a><br>
<div class="laptop" style="position: absolute;z-index: 1;">
laptop
</div>
<div class="mobile" style="position: absolute;z-index: 1;">
mobile
</div>
<div class="shoes" style="position: absolute;z-index: 1;">
shoes
</div>
CSS :
.laptop{
display: none;
min-height: 400px;
width: 400px:
position:absolute;
background-color: black;
}
.mobile{
display: none;
min-height: 200px;
width: 200px:
position:absolute;
background-color: blue;
}
.shoes{
display: none;
min-height: 300px;
width: 200px:
position:absolute;
background-color: red;
}
JS :
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$(this).next(".laptop").show();
}).on('mouseleave', '.cart', function () {
$(this).next(".laptop").hide();
});
});
I have updated your fiddle.
http://jsfiddle.net/K2RAt/1/
changed
$(this).next(".laptop").hide();
to
$(".laptop").hide();
This will work for you.
Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed
Try
<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>
then
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$($(this).data('target')).show();
}).on('mouseleave', '.cart', function () {
$($(this).data('target')).hide();
});
});
Demo: Fiddle
You can try this :
<a>Hover</a>
<div>To be shown</div>
CSS
div {
display: none;
}
a:hover + div {
display: block;
}
I have just updated your fiddle
http://jsfiddle.net/K2RAt/4/
Only need $(".laptop").show();
Simply use:
$( ".cart1" ).mouseover(function(){
$('.laptop').show();
});
Demo: Fiddle
I prefer CSS only...
Assuming HTML4, with this markup:
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
You can do something like this:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/z6tL9
Working Fiddle
:
[HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}][2]
You can put a custom attribute in anchor tag with target Div Id like :
<a class="cart" href="#" target_id='laptop'> show </a><br>
And then use following script :
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
var cl = $(this).attr('target_id');
jQuery('div.'+cl).show()
}).on('mouseleave', '.cart', function () {
var cl = $(this).attr('target_id');
jQuery('div.'+cl).hide();
});
});
Here is the demo : http://jsfiddle.net/jn9eT/1/
Hope, it solves your problem.
Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed
Try this : -
<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>
then after : -
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$($(this).data('target')).show();
}).on('mouseleave', '.cart', function () {
$($(this).data('target')).hide();
});
});
Show this demo
You can rather use: -
$(document).ready(function () {
$('.cart').hover(function(){
$(".laptop").show();
})
});
Related
In my div i have list of items:
<div id="itemList" class="dropdown-content">
<a value="1">item1</a>
<a value="2">item2</a>
<a value="3">item3</a>
<a value="121">item4</a>
<a value="131">item5</a>
<a value="141">item6</a>
</div>
So when i click on item3 i would like to take value(3) by JS.
yes 2019 => use event delegation... and dataset
document.querySelector('#itemList').onclick = function(evt) {
if (!evt.target.matches('a')) return;
evt.stopPropagation();
alert(evt.target.dataset.value);
}
.dropdown-content a {
display: block;
float: left;
clear: both;
margin: 1px;
padding: 2px 10px;
background-color:lightblue;
cursor: pointer;
}
<div id="itemList" class="dropdown-content">
<a data-value="1">item1</a>
<a data-value="2">item2</a>
<a data-value="3">item3</a>
<a data-value="121">item4</a>
<a data-value="131">item5</a>
<a data-value="141">item6</a>
</div>
We have on the product price and sale price
Both classes have width: 50% and inline-block.
I want to write a script that changes style (add class for width 100% and change font style) to the price when there is no sale price.
This is what I tried so far.
This is first code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').html().trim().length === 0) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
This is second code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').is(':empty')) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
And also doesn't work because is hiding sale price on all product (also products with sale price )
HTML is:
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a></div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a></div>
</div>
</div>
You have to iterate through every price_div, and find the regular and sale pairs inside of that and then you could update them independent of other price divs. something line:
$(".price_div").each(function(_ix, el) {
var $priceDiv = $(el):
var $regularPrice = $priceDiv.find(".eg-top-ponudbe-content-element-28");
var $salePrice = $priceDiv.find(".eg-top-ponudbe-content-element-24");
if( $regularPrice.is(':empty')) {
$regularPrice.hide();
$salePrice.addClass('change_regular_price');
}
})
You can use jQuery to select the empty sale_price items with $('.sale_price:empty') and then loop through the results by adding a .each()
$('.sale_price:empty').each(function() {
$(this).hide();
$(this).parent().find('.regular_price').addClass('change_regular_price');
})
.sale_price {
width: 50%;
background: red;
float: left;
}
.regular_price {
width: 50%;
background: blue;
float: left;
}
.regular_price.change_regular_price {
width: 100%;
background: green;
float: left;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class='sale_price'>
$5.00
</div>
<div class='regular_price'>
$7.00
</div>
</li>
<li>
<div class='sale_price'></div>
<div class='regular_price'>
$8.00
</div>
</li>
<li>
<div class='sale_price'>
$15.00
</div>
<div class='regular_price'>
$17.00
</div>
</li>
</ul>
jQuery(document).ready(function($) {
$( ".price_div" ).each(function() {
var regular_price = $(this).find('div:first-child');
var sale_price = $(this).find('div:last-child');
if( sale_price.find('a').html().trim().length === 0) {
sale_price.hide();
regular_price.addClass('change_regular_price');
}
});
});
.price_div {
margin-bottom: 20px;
width: 600px;
height: 40px;
border: 1px solid #ccc;
}
.price_div div {
display: inline-block;
width: 50%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.change_regular_price {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a>
</div>
</div>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self"></a>
</div>
</div>
I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.
I have my code like that right now: https://jsfiddle.net/49rcfg0t/
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.topmenu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.topmenu a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Menu superior-->
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have the following problems:
When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not
answer to the anchor petition.
I also I would like, when I activate one of the elements of the
menu, to change the image with another one. For example, change the
first icon with this one:
Thank you in advance, this problem is driving me crazy!
You may simplify your code:
use mousemove/mouseenter instead of scroll event.
The snippet:
$(document).ready(function () {
$('a[href^="#"].topmenu').on('click', function (e) {
$('a.topmenu').removeClass('active');
$(this).addClass('active');
});
});
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) {
$('a.topmenu').removeClass('active');
$('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active');
});
$(document).on('keyup', function (e) {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) {
$('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click');
$(document).scrollTop( $('#anchor' + String.fromCharCode(charCode)).offset().top);
}
});
body{
margin:0;
font-family:'Open Sans', sans-serif;
}
div{
overflow: auto;
}
/*Menu de cabecera*/
.header{
margin:auto;
background-color: white;
text-align: center;
position: fixed;
width:100%;
padding-top:7px;
padding-bottom: 7px;
z-index:5;
border-bottom:solid 2px #5882FA;
}
.header a{
text-decoration:none;
}
.topmenu img{
width:50px;
height:50px;
border-radius:90px;
padding: 2px 2px 2px 2px;
margin:2px 5px 17px 5px;
}
.topmenu img:active{
transform: translateY(4px);
}
.topmenu img:hover{
box-shadow:0px 2px 1px #5882FA;
}
/*Tooltips*/
.topmenu span{
visibility:hidden;
width: 120px;
color: white;
background-color: black;
text-align: center;
border-radius: 6px;
padding: 2px 0;
margin:1px;
font-variant: small-caps;
text-decoration:none;
/* Position the tooltip */
position: absolute;
top: 70%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
}
.topmenu:hover span{
visibility:visible;
opacity: 1;
}
.active{
background-color:black;
}
.cuerpo{
position: absolute;
width: 100%;
margin-top:90px;
}
.cuerpo div{
height: 590px;
margin: 5px 15%;
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have simple html code like this jsfiddle file which display an <a> tag named Test. What I am going to do is when I click to this tag Test, a new div with the class name surveySummaryMenu which including 2 other <a> tag named v1 Test and v2 Testshould be displayed. I do this by using CSS:
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
but i seems not working. Can anyone have an idea?
You could do something like this:
JS:
<script>
function menuButton() {
document.getElementById("menu").style.display = 'block';
}
</script>
HTML:
<div class="row" >
<ul class=" nav surveySummaryList">
<li>
<a href="javascript:" onclick="menuButton();">
<span>Test</span>
</a>
<div class="surveySummaryMenu" id="menu">
<ul class="nav navbar">
<li>
<a href="javascript:">
<i></i> v.<span>2</span>
<span>
<span>Test</span>
</span>
</a>
</li>
<li>
<a href="javascript:">
<i></i> v.<span>1</span>
<span>
<span>Test</span>
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.surveySummaryList .surveySummaryList {
margin-left: 10px;
}
.surveySummaryList>.active {
padding-left: 6px;
background-color: #EEEEEE;
}
.surveySummaryList .surveySummaryMenu a {
color: white;
}
.surveySummaryList .surveySummaryMenu a:active,
.surveySummaryList .surveySummaryMenu a:visited {
background: rgba(0, 0, 0, 0.8);
}
.surveySummaryList>li .surveySummaryMenu {
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 100%;
top: 0;
display: none;
color: white;
width: 100%;
min-width: 200px;
z-index: 1001;
}
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
I'm using Bootstrap 3 and jQuery 1.9.1 to make a website where profile picture is shown in a <li> tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div">Update Image
</div>
</li>
</ul>
</div>
</div>
Yoy should try this. that is exactly you want.
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
$(this).closest("li").find("a").show();
},
function () {
$(this).fadeTo(200, 1);
$(this).closest("li").find("a").hide();
});
})
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" />Link that you want
</li>
</ul>
</div>
</div>
you can achieve all that using css alone.
html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
css
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
Update Image
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});