Change column class of div in bootstrap - javascript

I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-

There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV

Related

How to make x-data and x-show work inside nested div using alpine js

I have very little JavaScript experience and no vue or react experience, so understanding these answers is proving to be futile. >.<
I found these 2 solutions
Alpine nested x-data
https://github.com/alpinejs/alpine/issues/49
This is the issue I am encountering.
I got the x-data and x-show to work for the collapse sidebar button.
When I added another x-data element in a child div that houses the content, it seems to break everything and nothing works.
Both the sidebar div, and content div are inside the parent div that controls the collapse button.
This is how the layout looks like
This is the code of how it is somewhat layed out
// Div that houses main content and sidebar
<div x-data="{sidebarActive: true}">
// Sidebar button
<div #click="sidebarActive =!sidebarActive"> collapse icon </div>
// kanban content
<div x-data ="{kanbanToggle: 2}">
// toggle buttons
<div>
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
</div>
// kanban board content
<div>
<div x-show ="kanbanToggle ===1"> timeline view </div>
<div x-show ="kanbanToggle ===2"> card view </div>
<div x-show ="kanbanToggle ===3"> list view </div>
</div>
</div>
<div x-show="{sidebarActive:true}"> sidebar content </div>
</div>
Any help much appreciated! Thanks in advance!
The initial issue I can see with your code is that kanbanToggle: 1 is not valid JavaScript, the correct synax is kanbanToggle = 1.
So replace:
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
with
<div #click="kanbanToggle = 1"> button 1 </div>
<div #click="kanbanToggle = 2"> button 2 </div>
<div #click="kanbanToggle = 3"> button 3 </div>

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

How to display hidden divs always 1st, above other divs when clicked to show

I am working on a bootstrap page (3.0). I have several small panels across the top of the page that are visible. Below these panels I have larger panels that contain much more detail of the small panels across the top that are hidden by default. When a user clicks on one of the small panels across the top, it hides the small panel and displays hidden larger stacked vertical panels below it with the additional info.
I need to make it so that whichever hidden panel is selected to open, that it will always show 1st (above all other visible divs). The problem I am having is they are showing in the order the divs are hard coded in the HTML, however users will not see the new div load unless they scroll down to see it visible on the page. I need all newly clicked panels to load 1st, so users will always see it load above all other now visible divs.
I am still learning jQuery/js.
So, for my top (small) panels, I have a link in the panel-footer that opens the associated larger panels when clicked. It hides the small panel when clicked, then shows the hidden panel (adds a zommIn animation as well). Then when a user closes the larger panel, it hides it again, then adds the small panel back to the top panels.
It is all working great, I just need to prepend the hidden divs to ALWAYS display as 1st (above the other visible divs).
Here is an example of the jQuery I am using to show the larger panels and hide the associated small top panels...
//Device Panel
$("#openDashDevices").click(function(){
$("#dashDevice").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashDevice").removeClass("zoomIn");
}, 1000);
$("#dashDevice").removeClass("hide");
$("#topPanelDevice").addClass("hide");
$("#topPanelDevice").removeClass("show-inline zoomIn");
});
And here is the jQuery I am using that closes/hides the larger panels and re-shows the hidden small panel across the top...
//Device Panel
$("#closeDevicePanel").click(function(){
$("#dashDevice").addClass("hide");
$("#dashDevice").removeClass("show zoomIn");
$("#topPanelDevice").addClass("show-inline zoomIn");
window.setTimeout( function(){
$("#topPanelDevice").removeClass("zoomIn");
}, 1000);
$("#topPanelDevice").removeClass("hide");
});
HTML of ONE of the top panels:
<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns sortable">
<div id="topPanelDevice" class="dashboardDevices dashboardPanels show-inline animated">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
<div class="row">
<div class="col-xs-3 dashIcon">
<i class="icon-device"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">1344</div>
<div class="dashSubText">Computers</div>
</div>
</div>
</div>
<a id="openDashDevices" class="dashPanelFooter" href="javascript:void(0);">
<div class="panel-footer">
<span class="pull-left">View Devices</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
And here is the html of ONE of the larger panels (hidden by default)...
<!--Opened Dashboard Panels-->
<div class="openedDashboardPanelsGroup sortable">
<div id="dashDevice" class="dashboardDevices dashboardPanelsOpen col-sm-12 animated hide">
<div id="panelDevices" class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelBottom"><i class="fa fa-arrows"></i></div>
<div class="pull-right"><button id="closeDevicePanel" type="button" class="close" title="" rel="tooltip" data-original-title="Close Panel">×</button></div>
<div class="row">
<div class="openDashTitle">
<div class=""><i class="dashIcon fa fa-bar-chart"></i>Devices</div>
</div>
</div>
</div>
<div class="panelDashboardContent">
<div id="maintStatsContent" class="maintenanceStats" type="maintenanceStats">
Maint Stats goes here
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing my top panels and a couple of the larger panels opened...
Instead of hard coding the html I would create it dynamically with jquery. That way you can just prepend it to the container.
$("#closeDevicePanel").click(function() {
$('.containerclass').prepend('yourhtml');
}
I got it to work. I just needed to use prependTo. For example, to open the Alerts panel...
//Alerts Panel
$("#openDashAlerts").click(function(){
$("#dashAlerts").prependTo(".openedDashboardPanelsGroup");
$("#dashAlerts").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashAlerts").removeClass("zoomIn");
}, 1000);
$("#dashAlerts").removeClass("hide");
$("#topPanelAlerts").addClass("hide");
$("#topPanelAlerts").removeClass("show-inline zoomIn");
});
This now loads with my animation just like I need, and always prepends it as the 1st child of the parent div.

materializecss collapsible panel with a different html structure

I'm trying to create a custom collapsible panel using materialize but I don't know why the button is not triggering and showing the panel body. I have created a fiddle with my custom example that doesn't work and one materilaize example with their structure that works.
From my inspect I saw that the active class is not being added on panel body while clicking on panel header which is quite strange.
So if anyone can help me with that please ... modifying materialize components is like a pain in the ass !
<div class="collapsible">
<div class="box">
<div class="1left">Left</div>
<div class="2center">Center</div>
<div class="3right">Right
<a class="collapsible-header">Colapse header</a>
</div>
</div>
</div>
<div class="collapsible-body">
This should be the body collapsed
</div
http://jsfiddle.net/zt5515zt/90/
In Materialize you need both collapsible-header and collapsible-body at the same level in order to make Collapsible work.
Just Change the level of you collapsible-body as shown below and it will work.
<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
This should be the body collapsed
</div>
Hope this helps you solve the problem.

Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle

Categories