I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
I have a Modal with some contents on it. When i click the cancel button, I want to clear and reset the contents of the modal. But the problem i face is, When i click the cancel button and reopen the modal, the contents still remain on the Modal.
I have attached the image of the Modal:
Before clicking Cancel Button:
After Clicking Cancel Button and reopening the modal, the contents still remain inside modal from the previous time, the image below shows it:
I have attached the code below:
HTML:
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<div class='dynamic_text' style='display:none;'></div>
<img class="modal-content" id="img01" src="fashion.jpg">
</div>
<div class="text_container">
<br>
<div class="img_text">
</div>
<div class="input_tag">
<span class="right_sec_text">Select a region from the picture</span>
<div class="error"></div>
<div class="tags" id ="tags"></div>
<div class="input_box">
<input type="text" name="tags" id="name_tag" class="input_textbox">
<button id="settag" class="btn_settag">Set Tag</button>
</div>
<div class="footer_btn">
<p><button class="btn_success" id="btn_add" value="add areas">Confirm Selection</button>
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
</div>
</div>
</div>
</div>
this is the code for the cancel button:
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
I have included this code :
Javascript:
$('.modal').on('hidden.bs.modal', function() { $(this).removeData(); });
Can someone help me to fix this problem to reset and close the modal window.
I am expecting that one of my button will work and pop out these forms, but every time I hit the button "More" nothing happens. Please help!
<body>
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="myFunction()">More</button>
</div>
</div>
You're setting the wrong CSS property in your JavaScript. It should be display, not height. See, for example:
document.getElementById("myNav").style.display = "none";
function displayNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="displayNav()">More</button>
</div>
</div>
semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#"
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button
The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/
I'm trying to have a split between columns and a set of sliders that are laid on top of each other. The goal is to have the buttons display content via a collapse toggle while having the sliders movable with an image/number tooltip combo so I can have users see what they're dragging while getting the information about the various icons they're sliding. Here's what happens
When checked, the column shows 0 or 1-pixel height.
Javascript for the slider appears but tends to overlay on top of the button content
When creating spacers for the column, nothing particularly allows the spacing to split to two columns left and right
When pressing the button for the collapsed div, the content shifts having buttons move around regardless of modification.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="spacer">
<div class = 'slider' id='slider1'></div>
<div class = 'slider' id='slider2'></div>
<div class = 'slider' id='slider3'> </div>
<div class = 'slider' id='slider4'> </div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="spacer">
<button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button>
<div id="ConditionOne" class="collapse">
None
</div>
<button type="button" data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button>
<div id="ConditionTwo" class="collapse" >
<textarea id="conditionTwoInfo" name="conditionTwoInfo">Second Conditional Description</textarea>
</div>
<button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button>
<div id="ConditionThree" class="collapse" >
None
</div>
<button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button>
<div id="ConditionFour" class="collapse">
<textarea id="conditionFourInfo" name="conditionFourInfo">Final Conditional Description</textarea>
</div>
</div>
How should I handle both the column issue as well as the button triggering issue as I assume they're tied together.
First what I did is get the height of the slider. From there I hardcoded the slider's height plus an offset
.slidespace { height: 275px; //Can be whatever you want
width: 100% }
Used it as a div:
<div class="slidespace"> <div class = 'slider' id='slider1'></div>
<div class = 'slider' id='slider2'></div>
<div class = 'slider' id='slider3'> </div>
<div class = 'slider' id='slider4'> </div>
</div>
This gave me enough space to separate the two.