So I have the next code:
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
// div[i].style.display = "";
} else {
li[i].style.display = "none";
//div[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
* {
box-sizing: border-box;
}
#networdapp {
display: none;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" type="search" placeholder="Search">
</form>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Adele</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Agnes</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Billy</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Bob</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
What I want to do is to display some divs depending on the input from that input box.What I've done so far is to display only the "li" tags but what I actually want is to display the entire div not only the "li" depending on the input data the divs must be displayed or not.
Shown above is my code right now.
Thank you in advance!
While you are showing your "LI", there you can show it's parent DIV by using "parentElement". Please check below snippet.
Your code
li[i].style.display = "none";
li[i].style.display = "";
New Code
li[i].parentElement.style.display = "none";
li[i].parentElement.style.display = "";
Thank you all for help!Problem solved now.I just used a JQuery parser for div and everything worked pretty well.
You should tidy up your html with respect of the repeated IDs and the <li>s not being direct children if <ul>.
Having done that #Ambuj Khanna's advice should be helpful. You might have to apply parentElement repeatedly.
It occurred to me that the whole operation is something that could have been done using jQuery in two lines:
var flt=$('#myInput').val().toUpperCase();
$('#myUl>div').each(function(i,div){$(div).toggle($('li',div).text().toUpperCase()==flt)})
The above should make the top level divs - just below your <ul#myUl> - visible and hide all others. However, the element below a <ul> should always be a <li> element.
Related
I need to print details of an employee on a roll paper. I have a thermal printer. My requirement is to print the details in a width of 7.4cm and height of 10.8cm.
I am using ngx-print and to trigger the print functionality. As soon as I select my printer it chooses a default page size of 80(72.1) X 210mm. Upon printing it only prints on the last end of the page.
I have used #media print and also #page inside #media print. However, I have found that writing anything inside the media part does not have any effect. My goal is to have a better print quality. I have increased the font size to xx-large and made everything bold to make sure it is more visible to the eyes.
Yet, nothing works.
P.S. - Printing it using a Laser printer on A4 works perfectly. But if I try to print on a card(glossy paper), half of the things are cut.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<div id="employee-table" class="card-header">
<div class="card-title m-0">
</div>
<div id="printArea">
<h3 class="text-center font-weight-bolder mb-0"><u>GRSE ENTRY PERMIT</u></h3>
<div class=" container my-2" style="background-color: LightGray;">
<div class="row">
<div class="col-2">
<div class="d-flex align-items-center justify-content-center mt-4 font-weight-bolder">MAIN</div>
<img [src]="profileImage" class=" img-fluid mx-auto d-block img-thumbnail" alt="Employee Image">
<p class="text-center mx-3">{{userData.employee_id}}</p>
</div>
<div class="col pt-6 pb-4">
<div class="pt-2" id="contractor"> <strong>Contractor: {{userData.user_data.vd_company_name}}</strong></div>
<!-- <hr> -->
<div> <strong>Contractor Employee Name: {{userData.user_data.cl_name}}</strong></div>
<!-- <hr> -->
<div><strong>Father Name: {{userData.user_data.cl_father_name}}</strong></div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"> <strong>Age: {{userData.user_data.cl_age}} {{userData.user_data.dob}}</strong>
</div>
<div class="col pb-2"> <strong>Blood Grp: {{userData.user_data.cl_blood_group}}</strong></div>
</div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"><strong>Category: {{userData.user_data.cl_category}}</strong></div>
<div class="col pb-2"><strong>Designation: {{userData.user_data.cl_designation}}</strong> </div>
</div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"><strong>PCC No.: {{userData.user_data.cl_pcc_number}}</strong></div>
<div class="col pb-2"><strong>PCC valid upto: {{userData.user_data.cl_pcc_validity}}</strong> </div>
</div>
<!-- <hr> -->
<div><strong>ESI: {{userData.user_data.cl_esino}}</strong> </div>
<!-- <hr> -->
<div> <strong>Emergency No.: {{userData.user_data.cl_emergency_number}}</strong></div>
<!-- <hr> -->
<div><strong>Phone: {{userData.user_data.cl_phone}} </strong></div>
<!-- <hr> -->
<div> <strong>Address : {{userData.user_data.cl_permanent_address}}</strong></div>
</div>
</div>
<input type="text" class="signature" />
<div id="signaturetitle">Signature: </div>
</div>
</div>
</div>
<button class="btn btn-success text-black" [useExistingCss]="true" printSectionId="printArea" ngxPrint> Download ID
Card</button>
</div>
</body>
</html>
CSS
#media print {
#printArea{
align-items: center;
}
.signature {
border: 0;
border-bottom: 1px solid rgb(3, 3, 3);
width: fit-content;
float: right;
background-color: lightgray
}
#signaturetitle {
text-align: right;
font-weight: bold;
font-size: 150%;
}
#page{
size: 10.8cm 7.4cm portrait;
margin: 0;
}
div {
color: aquamarine;
font-size: xx-large;
font-family: 'Times New Roman', Times, serif;
}
}
.signature {
border: 0;
border-bottom: 1px solid rgb(3, 3, 3);
width: fit-content;
float: right;
background-color: lightgray
}
#signaturetitle {
text-align: right;
font-weight: bold;
font-size: 150%;
}
#printArea{
align-items: center;
inset-block: 0;
}
Here is my jquery:
$(".time-block .listgroup").sortable({
connectWith: $(".time-block .listgroup"),
items: "> textarea",
placeholder: "highlight",
//helper: "clone",
update: function(event){
var changeArr= []
$(this).each(function(){
changeArr.push({
text: $(this)
.children()
.find("textarea")
.val()
})
})
// update on localstorage object and save and get on page refresh
saveEvent()
}
})
Here is what the html looks like:
<div class="container">
<!-- Timeblocks go here-->
<div class ="time-block">
<div class ="hour" id="9"> 9 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class ="time-block">
<div class ="hour" id="10"> 10 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
I believe I put the appropriate CDNs at the bottom of the body:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/script.js"></script>
</body>
I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.
The jQuery UI Sortable needs to be applied to the parent element that contains the items you want sorted. I think you will get successful results when you create the container in the right place. Application test image, sample codes and references are available below:
$(function () {
$('#container').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
})
#container {
margin-left: 300px;
margin-top: 100px;
position: relative;
}
.newStep {
cursor: pointer;
float: right;
font-size: 10px;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: -12px;
margin-top: 0 !important;
padding: 3px 7px;
width: 80px !important;
}
.step {
border-top-left-radius: 0 !important;
font-family: lucida Grande;
margin: 4px;
}
.stepNumber {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -20px;
padding: 10px;
position: absolute;
top: 3px;
}
.inset {
color: white;
background: none repeat scroll 0 0 #000000;
border-radius: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div style="float:left; clear:both;" id="container">
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">1</span>
<textarea placeholder="1 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">2</span>
<textarea placeholder="2 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">3</span>
<textarea placeholder="3 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
</div>
</body>
</html>
References
jQuery Sortable Post
Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.
$(function() {
function toArray(sort) {
var results = [];
$("li", sort).each(function(i, el) {
if ($(el).hasClass("hour")) {
results.push({
hour: $(el).attr("id"),
details: $(el).next().find("textarea").text()
});
}
});
return results;
}
function saveEvent(string) {
//localStorage.setItem("hours", string);
console.log("Saving", string);
}
$(".time-blocks").sortable({
cancel: ".hour",
handle: ".fa-grip-lines-vertical",
update: function(event) {
saveEvent(JSON.stringify(toArray(this)));
}
});
});
.time-blocks {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.time-blocks .ui-widget-header {
padding-left: 1.5em;
}
.time-blocks textarea {
width: calc(100% - 50px);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="container">
<!-- Timeblocks go here-->
<ul class="time-blocks ui-widget">
<li class="hour" id="9">
<div class="ui-widget-header">9 AM</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 1</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="10">
<div class="ui-widget">
<div class="ui-widget-header">10 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 2</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="11">
<div class="ui-widget">
<div class="ui-widget-header">11 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 3</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
</ul>
</div>
You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.
Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.
Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.
I have a basic search result page using bootstrap and when I hover on an item RHS div should follow and slide to that specific item. Please refer to the following page to see what I'm trying to achieve. How can I achieve this using jQuery?
Example
JS Fiddle
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
You can animate the marginTop property. Note: To use the animate method you'll have to drop jquery.slim and use the full version.
Run the snippet on fullscreen, otherwise bootstrap's breakpoints kick-in.
$('.search-result').on('mouseover', function() {
// Cancel previous animation
$('.availability').stop();
// Get position of the triggered element
let newTop = $(this).offset().top + 'px';
// Animate availability box
$('.availability').animate({
marginTop: newTop
}, 800);
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
$(document).ready(function(){
var positionY=0;
$('.search-result').hover(function(){
var position=$(this).position();
positionY=$(this).get(0).getBoundingClientRect().y;
/* transform: translateY(51px); */
$('.availability').css({transform:'translateY('+(positionY-15)+'px)'});
})
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
position: fixed;
top: 1px;
right: 10px;
/* display:none; */
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}
Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.
You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>
below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>