Menu
  • HOME
  • TAGS

Svg set new coordinates with animation on 2 lines simultaneously

Tag: jquery,html,css,css3,svg

I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems.

My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow.

$('a').click(function (e) {
    if ($('.formJ').css('visibility') == 'hidden')
        $('.formJ').css('visibility', 'visible');
    else
        $('.formJ').css('visibility', 'hidden');
    e.preventDefault();
});

$("a").bind({
    mouseover: function () {
        $("circle").css({ "stroke": "#80C6E7", "fill": "white" })
        $("line").css({ "stroke": "#80C6E7" })
    },
    mouseout: function () {
        $("circle").css({ "stroke": "white", "fill": "#80C6E7" })
        $("line").css({ "stroke": "white" })
    }
});

$("element").unbind('mouseover mouseout');
body {
    background: #80C6E7;
}
a, a:active, a:hover {
    text-decoration: none;
    outline: 0;
}
.wrap {
    width: 260px;
    margin: auto;
}
.formindex {
    display: none;
}
.formJ {
    visibility: hidden;
} 
.hex-icon-plus line {
    transform-origin: 100px 100px;
    -webkit-transform-origin: 100px 100px;
    animation: hex-icon-heart-beat 2s linear infinite;
    -webkit-animation: hex-icon-heart-beat 2s linear infinite;
    -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
}

@keyframes hex-icon-heart-beat {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(0.90, 0.90, 1);
    }
    60% {
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes hex-icon-heart-beat {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(0.90, 0.90, 1);
    }
    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}
svg {
    padding-top: 20%;
    margin: 12%;
}
h1 {
    color: white;
    text-align: center;
    margin-bottom: 12px;
}
.loginform-in {
    width: 200px;
    margin: 25px;
    margin-top: 60px;
}
input {
    margin-bottom: 12px;
}
.loginbutton {
    background: #2C3E50;
    border: 1px solid #2C3E50;   
    color: #80C6E7;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    height: 29px;
    letter-spacing: 1px;
    width: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../CSS/reset.css" />
    <link rel="stylesheet" type="text/css" href="../CSS/style.css" />
    <link rel="stylesheet" type="text/css" href="../CSS/formStyle.css" />
    <title></title>
</head>
<body>
    <div class="wrap">
        <span class="hex-icon-plus">
            <a href="Form.html">
                <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
                    <g>
                        <circle fill="none" stroke="#ffffff" stroke-width="2" cx="101.874999" cy="101.000003" r="97.070312" id="svg_2" />
                        <line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="100.1875" y1="40.375009" x2="100.1875" y2="160.437515" id="svg_4" />
                        <line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="41.14063" y1="100" x2="161.078126" y2="101" id="svg_5" />
                        <line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="41.14063" y1="100" x2="161.078126" y2="101" id="svg_6" />
                    </g>
                </svg>
            </a>
        </span>
        <div class="loginform-in formJ">
            <fieldset>
                <form action="Users.html" method="get">
                    <h1>User</h1>
                    <ul>
                        <li>
                            <label for="name"></label>
                            <input type="text" size="30" name="name" placeholder="Name" id="name" />
                        </li>
                        <li>
                            <label for="name"></label>
                            <input type="password" size="30" name="word" placeholder="Password" id="word" />
                        </li>
                        <li>
                            <label></label>
                            <input type="submit" id="login" name="login" value="Login" class="loginbutton" />
                        </li>
                    </ul>
                </form>
            </fieldset>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../Scripts/form.js"></script>
</body>
</html>

My desired outcome is this shape

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g>
        <circle id="svg_2" r="97.07031" cy="101" cx="101.875" stroke-width="2" stroke="#000000" fill="none"/>
        <line id="svg_4" y2="160.43751" x2="100.1875" y1="40.37501" x1="100.1875" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
        <line id="svg_5" y2="101.0001" x2="161.07813" y1="158.55503" x1="101.11938" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
        <line id="svg_6" y2="158.48696" x2="99.49754" y1="99.99989" x1="41.14063" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
    </g>
</svg>

Best How To :

You can certainly do this with pure SVG if thats an option, not sure css/jquery is even needed.

You can morph a path, as long as they have the same number of points in the path, so this would mean a path rather than a line.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g id="mycross">

     <circle fill="none" stroke="black" stroke-width="2" cx="101.874999" cy="101.000003" r="97.070312" id="svg_2" />
     <path id="mypath" d="M50,100L90,100L150,100" stroke="black" stroke-width="2" fill="none"/>
     <path id="vertline" d="M100,50L100,150" stroke="black" stroke-width="2"/>
     <animate xlink:href="#mypath" attributeName="d" from="M50,100L100,100L150,100" to="M50,100L100,150L150,100" dur="2s" begin="mycross.click" fill="freeze" />

  </g>
</svg>

jsfiddle

Detect when the jQuery UI slider is being moved?

jquery,html,css,jquery-ui

You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...

Dynamically resize side-by-side images with different dimensions to the same height

javascript,html,css,image

If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

Dynamically select from a dynamically generated dropdown

php,html,select,drop-down-menu

It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...

why i don't get return value javascript

javascript,jquery,html,json,html5

the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...

How to make background body overlay when use twitter-bootstrap popover?

html,css,twitter-bootstrap

Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

Identifier starts immediately after numeric literal

jquery,ajax,razor

I think you have to include it with the ' mark Like this : var userID = '@User.Identity.GetUserId()';...

Set default value for struts 2 autocompleter

jquery,jsp,struts2,struts2-jquery,struts2-jquery-plugin

You should use the value attribute as suggested by @Choatech: value false false String "Preset the value of input element." The value specified, however, should be one of the keys listed in your cityList, not some random value. If the value you want to use is an header one, like...

Automatically calling server side class without

javascript,html,ajax

Trigger the click event like this: $('._repLikeMore').trigger('click'); ...

HTML elements in Angular bindings expression

html,angularjs

You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

Target next instance of an element/div

javascript,jquery,html

nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...

How do I display my mysql table column headers in my php/html output?

php,html,mysql,table,data

Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...

show/hide an overflow div on anchor

javascript,jquery,html,scroll

I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/ This should work on all browsers included IE7 $('#b1').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow"); }); $('#b2').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow"); }); $('#b3').click(function () { $('#result').show();...

How to remove all the borders of a selectbox?

jquery,html,css,drop-down-menu

Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...

Rerendering Handlebars template upon data change

jquery,handlebars.js

Handlebars does not handle data binding to update on value changes. You may use a framework like ember which comes with two-way data binding. A vanilla way to perform re-rendering upon data change is using Object.observe: Object.observe(someJsonObject, function() { template(someJsonObject); }); ...

How to remove unmatched row in html table using jquery

jquery,html

Try this solution: var notrem = []; $('#Table1 tr').each(function(){ var currentRowHTML = $(this).find("td:first").html(); $('#Table2 tr').each(function(i){ var c= $(this).find("td:first").html(); if(c == currentRowHTML ){ notrem.push(i); } }); }); $('#Table2 tr').each(function(i){ if(notrem.indexOf(i) < 0){ $(this).remove(); } }); Explanation: First gather all indexes of Table2 that are equal and are not to be removed....

Javascript change the souce of all images present inside a string

javascript,jquery

You can wrap your string into a jQuery-object and use the .find()-method to select the images inside the message-string: var msg = '<span class="user_message">hiiiiiii<img title=":benztip" src="path../files/stickers/1427956613.gif" /><img src="path../files/stickers/416397278.gif" title=":happy" /></span>'; var $msg = $(msg); $msg.find('img').attr('src', 'path_to_img'); $("#chat_content").append($msg); Demo...

Background-image style with JS not working in ie9

javascript,jquery,html,internet-explorer

Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...

tag in HAML

html,css,haml

HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...

Website showing differently in windows xp and mobile

html,css

The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...

Parsing XML array using Jquery

javascript,jquery,xml,jquery-mobile

EMI and CustomerName are elements under json so you can use .find() to find those elements and then text() to get its value. $(data).find("json").each(function (i, item) { var heures = $(item).find("CustomerName").text(); var nbr = $(item).find("EMI").text(); console.log(heures); }); .attr() is used to get the attribute value of an element like in...

Javscript Replace Text in tags without changing children element HTML and Content

javascript,jquery

The way I think you will have to do it is in each element individually and use this jquery small plugin I rewrite here is the code and also fiddle the html <div id="parent"> thisi sthe fpcd <p>p</p> </div> plugin to find the content of the selector text without child...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

access the json encoded object returned by php in jquery

php,jquery,ajax,json

Try: $.ajax({ url: "functions.php", dataType: "JSON", data: {id: id}, type: 'POST', success: function(json){ for(var i=0;i<json.length;i++){ alert(json[i].fname); } } }); ...

HTML CSS Two 2-column tables side by side with same height and width

html,css

Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox

Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...

How to remove legend from bottom of chart - amcharts

jquery,linechart,amcharts

In amcharts the legends are added manually, In your case jut remove the lines which add legends to the chart. For e.g., The legends are added as follows, var legend = new AmCharts.AmLegend(); chart.addLegend(legend); OR AmCharts.makeChart("chartdiv", { "legend": { "useGraphSettings": true }, } Just remove the above lines from your...

slideToggle state not working with multiple boxes

javascript,jquery,cookies

Use onbeforeunload function of javascript window.onbeforeunload = function() { //Declare cookie to close state } This function will be called every time page refreshes Update: To make loop through every value use this $.each this way: var new_value = ""; window.onbeforeunload = function() { $.each($('div.box_container div.box_handle'),function(index,value){ new_value = ($(value).next('.box').css('display') ==...

submitting form then showing loading image by javascript

javascript,html

Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...

change css dynamically by selecting dropdown list item

jquery,html,css,drop-down-menu

I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...

How to send current page number in Ajax request

javascript,jquery,ajax,spring-mvc,datatables

DataTables already sends parameters start and length in the request that you can use to calculate page number, see Server-side processing. If you still need to have the URL structure with the page number, you can use the code below: "ajax": { "data": function(){ var info = $('#propertyTable').DataTable().page.info(); $('#propertyTable').DataTable().ajax.url( "${contextPath}/admin/getNextPageData/"+(info.page...

Div with the form of a pencil [duplicate]

html,css,css-shapes

.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

writing jQuery instead of $ to access controls in a page

jquery

Yes you can write that way. jQuery.noConflict(); jQuery( "body" ).append('Hello'); Read it here...

Top header 100% of screen, but body only 70%?

html,css

Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...

Onclick add html content and remove it by clicking “delete” link

javascript,jquery

Even though you are using .on() with event delegation syntax, it is not working as the element to which the event is binded is created dynamically. You are registering the handler to col-md-1 which is the parent of the delete button, but that element also is created dynamically so when...

How to find the days b/w two long date values

javascript,jquery,date

First you need to get your timestamps in to Date() objects, which is simple using the constructor. Then you can use the below function to calculate the difference in days: var date1 = new Date(1433097000000); var date2 = new Date(1434479400000); function daydiff(first, second) { return (second - first) / (1000...

want to show and hide text using “this” jquery

javascript,jquery

I guess OP wants to link the button more with corresponding click span class $('.clickme').click(function(){ $(this).parent().prev().find(".click").toggle(); }); FIDDLE DEMO...

Converting “i+=n” for-loop to $.each

javascript,jquery

A jQuery only way would be to iterate over the nth-child(4n) $('.thumbnail:nth-child(4n)').each(function(){ $(this) .prevAll('.thumbnail').andSelf() .wrapAll($('<div/>',{class:"new"})) }); Demo Considering the complexity, not sure whether the prevAll() performs better than the plain for loop. Referring one of my similar answer here...

Get elements containing text from array

javascript,jquery,html,arrays,contains

You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...