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.
Related
So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.
So...this is what is supposed to happen: A user clicks on a button that opens a normal Bourbon Refills Modal. Within that modal, the user has the option to click on a button to open an additional settings modal.
Currently I have one main modal and one nested inside of it. Sadly, the nested modal is constrained within the bounds of the first in Webkit and Gecko browsers. On IE...it doesn't at all :(
Is there any other way of pulling this off with Refills? I was thinking...maybe assigning a click event to the button to open a second (separate) modal that would sit on top of the first in z-index order?
Thanks in advance for your help - any is appreciated.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<!-- Begin Nested Modal 2 -->
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
<!-- End Nested Modal 2 -->
</div>
</div>
</div>
OK, I figured it out. Admittedly, this threw me off a bit because these are not JS-powered modals, but instead they rely on the ability to style an an element based on a hidden checkbox and its sibling element (in this case: < label >)
Easy-peasy. All we need to do is separate the modals and assign the :checked state to the hidden checkbox of the modal we want to open. For example:
First, separate the modals as you normally would. Then in Modal 1, create the link/button you want to have users click to open Modal 2. For the sake of argument, we will give it an ID of #update.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2-->
</div>
</div>
</div>
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
Now...write a little bit of jQuery to assign the :checked state to the appropriate modal.
$("#update").click(function() {
var modalTrigger = $("input#modal-2");
modalTrigger.prop("checked", !modalTrigger.prop("checked"));
});
Done. Now the second modal opens up correctly over the first. I just tested this and it works in most browsers (including IE9-11) since we're not doing anything different from the base refills modals.
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.
I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.
I'm looking for a way to select a div with the class ".targets" from a button click.
My markup looks something like this:
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
My jQuery looks like this:
$("form").on("click", "btn-add", function(e){
var targets = $(this).parent().parent().next();
});
This solution works "somehow", but what if the markup changes?
Is there a way in jQuery to select the closest div with the class ".targets" on button click?
Thanks :)
Use (this).closest(".container").find(".targets");
this will select the closest element with the class container and search for an element in that with the class targets
$("form").on("click", ".btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
console.log($(targets).text().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
target1
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
target2
</div>
</div>
</div>
</form>
If you know they will always be within the .products element, you could do:
$(this).closest('.products').find('.targets');
A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/
Try this:
$(this).closest('.container').find('.targets')
You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree
$(this).closest('.container').find('.targets')
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.