|
JavaScript - Maintaining Place In Div
Hi there,
I've got a div with an id of messages - It is essentially a chat system however chat usually adds messages to the bottom of a list which means the messages do not get pushed down while you are reading them. This system instead adds the messages to the top. I need a way of finding the current scroll position so that when a new message is added the scroll remains in the same place. I've been trying to work this out for a while now, any advice or code would be greatly appreciated. Similar TutorialsHello, I am trying to update an iframe when the user makes a selection from a select box. I don't have any trouble with changing the iframe, but when I try to send a varible as a quey string, the variable doesn't pass to the iframe properly. // this is in my header, and it is initiated from the onchange below. // it changes the page fine, but doesn't read the varible "num" // that was passed to the function <script language="javaScript"> <!-- function updatenotes (num) { document.getElementById("desc").src = 'iframe1.cfm?dec=num' } //--> </script> // this is the select box that initiates the function from onchange // for simplicities sake, I hard coded 3 options, but in reality, // these options are ever changing <select name="Description" onchange="updatenotes(this.options[selectedIndex].value)"> <option name="">Select a project</option> <option name="2" >project2</option> <option name="3" >project3</option> </select> Any help you can offer would me ver appreciated. thanks Hi, This is my site at the moment in testing: http://whnpf.perdu.servertrust.com/ I have the ideal layout of my slides underneath the actual slide itself. My problem is, everytime I copy the code and place it in again, for some reason the slide goes to the next line and not next to the other slide. Here is my code for the current slide: <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script> <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"> </script> <style type="text/css"> .stepcarousel{ position: relative; /*leave this value alone*/ border: 1px solid GREY; overflow: scroll; /*leave this value alone*/ width: 313px; /*Width of Carousel Viewer itself*/ height: 262px; /*Height should enough to fit largest content's height*/ } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px; /*margin around each panel*/ width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ } </style> <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file'] }) </script> <div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> </div> </div> Any help would be greatly appreciated, thank you Is it possible to place links in a text area box? I tried the below but it doesn't work but how can it be done. Any suggestions? Tracy Code: <textarea rows="2" name="S1" cols="20"> <a href="http://yahoo.com">Yahoo</a><br> <a href="http://google.com">Google</a> </textarea> Hi All, Im currently working on a bidding application built within ASP.Net and i have found this javascript snippet to only allow numeric values in the desired <asp:textbox> which is working fine, but i want to allow the user to add a decimal place. For example, say the bid is 1.50 they should be allowed to enter 1.51 but as i cant imput (.) i end up putting in 151 heres the snippet it may be a slight modification but im new to javascript so any help of knowledge will be highly appreciated Code: function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
thanks in advance I have a mortgage calc that is adding an extra decimal place to my interest rate. To see this in action go to: http://www.keithknowles.com/elmtree/mortgagecalc2.htm Change the interest rate to 7.5 Click Calculate Payment Click Create Amortization Chart On the following screen you'll see a recap of your data and the interest rate will now say 7.55. Same thing happens if you enter 6.2. Next screen shows 6.22/ I've attached the html and js files in a zip. Any help is greatly appreciated. Thanks. Hello! First off, please excuse my ignorance. I am a bit new to the coding world. I want users to be able to enter data into a textbox on my site, and the data then be placed at the end of a specific url, followed by '.html'. For example, say my website is mysite.com. If someone enters in the word "John" in the textbox and clicks the 'Submit' button, the URL should now be: mysite.com/John.html Thanks in advance! Hi, I am creating a webpage to display menu items in a div tag. The premis of my page is to use 4 div tags. 1st div tag = company logo (top left) 2nd div tag = img of restaurant and address (top right). 3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc 4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag. I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags. The best response I got was with AJAX, but I am not familiar with this language yet. Can I use JavaScript to do this? Any suggestions? Thank you, Paul I've wrote a jQuery script to fade some lines of text on the page. I've tested it and know it works. I've tried adding it to my WordPress homepage and testing it locally, but it doesn't work, I don't really know what I'm doing, and I can't make heads nor tails of the codex. I'd appreciate either a simple explanation or a real-world example Here are the steps I've taken: 1. added the line <?php wp_enqueue_script("jquery"); ?> just above the wp_head line. 2. added the script just below the wp_head line 3. Used the "No Conflict" syntax of jQuery(document).ready(function() {. Here's what the header looks like where I put my script Code: <?php
/**
* Template Name: Home Page
*
* @package WPFramework
* @subpackage Template
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
//set all the divs opacity to 0
$("#rotator div").css({opacity: 0});
//show the current div
$("#rotator div.current").css({opacity: 1});
//run the rotateImages function every 3 seconds
setInterval("rotateBanners()", 4000);
});
function rotateBanners () {
var curBanner = $("#rotator div.current");
//get whatever div is after the current banner
var nxtBanner = curBanner.next();
//if there's nothing left, go back to top of loop
if (nxtBanner.length == 0)
nxtBanner = $("#rotator div:first");
curBanner.removeClass('current').addClass("previous").animate({ opacity: 0.0 }, 1500);
nxtBanner.css({ opacity: 0.0 }).addClass("current").animate({ opacity: 1.0 }, 1500,
function() {
curBanner.removeClass("previous");
});
};
</script>
</head>
I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?
i am dynamically making pdf files, works great using abcpdf etc etc. the only problem that i am having is with the page breaking. i want to create a function that runs onload and can read the position of elements and add breaks before the element if it is cut off. each block ("from the west", "holiday inn express") is a span with the class name of "entry" i want to loop through those, get their height, add them together and if that span falls in the range of the page size (792px) add a page break before it. the difficult part will be when we get to pages 2 and above does that make sense? im throwing around some ideas now in a js file, if you have any please post them thanks Hello everyone, I have done a lot of research looking for answers on this one but unable to find anything that helps. I have a couple of questions on a page and each are contained in there own form. The questions themselves use checkboxes. I would like the page to not refresh and jump to the top of the page after they submit there answer. So on questions that use radio buttons I have been using Code: <input type="submit" value="Submit" onclick="get_radio_value(); return false;" /> for the submit buttion and that works perfect. I try and use it on questions that use checkboxes and it doesnt work so as a work around I am using the form's action attribute to set it to a link on the page. Here is my form code: Code: <form name="question2" action="#q2">2. <strong>Multiple choice:</strong><a name="q2"></a> Which patient or patients could be transferred to another hospital under the EMTALA Act?<br /> <input type="checkbox" value="a" name="aquestion" />Smith, Bill<br /><input type="checkbox" value="b" name="bquestion" />Wells, Patricia<br /> <input type="checkbox" value="c" name="cquestion" />Hamilton, Larry<br /> <input type="checkbox" value="d" name="dquestion" />Rodriquez, Brad<br /><input type="checkbox" value="e" name="equestion" />Baker, Madison<br /><input type="checkbox" value="f" name="fquestion" />Kahn, Brent<br /> <input type="checkbox" value="g" name="gquestion" />Cahill, Mark<br /><input type="submit" onclick="get_radio2_value()" value="Submit" /></form> <script type="text/javascript" src="first_triage_java_clinical.js"> </script> and here is the javascript code if it helps: Code: function get_radio2_value()
{
var w = 400;
var h = 400;
var wleft = (screen.width/2)-(w/2);
var wtop = (screen.height/2)-(h/2);
var wrong = "<html><head><style type='text/css'> * {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'> * {margin: 0; padding:0; border:0;}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
var correct = "false";
if (document.question2.cquestion.checked)
{
if(document.question2.dquestion.checked)
{
if(document.question2.equestion.checked)
{
if(document.question2.fquestion.checked)
{
if(document.question2.gquestion.checked)
{
var correct = "true";
}
}
}
}
}
if (document.question2.aquestion.checked)
{ var correct = "false"; }
if (document.question2.bquestion.checked)
{ var correct = "false"; }
if (correct != "true")
{ var popup = window.open('','','resizeable=no,scrollbars=no,width=221,height=112, top='+ wtop +', left='+ wleft);
popup.document.write(wrong);
pops.document.close();
}
else
{ var popup = window.open('','','resizeable=no,scrollbars=no,width=221,height=112, top='+ wtop +', left='+ wleft);
popup.document.write(right);
pops.document.close();
}
}
I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script: Code: <div id="editcbprofileinterests">
<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
</div>
</div></div>
<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//attach autocomplete
$("#cb_intereststerm").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.cb_intereststerm);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function(event, ui) {
//create formatted interest
var interest = ui.item.value,
span = $("<span>").text(interest),
a = $("<a>").addClass("remove").attr({
href: "javascript:",
title: "Remove " + interest
}).text("x").appendTo(span);
//add interest to interests div
span.insertBefore("#cb_intereststerm");
//add interest to hidden form field
$('input[name=cb_interests]').val(interest);
},
//define select handler
change: function() {
//prevent 'to' field being updated and correct position
$("#cb_intereststerm").val("").css("top", 2);
}
});
//add click handler to activities div
$("#interests").click(function(){
//focus 'to' field
$("#cb_intereststerm").focus();
});
//add live handler for clicks on remove links
$(".remove", document.getElementById("interest")).live("click", function(){
//remove current activity
$(this).parent().remove();
//correct 'to' field position
if($("#interests span").length === 0) {
$("#cb_intereststerm").css("top", 0);
}
});
});
</script>
I'm using this Lightbox plugin with jQuery and wanted to know if there's a way to place a link inside the lightbox caption or anywhere inside. Or is there another lightbox plugin that can do this?
Hello everybody I'm working on a tiny personal project, that only needs a little push to be finished. As I'm not a skilled enough scripter, I had to google around, but without any result exactly same as mine. What I'd like to know, how can I search in the body for strings surrounded by other strings that signs that the string I want is between them? example: Code: I'm a part of the body :3 // <- not surrounded part of the body [cust]You want me in your array :)[/cust] // <- this one is surrounded I won't get into your array :( // <- this one is not, just like the most of the body I have no snippet that could help me. Thank you in advance I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? Hi, I have the below javascript that insert smiles for me. But in Firefox, it is inserting at the bottom of the message Edit: This only happens when there in no text input first before the smile. For exmple Quote: -- Original Message --- test send :-) -- End Original Message --- ;-) I would like it be inserted, like Quote: ;-) -- Original Message --- test send :-) -- End Original Message --- Note: ;-) would be the smile It works fine in Internet Explorer, but Firefox, put it in the wrong place, can anyone help. The javascript code I use is below: Code: //Smile Start
var myAgent = navigator.userAgent.toLowerCase();
var myVersion = parseInt(navigator.appVersion);
var is_ie = ((myAgent.indexOf("msie") != -1) && (myAgent.indexOf("opera") == -1));
var is_nav = ((myAgent.indexOf('mozilla')!=-1) && (myAgent.indexOf('spoofer')==-1)
&& (myAgent.indexOf('compatible') == -1) &&
(myAgent.indexOf('opera')==-1)
&& (myAgent.indexOf('webtv') ==-1) &&
(myAgent.indexOf('hotjava')==-1));
var is_win = ((myAgent.indexOf("win")!=-1) || (myAgent.indexOf("16bit")!=-1));
var is_mac = (myAgent.indexOf("mac")!=-1);
function smile( txt ) {
// document.all.txtmessage.value = document.all.txtmessage.value + txt;
// return false;
doInsert(" " + txt + " ", "", false,document.getElementById('txtmessage'));
}
function smile2( txt ) {
doInsert(" " + txt + " ", "", false,document.getElementById('txttemplate'));
}
function smile3( txt ) {
doInsert(" " + txt + " ", "", false,document.getElementById('txtcomments'));
}
function doInsert(ibTag, ibClsTag, isSingle, name_txt)
{
var isClose = false;
var obj_ta = name_txt;
//----------------------------------------
// It's IE!
//----------------------------------------
if ( (myVersion >= 4) && is_ie && is_win)
// if ( (ua_vers >= 4) && is_ie && is_win)
{
if (obj_ta.isTextEdit)
{
obj_ta.focus();
var sel = document.selection;
var rng = sel.createRange();
rng.colapse;
if((sel.type == "Text" || sel.type == "None") && rng != null)
{
if(ibClsTag != "" && rng.text.length > 0)
ibTag += rng.text + ibClsTag;
else if(isSingle)
isClose = true;
rng.text = ibTag;
}
}
else
{
//-- mod_bbcode begin
// this should work with Mozillas
if ( (myVersion >= 4) && is_win) {
var length = obj_ta.textLength;
var start = obj_ta.selectionStart;
var end = obj_ta.selectionEnd;
if (end == 1 || end == 2)
end = length;
var head = obj_ta.value.substring(0,start);
var rng = obj_ta.value.substring(start, end);
var tail = obj_ta.value.substring(end, length);
if( start != end ){
if (ibClsTag != "" && length > 0)
ibTag += rng + ibClsTag;
else if (isSingle)
isClose = true;
rng = ibTag;
obj_ta.value = head + rng + tail;
start = start + rng.length;
}
else{
if(isSingle)
isClose = true;
obj_ta.value = head + ibTag + tail;
start = start + ibTag.length;
}
obj_ta.selectionStart = start;
obj_ta.selectionEnd = start;
}
else {
//-- mod_bbcode end
if(isSingle)
{
isClose = true;
}
obj_ta.value += ibTag;
//-- mod_bbcode begin
}
//-- mod_bbcode end
}
}
//----------------------------------------
// It's MOZZY!
//----------------------------------------
else if ( obj_ta.selectionEnd )
{
var ss = obj_ta.selectionStart;
var st = obj_ta.scrollTop;
var es = obj_ta.selectionEnd;
if (es <= 2)
{
es = obj_ta.textLength;
}
var start = (obj_ta.value).substring(0, ss);
var middle = (obj_ta.value).substring(ss, es);
var end = (obj_ta.value).substring(es, obj_ta.textLength);
//-----------------------------------
// text range?
//-----------------------------------
if (obj_ta.selectionEnd - obj_ta.selectionStart > 0)
{
middle = ibTag + middle + ibClsTag;
}
else
{
middle = ibTag + middle;
if (isSingle)
{
isClose = true;
}
}
obj_ta.value = start + middle + end;
var cpos = ss + (middle.length);
obj_ta.selectionStart = cpos;
obj_ta.selectionEnd = cpos;
obj_ta.scrollTop = st;
}
//----------------------------------------
// It's CRAPPY!
//----------------------------------------
else
{
if (isSingle)
{
isClose = true;
}
obj_ta.value += ibTag;
}
obj_ta.focus();
return isClose;
}
function CDE(elemId) {
if(document.getElementById(elemId).style.display != "none")
document.getElementById(elemId).style.display = "none"
else
document.getElementById(elemId).style.display = "inline"
}
//Smile End
Thanks for any help you can give me Hello all. I have created a snippet of javascript code that will do the following: 1. read the window URL 2. depending on the window URL, a word will be placed into a hidden form field. 3. Person submits form...etc., etc. Here is what I have. Let's say that I have a single landing page with a simple form on it. I would like to reference the referred URL by pulling a part of the window URL into a hidden field of the form. Let's say the three URLs a http://www.whatever.com/index.htm?id=ref1 http://www.whatever.com/index.htm?id=ref2 http://www.whatever.com/index.htm?id=ref3 I have created a javascript that takes the exact URL and check for equality. If the URL is equal, it will place the corresponding id into the hidden form field. See my code below. Code: <script type="text/javascript">
var lead_source = window.location.href
{
if (lead_source == "http://www.whatever.com/index.htm?id=ref1")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref1'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref2")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref2'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref3")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref3'>");
}
}
</script>
What I am looking to do is modify the code to only look at the "id" variable, not the entire URL. That way, if I add any additional items to the URL I will not have to change the code. I guess I am looking for an extra step of parsing the URL...maybe. Thanks for your help I have a website at: http://www.zionism101.org/defaultfornow.aspx The page works on Google Chrome, Mozilla Firefox, and IE-9. It sort-of works on IE-8, however, the problem is that on IE-8, there is about 2 seconds where everything is shown on top of everything else in a mess. This is bad. The website is unusual in that it uses a menu to slide screens from right to left. This has implications. For instance, I need the menu to appear on all screens, so I use absolute positioning, and then use javascript to calculate the center position. The same goes for a logo image. And on top of that, some screens (which are really DIVs) have items positioned by absolute and relative positioning within them, and those positions are often calculated via javascript (and then set). On IE-8, the result is not good. I think what is happening is that the browser first shows everything as it appears before javascript is run, and then slowly the javascript is run, which puts everything in the correct position. So initially, not only is everything in the wrong position, but different DIVs appear on top of each other. I could tell every user to get IE-9 or chrome, but thats not a good solution. Thanks, Gid P.S. one solution might be to make the screen go black for an instant, until everything has settled down. If thats the only solution, how would I do that? P.P.S. there are actually 3 pages in the site: the login page, the logout page, and the founders page. Everytime the user switches between them, the jumble for 2 seconds occurs. |
|||||||