|
JavaScript - Select Box Vertical Scroll Bar
Hi All,
I would like to ask is if there is any way I could control the selectbox's vertical scroll bar. scenario: user inputs value from a textbox and it appends it to the selectbox. after the user inputs more than 5 entries, the selectbox will create the vertical scroll bar but will not focus/show the latest entry. problem: i can't seem to automatically focus or show the latest entry. what i did: i am using jquery to add data to the selectbox and i use jquery to set the selected value. Code: $('#selectbox').val('latest value').attr('selected','selected');
this code selects the latest value on the selectbox but it doesn't scroll down to show it. the user still has to drag the scroll bar down. any idea i can auto scroll it to the latest value? thanks for the help Similar TutorialsHi, Quick question - I want to find the scrollTop value for some ajax divs but I can't seem to get scrollTop to work. The html looks like this: Code: <div id="media-meta-container" style="width: 302px;">
<p>Subtitles <span id="status" ></span></p>
<div id="scrollbox" >
<div id="content" >
<div id="content_0">Content 0</div>
<div id="content_1">Content 1</div>
<div id="content_2">Content 2</div>
<div id="content_3">Content 3</div>
<div id="content_4">Content 4</div>
</div>
</div>
</div>
Where scrollbox is, you guessed it, a scroll box. I want to find the y position of each of the content divs. I tried this (for exampel for the last element) but it didn't work: Code: var height = $('#content div')[4].attr('scrollTop');
Any ideas? hi, i am trying to scroll my list of twitter feeds vertically, I am using the following script: http://www.******************/javasc...ry-news-slider I have stripped everything out and have the demo working perfectly I have now uploaded JS files and put in the relevant code and it's not working?! here is my website: http://judd-dev.co.uk/pitch/ (homepage twitter feed bottom right) here is the code I have in my website: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jcarousellite_1.0.1c4.js"></script>
<script type="text/javascript">
$(function() {
$(".tweet_list").jCarouselLite({
vertical: true,
hoverPause:true,
btnPrev: ".previous",
btnNext: ".next",
visible: 3,
auto:3000,
speed:500
});
});
</script>
<div id="social-feed-wrapper">
<div class="feed" id="twitter-feed" style="display: block;"><ul class="tweet_list"><li class="tweet_first tweet_odd">text goes here</li><li class="tweet_even">more text</li></ul></div>
<ul class="social-icons">
<li class="twitter"><a href="#twitter-feed" class="active"></a></li>
<li class="facebook"><a href="#facebook-feed"></a></li>
</ul>
</div>
Please help Hi all, Not sure if this is a browser feature kind of thing, or if it can be done with a script. I'm looking at my page: www.mysite.com/index.php?start=0 I scroll to the bottom of the page with the vertical scroll bar, and then click the pagation link to start on page 2, record #50: www.mysite.com/index.php?start=50 Of course, the vertical scroll bar jumps back to the top of my page. Is there a way to make it remember that the scroll bar was at the bottom (or in the middle)? Thanks. Hi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. Does anyone know where I could get a scroller similar to the one used in this recent news div? http://www.383project.com/ thanks! Have a container set to an em height and need the get the scroll or overflow value. Basically need to know if text node inside container has content hidden below the height allowed. How do I get this?
How do you make a vertical carousel that displays either text or images?
Hello All, How can i want to capture onscroll event in Javascript ? Thanks in advance. Hello, Could anyone plz recommend a script that adds a "move to top" box for our .php site similar to the one we have on our blog site: http://sand.greekconcierge.com/ many thanks, Andy I've started seeing this on a few pages and I'd like to add it to mine. I'd like to add a back to top button where it doesn't just jump right to the top, but acts like the user were actually using the scroll bar. here are some well done examples: http://www.javascriptkit.com/jsref/window.shtml and http://www.webdesignerheaven.com/ I like the first one better (where it shows an up arrow if you've scrolled far enough), and I found what I think is the javascript responsible (though I'm not sure if it's exact right to take it.) let alone, i'm not sure how i would even implement it yet. http://www.javascriptkit.com/jkinclu...ltopcontrol.js i've got a basic example working on my own site, I just don't know how to stop it, (right now it just keeps going and going even if i try to scroll back down.) i'd like to be able to tell if the user reached the top, then stop it, but from what I've looked, i can't find a way to check where exactly they are in my page. i figure, if i can get mine to stop, I can fancify it later with the image that shows if you've moved down and what not, right now I'd like to just stop it when it reaches the top. I am wondering how i can make a page auto scroll in any direction when the mouse gets too close, i was thinking about an image following the mouse could do it <didnt work, any ideas on how i would do that? I was thinking about a broken drag and drop script, that never drops < didnt work A div that moves the divs innerHTML with a scrollbar.
|
|||||||