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>
Related
I'm currently working on a nail polish website and am very new to Jquery. I need to implement a "try it on" page where people can select a colour they like and the nails of the image change to that specific colour.
Basically like this: http://chinaglaze.com/Try-On/index.html
I've tried pulling the html, scripts etc from this link to try figure out how it's been done. However, I have absolutely no idea how to implement this and get it working on my site.
I've been doing a a lot of research and cannot find the answer.
Okay so the hand is a div with a .png background image implemented via css (the nails are transparent). The buttons next to the hand are plain images. Basically when someone selects the specific button image, it must then pull to the div as a background image and repeat. Thus showing through as the nail colour.
I'm not sure if this makes any sense?
Here is a sample snippet for how to set colour of one item on another on click.
(Since you have not provided any HTML i have used a sample mark up)
In the link you have provided they might be using image instead.
$(".item").click(function() {
$("#change").css("background",$(this).css("background"));
});
#change {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change">
Select a color
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>
Here is the solution, used the code from above answer and created a working [JSFiddle][1] with few changes
$(".item").click(function() {
$(".screen").css("background",$(this).css("background"));
});
.screen {
border: 1px solid #ccc;
}
#change
{
background:url("http://chinaglaze.com/images/tryon/hand_1.png") 0px 0px no-repeat;
width: 300px;
height: 516px;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left;
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
<div id="change">
Select a color
</div>
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>
I want to change the CSS of a div when hovering its parent div.
This is my HTML:
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
Here is the CSS:
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height:1px;
background:#0081C5;
width:126px;
margin-top:67px;
margin-left:40px;
position:absolute;
}
Note: .hover-on-div-1 is the class I use for a JQuery function that changes the image, the <span> is used only for a text-transform and the text-align class is pretty self explanatory.
How do I change the .line1 div when hovering over #box1?
I managed to change everything inside the #box1 div when I hover but not the .line1. Did some search on SO but since I'm a total noob when it comes to JQuery/JavaScript it didn't helped too much.
https://jsfiddle.net/nLg8Lr7x/
You don't need JS for this - your #line1 div is child of #box1 div.
Just add some css like this:
#box1:hover #line1 {
/* Changes for #line1 when #box1 hovered */
}
Here is examle on jsbin.
If you want to do it with jQuery you can make use of mouseover and mouseleave functions to change css like below.
Notes: I suggest you to make use of addClass and removeClass functions instead of setting hard codded css in functions.
$('#box1').mouseover(function() {
$('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5"); // change back css as it was
});
$('#box1').mouseover(function() {
$('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5");
});
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height: 1px;
background: #0081C5;
width: 126px;
margin-top: 67px;
margin-left: 40px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>
So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.
I hope this is a simple question im trying to push down the divs on my bottom row when my new element slides down on click
heres a link to my fiddle
http://jsfiddle.net/abtPH/
heres my jquery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>
Any ideas on how to accomplish this?
Added jQuery UI for the duration on toggleClass.
http://jsfiddle.net/abtPH/3/
JS
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
CSS
.outer{position: absolute; width: 100%; background: black; top: auto; display: none; text-align: left;}
li.active {margin-bottom:100px;}