We Keep Coding

How do I make a button disappear once clicked?

This is my code. https://jsfiddle.net/3phzezfj/3/
function showhidediv(rad){
var rads=document.getElementsByName(rad.name);
document.getElementById('one').style.display=(rads[0].checked)?'block':'none' ;
document.getElementById('two').style.display=(rads[1].checked)?'block':'none' ;
document.getElementById('three').style.display=(rads[2].checked)?'block':'none' ;
document.getElementById('four').style.display=(rads[3].checked)?'block':'none' ;
}
function switchVisible()
{
$("#newpost").hide();
$("#newpost2").show();
}
function previousVisible()
{
$("#newpost").show();
$("#newpost2").hide();
}
How do I make the next button disappear once I've clicked it but if I press back, it will reappear?
Thanks.

You can use toggle();
Description: Display or hide the matched elements.
$("#newpost2").toggle();
If #newpost2 is hidden, it will show it, if it's shown, it will hide it.

Instead of onclick use addEventListener for click event.
I have edited your code here codepen
And you don't have to mix js and jquery like this
document.getElementById('four') and $("#newpost")
it's better to decide which one you want to use

Your fiddle was not having jquery js included.
Please check updated fiddle here.
Attached the event handler like below.
$("#btnBack").click(previousVisible);
$("#btnNext").click(switchVisible);
And moved the Next button inside the div.
Hope this is what you were trying to achieve.

I think this is what you want right?
var check = 0;
$(document).ready(function() {
$("#Button1").click(function() {
if(check == 0)
{
$("#Button1").hide();
}
});
$("#Button2").click(function() {
if(check == 0)
{
$("#Button1").show();
}
});
});
.btnSubmit {
background-color: #7f0000;
background-image: -webkit-linear-gradient(top, #7f0000, #6c0404);
background-image: -moz-linear-gradient(top, #7f0000, #6c0404);
background-image: -o-linear-gradient(top, #7f0000, #6c0404);
background-image: -ms-linear-gradient(top, #7f0000, #6c0404);
background-image: linear-gradient(top, #7f0000, #6c0404);
border: 0;
text-transform: uppercase;
color: white;
font-size: 14px;
font-weight: bolder !important;
height: 42px;
padding: 0 20px;
margin: 0;
text-shadow: -1px -1px 2px 2px #000, 1px 1px 2px 2px #aa4242;
border-bottom: 1px solid #383838;
font-family: garamond, serif;
text-shadow: 1px -1px 0px #090909;
width: 150px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid eightwidth" align="center" style="background-color: #282828; padding: 1px; padding-bottom: 0px;" id="disappear">
<button class="btn btnSubmit" id="Button1" type="button" value="Click">NEXT</button>
<button class="btn btnSubmit" id="Button2" type="button" value="Click">Appear</button>
</div>

Button disappear!!
$("#next").click(function(){
$("#next").hide();
$("#back").show();
});
$("#back").click(function() {
$("#back").show();
$("#next").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" id="next" value="Next"/>
<input type="button" id="back" value="Back"/>

jQuery column addition sequencing

I am trying to apply visual cues for the user as they insert data in the form field. Red indicates that the input is not valid, whilst green indicates that the content is valid. The code is functioning, albeit in a glitched manner.
» Issue One: The "red state" flickers on any event.
» Issue Two: If you manually insert correct (number) input in all fields, one by one, and then, in the last field, press backspace, so that the current input field is an empty string, the sum total will return as NaN.
I suspect this is due to the parseInt() JavaScript method, but I need that so that computation can be performed on what is pushed into the arrays.
The specific reason why this is setup this way, is because the on initial load, the fields may already be populated and if so, I want it to display all green boxes and the check mark as a visual queue that, that section is done. This is also the reason why the entire block of code is wrapped in a setInterval() so the page will always be scanning what state should be displayed and apply the proper classes accordingly.
HTML:
Staff Information (for all office
locations)
</center>
</div><span class="mrQuestionText" style=""><br>
<br>
17. A. Indicate the TOTAL number of full time staff your firm has in the following
positions. DO NOT count a staff member in more than one position. (numeric values
only, no need for thousands separator)</span>
<table summary="<hr/><div style='border:1px solid #888;
background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'><center><b>Staff Information (for all office locations)</b></center></div><br/><br/>17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)<span class='sumcol'></span>" class="mrQuestionTable" style="display: inline-block;">
<tbody>
<tr>
<td id="Cell.0.0"></td>
<td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0
auto; display:block; text-align:center;
width:280px;"> </span></span>
</td>
</tr>
<tr>
<td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">1. Principals/Partners</span>
</td>
<td id="Cell.1.1" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QPrincipals__Partners_QQ17A" id="_Q33_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.2" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">2. Project
Managers/Directors</span>
</td>
<td id="Cell.1.2" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QProject__Managers_QQ17A" id="_Q33_Q1_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.3" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">3. Designers</span>
</td>
<td id="Cell.1.3" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QDesigners_QQ17A" id="_Q33_Q2_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.4" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">4. Other interior design
staff</span>
</td>
<td id="Cell.1.4" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QOther__design__staff_QQ17A" id="_Q33_Q3_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.6a" class="mrGridCategoryText" style="text-align: Left;
vertical-align: Middle; background-color: #d8d8d8; width: 430px; border: 1px
Solid black;"><span class="rrSumColTotal mrQuestionTextBold" style="float:right;">A. Total # of Interior Design Staff:</span>
</td>
<td id="Cell.1.6a" style="text-align: Center; vertical-align: Middle;
background-color: #d8d8d8; width: auto; border: 1px Solid black;">
<span id="customSum" style="color: green; background-color: rgb(229, 242,
251);">0</span>
<div style="display:inline-block; clear:none; width:15px;" id="topFour"> </div>
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style="text-align: left;
vertical-align: middle; width: 430px; border: 1px solid black;
background-color: rgb(248, 248, 248);"><span class="mrQuestionText" style="
font-size: 10pt;"><b style="float:right;">B. Total # of Non-Interior Design
Staff:</b></span>
</td>
<td id="Cell.1.5" style="text-align: center; vertical-align: middle; width:
auto; border: 1px solid black; background-color: rgb(248, 248, 248);">
<input type="text" name="_QP1_QGRQ17A_QNon__Interior_QQ17A" id="_Q33_Q4_Q0" class="mrEdit" autocomplete="on" style=" width: 215px;" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="rrSumColTotal mrQuestionTextBold" style="float: right;">C. Total # of
Employees in the Firm:</span>
</td>
<td id="Cell.1.5" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;"><span id="spRunningTotal_12_1" class="rrRunningTotal" data-tableordinal="12" data-columnordinal="1">0</span>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript + jQuery:
$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");
var checkValid = setInterval( function() {
$("input.rowA").each(function(i){
var totals = [0,0,0,0];
var total = 0;
if($('input.complete').length == $('input.rowA').length)
{
$('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
$("input.rowA").each(function(i){
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/))
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
}
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
} else {
$('#topFour').html('');
totals = [0,0,0,0];
$("input.rowA").each(function(i){
var items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
} else {
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
}
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
}
});
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();
CSS:
.complete {
border: solid 1px green;
}
.rowA {
background-color: #CCF3FF !important;
height: 30px;
text-align: center;
font-size: 17px;
color: green;
}
jsFiddle Demo
Lastly, in addition to the issue stemming from the parseInt() utilization, the jsFiddle says that I needed to move my totals, and total variables to a point where they can both be accessed safely and that is where most of my problems started. That is to say, if I re-declare those variables inside their respective $.each() statements and if() conditionals, it works fine but that is bad practice, supposedly.

The main problem is the way setinterval being used. It not only checks the input every 120 ms, it also rebinds the keypress/change events on false input each time and on top of that it uses the same loop within its looping, thus implementing every action multiple times.
Another performance thing is that within that interval the jquery objects have to be searched each time in the DOM. For example, each time $("input.rowA") is used the Dom is searched for inputs of class rowA, whereas if they are put in a variable beforehand, the buffered values can be reused.
Instead of the interval it's best to have a single change/keyup event to do the checks and reuse the same code on page load to check for those preloaded values. If despite all, you still need that interval (although normally the triggers would be known when the check has to be called), the cleaned code should prove more resource friendly (but could be improved further if the setinterval is really really really necessary)
var $inputBoxes = $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');
var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)
$inputBoxes.on("keyup change propertychange input paste", function(e) {
SetInput(this);
CheckInputs();
});
function SetInput(inputBox){
var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > 0;
$input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements
$input.toggleClass('complete', isvalid).toggleClass('error', val.length > 0 && !isvalid);
}
function SetAllInputs(){
$inputBoxes.each(function(){SetInput(this);});
CheckInputs();
}
function CheckInputs(){
var total = 0, validcount = 0;
$inputBoxes.each(function(){
if($(this).data('valid')){
validcount++;
total+= $(this).data('number');
}
});
$custSum.text(total);
$chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}
SetAllInputs(); //call on page load, in case of pre entered values.
Fiddle

By changing the listener method from .on() to .bind() and applying more parameter events, the issue of the parseInt NaN result has been solved. I still get a flicker of the red border however. Ultimately however, I think the best result is to build up a master event bubble detector, as many browser plug-gins and standard features (i.e., Internet Explorer's "x" button in form fields) have various ways to bypass jQuery event listeners methods.
**
From
**
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
**
To:
**
$('.rowA').bind("change keydown keypress paste cut mouseup focus", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});

jQuery div hover slide effect

I have this div here:
<div style="
width: 259px;
height: 201px;
background-color: #282c2f;
box-shadow: 0px 8px 10px #000;
border-radius: 10px;
border: 2px solid #282c2f;">SHOP</div>
That when a user hovers, the grey box needs to slide down into a teal box. So the new color is shown, and a link is ready to be clicked.
It should slide into:
<div style="
width: 259px;
height: 201px;
background-color: #00e7b4;
box-shadow: 0px 8px 10px #000;
border-radius: 10px;
border: 2px solid #282c2f;"><a href="shop.htm">SHOP</div>
Is there anything where I can see an effect similar to this working? Perhaps plugin suggestions? Not sure how to start on this.
Very similar to what I am looking for, except the black disappears as it slides out of the div: http://jsfiddle.net/bUcZg/

I believe this is what you're trying to accomplish. I haven't tested for browser compatibility, so you may want to do that and play around with it.
Basically just involved adding an additional div, and using slideDown on the new div.
<div id="newTarget" style="display:none;width:100px; height:100px; background-color:teal; border: teal solid 1px; position:absolute;">
<a id="newTargetLink" href="#">Link</a>
</div>
http://jsfiddle.net/bUcZg/22/

You can chain animations in jQuery. If I understand you correctly you could do it like this:
trigger.hover(function() {
target.animate({top: 0}).animate({opacity : 0});
}
Example: http://jsfiddle.net/bUcZg/21/

Making a custom right click menu and binding it to a right click inside of another div

I need your help,
Without using long and code resource intensive jQuery and Javascript context menu plugins, how can one, just using plain & simple jQuery code to basically take my div (which has the id: 'right-click-menu') and bind a right click action to the other div which had the id: box1?
Here is a fiddle: http://jsfiddle.net/ALAHX/
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#right-click-menu {
width: 150px;
border-top: 1px solid rgb(212,208,200);
border-left: 1px solid rgb(212,208,200);
border-right: 1px solid rgb(64,64,64);
border-bottom: 1px solid rgb(64,64,64);
font-family: tahoma;
font-size: 8.5pt;
box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
list-style-type: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
background: rgb(212,208,200);
margin: 0;
padding: 2px
}
#right-click-menu ul li {
padding: 4px;
}
#right-click-menu li:hover {
color: #fff;
cursor: pointer;
background: rgb(10,36,106);
}
</style>
</head>
<body>
<div id="right-click-menu">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>
</html>

Javascript:
$(document).ready(function() {
$('#box1').mouseup(function(event) {
if (event.which == 3) { // right click
$('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
}
});
});
HTML: Be sure to include position: absolute for the menu to allow it to move around, and oncontextmenu to return false to prevent the default browser right-click.
<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
Fiddle:
http://jsfiddle.net/ALAHX/1/
You'll want to include things like hiding the menu at first and when options are selected, but this should get you started.
Looking at you comment, you may or may not have included jQuery in your project, which is a Javascript addon. The above code is written using jQuery, so make sure to include a <script> link to it in your HTML.

$(document).ready(function(){
$('div').click(function(){
$('#box1').slideToggle('slow');
});
});
Maybe something like this?

Is it possible to make a squiggly line?

If I wanted to make a horizontal line, I would do this:
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
If I wanted to make a vertical line, I would do this:
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
A curved line is trickier, but possible using border-radius and wrapping the element:
<style>
.curve{
width:100px;
height:500px;
border:1px #000 solid;
border-radius:100%;
}
#wrapper{
overflow:hidden;
width:40px;
height:200px;
}
</style>
<body>
<div id="wrapper">
<div class="curve"></div>
</div>
</body>
But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only css (and javascript since it does seem that it will be necessary to be able to more easily generate them).
note:
As expected, given your answers there is no way to do this in sole css...javascript and jquery are 100 percent okay for your answer...NO IMAGES CAN BE USED

This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.
With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.
I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output
The basic gist is:
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div>
You can produce some convincing squiggly lines with some modifications:
.holder {
position: relative;
width: 200px;
height: 50px;
top: 25px;
}
.tinyLine {
position: absolute;
/* Cuts off the bottom half of the pattern */
height: 20px;
/* For better cross browser consistency, make it larger with width. */
width: 1000%;
/* And then scale it back down with scale, recentering with translateX. */
transform: translateX(-45%) scale(0.1);
}
.tinyLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine {
/* Must be after background definition. */
background-size: 40px 40px;
}
<div class="holder">
<div class="tinyLine tinyLine1"></div>
<div class="tinyLine tinyLine2"></div>
</div>
The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.
It should also be very fast, linear-gradients are rendered on the GPU in chrome.

EDIT: Given the requirement of no images/data uri.
You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.
Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.
http://jsfiddle.net/V7QEJ/1/
function makeLine(id, squiggleCount) {
var curve;
var lineEl = $(id);
for (var i = 0; i < squiggleCount; i++) {
curve = document.createElement('div');
curve.className = 'curve-1';
lineEl.append(curve);
curve = document.createElement('div');
curve.className = 'curve-2';
lineEl.append(curve);
}
}
$(document).ready(function(){
makeLine('#line', 16);
});
.curve-1,
.curve-2 {
display: inline-block;
border: solid 1px #f00;
border-radius: 50px;
height: 20px;
width: 20px;
}
.curve-1 {
border-bottom: none;
border-left: none;
border-right: none;
}
.curve-2 {
border-top: none;
border-left: none;
border-right: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="line">
</div>
Old (with images):
There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.
Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.
http://jsfiddle.net/zadP7/
.aux{
display: inline-block;
vertical-align: top;
}
.line{
display: inline-block;
height: 400px;
width: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAoCAYAAADHVmuAAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYYFSs0NbBHxgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAGc0lEQVQ4EQFoBpf5AQAAAP8AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAgAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAQAAAP8AAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACelxA/rjIgrgAAAABJRU5ErkJggg==);
}
<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>

Pure CSS solution:
We can use the sin wave character '∿' character and then
Set a negative value for letter-spacing
FIDDLE
Just for fun we can use different characters to get other squiggles:
FIDDLE #2
div {
font-size: 50px;
font-family: verdana;
}
.tilde {
letter-spacing: -19px;
}
.ohm {
letter-spacing: -6px;
}
.ac {
letter-spacing: -25px;
}
.acd {
letter-spacing: -11px;
}
.curlyv {
letter-spacing: -12px;
}
.frown {
letter-spacing: -13px;
}
<div class="acd">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎</div>
<div class="frown">⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢</div>
<div class="ac">∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾</div>
<div class="ohm">ΩΩΩΩΩΩΩΩΩΩ</div>

If you want the underline of some text to be a squiggly line, you can use the following css:
span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<span>Example text here</span>
Source: https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example

if you are not looking for something really neat, but just for the fun of it, play with multiple box-shadow:
http://codepen.io/gcyrillus/pen/mfGdp or http://codepen.io/gcyrillus/pen/xhqFu
.curve{
margin:3em 0;
width:100px;
height:150px;
border-radius:50%;
box-shadow:
0px 2px 1px -1px,
400px 0px 0px 0px white,
400px 2px 1px -1px ,
300px 0px 0px 0px white,
300px -2px 1px -1px,
600px 0px 0px 0px white,
600px 2px 1px -1px ,
500px 0px 0px 0px white,
500px -2px 1px -1px,
800px 0px 0px 0px white,
800px 2px 1px -1px ,
700px 0px 0px 0px white,
700px -2px 1px -1px,
1000px 0px 0px 0px white,
1000px 2px 1px -1px ,
900px 0px 0px 0px white,
900px -2px 1px -1px,
1200px 0px 0px 0px white,
1200px 2px 1px -1px ,
1100px 0px 0px 0px white,
1100px -2px 1px -1px,
1400px 0px 0px 0px white,
1400px 2px 1px -1px ,
1300px 0px 0px 0px white,
1300px -2px 1px -1px,
1600px 0px 0px 0px white,
1600px 2px 1px -1px ,
1500px 0px 0px 0px white,
1500px -2px 1px -1px;
position:relative;
}
.curve:before,.curve:after {
content:'';
position:absolute;
height:100%;
width:100%;
border-radius:100%;
box-shadow:inherit;
}
.curve:before {
left:100%;
transform:rotate(180deg);
}
.curve:after {
left:200%;
}

﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
& #65103 ; (wavy low line)
I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)
method 1 (snatched from Wulf answering a related question)
<span style="border-bottom: 1px dotted #ff0000;padding:1px">
<span style="border-bottom: 1px dotted #ff0000;">
foobar
</span>
</span>
(not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)
method 2 (inspired by DanieldD)
using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle
here is "the meat" of the code for the positioning
function performUnderWavyLowLineazation(contentElt){
var wavyFontSize = 40;
var width = contentElt.width();
contentElt.addClass("underWavyLowLined");
replaceSpaceByNonBreakingSpace(contentElt);
var sp = "<span/>";
var wrapper = contentElt.wrap(sp).parent();
wrapper.addClass("wavyParent");
var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
var ghost;
var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
= ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
ghost.html(contentElt.html());
ghost.find("*").removeAttr("id");
replaceSpaceByNonBreakingSpace(ghost);
var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
innerUnderLine.html("﹏".repeat(numWavyChars));
var lineLength = wavyFontSize * numWavyChars;
var defect = width - lineLength;
innerUnderLine.css("left", defect/2);
var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
underlining.appendTo(wavyGroup);
contentElt.appendTo(wavyGroup);
}

Thank #yeerk for such a wonderful solution!
But I would like to suggest some improvements to his first variants — to those of waves what seem to be more triangular. I would suggest to use :before and :after pseudo-elements instead of hard-coded enclosed divs.
It may look like this (html):
<div class="triangly-line"></div>
— where triangly-line is a target decorated element (not "waved" but "triangled").
Corresponding styles (using LESS notation) will look like this:
#line-width: 300px;
#triangled-size: 6px;
#triangly-color: red;
#double-triangled-size: (#triangled-size * 2 - 1px);
.linear-gradient (#gradient) {
background: -webkit-linear-gradient(#gradient);
background: -o-linear-gradient(#gradient);
background: linear-gradient(#gradient);
}
.triangly-gradient (#sign, #color) {
.linear-gradient(~"#{sign}45deg, transparent, transparent 49%, #{color} 49%, transparent 51%");
}
.triangly-line {
overflow: hidden;
position: relative;
height: #triangled-size;
&:before {
.triangly-gradient("", #triangly-color);
}
&:after {
.triangly-gradient("-", #triangly-color);
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: #line-width;
height: #triangled-size;
background-size: #double-triangled-size #double-triangled-size !important;
}
}
Resulted CSS (using specified above parameters):
.triangly-line {
overflow: hidden;
position: relative;
height: 6px;
}
.triangly-line:before {
background: -webkit-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:after {
background: -webkit-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:before,
.triangly-line:after {
content: "";
display: block;
position: absolute;
width: 300px;
height: 6px;
background-size: 11px 11px !important;
}

Before there was HTML5 and Canvas, there was JavaScript VectorGraphics. You may want to give it a try if you want to draw Circles, Ellipses etc. etc. in pure HTML.

Instead of using the border, use a tiled background image.
I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.
If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
It allows to draw on the canvas in HTML5, but it would not work on older browsers.
if you can add a lot of html you can use this:
http://jsfiddle.net/QsM4J/
HTML:
<body>
<p>
before
</p>
<div id="sqig">
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
</div>
<p>
after
</p>
</body>
CSS:
#sqig{
position:relative;
width:400px;
height:6px;
}
#sqig div{
position:relative;
width:6px;
height:6px;
display: inline-block;
margin:0 0 0 -4px;
padding:0;
}
#sqig .topsqig div{
border-radius: 3px;
top:1px;
border-top: 1px solid #000;
}
#sqig .bottomsqig div{
border-radius: 3px;
top:-1px;
border-bottom: 1px solid #000;
}

Here is a SASS wave line generator based on the answer from #yeerk. If you want triangles, use the generator above by #lilliputten.
$waveHeight: 40px;
$waveLength: 70px;
$waveRadius: 13px; // adjust depending on length
$waveThickness: 8px;
#mixin waveSide() {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent $waveRadius, black $waveRadius, black #{$waveRadius + $waveThickness}, transparent #{$waveRadius + $waveThickness});
background-size: #{$waveLength} #{$waveHeight * 2};
height: $waveHeight;
}
.wavy {
width: 400px; // give the wave element a length here
#include waveSide;
&::before {
$waveOffset: $waveLength / 2;
#include waveSide;
content: '';
width: calc(100% - #{$waveOffset});
top: $waveHeight;
left: $waveOffset;
background-position: 0px -#{$waveHeight};
}
}

I found a slighty nicer way to achieve trangle squiggly lines in CSS without halving heights or applying tricks that don't work well across browsers.
I tried #yeerk's solution but it only works well in Chrome. The lines had artifacts on Safari and Firefox.
Firefox
Safari
This solution is a variation of #liliputen's solution, however it improves on ease of flexibility.
You can change the line's size easily from the background-size property.
.squiggly {
position: relative;
height: 10px;
width: 100%;
}
.squiggly::after,
.squiggly::before {
height: inherit;
width: inherit;
background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
content: "";
position: absolute;
}
.squiggly::before {
top: -2px;
background-image: linear-gradient(45deg, red 35%, transparent 0),
linear-gradient(-45deg, red 35%, transparent 0);
}
.squiggly::after {
top: 0px;
background-image: linear-gradient(45deg, white 35%, transparent 0),
linear-gradient(-45deg, white 35%, transparent 0);
}
<div class="squiggly"></div>
You can also find it here on JS Fiddle.

If you are using Javascript, this can be easily achieved using a sine wave - this is how programming languages have achieved controllable squiggly lines for decades! You should be able to find plenty of examples out there, but essentially you just do loop with an incrementing x value and apply the sine function sin(). This used to be cool for doing screen-savers in the 90s and animating them, etc.