Develop Reference

Show div inside a modal on button click

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>

How to make interactive buttons that scrolls vertical divs?

Lets say I have these divs that are products and
<div class="container">
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
</div>
There are only 2 products due to 'stackoverflow restriction of mostly-code'. Lets say there are 10 of these products and I want to display 5 of them and rest would be shown one by one as per click on forward and backward buttons just like facebook have when viewing photos.

You can set your class='container div to a specific height. If your items' height is, let say, 200px you can set your container to 400px. Then on button click you can scroll container div. Your code will look like this:
<script>
function scrollOneItem(){
var container = document.getElementByClassName('container');
container.scrollTop = container.scrollHeight + 200;
}
</script>
<button onClick="scrollOneItem()">Scroll down</button>
<div class="container">
...
</div>

Reveal Hidden Elements with Buttons

I have a row made of three buttons, and I need these three buttons to remain on the same row.
With that said, I am trying to make it so that each time one of these buttons is clicked, hidden content is displayed underneath them. Each button would show hidden content that is different from the other.
Is there anyway I can accomplish such a task using $(this) or must I assign a unique ID to each button and the relevant content it's supposed to show?
I have tried placing each button within a superclass called .items and the relevant content within this class as a child, called .description--so that I can access it using jQuery's .children() function--but this tends to mess up the row that my buttons are on (so that they are not all on the same row). Is there anyway to get around this?
What would be the simplest way to go about this?
Edit to show code:
<div class="displayers">
<div class="items">
<button type="button" class="btn btn-custom">Button 1</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 2</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 3</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
</div>
In order to make the buttons fit on the same row, I changed the ".items" class to have the property of "inline-block". The ".description" class is hidden, and I have some jQuery to reveal it.
var main = function() {
$('.items').click(function() {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem with this is that my buttons are no longer on the same row.

I like to use data attributes and css selectors (easy to change later on), so I would use:
$('[data-show]').on('click', function(e) {
var toShow = $( $(this).data('show') );
toShow.siblings().hide();
toShow.show();
});
li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<button data-show=".content > *:nth-child(1)">Open 1st</button>
<button data-show=".content > *:nth-child(2)">Open 2nd</button>
<button data-show=".content > *:nth-child(3)">Open 3rd</button></p>
<ul class="content">
<li>1st Container</li>
<li>2nd Container</li>
<li>3rd Container</li>
</ul>
Looks pretty simple to me, but does not mean others would agree. It really depends on your needs.

You can just toggle the elements which is next to your button with just class added to each element as below:
$('.btnshowdes').on('click',function(){
$(this).next('.desc').toggle();
});
.desc{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 1</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 2</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 3</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 4</div>
</div>
<br/>
</div>
FIDDLE DEMO
UPDATE
Based on your updated question to make it in the same row you just need to put an extra style to your .items as below:
.items{
display:inline-table; //helps to keep it in same row
padding:10px;//Just to make it feel good
}
Your js according to your html structure will be:
$('.btn-custom').on('click',function(){
$(this).next('.row').find('.description').toggle();
});
DEMO FIDDLE HERE

To solve your problem i would split my elements. Why don't you put each button in a different container (a div for instance), each container having his own id and his own content.
So when you click on a button you display the content inside of one div and the style of other buttons will not be affected.
Something like
<div class="container" id="1">
<button id="btn1"> Button one </button>
<!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
<button id="btn2"> Button two </button>
<!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->
So you don't have to worry and use complicated scripts, and each style will not be affected by the others modifications.

How to get these buttons float right and vertically aligned with some vertical spacing

Below is my code.
The button with current code are getting displayed at bottom, whereas I want them to be displayed at right most position in vertical manner. Below is my code
<div class= "container-fluid">
<div class = "row">
<div class = "col-sm-2">
</div>
<div class = "col-sm-8">
<div name="visList">
<div name="dispTestList">
<div class = "panel" >
<div class="panel-body">
<div class="row">
<div name="col-sm-2"><h4>ABC HEADING</h4>
</div>
<div name="col-sm-4">
Desc1 : <span>Random Desc</span> | Desc 2 :
<span>Some Random</span> | Desc3 : <span>Random Desc</span> | Desc 4 :
<span>Some Random</span>
</div>
<div name="buttonSection" class="col-sm-6">
<div class="pull-right">
<a class = "btn btn-success" style="margin-top: 1%;">Take Test</a>
<a class="btn btn-success">View Result</a>
<a class="btn btn-success">View Answers</a>
</div>
</div>
</div> <!-- Row -->
</div> <!-- Panel Body -->
</div> <!-- Panel -->
</div>
</div> <!-- visible the section -->
</div> <!-- col-sm-8 -->
<div class = "col-sm-2">
</div>
</div> <!-- Row -->
</div> <!-- container fluid -->
The js fiddle is this http://jsfiddle.net/DashmeetSingh/k6EUK/
I want buttons to get displayed like below webpage.
http://www.starsports.com/cricket/tour/tourid=160/schedule/index.html

To align your buttons to the right-hand side, try: div.pull-right { float: right; }. You could also put the buttons in a list if you want them to stack vertically.
<div class="pull-right">
<ul class="buttons">
<li><a class = "btn btn-success" style="margin-top: 1%;">Take Test</a></li>
<li><a class="btn btn-success">View Result</a></li>
<li><a class="btn btn-success">View Answers</a></li>
</ul>
</div>
(To remove the bullet points, you can use the list-style shorthand CSS like this: ul.buttons { list-style: none }.)

How to make div hide and show as like popup window?

I am new to jQuery. I am trying to create a search box functionality in my project. I have created a div which contains names of cities, and I want it to be displayed on the click event of a button. I am able to hide and show that div using slideToggle() method of jQuery on the click event of a button.
But when div is displayed, then other contents of my page gets distracted. I do not expect this behavior.
Here is my image before displaying that div:
and the following is an image of the page after div is displayed:
Now I want this div to be displayed as like popup, so that it won't distract other contents of the page.
Following is a code of my search box section in HTML:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border:2px solid #a1a1a1;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:0px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#a1a1a1;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities">
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my jQuery code:
$(document).ready(function(){
$(".SearchCities").hide();
$("#dropdownBtn").click(function(){
$(".SearchCities").slideToggle();
});
});
For more idea what I want to do visit :askme.com and see a search box at the top and click on rest of India.
So please can you help me to achieve this?
Thank you in advance.

You basically have three ways:
By hand: make the popup div floating and position it absolutely, then set top to 100% (this will make it look like a popup menu. Make sure the parent element has relative positioning.
HTML:
<div class="input-group" style="position: relative;">
<div class="SearchCities">
...
</div>
</div>
CSS:
.SearchCities {
float: right;
position: absolute;
top: 100%;
}
JS: No change required
Use jQueryUI's dialog plugin: as pointed out in nrsharma's answer you can use a jQuery plugin to make it look like a popup dialog.
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin
$('.SearchCities').dialog("open"); // Open popup
API Reference: http://api.jqueryui.com/dialog/
Examples: http://jqueryui.com/dialog/
Plugin download: http://jqueryui.com/download/
Use Bootstrap's dropdown component: it seems from your code that you're using bootstrap. You can easily use bootstrap dropdowns or modals.
Bootstrap modals are popup dialogs just like jQueryUI's dialog plugin, but they look better and they're much more customizable. Have a look there for an example: http://getbootstrap.com/javascript/#modals
Bootstrap dropdowns are simple dropdown menus, but with a bit of hacking you can put anything inside them.
All you need is a bit of HTML (no JavaScript):
<div class="input-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" id="dropdownBtn" role="button">...</button>
<div class="dropdown-menu SearchCities" role="menu">
...
</div>
</div>
To make this work you also need to include Bootstrap js plugins (bootstrap.js/bootstrap.min.js).
Reference: http://getbootstrap.com/javascript/#dropdowns

Here you can do this easily
HTML
<div class="dialogbox"> This is Dialogue box</div>
<a id="click">click here</a>
CSS
.dialogbox{width:100px; height:100px; background:grey;display:none}
JQUERY
<script src="latest jquery library"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
$(".dialogbox").toggle();
});
});
</script>

You can do it easily with a jQuery UI dialog.
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
JavaScript/jQuery:
$(function() {
$( "#dialog" ).dialog();
});
More information can be found here.