I am trying to create a div on the bottom a of an image that when clicked, shows and when clicked again, hides. I can get it working with just one of the divs, but I am trying to do this for all of them containing the same ID.
I was first trying to get the div to initially hide and can't. Thanks for any help.
$(document).ready(function() {
var $dropdown= $('#project-description');
$dropdown.hide()
$('#project-dropdown').each(function(){
$('#project-dropdown').click(function() {
if ($menu.is(':visible')) {
$menu.slideUp("medium", function() {
$menu.hide();
});
}
else {
$menu.slideDown("medium");
}
});
});
});
UPDATE: I am closer to what I am looking for. It kind of works now that I am using classes, but all of the div's open and close together. Is there any way to get them independent of one another?
jQuery
$(document).ready(function () {
var $dropdown = $('.description-dropdown');
var $container = $('.description-container');
$dropdown.hide();
// $($menu).each(function () {
$($container, $dropdown).click(function () {
if ($dropdown.is(':visible')) {
$dropdown.slideUp("medium", function () {
$dropdown.hide();
});
} else {
$dropdown.slideDown("medium");
}
});
// });
});
Div's being manipulated
<div class="container description-container">
<div class="ui divider center aligned"><i class="chevron down icon"></i></div>
<div class="description description-dropdown">
<p><%- project.description %></p>
</div>
</div>
To make them slide independently you need to have your event code only operate on the element that was clicked. To do that you need to find the dropdown inside the container that was clicked:
$($container).click(function () {
var dd = $(this).find(".description-dropdown");
if (dd.is(':visible')) {
dd.slideUp("medium");
} else {
dd.slideDown("medium");
}
});
Note that the call to .hide inside .slideUp is not required as slideUp performs a hide.
The issue is that you're trying to use ID's. ID's can only reference to one element and a class should be used in place of that.
Using classes you can set the same class to mutliple elements and then they'll be called when needed.
Also when it comes to classes, you use a dot instead of a hash.
Hope this helps you out
$(document).ready(function()
{
var $dropdown = $('.project-description');
var $menu = $('.menu');
//$dropdown.hide();
$($dropdown).each(function()
{
$($dropdown).click(function()
{
if ($menu.is(':visible'))
{
$menu.slideUp("medium", function()
{
$menu.hide();
});
}
else
{
$menu.slideDown("medium");
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="project-description">
INFORMATION BLAH BLAH
</div>
<br>
<select class="menu">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="menu">
<option value="cake">cake</option>
<option value="pizza">pizza</option>
<option value="garlic bread">garlic bread</option>
<option value="mac n cheese">mac n cheese</option>
</select>
<select class="menu">
<option value="games">games</option>
<option value="movies">movies</option>
<option value="music">music</option>
</select>
</body>
</html>
Related
I have the following code, its supposed to reorder my divs within #list. And it does that just fine. Now what I want to add is: if a div does not have the attribute "data-l-disc" don't add it/hide it.
<select id="selectid">
<option id="valid1" value="def">Default order</option>
<option id="valid2" value="hl">h-l</option>
</select>
<div id="list">
---------the follow div is used about 50*-------------
<div class="dbl" data-l-disc="1">
---------blabla (like 10 other divs are in here)----------
</div>
</div>
jQuery(document).ready(function( $ ) {
$('select').on('change', function() {
if(document.getElementById('selectid').value == "hl") {
var dList = $(".dbl");
dList.sort(function(a, b){ return $(b).data("l-disc")-$(a).data("l-disc")});
$("#list").html(dList);
}
})
});
you can hide it by using
$(".dbl").not("[data-l-disc]").hide()
Rather than the "Select" type of dropdown I want a ul. But, after converting to ul, my javascript isn't firing and I can't figure out why. It works great as a Select...am I missing something?
Here is the original Select (working)
<div class="container">
<select id="selector1" name="divshowhide">
<option selected disabled value="null">Sort By:</option>
<option value="#Online-holder">Online Now</option>
<option value="#Lowest-holder">Lowest Price First</option>
<option value="#Best-holder">Best Rating First</option>
</select>
</div>
Here is the ul version: (not working)
<li>Sort
<ul class="dropdown" id="selector1">
<li>Online Now</li>
<li>Lowest Price First</li>
<li>Alpha</li>
</ul>
</li>
Here is the javascript:
<script type="text/javascript">
$(document).ready(function() {
$('#Online-holder').show();
$('#Online-link').click(function() {
$('#Online').toggle(400);
return false;
});
$('#Lowest-holder').hide();
$('#Lowest-link').click(function() {
$('#Lowest').toggle(400);
return false;
});
$('#Alpha-holder').hide();
$('#Alpha-link').click(function() {
$('#Alpha').toggle(400);
return false;
});
});
jQuery("#selector1").change(function(){
var div = jQuery(this).val();
$('.holder').hide(200);
jQuery(div).show(200);
});
</script>
Help! Thank you!
Since your element became a clickable one rather than a selectable one, you can change your change function to a click function like this:
jQuery("#selector1 li").click(function(){
var div = jQuery("a", this).attr("value");
$('.holder').hide(200);
jQuery(div).show(200);
});
I have the following dropdown:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
Below this I have the following divs:
<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>
These are set to display:none using css
I'm trying to make it so when I select the name from the dropdown, the class "visible" is added to the corresponding div - and then removed again if the selection is changed again.
Here is what I have tried so far, but with no luck:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val()).addClass('visible');
});
});
Here is how I would do this:
html:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="nothing">Select One</option>
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="Toni">toni</div>
<div class="singer_profile_overview" id="Jack">jack</div>
<div class="singer_profile_overview" id="James">james</div>
jquery:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
var $this = $(this);
$('.singer_profile_overview').removeClass('visible');
$('#' + $this.val()).addClass('visible');
});
});
Couple of notes:
It is a good practice to store $(this) in a local variable, I usually call it $this.
You had an upper case / lower case problem in your original code. The id of the class to update needs to match the id you call in your selector
Remove the visible class from every <div> prior to applying one.
And there is still one problem, if you click your dropdown and select the first option, the event will not fire because nothing changed. That is why I added a 'Select One' option.
And here is a fiddle.
Try this. You also need to convert the value to lowerCase() to get the exact match.
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">toni</div>
<div class="singer_profile_overview" id="jack">jack</div>
<div class="singer_profile_overview" id="james">james</div>
<style>
.singer_profile_overview
{
display:none;
}
.visible
{
display: block
}
</style>
<script>
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('.singer_profile_overview').removeClass('visible'); // hide all divs by removing class visible
$('#' + $(this).val().toLowerCase()).addClass('visible'); // find the matching div and add class visible to it
});
});
</script>
Example : http://jsfiddle.net/RxguB/204/
It is because the value of the dropdown are capitalized, while your ids are lowercase. Consider the following:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val().toLowerCase()).addClass('visible');
});
});
Or alternatively, you can manually change the values to lower case, or the ids to be capitalized to match the values.
To answer the question as it was asked:
$("#about_performance_lead_singer").on("change", function(){
$(".singer_profile_overview").removeClass("visible");
$("#" + $(this).val().toLowerCase()).addClass("visible");
});
However, if you're only using the class "visible" to toggle their display, you can replace
removeClass("visible")
with
hide()
and
addClass("visible")
with
show()
Use the :selected selector to find the option that was selected. We can get its value by calling the prop method and passing in value as an attribute. Since the ids we are trying to get are lowercase, we use the toLowerCase() method.
The div we're trying to get is of the class .singer_profile_overview. We should use the filter function to get the ids. We store the result of this filter in a jQuery variable and finally add a class to it.
$("#about_performance_lead_singer").change(function () {
var selectedValue = $(":selected").prop("value").toLowerCase();
var selectedDiv = $(".singer_profile_overview").filter(function() {
return $(this).prop("id") == selectedValue;
});
selectedDiv.addClass('visible');
});
.visible {
color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">Toni</div>
<div class="singer_profile_overview" id="jack">Jack</div>
<div class="singer_profile_overview" id="james">James</div>
I have the following fiddle: http://jsfiddle.net/4Ly1973u/.
Here's my html:
<article>
<select>
<option name='First' value='first'>First</option>
<option name='Second' value='second'>Second</option>
<option name='Third' value='third'>Third</option>
</select>
<div data-name='first' class='show'>
This one should show by default.
</div>
<div data-name='second'>
only visible when "second" is selected
</div>
<div data-name='third'>
only visible when "second" is selected
</div>
</article>
Basically, I want to have the first div show by default, but when you change the select to second or third, I want it to change to that div.
I realize I could do this easy with an if statement, but I could potentially have a lot of select options, so I'm hoping for a cleaner solution. Or is this the only way?
Try this
$(function () {
$("select").on("change", function () {
$('.show').removeClass('show');
$('div[data-name="' + $(this).val() + '"]').addClass('show');
});
});
Demo: http://jsfiddle.net/4Ly1973u/1/
Here a working fiddle: http://jsfiddle.net/4Ly1973u/3/
<article>
<select>
<option name='First' value='first'>First</option>
<option name='Second' value='second'>Second</option>
<option name='Third' value='third'>Third</option>
</select>
<div id='first' class='show'>This one should show by default.</div>
<div id='second' class='noshow'>only visible when "second" is selected</div>
<div id='third' class='noshow'>only visible when "third" is selected</div>
</article>
CSS
.show {
display: block;
}
.noshow {
display:none;
}
jQuery
$(function () {
$("select").change(function () {
$('.show').removeClass('show').addClass('noshow');
var getValue = $("select option:selected").val();
$("#" + getValue).removeClass('noshow').addClass('show');
});
});
How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
Here: http://jsfiddle.net/Kq9pX/
JS
Do it on load: Wrap around document.ready function.
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
<option value="All">All</option>
Must be cleared:
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
Use jQuery:
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.