Open a random popup div with random with different class number jQuery - javascript

As an all-time JS beginner, I'm trying to show a different popup each time on button click.
Tried a bunch of different things but nothing worked so far...
Each popup div has a class "pop" + a number afterward, so "pop1", "pop2"... On click, I want to show a different popup in random order.
HTML:
<div class="button">
<img class="" src="images/button.png">
</div>
<div class="pop1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop1 -->
<div class="pop2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop2 -->
my jQuery so far to show/hide the popup:
//show popup on click with a delay
setTimeout(function(){
$(".pop").removeClass("hide");
$(".pop").addClass("show");
$(".pop").show();
$(".success-msg").show();
}, 3800);
Trying to add new jQuery code to randomize the popup by allowing a different popup show:
$('.button ').click(function () {
class_is=$(this).attr('class').match(/block-[0-2]/,'');
$('.pop div').each(function() {
if($(this).attr('class').indexOf(class_is)!==-1) {
$(this).toggleClass('show');
$(this).siblings().removeClass('show');
}
})
});
Every advice is welcome.
Thanks

That could be done using just removeClass()/addClass() with the help of rand() to generate random numbers, like :
Simple solution :
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
var random = Math.floor(Math.random() * global_selector.length) + 1;
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>
Non-successive random solution (Avoiding successive random numbers):
var random = 1;
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
random = generateNonSuccessiveRand(1, global_selector.length, random);
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
function generateNonSuccessiveRand(min, max, previous) {
var rand = Math.floor(Math.random() * max) + min;
while (rand === previous) {
rand = Math.floor(Math.random() * max) + min
}
return rand;
}
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="error-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="info-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>

There is a million ways to achieve this... Basically, you need a way to identify which 'pop' you want to display, obviously lol.
Here is a simple pen showing the most basic way of doing it. It uses a variable to keep a count of each time the button div is clicked and used as the index to determine which 'pop' to show.
https://codepen.io/jthomas077/pen/BOemQQ
var popCntr = 0;
$('.button').on('click touchend', function (e)
{
$('.pop').hide().eq(popCntr).show();
popCntr++;
$('.pop-cntr').html(popCntr);
e.preventDefault();
});

Related

Printing Id card on roll paper using Angular, CSS, bootstrap

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;
}

jQuery/Bootstrap follow div with hover item

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>

how to toggle a icon based on click?

I Have 3 Toggle Icons here
I want to change the icon to toggle on when its clicked like this enter image description here
I wrote a jquery for that but it only works for 1st icon .
function settingsClicked() {
$(document).ready(function() {
$('#settings-btn').click(function() {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
}
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
</fieldset>
</form>
</div>
The problem is you cannot use the same id for multiple elements. So first off, remove those duplicate ids.
You could try using an alternative selector instead, based on your HTML then the following should work:
$('div.settings i').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
This will select the i elements found within any div that has class="settings".
Its only working for the first button because you are replicating the id - each id needs to be unique. I have simply appended a number to the end of the id to ensure the id is unique. Note that you will need to alter the selector for the click handler - and sincethere are multiple elements - better to use a class.
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn1"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn2"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn3"></i>
</div>
</fieldset>
</form>
</div>
Try this:-
It is not valid way to having multiple Tags with same id.
$(document).ready(function() {
$('div.settings i').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
</fieldset>
</form>
</div>
You can only use an id one time.
If you want to toggle it for every button you could do something like this:
$(document).ready(function() {
$('.settings-btn').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
</fieldset>
</form>
</div>

How to implement a search and filter into HTML divs?

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>

positioning div classes next to another div using jquery

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>

Categories