Third time is a charm!
This is what I am trying to achive..
I would like to use data.name to populate a divs ID name. I would like the <div id="date.name"/> to show on click, below is what I have tried.
click: function(event, data) {
$('#clicked-state')
// .text('You clicked: '+data.name);
.show($("<div id='" + data.name + "'/>" ));
// .parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
In this case data.name holds abbreviations from all 50 US states.
Once a state is clicked, eg. 'California' data.name will be assigned 'CA'.
I want to use this to show div with id 'CA'.
I want to use this to display divs that I have inline with the same name.
Update: based on suggestions, div did not show onclick of state.
Recent Attempt
css
<style>
#va { display:none;}
</style>
js
click: function(event, data) {
$('#clicked-state')
$('#' + data.name).toggle();
}
});
html
<div id="va">
this is virginia.
</div>
I am using this plugin for states data.name generated and map.
http://newsignature.github.io/us-map/
As id's in a HTML page are unique, you can directly use the selector to target the div and display it.
$('#' + data.name).show();
Code
click: function(event, data) {
$('#' + data.name).show();
}
The problem is that .show doesn't take any parameters. I'm not 100% sure on what you're trying to do. If you're trying to show an existing div with the state name, you should call it like
$("#" + data.name).show();
If you're trying to create a new div, use .html on the parent containing div (if one doesn't exist, create one in there)
$("#ParentDiv").html("<div id='" + data.name + "'/>");
Some piece of code (http://jsfiddle.net/esxe7LmL/):
<select>
<option value="state1">State 1</option>
<option value="state2">State 2</option>
<option value="state3">State 3</option>
</select>
<div id="state1">state 1</div>
<div id="state2">state 2</div>
<div id="state3">state 3</div>
$("select").on("change", function() {
var v = $(this).val();
$("div").hide();
$("div#" + v).show();
});
div {
display: none;
}
Ok, so previous answer misunderstood the question so here's my second attempt:
// remember to include your us-map.js library
$('.state').hide();
$('#map').usmap({
// The click action
click: function(event, data) {
console.log( data.name );
$(".state").hide();
$('#' + data.name).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="VA" class="state">
This is Virginia
</div>
<div id="CA" class="state"><!-- make sure your IDs are UPPERCASE -->
This is California
</div>
Related
I am a total beginner to jquery. and am badly stuck. i would really appreciate if i could get some help with my code.
The scenario is,
- I have a drop down list for the names.
- When i select a name from the list, it should display in the div which is placed beneath the drop down menu. The div will be created automatically via jquery. every item selected from the list will be displayed in its own respective div. The name Sarah should not be included in the drop down list.Its like a stand alone thing. However, when i select an item in the list, the name Sarah is replaced with the selected item.
What i was able to code was --
- I could get the divs with some names associated with it. However, i am unable to target the selected item to its respective div.
I hope it makes sense. I am posting the link to my jsFiddle. Please help.
http://jsfiddle.net/zohana28/0akosx2a/
<div class="part-4">
<select id="sel">
<option value="Cheese">Cheese</option>
<option value="Olives">Olives</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Oregano">Oregano</option>
<option value="Thyme">Thyme</option>
</select>
</div>
<!--end of part 4-->
<div class="main">
<div class="part-2" id="click-1" style="cursor:pointer;">
<div class="part-2-address">
<h4 id="name">sarah</h4>
</div>
</div>
jQuery is:
$(document).ready(function () {
$(document).on('change', '#sel', function (e) {
$('.part-3').html($('.part-2').html());
$('.main').append('<div class = "part-3" > </div>');
var str = $('select option:selected').text();
$('#name').text(str);
console.log(str);
});
return false;
});
thank you in advance.
I've adjusted your Fiddle a bit.
$(document).ready(function () {
$(document).on('change', '#sel', function (e) {
var nameTempl = '<div class="part-2" class="click-1">'
+ '<div class="part-2-address">'
+ '<h4 class="name">{name}</h4></div></div>';
var str = $('select option:selected').text();
$('.main').append(nameTempl.replace(/{name}/, str));
});
return true;
});
For the HTML: I removed the inline-style cursor:pointer; and added it as style for the class .click-1 - previously click-1 and name were ids, I've changed both to be classes. ids have to be unique, so you have to use classes instead.
Though it would be possible to clone() the <div class="part-2" class="click-1"> and then change the name to the current selected option, I just preferred to use the target div as template in the function, with {name} as placeholder to be replaced with the current selected option: nameTempl.replace(/{name}/, str).
Another adjustment that you can change back is - I've set the height:200px; of the .main div to min-height: 200px;, so this container grows when necessary. You can just change this back to height:200px; in case you prefer the yellow div to have a static height like before.
As reference for replace(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});
I have div with <\select> drop down. And from the Drop down if I select limited it opens a div with Input and it works fine.
I also added one link + Add New and clicking on the +add new creates a new div with the <\select> drop down which should work same as before but when I select limited from the new drop down it effects the previous one. How can I make it so that it only open for the div I am working and do no effect other divs no meter how many I create.
JS FIDDLE
HTML
<div class="wrapper">
<div class="row">
<select class="optionSelector">
<option>-Select-</option>
<option value="limited">Limited</option>
<option>Unlimited</option>
</select>
<div class="limited" >
<input type="number">
</div>
</div>
</div>
Jquery
$('.add').click(function() {
$(".wrapper").append('<div class="row"><select class="optionSelector"><option>-Select-</option><option value="limited">Limited</option><option>Unlimited</option></select><div class="limited" ><input type="number"></div></div>');
});
$(".wrapper").on('change', '.optionSelector', function(){
$('.limited').hide();
$('.' + $(this).val()).show();
});
you can use .siblings() to get only the dropdown next to it
demo
$(".wrapper").on('change', '.optionSelector', function () {
$(this).siblings('.limited').hide();
$(this).siblings('.' + $(this).val()).show();
});
Try:
$(".wrapper").on('change', '.optionSelector', function(){
$(this).closest('.row').find('.limited').css('display', $(this).val()=='limited'?'block':'none');
});
jsFiddle example
The $('.limited') selector gets all the elements with the class .limited.
I have a webpage where i have a dropdown menu with default option not selected. When the user selects an option then i want display textboxes related to that option. How can i do this. For example i have these images
Really depends on how many options you have in the list box and if the textboxes are shared between the options.
You could created hidden DIVs which are then shown when an option is selected. You would need to create a JavaScript function which is fired using the onChange event attached to the drop down.
If you were sharing the textboxes then given them specific classes which you can show/hide in the Javascript function, this is relatively simple if you use something like jQuery.
Add an event handler for selection changed like so:
$('#yourSelectId').change(function() {
var selectedVal = $('#yourSelectId option:selected').attr('value');
});
Then make some hidden divs visible depending on the selected value( $.('.class').hide() ).
Use divs whose visibility is set to be hidden, and make it visible on select event. You can use multiple divs for atheistic purpose, associated with a select event.
An example can be found in post 2 at -
http://www.codingforums.com/showthread.php?t=167172
This is quite simple. All textboxes are hidden and with an event on your dropdown menu, you just show the right div.
HTML :
<select id='dropdown' onchange='showDiv()'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div id="div1" style='display: none;'>Div 1</div>
<div id="div2" style='display: none;'>Div 2</div>
JS
<script type="text/javascript">
function showDiv() {
var div = document.getElementById("dropdown").value;
if(document.getElementById(div) != null) {
hideAllDiv();
document.getElementById(div).style.display = "block";
}
}
function hideAllDiv() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
}
</script>
The code above is ugly but you can do it better with jquery and some css.
Edit :
Example with Jquery
<select id='dropdown'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div class='div' id="div1">Div 1</div>
<div class='div' id="div2">Div 2</div>
<style type="text/css">
.div { display: none; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
$(".div").hide();
$("#" + $(this).val()).show();
});
});
</script>
I have a jQuery script running on an ASP site that shows hidden DIVs when the id of a select form matches the div's ID:
$(document).ready(function(){
$('select[name$="_77"]').change(function() {
$(".select_77").hide();
$(".select_77[id='" + this.value + "']").show();
})
})
The form truncated to only one option for this example:
<select name="option____jdfhj387___77">
<option value="1922">Raisins</option>
</select>
And this is one of the many divs that gets unhidden:
<div id="select_image">
<div class="select_77" id="1922" style="display:none;">
<div class="border">
<div class="content">
<img src="photos/option/1922.jpg">
</div>
</div>
</div>
</div>
The photos are medium sized, and it takes roughly 20-30 seconds for the page to load when I have 200+ of these images. Is there anyway to have the image load only when the parent div becomes visible, without having to manually put in every image url inside the script?
OK I figured it out after several hours of research.
I found and added code that renames an attribute of an img tag with a matching ID selected under the form.
$(document).ready(function(){
$('select[name$="_77"]').change(function() {
$(".select_77").hide();
$(".select_77[id='" + this.value + "']").show();
$("img.option[realsrc][id='" + this.value + "']").each(function() {
var $t = $(this);
$t
.attr({
src : $t.attr('realsrc') /* Copies realsrc attribute and makes a src attribute*/
})
.removeAttr('realsrc'); /* Deletes the realsrc attribute */
});
})
})
Then I added class="option" and id="#" and renamed src= to realsrc=.
<img class="option" id="1922" realsrc="photos/option/1922.jpg">
Now when someone selects the option that matches the ID of the image, the image's realsrc will be renamed to src and it will download and appear!