Selectable table/div content

Bootstrap Studio Help
1

Hi, A complete novice bootstrap user, was hoping to achive somthing like the following either with a tabel or div's..

enter image description here

Basically, the red (model) cell to have a dropdown menu or similar and the yellow cell's data is swappable to suit the selected models details.

Is this or similar possible?

Many thanks in advance

2

Would be doable with Javascript - When changing the Dropdown element, rewrite elements within the table.

var Models = {
    "Model A": {size: "100x300mm", usage: "Outdoor", colour: "Black", recyclable: "Yes"},
    "Model B": {size: "50x150mm", usage: "Indoor", colour: "Blue", recyclable: "No"},
    "Model C": {size: "25x75mm", usage: "Outdoor and Indoor", colour: "Red", recyclable: "Possibly"}
};

$('#select-model .dropdown-item').on('click', function(){
    console.log(Models[this.text]);
    $("#size").text(Models[this.text].size);
    $("#usage").text(Models[this.text].usage);
    $("#colour").text(Models[this.text].colour);
    $("#recyclable").text(Models[this.text].recyclable);
});

Very simple way of filling data into tags - And for your viewing pleasure, here is a working copy (will expire in a week of posting this message): http://dropdown-sample.bss.design/

-- Michael

3

And just for the fun of it - I also created it as an online component - Search for:

  • Sample - How to change text based on dropdown

In the Online part of Bootstrap Studio.

4

Many thanks for taking the time to do this, it's very much appreciated.

One question, I have inserted your component into my test page, the only problem I'm having is that this is positioned towards the bottom of my page and when I click to select the different model it swaps out the content as desired, but it jumps to the top of the page.

Is there any way of preventing that from happening?

Thanks in advance

5

That is because each item in the dropdown is an anchor tag, and it links to # - Which will be the top of the page.

To prevent this - Add the event.preventDefault() to the Javascript - Here in line 2:

$('#select-model .dropdown-item').on('click', function(){
    event.preventDefault();
    $("#size").text(Models[this.text].size);
    $("#usage").text(Models[this.text].usage);
    $("#colour").text(Models[this.text].colour);
    $("#recyclable").text(Models[this.text].recyclable);
});

That will stop the default action of the Anchor tag.

-- Michael

6

Many thanks for this,

I'm still running into problems, I've added the "event.preventDefault();" to the javascipt, but it still jumps to the top of the page.

Also the content of the table cells does not display.

If I remove the "event.preventDefault();" line, the content displays when selected, am I doing something wrong?

Thanks in advance

7

Sorry for so many questions, but is it possible to pre-load the first model?

Thanks in advance

8

I've managed to stop this jumping to the top of the page by leaving the URL blank and turning on the 'Disabled' slider.

I've also added style="cursor: pointer" to the menu items to put the pointer back.

I'm struggling with the javascript aspect here,

For example, I'd like to add a break in the var, for example..

usage: "Outdoor and Indoor"

to display as

Outdoor and Indoor

i.e on 3 lines, I've tried "Outdoor<br>and<br>Indoor", "Outdoor\and\Indoor" along with other variants with no luck.

Does this have anything to do with the ".text" in..

$("#usage").text(Models[this.text].usage);

Any help would be much appreciated.

For ref. I know nothing of javascript

9

I've managed to stop this jumping to the top of the page by leaving the URL blank and turning on the 'Disabled' slider.

I've also added style="cursor: pointer" to the menu items to put the pointer back.

I'm struggling with the javascript aspect here,

For example, I'd like to add a break in the var, for example..

usage: "Outdoor and Indoor"

to display as

Outdoor<br> and<br> Indoor<br>

i.e on 3 lines, I've tried "Outdoor< b r >and< b r >Indoor", "Outdoor\and\Indoor" along with other variants with no luck.

Does this have anything to do with the ".text" in..

$("#usage").text(Models[this.text].usage);

Any help would be much appreciated.

For ref. I know nothing of javascript

10

I've been using this dropdown/content swap component for a large project I've been working on for the last 6 months.

I had some time off over Xmas and when I cam back to it (after updating bootstrap studio) the swap links in the dropdown menu no longer work.

I haven't changed anything my end - would any of the recent changes in Bootstrap studio have adverse effects?

Please see example below - if viewing in a browser, reduce the window until the table at the bottom collapses..

sample page

I hope there's a fix for this as I've put around 6 months work into this already.

Thanks in advance