|
JavaScript - Place Links In Textarea
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> Similar TutorialsHi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++)
{
for($i = 1; $i <= 45; $i++)
{
if ($_SESSION['classification'][$o] == $i)
{
$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
$result2=mysql_query($sql2);
// If successfully queried
if($result2)
{
while ($row2 = mysql_fetch_assoc($result2))
{
$ClassDesc2 = $row2['ClassDesc'];
}
}
//echo $ClassDesc2;
?>
<tr>
<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
<td bgcolor="FAFAF6">
<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
<input type="button" value="Reset" onclick="window.reset();" name="reset">
</td>
</tr>
<?
}
}
}
i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! 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 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. 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. 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>
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'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>
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 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?
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 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 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?
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 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 Please help. Have a site uploaded called theshoulderhopper.com, It says domain holding page. when you click on thumbnails on 15 inch screen image opens up ok, but anything bigger image opens up half way down page. Using a thumbnail viewer J.s script. here is copy. I can make image open where I like but how do I get it to open up in correct place on bigger screen? Think it is positioning itself to size of screen not size of page. // ------------------------------------------------------------------- // Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com // Last updated: July 7th, 2008- Fixed enlarged image not showing in IE sometimes // ------------------------------------------------------------------- var thumbnailviewer={ enableTitle: true, //Should "title" attribute of link be used as description? enableAnimation: true, //Enable fading animation? definefooter: '<div class="footerbar"></div>', //Define HTML for footer interface defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div /////////////No need to edit beyond here///////////////////////// scrollbarwidth: 16, opacitystring: 'filterrogidXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1', targetlinks:[], //Array to hold links with rel="thumbnail" createthumbBox:function(){ //write out HTML for Image Thumbnail Viewer plus loading div document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>') document.write('<div id="thumbLoading">'+this.defineLoading+'</div>') this.thumbBox=document.getElementById("thumbBox") this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes }, centerDiv:function(divobj){ //Centers a div element on the page var ie=document.all && !window.opera var dom=document.getElementById var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document var objwidth=divobj.offsetWidth //width of div element var objheight=divobj.offsetHeight //height of div element var topposition=(docheight>objheight)? scroll_top+docheight/1.9-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint divobj.style.left=docwidth/2.0-objwidth/2+"px" //Center div element horizontally divobj.style.top=Math.floor(parseInt(topposition))+"px" divobj.style.visibility="visible" }, showthumbBox:function(){ //Show ThumbBox div thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div this.centerDiv(this.thumbBox) if (this.enableAnimation){ //If fading animation enabled this.currentopacity=0.1 //Starting opacity value this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20) } }, loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail" if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description? imageHTML+='<br />'+link.getAttribute("title") this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden) this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself if (this.featureImage.complete) thumbnailviewer.showthumbBox() else{ this.featureImage.onload=function(){ //When target image has completely loaded thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world! } } if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/ this.featureImage.src=link.getAttribute("href") this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over } }, setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between) var targetobject=this.featureImage if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value else //Non of the above, stop opacity animation this.stopanimation() }, opacityanimation:function(){ //Gradually increase opacity function this.setimgopacity(this.currentopacity) this.currentopacity+=0.1 if (this.currentopacity>1) this.stopanimation() }, stopanimation:function(){ if (typeof this.opacitytimer!="undefined") clearInterval(this.opacitytimer) }, closeit:function(){ //Close "thumbbox" div function this.stopanimation() this.thumbBox.style.visibility="hidden" this.thumbImage.innerHTML="" this.thumbBox.style.left="-2000px" this.thumbBox.style.top="-2000px" }, cleanup:function(){ //Clean up routine on page unload this.thumbLoading=null if (this.featureImage) this.featureImage.onload=null this.featureImage=null this.thumbImage=null for (var i=0; i<this.targetlinks.length; i++) this.targetlinks[i].onclick=null this.thumbBox=null }, dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) var tasktype=(window.addEventListener)? tasktype : "on"+tasktype if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent(tasktype, functionref) }, init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail" if (!this.enableAnimation) this.opacitystring="" var pagelinks=document.getElementsByTagName("a") for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement pagelinks[i].onclick=function(){ thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding thumbnailviewer.loadimage(this) //Load image return false } this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link } //end if statement } //END FOR LOOP //Reposition "thumbbox" div when page is resized this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize") } //END init() function } thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload") On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product). Here's what I'm working with: <!-- START ADD TO CART --> {% if featuredproduct.available %} <span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span> <input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary"> {% else %} <h3 class="featured-product price sold-out"><span>Sold Out</span></h3> <input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled "> {% endif %} <!-- END ADD TO CART --> Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect. JS newbie, sorry for the rough explanation. Any help greatly appreciated! |
|||||||