there is any jquery which is find class after parent div, I am using class "trapezoid-two" and make jquery code but that create issue, so can any one tel me how to find css after parent div class('ban-menu1').
HTML:-
<div class="col-md-2 nopadding">
<div class="ban-menu1"></div>
<svg class="trapezoid-two" viewbox="0 0 100 100" preserveAspectRatio="none" width="100%">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="images/shade-two.jpg" x="0" y="0" width="110" height="100" />
</pattern>
</defs>
<path d="M0,0 L100,23 L100,77 L0,100z" fill="url(#img1)"></path>
</svg>
</div>
Jquery
$(document).ready(function(){
$( ".trapezoid-two" ).hover(
function() {
$(this).find('path').attr('d','M0,0 L100,0 L100,100 L0,100z');
$(this).parent().addClass('img-scale');
}, function() {
$(this).find('path').attr('d','M0,0 L100,23 L100,80 L0,100z');
$(this).parent().removeClass('img-scale');
}
);
});
ban-menu1 is a sibling of .trapezoid-two use prev() to help you add a class to it
$(document).ready(function(){
// svg path change
$( ".trapezoid-two" ).hover(
function() {
$(this).find('path').attr('d','M0,0 L100,0 L100,100 L0,100z');
$(this).prev().addClass('img-scale');
}, function() {
$(this).find('path').attr('d','M0,0 L100,23 L100,80 L0,100z');
$(this).prev().removeClass('img-scale');
}
);
see demo : https://jsfiddle.net/cgvbt80q/
Related
A HTML page contains 2 SVG shapes, each with a tooltip (created with Tippy).
How could I make the tooltips appear at the same position in the page (let's say in the red rectangle below - right side of the page)?
tippy('#circle_1', {
content: `That's a circle !`,
arrow: false,
});
tippy('#rect_1', {
content: 'Here is a rectangle !',
arrow: false,
});
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<svg width="250" height="250">
<circle id="circle_1" cx="30" cy="45" r="25" />
<rect id="rect_1" x="80" y="25" width="60" height="40" />
<rect id="placeholder" x=150 y=25 width="100" height="50" fill-opacity="0" stroke="red" stroke-width="1" />
</svg>
A tooltip by definition is something that pops up where the cursor is.
If you need to set the popup text to show in other place, just use plain js/jquery
$(".tooltip-elem").hover(function(){
var tooltipText = $(this).data("tooltip");
//console.log(tooltipText);
$("#placeholder1").html( tooltipText );
});
$(".tooltip-elem").on("mouseleave", function(){
$("#placeholder1").html( "" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg style="display: inline-block;" width="250" height="150">
<circle class="tooltip-elem" id="circle_1" cx="30" cy="45" r="25" data-tooltip="That's a circle !" />
<rect class="tooltip-elem" id="rect_1" x="80" y="25" width="60" height="40" data-tooltip="Here is a rectangle !" />
</svg>
<div style="display: inline-block;" id="placeholder1"></div>
I'm currently creating multiple svgs on a single page, where each svg usually has three buttons to click. Each button is a rect and text element grouped by a g element. I want a user to click a button, and set a border on that button to show the selection. This is currently being done by adding a .selected class to the chosen button and removing .selected from any sibling. When I try to query the siblings and remove the .selected class, I am somehow removing the class from other svgs on the page. I'm guessing it's because jquery and svg don't play nice, so I'm thinking of switching to an svg library instead, but until now I've been able to work around most issues cleanly. Code below:
<!-- Index.html -->
...
<svg ...//attributes//...>
<g class="button1">
<rect class="" ...//attributes//...></rect> // Clicking this one...
<text ...//attributes//...> button 1 </text>
</g>
<g class="button2">
<rect class="" ...//attributes//...></rect>
<text ...//attributes//...> button 2 </text>
</g>
</svg>
...
<svg ...//attributes//...>
<g class="button1">
<rect class="" ...//attributes//...></rect> // ...affects these elements
<text ...//attributes//...> button 1 </text>
</g>
<g class="button2">
<rect class="" ...//attributes//...></rect>
<text ...//attributes//...> button 2 </text>
</g>
</svg>
Jquery:
$("g").click(function () {
var selection = $(this);
var siblings = selection.siblings();
for (var sibling in siblings) {
$(sibling).find("rect").attr("class", "");
}
selection.find("rect").attr("class","selected");
});
I've also tried using closest("svg").children("rect"), closest("g").children("rect") after encompassing the all buttons in another g element, parent("g").children("rect"). All do the same thing.
EDIT: MCVE (I hope): https://jsfiddle.net/c1cceya9/
Your problem is this code:
for (var sibling in siblings) {
$(sibling).find("rect").attr("class", "");
}
You don't need to loop through the siblings yourself, jQuery will do that for you. All you need is:
$("g").click(function () {
var selection = $(this);
selection.siblings().find("rect").attr("class", "");
selection.find("rect").attr("class","selected");
});
Your code was not doing what you think it was. It was looping through the jQuery object, not an array of siblings. The jQuery object contains all sorts of fields including pointers to the document. That's why it was clearing all selections.
Working demo
$("g").click(function () {
var selection = $(this);
selection.siblings().find("rect").attr("class", "");
selection.find("rect").attr("class","selected");
});
.selected {
stroke: white;
stroke-width: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="200">
<rect height="100" width="200" fill="black"></rect>
<g class="button1">
<rect class="" x="10" y="10" height="80" width="80" fill="red"></rect> // Clicking this one...
<text x="25" y="50" fill="white"> button 1 </text>
</g>
<g class="button2">
<rect class="" x="110" y="10" height="80" width="80" fill="blue"></rect>
<text x="125" y="50" fill="white"> button 2 </text>
</g>
</svg>
<svg height="100" width="200">
<rect height="100" width="200" fill="black"></rect>
<g class="button1">
<rect class="" x="10" y="10" height="80" width="80" fill="red"></rect> // Clicking this one...
<text x="25" y="50" fill="white"> button 1 </text>
</g>
<g class="button2">
<rect class="" x="110" y="10" height="80" width="80" fill="blue"></rect>
<text x="125" y="50" fill="white"> button 2 </text>
</g>
</svg>
I code a web app, in this have some images tag and I set it display to none. Like example code . My issue is when I run on some device image cannot load. When i set image show only blank display.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<g id="gimg">
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>
</g>
<rect id="myrect" x="100" y="100" width="20" height="20"></rect>
</svg>
<script>
$("#myrect").on("click",function(){
$("#img").show();
});
</script>
If the problem is in phones try this:
$("#myrect").on("click",function(){
$("#img").show();
return false;
});
Can you add style=display: none to your image element
<image id="img" style="display:none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>.
This should load the image
Have you tried this way?
<svg>
<defs>
<symbol id="my-icon" viewBox="0 0 30 30">
<rect id="myrect" x="25" y="25" width="20" height="20" />
</defs>
</symbol>
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px" />
</svg>
$("#myrect").on("click", function() {
$("#img").show();
});
Just change the viewBox, etc to your requirements.
I hope this helps.
I have simple SVG chart like this:
<svg id="ss" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="1000" height="300" >
<g>
<rect fill="#aaaaaa" stroke-width="0" stroke="none" height="1" width="1000" y="200" x="0" /> </g>
<g class="bar">
<rect height="81.858" width="30" y="118.142" x="10" />
</g>
<g class="bar">
<rect height="111.6012" width="30" y="88.3988" x="55" />
</g>
<g class="bar">
<rect height="66.98639999999999" width="30" y="133.0136" x="100" />
</g>
</svg>
How to use pure javascript to detect mouse over the rect element? And knowing which rect element is being over?
What's wrong with directly assigning the event?
var rects = document.querySelectorAll( 'rect' );
for( var rect of rects ) {
rect.addEventListener( 'mouseover', cb );
}
function cb(){
// the "this" object is your reference to the rect hovered over
console.log( this );
}
I'm starting to learn JS and i have this (probably very easy) task that I'm having problems with.
So the main task is to make the lower green triangle change it's color depending on which color i click on upper object.
I made something like this:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SVG, JavaScript</title>
<script type="text/javascript">
function changeColor("triangle"){
document.getElementById("group").getAttributeNS("fill");
evt.target.setAttributeNS("fill");
}
</script>
</head>
<body>
<svg height="500" width="500">
<g id="group">
<rect x="0" y="0" width="200" height="200" style="fill:gray;stroke:none;stroke-width:0"/>
<rect id="red_triangle" x="0" y="0" width="100" height="100" style="fill:red;stroke:none;stroke-width:0"/>
<rect id="yellow_triangle"x="100" y="0" width="100" height="100" style="fill:yellow;stroke:none;stroke-width:0"/>
<rect id="blue_triangle"x="0" y="100" width="100" height="100" style="fill:blue;stroke:none;stroke-width:0v"/>
<rect id="green_triangle"x="100" y="100" width="100" height="100" style="fill:lime;stroke:none;stroke-width:0"/>
<ellipse cx="100" cy="100" rx="100" ry="100" style="fill:gray;stroke:none;stroke-width:0"/>
<polygon id="triangle" points="100,225 150,300 50,300" style="fill:lime;stroke:none;stroke-width:0" onclick="changeColor("triangle")"/>
</g>
</svg>
</body>
</html>
but obviously it's not working. Could somebody help me with some suggestion?
// the string instead of argument name raises Error: unexpected string
function changeColor("triangle"){
// you get the attribute but don't do anything with it.
// and the group doesn't even have a fill attribute
document.getElementById("group").getAttributeNS("fill");
// here you try to set an attribute but setAttributeNS requires 3 arguments: namespace, attribute and value
// simpler setAttribute would be enough, but the value would still be overwriten by style="fill:whatever"
// and evt.target is undefined, there's no evt object
evt.target.setAttributeNS("fill");
}
then in your SVG:
// the quotes are broken,
// and here you pass a string which I'd assume to be the ID of an element you want to change
onclick="changeColor("triangle")"
So, all in all:
The onclick should be on the source rectangles, not the target triangle: <rect onclick="changeColor('triangle', this)" /> where 'triangle' is the ID of element you want to change, and this is a reference to the clicked rectangle.
SVG:
<svg height="500" width="500">
<g id="group">
<rect x="0" y="0" width="200" height="200" style="fill:gray;stroke:none;stroke-width:0"/>
<rect id="red_triangle" x="0" y="0" width="100" height="100" style="fill:red;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/>
<rect id="yellow_triangle"x="100" y="0" width="100" height="100" style="fill:yellow;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/>
<rect id="blue_triangle"x="0" y="100" width="100" height="100" style="fill:blue;stroke:none;stroke-width:0v" onclick="changeColor('triangle', this)"/>
<rect id="green_triangle"x="100" y="100" width="100" height="100" style="fill:lime;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/>
<ellipse cx="100" cy="100" rx="100" ry="100" style="fill:gray;stroke:none;stroke-width:0"/>
<polygon id="triangle" points="100,225 150,300 50,300" style="fill:lime;stroke:none;stroke-width:0" />
</g>
</svg>
JS:
function changeColor( target, source ){
var color = source.style.fill;
document.getElementById( target ).style["fill"] = color;
}
Fiddle: http://jsfiddle.net/harg5kyz/1/