|
JavaScript - Adjust Text Size Without Page Scroller
i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
Similar TutorialsI need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you I have this javascript to add a row to html: Code: <html>
<body>
<?php
$vendor = $_POST['vendor'];
$vendor_phone = $_POST['vendor_phone'];
$vendor_email = $_POST['vendor_email'];
?>
<table width=930>
<tr>
<td style="text-align: center" width=356><img src="http://www.shopphgmag.com/po/images/cwplogo.jpg"/><br>
<p ><br>
br>
Ph: <br>
Fax: </p></td>
<td width=500></td>
<td>
<Fieldset>
<legend>Purchase Order</legend>
Number:
</fieldset>
</td>
</tr>
<td colspan="3">
<fieldset>
<legend>Issued To</legend>
<table>
<tr>
<td>Vendor: </td>
<td><?php echo $vendor; ?></td>
</tr>
<tr>
<td>Vendor Phone: </td>
<td><?php echo $vendor_phone; ?></td>
</tr>
<tr>
<td>Vendor Email: </td>
<td><?php echo $vendor_email; ?></td>
</tr>
</table>
</fieldset
</td>
</table>
<script language="javascript">
function addRow()
{
var tbody = document.getElementById("po_table").getElementsByTagName("tbody")[0];
var row = document.createElement("TR");
var cell1 = document.createElement("TD");
var cell2 = document.createElement("TD");
var cell3 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
inp1.setAttribute("type","text");
inp1.setAttribute("name","quantity[]");
cell1.appendChild(inp1);
var inp2 = document.createElement("INPUT");
inp2.setAttribute("type","text");
inp2.setAttribute("name","description[]");
cell2.appendChild(inp2);
var inp3 = document.createElement("INPUT");
inp3.setAttribute("type","text");
inp3.setAttribute("name","unit_cost[]");
cell3.appendChild(inp3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tbody.appendChild(row);
}
function removeRow()
{
var table = document.getElementById("po_table").getElementsByTagName("tbody")[0];
var lastRow = table.rows.length;
if (lastRow > 2) table.deleteRow(lastRow - 1);
}
</script>
</head>
<body>
<form method="post" action="review_po.php">
<input type="button" value="Add Row" onClick="addRow();">
<input type="button" value="Delete Row" onclick="removeRow()">
<table id="po_table" border="1">
<tbody>
<tr>
<th bgcolor="#c1c1c1" width="30px">Quantity</th>
<th bgcolor="#c1c1c1" width="340px">Description</th>
<th bgcolor="#c1c1c1"width="30px">Unit Cost</th>
</tr>
<tr>
<td><input type=text name="quantity[]"></td>
<td><input type=text name="description[]" size="100"></td>
<td><input type=text name="unit_cost[]"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th bgcolor="#e0e0e0">1</th>
<th bgcolor="#e0e0e0">Shipping</th>
<td><input type=text name="shipping"></td>
</tr>
<tr>
<th bgcolor="#e0e0e0">1</th>
<th bgcolor="#e0e0e0">Tax</th>
<td><input type=text name="tax"></td>
</tr>
</tfoot>
</table>
</br>
<table width=930>
<tr width=930>
<td><input type="submit" value="Back" name="/po/po/add_vendor.html" style="float:left"></td>
<td><input type="submit" value="Review" name="review_po" style="float:right"></td>
</tr>
</table>
</form>
</body>
</html>
It works great, but I need the var inp2 textbox to be size=100 I can't figure out how to do it. Here is my page: http://shopphgmag.com/po/po/add_items.php and you can see if you click "add row" it adds the row with a smaller text box than the other row Hi, I've written a function to change the font, this is working in IE but not in FF or Chrome. No errors come up in Firebug. Once this is working in both browsers I will change the function to gradually increase the size of the font to make it look as if the font is growing. This is why I haven't just assigned a class to the text. URL of the site with the script is http://dev.creativepanda.co.uk/ Function in question is - Code: function alterFontSize(){
var sizeElem = document.getElementById('sizeTest').style;
if(reverse == 0 && currentFontSize < endFontSize){
currentFontSize = endFontSize;
sizeElem.fontSize = currentFontSize;
}
}
Thanks for any help. Dear All, I have tried to change the text colour and size but with no successful. I have two files. (a) Test.html (b) marquee.js Any advise is highly appreciated. (a) Test.html code is stated as below : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head><script type="text/javascript" src="marquee.js"></script> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" > <title>Test</title> </head> <center> <body bgcolor="#fffff"><div id="fade_base" style="BORDER-RIGHT: 0px dotted; PADDING-RIGHT: 0px; BORDER-TOP: black 0px dotted; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: black 0px dotted; WIDTH: 250px; LINE-HEIGHT: 1.8em; PADDING-TOP: 5px; BORDER-BOTTOM: black 0px dotted; HEIGHT: 60px"> <br> <strong><em><a id="fade_link"></a></em></strong> </div> </center> </body> </html> (b) marquee.js file is stated as below function setupFadeLinks() { arrFadeLinks[0] = ""; arrFadeTitles[0] = "..Business Presentation..."; arrFadeLinks[1] = ""; arrFadeTitles[1] = "..Art of Public Speaking..."; arrFadeLinks[2] = ""; arrFadeTitles[2] = "...Business Meeting..."; arrFadeLinks[3] = ""; arrFadeTitles[3] = "..Increase Confidence..."; arrFadeLinks[4] = ""; arrFadeTitles[4] = "...Workshop..."; } // You can also play with these variables to control fade speed, fade color, and how fast the colors jump. var m_FadeOut = 255; var m_FadeIn=0; var m_Fade = 0; var m_FadeStep = 3; var m_FadeWait = 1600; var m_bFadeOut = true; var m_iFadeInterval; window.onload = Fadewl; var arrFadeLinks; var arrFadeTitles; var arrFadeCursor = 0; var arrFadeMax; function Fadewl() { m_iFadeInterval = setInterval(fade_ontimer, 10); arrFadeLinks = new Array(); arrFadeTitles = new Array(); setupFadeLinks(); arrFadeMax = arrFadeLinks.length-1; setFadeLink(); } function setFadeLink() { var ilink = document.getElementById("fade_link"); ilink.innerHTML = arrFadeTitles[arrFadeCursor]; } function fade_ontimer() { if (m_bFadeOut) { m_Fade+=m_FadeStep; if (m_Fade>m_FadeOut) { arrFadeCursor++; if (arrFadeCursor>arrFadeMax) arrFadeCursor=0; setFadeLink(); m_bFadeOut = false; } } else { m_Fade-=m_FadeStep; if (m_Fade<m_FadeIn) { clearInterval(m_iFadeInterval); setTimeout(Faderesume, m_FadeWait); m_bFadeOut=true; } } var ilink = document.getElementById("fade_link"); if ((m_Fade<m_FadeOut)&&(m_Fade>m_FadeIn)) ilink.style.color = "#" + ToHex(m_Fade); } function Faderesume() { m_iFadeInterval = setInterval(fade_ontimer, 10); } function ToHex(strValue) { try { var result= (parseInt(strValue).toString(16)); while (result.length !=2) result= ("0" +result); result = result + result + result; return result.toUpperCase(); } catch(e) { } } Best Regards Hexian hi guys, i am using this script (jquery) to resize textareas when a user enters text. it works well. in the management system im writing i would like to also resize all textareas so that all text is visible when forms load i.e. a user loads a form with textareas on and all the text is visible when they read the contents Code: /*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
(function($){
$.fn.autoResize = function(options) {
// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);
// Only textarea's auto-resize:
this.filter('textarea').each(function(){
// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
// Cache original height, for use later:
origHeight = textarea.height(),
// Need clone of textarea, hidden off screen:
clone = (function(){
// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};
// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});
// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
})(),
lastScrollTop = null,
updateSize = function() {
// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;
// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);
// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};
// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);
});
// Chain:
return this;
};
})(jQuery);
many thanks for any help I have a goal in mind, and that is to get the width & height of a <DIV> tag in one document and insert them into another document...all on the same domain. It sounds like a simple task, but in case more detail is needed, let me explain: I have a page called 'demo.html' which launches a page called 'gallery/archive_iframe.html' via Shadowbox as an iFrame. The problem is that 'gallery/archive_iframe.html' slightly differs in dimension on every browser and screen resolution. I want to have the iFrame's size detected every time it launches so Shadowbox can get solid dimensions to display it without scrollbars. You can see the current (fixed size) example at: http://www.mikegermond.com/demo.html Click on the 'Video Archive' image. Here is the code I would like to insert the dimensions in to: Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width= ??? ;height= ??? " class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> This is pretty much my first really useful script that I wrote myself. I am trying to load a different index.html page for each different screen size that the browser has. So the page looks best at different resolutions. I am not really able to test it since I haven't finished building all the different resolution index pages yet. I am just wondering if anyone sees any glaring errors in my coding. This is my script: Code: <script src="javascript/stndlibrary.js">
var screendim=getWindowSize();
var screenwidth=screendim[0];
var screenlength=screendim[1];
var screenw=new array(640,800,1024,1280,1400,1600,2048); //Array for standard screen widths
var screenh=new array(480,600,768,1024,1050,1200,1536); //Array for standard screen heights
var indexfilename=new array('vga','svga','xga','sxga','sxgap','uxga','qxga'); //Array for filenames for different pages for each screen size
for (i=0;i<=6;i++);
}
if (screenwidth <= screenw[i]) && (screenlength <= screenh[i]);
{
window.location.replace('http:\\perezcomputer.com\'+indexfilename[i] + 'index.html');
break;
}
}
</script>
The stndlibrary.js file contains the function I wrote to fetch the screen width and height that will be passed back to the script. that function is he Code: function getWindowSize() {
if (window.innerWidth)
theWidth=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
theWidth=document.documentElement.clientWidth;
else if (document.body)
theWidth=document.body.clientWidth;
if (window.innerHeight)
theHeight=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
theHeight=document.documentElement.clientHeight;
else if (document.body)
theHeight=document.body.clientHeight;
return [theWidth, theHeight]
}
Please be gentle I am a nOObi... Hi, I'm new here and trying to get some basics via examples. On this page http://www.gilariverwoodworks.com/kitchens.htm I have thumbnails in a table. Immediately below the table is a full sized image of thumb 1. I want to mouseover the thumbs and have the respective full size images swap. The thumbs remain as is. All the thumbs are the same file as the full size image but resized. If moused over, the new image should remain until the next thumb is moused over - ie no autoclose or return to original image. The viewer should be able to move around the page without having the image change til the next mouseover All the images are the same size Can someone offer or direct me to a script that will do this? TIA mr johnson Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker. It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment. I dont know ANYTHING about javascripting really. heres the code: <div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29"> <table border="0" cellpadding="0" cellspacing="0" width=628> <tr><td> <iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe> </td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)" onMouseOver="bsh_g_iFrame1(-1,20)" onMouseOut="esh_g_iFrame1()"><br> <img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)" onMouseOver="bsh_g_iFrame1(1,20)" onMouseOut="esh_g_iFrame1()"> <script type="text/javascript" language="javascript"> function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)} function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)} function sh_g_iFrame1(step) { scrollx=g_iFrame1.document.body.scrollLeft scrolly=g_iFrame1.document.body.scrollTop scrolly=scrolly+step g_iFrame1.window.scroll(scrollx,scrolly) } </script> thanks Stuey I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having. Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks! I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
I have been over this code several times and through as many tutorials as I can fine and I still can not figure out why it does not work. Is anyone here able to point out my error? The objective of the code is to get the size in pixels of the viewport when the browser loads page, and when the browser window is resized. After obtaining that number I want to use it to set the size of my DIV to 770px if the viewport has gotten shorter than than 770, and to auto if my viewport is larger than 770. Note, I am not posting the HTML or CSS code because it seems like this should be simple - I will gladly post that code if it turns out my question is not simple. Code: <script language="JavaScript" type = "text/javascript">
<!--
function inspectview() {
var viewportheight;
// most modern browsers
if (typeof window.innerWidth != 'undefined')
{
viewportheight = window.innerHeight;
}
// IE6 in standards compliant mode
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportheight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
if (viewportheight <= 770){
document.getElementById("bg").style.height = "770px";
} else {
document.getElementById("bg").style.height = "100%";
}
}
window.onload = inspectview;
window.onresize = inspectview;
//-->
</script>
Thank you in advance -Alaric_ Hi people, I'm new to this and I was wondering how to adjust the iframe height by itself if my html height increases. My html code includes a facebook comment at the bottom of my page and the comment will show making it expand the height once users post comments. On the other hand, I'm using a CMS that have its own iframe. I've tried many solutions that can be found on the web but none works. It only can work if I don't put in CMS. Is it possible to adjust the iframe height using CMS or there is no way? I hope you guys understand what I'm trying to say. Hope to hear from you guys soon. Thanks alot. Hello, I'd like to make an iframe that will automatically get the height of the webpage it is on (not the source url) - I'm not talking the browser viewport but the entire document - so basically the height in pixels minus a certain value to prevent the iframe from sliding out - example: Code: <iframe src="http://google.com/" height="CURRENT DOCUMENT'S HEIGHT MINUS 50" width="FIXED"></iframe> Maybe it is better to achieve this function in php - or any other way? And perhaps there is some better way than an iframe - like a container of some sort that can automatically expand to the webpage's length... Thanks in advance! Hello! Please take a look at my site: Test Flyout Lists As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient. Can I do this in JavaScript? Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Is there a way to bounce my image scroller back to the left using object.watch() or something?! at the moment, it reaches the end and stops here is my code from www.dyn-web.com Code: /*************************************************************************
This code is from Dynamic Web Coding at www.dyn-web.com
Copyright 2001-4 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
/* dw_hoverscroll.js version date: June 2004
mouseover scrolling for dw_scrollObj (in dw_scrollObj.js) */
dw_scrollObj.stopScroll = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
}
// increase speed onmousedown of scroll links
dw_scrollObj.doubleSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
}
dw_scrollObj.resetSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
}
// algorithms for time-based scrolling and scrolling onmouseover at any angle adapted from youngpup.net
dw_scrollObj.initScroll = function(wnId, deg, sp) {
if ( dw_scrollObjs[wnId] ) {
var cosine, sine;
if (typeof deg == "string") {
switch (deg) {
case "up" : deg = 90; break;
case "down" : deg = 270; break;
case "left" : deg = 180; break;
case "right" : deg = 0; break;
default:
alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
}
}
deg = deg % 360;
if (deg % 90 == 0) {
cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
sine = (deg == 90)? 1: (deg == 270)? -1: 0;
} else {
var angle = deg * Math.PI/180;
cosine = -Math.cos(angle); sine = Math.sin(angle);
}
dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
(deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
(deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
dw_scrollObjs[wnId].startScroll(sp);
}
}
// speed (optional) to override default speed (set in dw_scrollObj.speed)
dw_scrollObj.prototype.startScroll = function(speed) {
if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
this.speed = speed || dw_scrollObj.speed;
this.lyr = document.getElementById(this.lyrId);
this.lastTime = ( new Date() ).getTime();
this.on_scroll_start();
this.timerId = setInterval(this.animString + ".scroll()", 10);
}
dw_scrollObj.prototype.scroll = function() {
var now = ( new Date() ).getTime();
var d = (now - this.lastTime)/1000 * this.speed;
if (d > 0) {
var x = this.x + this.fx * d; var y = this.y + this.fy * d;
if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling
if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.shiftTo(this.lyr, this.endX, this.endY);
this.on_scroll_end(this.endX, this.endY);
}
} else { // for scrolling at an angle (stop when reach end on one axis)
if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.on_scroll_end(this.x, this.y);
}
}
}
}
dw_scrollObj.prototype.endScroll = function() {
if (!this.ready) return;
if (this.timerId) clearInterval(this.timerId);
this.timerId = 0; this.lyr = null;
}
dw_scrollObj.prototype.on_scroll = function() {}
dw_scrollObj.prototype.on_scroll_start = function() {}
dw_scrollObj.prototype.on_scroll_end = function() {}
I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Does anyone have a scroller that goes side to side, to display links for a website? I have a similar thing that goes up and down: www.sjwum.org This one will not adapt to side to side. So who knows of a scroller that moves horizontally and when you click on something it is a link to another page on the website? Thanks |
|||||||