Alright so I am trying to make a PHP page builder using jQuery and bootstrap.
I got almost everything working except being able to see the change in the column size.
My problem is I am not sure how to replace the column size class variable which could be anything between col-lg-1 to col-lg-12
So using jquery I would like to be able to do the following.
Get the current column size base on class: So if the column is col-lg-4 I want to get the 4
replace the 4 with a 3 or 5 based on which direction the user selected.
remove the class col-lg-4 and add either the class col-lg-3 or col-lg-5
This way on the screen the user can see how big that column is going to be.
To provide more information. Here is the HTML
<div class="col-lg-4 bs-example-popover">
<div class="popover" style="width:100%;">
<h3 class="popover-title">[Module Title] <button type="button" class="close">×</button></h3>
<div class="popover-content">
<p>[Module Description]</p>
<ul class="list-unstyled">
<li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-right"></span></button></li>
<li class="pull-right"> </li>
<li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-left"></span></button></li>
<li> </li>
</ul>
</div>
</div>
</div><!-- /column -->
and my basic JS will get the parent and the button. But I don't know how to get just the size of the class, then add or subtract, and lastly replace the class.
$('.page-builder-column ul li .btn').on('click', function(e) {
e.preventDefault();
var _btn = $(this).find('span'),
_parent = $(this).parents().eq(4);
if (_btn.hasClass('icon-icomoon-arrow-right')) {
console.log('larger');
}else{
console.log('smaller');
}
console.log(_parent.hasClass('col-lg-*'));
});
You can do the following:
_parent.attr('class').match(/\d+/)[0]
which will return the 4
Related
I am using JQuery SlideUp and slideDown methods to show/hide panels. How can load or display the first record Contact information as a default?
Right now it loads blank because i set the panel display:none:
<div class="panel rpspanel panel-default" id="#item.ID" style="display: none"> otherwise it loads all if i have multiple results.
Need help to load the first one when the page loads. And the rest on click event which working perfect.
Left Panel:
Pass the item id (or any unique value) to the li in data-id attribute
<ul id="treeview">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.id">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul>
<li data-expanded="true"> <i class="fas fa-check-circle"></i> #item.ContactName </li>
</ul>
</li>
}
</ul>
Right Panel:
id attribute to all panels. the same id which i have passed in the left panel.
#foreach (var item in rpInfo)
{
var DeleteModal = "#myModal" + item.ID;
var mid = "myModal" + item.ID;
<div class="panel rpspanel panel-default" id="#item.ID" style="display: none">
Contact Information</h4>
</div>
<div class="panel-body">
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.PartyName<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div>
</div>
</div>
}
Jquery script:
On on left panel on li click get the data-id attribute value.
Hide all panels .
Show the panel with the specified id attribute.
$(document).ready(function() {
$(".panel-handler").click(function() {
let id = $(this).data("id");
$(".rpspanel").slideUp();
$("#" +id).slideDown();
});
});
Make a separate function for the slideDown() functionality based on id, and pass id of the first .panel-handler on load of document:
$(document).ready(function() {
$(".panel-handler").click(function() {
showInfo($(this).data("id"));
});
function showInfo(id){
$(".rpspanel").slideUp();
$("#" +id).slideDown();
}
// For first time
showInfo($(".panel-handler").eq(0).data("id"))
});
I have this section created by bootstrap SQLserver and php...
Is there any way to display just a little of it and give the view more button option to display the whole result?
There are like 10 Decks, and I want e.g to sidplay just 2 and when user clicks View More to display all of them.
This is my php code for that result.
<div class="vertical-wrapper">
<?php
for($i=0;$i<count($decks);$i++){
$deck_name = $decks[$i]['name'];
$deck_desc = $decks[$i]['description'];
$deck_img_link = $json['deckplans'][$i]['images'][0]['href'];
echo "<img class='bd-imagelink-157 bd-own-margins bd-imagestyles' src='$deck_img_link'><p class='bd-textblock-779 bd-content-element'>$deck_name</p>";
echo $deck_desc;
}
?>
</div>
I tried to put the bootstrap add more button but is displayed in the end of the section,after all content is loaded, and is pointless
The following example demonstrates how you might reveal additional hidden items one at a time. You will need to use the jQuery JavaScript library for this to work.
$('#viewmore').on('click', function(){
$('.item:hidden').show();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
ITEM 1
</div>
<div class="item hidden">
ITEM 2
</div>
<div class="item hidden">
ITEM 3
</div>
<div class="item hidden">
ITEM 4
</div>
<button id="viewmore">
View More
</button>
</button>
I need help with Bootstrap Columns Toggle that converts a 12 column grid into other two columns with 9 and 3 columns, and back to 12 columns again.
I have a prototype, but I can't seem to get it quite right. Here's the JSFIDDLE.
To understand the issue, I have 3 different scenarios that are explained in the prototype that basically starts at 12 columns, gets toggled to 9 + 3 columns, and back to 12 columns.
The HTML code is as follow:
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="align-center">Current Prototype</h2></div>
<div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12">
<h4>Left Column</h4>
<p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintaining its responsive properties.</p>
<p><span class="strong">DESIRED RESULT:</span>Toggle the properties <div class="col-md-12 col-sm-12 col-xs-12"> to <div class="col-md-9 col-sm-9 col-xs-12"> when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>
<div id="Bar" class="main-container collapse in">
Toggle Right
</div>
<div class="clearfix"></div>
<br />
</div>
<div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
<div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
Toggle Left Column <i class="fa fa-bars"></i>Additional content will be displayed in this column once triggered.
<div style="height: 150px;"></div>
</div>
</div>
The Javascript that needs attention is as follow:
$(".main-container.collapse").on('shown.bs.collapse', function() {
//when a collapsed div is shown hide all other collapsible divs that are
visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
$('#toggle-right').click(function(e) {
var left = $('#LeftColumn');
if (left.hasClass('col-md-9')) {
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
} else {
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})
I would certainly appreciate any help and expertise you can provide with a custom jsfiddle. Thanks!
There are just couple of minor changes you need to do to toggle.
Problem: You are adding/removing the classes on the click of the #toggle-right button which is fine but you are NOT again doing the same on the next toggle button namely your <a>(yellow warning button) once your 12 columns get divided to 9 and 3.
<i class="fa fa-bars"></i>
Solution:
All you need to do is call that same function which adds/removes the classes on the click of the <a> button as well. Firstly give a class or an id to the element to identify it.
<i class="fa fa-bars"></i>
Now you just need to add that new selector in your existing click function.
$('#toggle-right, #toggle-left').click(function(e) {
var left = $('#LeftColumn');
if (left.hasClass('col-md-9')) {
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
} else {
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})
I have two questions:
1.) As you can see I have multiple divs and I have onclick things going on when the callout panel notes div is clicked. It accesses the data-category attribute. I'm using
$(this).parent().parent().siblings().first().data("category");
To access it, which works, but it seems messy. I tried parents().last().data(...) but that never worked. I feel like there's a more efficient way. So any opinions would be appreciated.
2.) My next question I can't figure out. Some of the divs have the selected class (after I click on the div). Later I'm going to hit a button to grab the selected stuff, and send it through some ajax stuff. There are 5 other "categories" so I need the .selected content to be associated with the data-category="a", ie, I need to make sure it only loops withing the that category. Can anyone help me loop through the data-category="a" and build a multi-line string with the data-response-text of the .selected classes?
The html is below:
<div class="row responses panel">
<div class="small-12 column" data-category="a">
<h3>Responses</h3>
</div>
<div class="small-12 column">
<div class="callout panel notes" data-response-text="Info 1">
Info 1
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 2">
Info 2
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 3">
Info 3
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 4">
<div class="remove-response"></div>
Info 4
</div>
</div>
<div class="small-12 column">
<div class="add-new-box">
<div class="add-new">
Add Response
</div>
<div class="add-new-text">
<input class="text-response" type="text" placeholder="Response">
</div>
</div>
</div>
</div>
<div><span class="button">Submit</span></div>
For the first part you can do:
$(this).closest('.row.responses').children(':first').data('category');
If either .row or .responses are unique to that level elements, you can use that solely then.
For the second part, I assume "content to be associated with the data-category a" means elements insides .row.responses which firs element has data-category="a". If so then you can do:
var str = "";
var sls = $('[data-category="a"]').parent().find('.selected');
sls.each(function() {
str += $(this).data('response-text') + "\n";
});
First question: I would select the panel like so:
$(this).find('[data-category]').data();
I would then create a function that's called on each of the panels and then returns an array of the data you require from .selected
function getData(panel) {
var $selected = $(panel).find('.selected');
var dataArr = [];
for (var i = 0; i < $selected.length; i++) {
dataArr.push($selected.eq(i).data().responseText);
}
return dataArr;
}
var panelData = getData($('the-panel-in-question'));
I'v got multiple div's with thumbnails, the div also includes an inner div with an standard picture, clicking on a thumb will show the picture in the inner div.
The problem: When I open another div the last opened picture will still show.
JQuery
$('.thumbsmall img').click(function(){
$(".imageshow").html($("<img>").attr("src", this.src));
})
HTML
<div class="modal-body">
<h2>3D automotive visualisatie</h2>
<div class="imageshow"></div>
<p>Visualisatie 3D automotive</p>
<ul class="list-inline item-details">
<li>Klant: <strong><a>Eigen project</a></strong></li>
<li>Datum: <strong><a>WIP</a></strong></li>
<li>Wat?: <strong><a>3D productie</a></strong></li>
<li>Tags: <a>3D, vray, automotive, hdri</a></li>
</ul>
<button type="button" class="btn btn-lg btn-success" data-dismiss="modal">
<i class="fa fa-times"></i> Sluit
</button>
</div>
<div class="thumbsmall">
<ul>
<li><img src="img/3d15.png" alt="3d design"></li>
<li><img src="img/3d3.png" alt="3d design"></li>
</ul>
</div>
Link
http://robbyquintiens.be
Situated in the portfolio section
Thanks :)
Try this one :
$('.thumbsmall img').click(function(){
$(".imageshow").html($('img.class-of-the-other-image').prop("src", $(this).prop('src')));//newer jquery
$(".imageshow").html($('img.class-of-the-other-image').attr("src", $(this).attr('src')));// older jquery
})
Don't forget to put the class-of-the-other-image on the html or change for the class name you want to.