<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx"></div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx"></div>
I want to know is there any way in jquery to remove last "xxxxx" from class
Do it like below:-
$(document).ready(function(){
$('div').each(function(){
$(this).attr('class',$(this).attr('class').slice(0,-5));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx">Abc</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx">Def</div>
Note:-
1. If you want to check first that class have xxxxx in it (at last) or not and then you want to replace,so you can do it like below:-
if (if ($(this).attr('class').substr($(this).attr('class').length - 5) == "xxxxx"){
// remove characters code here
}
Example:-
$(document).ready(function(){
$('div').each(function(){
if ($(this).attr('class').substr($(this).attr('class').length - 5) == "xxxxx"){
$(this).attr('class',$(this).attr('class').slice(0,-5));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx">Abc</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx">Def</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd mango">Ghi</div>
The only way I can think of is by removing the class then adding the changed class back to the element.
$('.applexxxxx').removeClass('applexxxxx').addClass('apple');
Related
I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.
check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});
Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>
I'm trying to order the div based on the col-md-x. First col-md-4 and then col-md-8. I tried the sort function of jQuery in this variant:
var divElement = $('.container').find('.row').sort(sortMe);
function sortMe(a, b) {
return a.className > b.className;
}
$('.container').append(divElement);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row different col-md-8 left">col-md-8</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 left">col-md-4</div>
<div class="row different col-md-8 left">col-md-8</div>
However this is not sorting on my .col-md-x class but is he sorting on all classes (I think). How could I sort specific on the class col-md-x? I tried also .pop() and .split(), but this is not working in combination with the jQuery .sort() function.
var divElement = $('.container').find('.row').sort(sortMe);
function sortMe(a, b) {
return a.className.match(/col-md-(\d)/)[1] - b.className.match(/col-md-(\d)/)[1];
}
$('.container').append(divElement);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dic class="container">
<div class="row different col-md-8 left">1</div>
<div class="row different col-md-4 right">2</div>
<div class="row different col-md-4 right">3</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">5</div>
</div>
You may want to write a function that will return the needed class name by it beginning col-md-
$(function() {
var divElement = $('.container').find('.row').sort(sortMe);
function sortMe(a, b) {
return getColMdClassName(a) > getColMdClassName(b);
}
$('.container').append(divElement);
});
function getColMdClassName(obj) {
return $.grep(obj.className.split(" "), function(v, i){
return v.indexOf('col-md-') === 0;
}).join();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class="row different col-md-8 left">8</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">8</div>
</div>
You are comparing text in sort function but need to compare integers. see below function
$(function(){
var divElement = $('.container').find('.row').sort(sortMe);
$('.container').append(divElement);
});
function sortMe(a, b) {
var aInt = getInteger(a.className);
var bInt = getInteger(b.className);
return aInt > bInt;
}
function getInteger(classNameList)
{
var int = 0;
var classList = classNameList.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i].indexOf('col-md')!=-1) {
int = parseInt(classList[i].replace('col-md-',''));
}
}
return int;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row different col-md-8 left">8</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 right">4</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">8</div>
</div>
Pure js variant:
var divs = document.getElementById('divs');
var map = arr => fn => Array.prototype.map.call(arr, fn);
var getN = str => str.substr(str.indexOf('col-md-'), 8).substr(-1);
var res = map(divs.children)(x => x).sort((a, b) => getN(a.className) - getN(b.className));
res.forEach((el, i) => divs.replaceChild(el, divs.childNodes[i]))
<div id="divs">
<div class="row different col-md-8 left">col-md-8</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 right">col-md-4</div>
<div class="row different col-md-4 left">col-md-4</div>
<div class="row different col-md-8 left">col-md-8</div>
</div>
The accepted answer is not working for me on Chrome, please check this old fiddle.
But we can enhance the answer:
HTML (no changes)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dic class="container">
<div class="row different col-md-8 left">1</div>
<div class="row different col-md-4 right">2</div>
<div class="row different col-md-4 right">3</div>
<div class="row different col-md-4 left">4</div>
<div class="row different col-md-8 left">5</div>
</div>
JavaScript (small changes):
var divElement = $('.container').find('.row').sort(sortMe);
function sortMe(a, b) {
return a.className.match(/col-md-(\d)/)[1] - b.className.match(/col-md-(\d)/)[1];
}
$('.container').append(divElement);
The new fiddle is here.
I have created dynamic checkboxes using jQuery and showing in div and I have created checkbox onchange function.
static checkbox onchange function working but when I generate dynamic checkbox and same function call it didn't work.
Dynamic checkbox code:
$(document).on("click", "#item_modal", function() {
$.ajax({
url: '<?=base_url()?>extraItem',
type: 'post',
dataType: 'json',
data: {itemId: id}
})
.done(function(data) {
console.log(data);
var extraItems = "";
$.each(data, function(index, el) {
extraItems+='<div class="col-md-4 col-lg-4"> <label style="width:100%"> <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="'+el.amt+'" type="checkbox" id="p'+el.id+'"> <b>'+el.name+'</b> </div></div><div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>'+el.amt+'</b> </p></div></label> </div>';
});
$('.extraItemList').append(extraItems);
jQuery('#myModal .modal-content').html();
$('#myModal').modal({
"backdrop": "static"
});
});
});
Checkbox Onchange Function :
$(document).ready(function() {
$(":checkbox").on("change", function() {
console.log("check");
});
});
Html Static Checkbox : It's working
<div class="col-md-12 col-lg-12" style="padding:0 34px;">
<div class="col-md-4 col-lg-4">
<label style="width:100%">
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
<div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="60.00" type="checkbox" id="p4" class="checkboxes"> <b>Extra Veg</b> </div>
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
<p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>60.00</b> </p>
</div>
</label>
</div>
</div>
Html Dynamic :
<div class="col-md-12 col-lg-12 extraItemList" style="padding:0 34px;">
</div>
I am adding dynamic checkboxes on .extraItemList class
I have spent lots of time to resolve it but could not find anything.
Is it any solution ? because it's weird.
You can bind checkbox change like this:
$(document).ready(function() {
$(".extraItemList").on("change", 'input[type="checkbox"]', function() {
console.log("check");
});
});
By doing so it will bind to all inputs of checkbox type which are inside the extraItemList class.
I hope this helps.
You should use event delegation for dynamic element like following.
$(".extraItemList").on("change", ":checkbox", function() {
console.log("check");
});
Change
$(document).ready(function() {
$(":checkbox").on("change", function() {
console.log("check");
});
});
To
$(document).ready(function() {
$(".extraItemList").on("change", ":checkbox", function() {
console.log("check");
});
});
If you go with you solution jQuery wil bind the event to the checkboxes currently available, if you go with mine jQuery will bind the event to the document and will check if the element is the checkbox and it will trigger the event. So it'll work for dynamic content
I am a newbie to JavaScript and I need to use it with bootstrap for my own web page. My question is now how can I make a loop so that pictures names (stored as an array) can emerge in the right places of the HTML code so I do not have to copy the blocks of code for each picture.
For example :
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="01.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="01.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="02.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="03.jpg">
</div>
</div>
As we can see here the only different text is the src.How can I store the names (paths) in an array and make a loop that changes the src property?
Thank you!
Try this demo: http://jsbin.com/pinoxeqapi/1/edit?html,output
I think that's what you're looking for.
CODE
$(function () {
var images = ["01.jpg", "01.jpg", "02.jpg", "03.jpg"];
$.each(images, function (index, element) {
var imgContainer = "<div class='row'><div class='col-md-3 col-xs-6 portfolio-item><img class='img-responsive' src='" + element + "'></div></div>";
$("body").append(imgContainer);
});
});
First Include JQuery (If not)
<script>
var srcArray = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];
$(document).ready(function () {
for (var i = 0; i < srcArray.length; i++) {
$('div.row img.img-responsive').eq(i).attr("src", srcArray[i]);
}
});
</script>
I would recommend using one of the templating frameworks described in some of the other answers. If you're interested to see how to implement this in pure JS:
var temp = document.querySelector('#portfolio-item-template');
['01.jpg', '02.jpg', '03.jpg', '04.jpg'].forEach(function(src) {
temp.content.querySelector(".img-responsive").src = src;
var newImg = document.importNode(temp.content, true);
document.querySelector('#insertion-point').appendChild(newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="portfolio-item-template">
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive">
</div>
</div>
</template>
<div id="insertion-point">
</div>
You can use a template stored in the HTML and then generate the actual elements using an array of the image sources. Something like John Resig's micro-templates can achieve this.
<script type="text/template" id="img-tmpl">
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item>
<img class="img-responsive" src="<%= src %>">
</div>
</div>
</script>
I've got the following div structure which I created using bootstrap. The html markup is as following.
<section class='content-wrapper order-summary-wrapper'>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 order-summary-details">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div>
<h4>Delbetalning Engångskostnad</h4>
<p>150kr/mån</p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h4>Abonnemang</h4>
<p>199kr/mån</p>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container-wrapper'>
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
<div class='clearfix'></div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Rensa
Beställ
</div>
</div>
</div>
</section>
And I've styled it to look like in the following mockup.
Now what I've to do is when I click on each arrow icon the respective box should expand as below.
The height of each container is dependent on the content inside. I've tried making the container position:absolute and then using jQuery slideDown,slideUp methods. But this doesn't work as expected since when I make a container position:absolute the other neighboring containers stack on the left. How can I achive this effect using css + jquery. Or is it possible with CSS only?
will provide the current CSS of the containers if necessary.
following is the fiddle of the container. I've added the entire css since couldn't filter out the exact css needed for this bit of elements.
fiddle
If I get you right, you can do it with bootstrap:
http://getbootstrap.com/components/#navbar
I apologize but I don't have time to realize the all think.
I can quickly show you a way it can be done, you will have to adapt it and make it better.
Try add this to your fiddle:
CSS:
.col-xs-3{
border:2px solid black;
overflow:hidden;
max-height:50px;
-webkit-transition:max-height 0.4s ease 0s;
-moz-transition:max-height 0.4s ease 0s;
transition:max-height 0.4s ease 0s;
}
/*
.col-xs-3:hover{
max-height:400px;
}
*/
JS: (this is vanilla js no-jquery)
-- make sure you select "no wrap - in < head > "-- top/left in fiddle
window.addEventListener("load",function(e){
var m = document.getElementsByClassName("col-xs-3");
for(var i=0; i<m.length; i++){
m[i].isOpen = false;
m[i].addEventListener("click",function(e){
if(this.isOpen){ this.style.maxHeight = "60px"; this.isOpen = false; }
else{ this.style.maxHeight = "400px"; this.isOpen = true; }
},false);
};
},false);