I have an issue whereby due to the structure of my html, when one div is expanded the whole row moves down. I am having a bit of a hard time finding a fix for this. I have looked on here but could not find a resolution. Any ideas would be great. This is my structure (with div 1 expanded to show the nature of the issue):
expandable div 1 | expandable div 2
|
| expandable div 4
|
expandable div 3 |
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
expandable div 1
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 2
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 3
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 4
</div>
</div>
</div>
</div>
As you mentioned you don't want to use the bootstrap collapse I suggest to do this with jQuery (see below for an example).
Your HTML:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content" style="display: none;"padding : 10px;>
Suprise!
</div>
</div>
Now the jQuery:
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Something like this will work.
Consider CSS for the style display.
Related
I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).
You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB
I am currently try create a custom navigation on websites homepage that uses tiles for navigation.
I am using MVCSiteMapProvider for MVC5 to display live tiles on the homepage as well as a standard bootstrap navbar, when the user loads the homepage only the main parent navigation any values nested under the parent are hidden.
The CSHTML below is what I have managed to create so far:
<section id="content">
<div class="main-content">
#{
var nodes = MvcSiteMapProvider.SiteMaps.Current.CurrentNode;
}
#foreach (var node in nodes.RootNode.ChildNodes)
{
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
foreach (var childNode in node.ChildNodes)
{
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
}
}
</div>
</section>
<script type="text/javascript">
$('.live-tile').on('click', function () {
var ids = $('.live-tile').map(function () {
return this.id;
}).get();
$.each(ids, function (index, value) {
});
});
</script>
I need some guidance on how to display multiple divs when one of the parent tiles (div) is clicked.
I only want to show the child elements, currently I am try to do this using the id of the parent div as a class on it child elements, when the parent is clicked the other top level divs should be hidden and the child elements and parent should be visible.
Any advice would be very much appreciated.
Try this:
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
</div>
$('.live-tile').on('click', function () {
$('.main-content>div').not('.live-tile').addClass('hidden');// hide all divs on click
$('.main-content>div').removeClass('clicked');
$(this).addClass('clicked');
$('.clicked').nextUntil( '.live-tile', "div.hidden" ).removeClass('hidden');// now show the next hidden ones
});
I'm new to boot strap so I may be thinking of this objective in an incorrect way, so I would appreciate any advice as well as a solution.
Say for example I have a left column
<div class="row">
<div class="col-md-3 col-xs-6">Some Data 0</div>
<div class="col-md-3 col-xs-6">Some Data 1</div>
<div class="col-md-3 col-xs-6">Some Data 2</div>
</div>
When the screen matches the XS I would like "Some Data 0" to be wrapped in a modal component. So that "Some Data 0" is now hidden in a modal window and a button is in it's place that when clicked will display the modal window with the content "Some Data 0"
How is this accomplished in Bootstrap. Is the only way to duplicate "Some Data 0" and just show and hide based on the screen breakpoints?
Thanks
Well you can achieve it in this way i guess :
<div class="row">
<div class="col-md-3 hidden-xs">Some Data 0</div>
<div class="col-xs-12 hidden-md visible-xs"> Handle your modal with Some Data 0 in this div</div>
<div class="col-md-3 hidden-xs">Some Data 1</div>
<div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 1 in this div</div>
<div class="col-md-3 hidden-xs">Some Data 2</div>
<div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 2 in this div</div>
</div>
Key feature here is to use hidden-{} and visible-{} classes.
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I have this sortable's structure (it's a portlet).
<div id="sortable">
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
</div>
'window' elements are sortables. Grippers shouldn't be sortables. I've specified in the Sortable options:
{ items: '.window' }
But I'm seeing that windows are sorted over grippers while I drag, which I don't want to. I want grippers to be invisible to the Sortable.
EDIT: Grippers are used to resize windows in both X and Y axis. With the given html code i will get this portlet.
PORTLET IMAGE
The problem occurs when sorting between windows of the same row (".gripper_v")
I'm not sure exactly what you're trying to do here (a screenshot might help), is the "gripper" the part of the "window" where the user should click to drag?
If that's the case, try adding the gripper within the window element like this:
<div id="sortable">
<div class="window">
<div class="gripper"></div>
</div>
<div class="window">
<div class="gripper"></div>
</div>
</div>