I would like to have a tag search button in Tumblr by selection using the select option but I am not sure how to insert the onclick event using Tumblr's {text:Search Label}.
form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
Anyone here can help? Thanks.
Well here is my code: http://jsfiddle.net/htWW6/
This is the script:
$(document).ready(function(){
$('select').bind('change',function(){
var loc = $(this).val();
location = "/tagged/" + loc;
});
});
This is jquery, so if your theme currently has this installed (many do) then that code should work off the shelf. If not then it is very easy to add jquery, but if you need a pure JS solution, I cannot help with that. Although the other answer does offer some insight.
Related
Using a jQuery Plugin (Link to Plugin Code) I try to achieve a multi-select drop-down menu. Then I want to dynamically (depending on user input) change the menu-entries. The first part works fine, but changing menu-entries doesn't so far. Therefor I wanted to ask for help.
Here is the HTML part:
<select id="Fruits" name="Fruits" multiple="" style="display: none;">
<option value="1">Number1</option>
<option value="2">Number2</option>
<option value="3">Number3</option>
</select>
Then I use that code to initialise the menu:
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
The result is precisely what I want:
Next I try to dynamically add a menu-entry. I do that by the following code:
var option = document.createElement("option");
option.text = "Number4";
option.value = "4";
var select = document.getElementById("Fruits");
select.appendChild(option);
This is what I hope to achieve:
However the result looks precisely like the first picture. Also running
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
again doesn't help.
Get the MultiSelect instance (.data("plugin_multiSelect")) from the <select> and call .updateMenuItems() after you've added the new elements:
$("select").data("plugin_multiSelect")
.updateMenuItems();
--
The answer is based on the source code and a test on their demo page.
I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!
This is a sample code.
If we have 100 options e.g. and User selects an Option it shows the respective Description.
I made it work with Jscript but thats too long code to mess around. and is simple thing
Here is JS Version : http://jsfiddle.net/eHwVn/
and I want to Use Simple HTML
<select>
<option value="i">ItemA</option>
<option value="i">ItemB</option>
<option value="i">ItemC</option>
<option value="i">ItemD</option>
<option value="i">ItemE</option>
<option value="i">ItemF</option>
</select>
How to add description to each item using HTMl?
TO Get this:
(Sorry I cant post Images Yet)
http://i.stack.imgur.com/DSm4j.png
Thanks for Help
Peace!
Try the following JSFiddle : http://jsfiddle.net/3XTjH/
using the HTML :
<select id="example" onchange="showtext()">
<option value="http://www.cnet.com" data_info="Click here for Cnet, the primer technology site on the net!">Cnet</option>
<option value="http://www.cnn.com" data_info="Click here for CNN, one of the best sources online to get your news.">CNN</option>
<option value="http://www.geocities.com" data_info="Click here for Geocities, and receive 10 megs of free web space.">Geocities</option>
</select>
<br>
<textarea rows=5 cols=21 wrap="virtual" id="text"></textarea>
and the Javascript :
function showtext() {
var dropdown = document.getElementById("example");
var curOption = dropdown.options[dropdown.selectedIndex];
var info = curOption.getAttribute('data_info');
var txt = document.getElementById('text');
txt.value = info;
}
Every time you select a new option it find the currently selected option, and then find the value of the data_info attribute of that option and set the value of the text area to it.
I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.
I was googling around and saw a tutorial on YouTube that uses JavaScript to auto select options based on the select value.
The JavaScript code looks like this:
$("select[value]").each(function() {
$(this).val(this.getAttribute("value"));
});
And the code that is in the HTML is this (after PHP gets the data)
<select name="group" id="group" value="4">
<option value="1">Administrator</option>
<option value="2">Member</option>
<option value="3">Developer</option>
<option value="4">Moderator</option>
<option value="5">Donator</option>
</select>
The value in the select is supposed to tell the JavaScript what is to be selected, but it's not working for me, help me please? (I'm new to JavaScript/PHP/MySQL)
That code uses the jQuery library. Given you haven't tagged your question with jQuery, I suspect maybe you don't realise that it is needed and haven't included the jquery.js file?
Add this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
(To load it from Google's CDN.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
then try like mine, may be can help you
$(function(){
var val = $("select[name=group]").val();
$("select[name=group]").change(function(){
val = $(this).val();
});
}