|
JavaScript - Change Width And Height From Pixels To Percentage
I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much!
One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html Code: JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("scroller"), 550, 275);
scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>
Similar TutorialsIs there a way with Firefox/Chrome to get the actual % used instead of the rendered pixel values? For example I have a table with the following CSS markup Code: #tableFoo : { width : 50%; }
In IE to get the percentage set in the CSS file, it is as simple as: Code: var width = tableObj.currentStyle["width"] I am having trouble figuring out a way to get the percentage value with Firefox and Chrome. I am thinking it is not possible other than stylesheet sniffing and ripping out the rules that way which I am not going to do. Thanks, Eric Need to set the width of a Table that is being spit out by this god awful CMS... please help me... change the html attribute width! Hello guys ! I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document : Code: <script type="text/javascript">
aImg = new Image();
aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;
document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>
While the image is displayed, the value written for the height and width is "0". This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7. Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on Any help would be greatly apreciated, thanks ! Hi My html document contain many images which has the attribute src of img tag as the flowing : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- All those images has the common source folder http://images.mysite.com/a/p This is an example : PHP Code: <img src = "http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg--" width = "105" height = "73" > I tried during many days to find the solution using RegExp but I didn't arrives. What I want to do is I - change for all image from the seem folder the src attribute to match the exact url of the image without special characters, for this example : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- Became : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg II - Control the width and height of the image by changing its height and width attributes resp. from two javascript variables : PHP Code: var v_width = 320 // Just for example var v_height = 250 // Just for example This is an example of try didn't work for me, for the first issue : PHP Code: var element = document.getElementsByTagName("img"); for(var i=0;i<element.length;) { var myString = new String(); var myRegExp = new RegExp("http:\/\/d\.images\.mysite\.com\/a\/p[^\?]*(jpg|png|gif)","i"); var myRegExp0 = new RegExp("\?.*","i"); myString = element[i].getAttribute("src"); if(myRegExp.test(myString)) { var newString = myString.replace(myRegExp0,""); element[i].setAttribute("src",newString); } } Help me please Think you I have embeded a video like this: Code: <div class="videoDiv" id="showDis"> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1"> <param name="url" value="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="autostart" value="true"> <param name="controller" value="true"> </object> <!--<![endif]--> </object> </div> I would like to retrieve the video's width and height (resolution), for example: 640x480 how can I do that via JavaScript? this is what I tried: Code: var objPlayer = document.MediaPlayer1;
alert(objPlayer.offsetWidth);
alert(objPlayer.width);
alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);
nothing gives me the real value. even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant Hi, well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me. BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working. I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution. Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. Thank you ^_^ Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pre-roll Example page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script>
<style>
.gamecontent {width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;}
.gamecontent .gamewrapper {margin:0px auto 0px auto;}
.gamecontent .game {float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px}
.gamecontent .ad {display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px}
.gamecontent .ad #progress {width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;}
.gamecontent .ad #pbar {width:0px;height:10px;background-color:#CCC;}
.gamecontent .ad #pskip {text-align:center;}
.medrectangle {width:300px;height:250px;border:none}
</style>
</head>
<body>
<div class="gamecontent">
<div class="gamewrapper" style="height:640px;width:640px;">
<div class="game" id="gameframe"></div>
<div id="adframe" class="ad">
<div>Advertisement</div>
<div id="plad"></div>
<div id="progress"></div>
</div>
<noscript>
<div>
<!--Game embed code should be placed here here-->
</div>
</noscript>
</div>
</div>
<script type="text/javascript" language="javascript">
var af = 'adframe';
var gf = 'gameframe';
var gid = 'gameswf';
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>';
function skipad() {
$('#plad').html('<div></div>');
$('#'+af).hide();
$('#'+gf).css('width','640px');
$('#'+gf).css('height','640px');
}
$('#gameframe').preloadad(
{ // calls the init method
swf : 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
width : 640,
height : 640,
gameid : gid,
gameframe : gf,
adframe : af,
adcode : adinvoke,
pltime : 10000,
gametype : 'swf',
base :'http://games.balloontowerdefense.net/b/',
skiptxt : 'Click here to show the game',
showad :'1'
});
</script>
</body>
</html>
in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. I don't know what did i miss or where did i go wrong? Hi I have embeded a video like this: Code: <div class="videoDiv" id="showDis"> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1"> <param name="url" value="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="autostart" value="true"> <param name="controller" value="true"> </object> <!--<![endif]--> </object> </div> I would like to retrieve the video's width and height (resolution), for example: 640x480 how can I do that via JavaScript? this is what I tried: Code: var objPlayer = document.MediaPlayer1;
alert(objPlayer.offsetWidth);
alert(objPlayer.width);
alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);
nothing gives me the real value. even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant Hi guys, was just wondering if there was a way to control the page height and width using js/jquery? I have a page that is: width: 980px height: 2500px I would like the page height to be set to around 900px with the viewable scrollbar and all other content not viewable underneath. Any help is appreciated Cheers, paffley Hey guys i am test my page in IE8 and i have a small problem the following script works in other browsers but not IE8 Code: function preload(arrayOfImages)
{
$(arrayOfImages).each(function ()
{
$('<img />').attr('width', '100px').attr('height', '100px').attr('src',this).appendTo('#img').attr('class', 'img');
setTimeout(this, 2000);
});
}
when i run this with lets say 100 images and all the image sizes are all diffrent and above 150px*150px when this runs it will preload the images fine BUT it loads the images with their defualt width & height and not 100px*100px any idea why this is? Hi, I'm trying to change the column from javascript using. cell.width='7'; or cell.style.width="7px"; when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to. Please let me know. Hi everyone Dont know if it can be done but.... I am using the percentage calculator Code: <SCRIPT language=JavaScript>
<!--
//Script by Tom Richardson Jr.
//If you have any questions, e-mail me at gooftroop@geocities.com
//or visit mt web site at http://home.rmci.net/gooftroop
//For this script and more, visit http://javascriptkit.com
function perc1() {
a = document.form1.a.value/100;
b = a*document.form1.b.value;
document.form1.total1.value = b
}
function perc2() {
a = document.form1.c.value;
b = document.form1.d.value;
c = a/b;
d = c*100;
document.form1.total2.value = d
}
//-->
</SCRIPT>
<FORM name=form1>
<TABLE cellSpacing=1 cellPadding=1 border=1>
<TBODY>
<TR>
<TD align=middle colSpan=3><B><FONT size=4>Percentage Calculator</FONT></B>
</TD>
<TR>
<TD>What is <INPUT size=5 name=a> % of <INPUT size=5 name=b>?</TD>
<TD>Answer: <INPUT maxLength=40 size=5 name=total1></TD>
<TD><INPUT onclick=perc1() type=button value=Calculate></TD>
<TR>
<TD><INPUT size=5 name=c> is what percent of <INPUT size=5
name=d>?</TD>
<TD>Answer: <INPUT size=5 name=total2> %</TD>
<TD><INPUT onclick=perc2() type=button value=Calculate></TD>
<TR>
<TD align=middle
colSpan=3><INPUT type=reset value=Reset></TD></TR></TBODY></TABLE></FORM>
Does anyone know how I could change the answer to a percentage bar instead of the numeric answer ? or change the colour of the answer to say red or green depending on the value ? Many thanks Donna I just placed this div named iframe_container in a table cell. There's an iframe and another div inside of it and when I went to fine tune the alignment I discovered I could change the width of the div but not the height I can set it to 200 or 1000, it doesn't make the slightest difference. It seems to be clinging to the outside of the iframe. I can make it bigger by inserting breaks after the iframe but then the compass_rose div loses its absolute position for some reason I searched the page for height tags that might be interfering with this but I've turned up squat. I took the height specs off the table but still no effect. Can anyone spot the problem? <td style="width: 800px; height: 700px" valign="top" class="style3" align="left"> <div id="iframe_container" style="width:1000px; height=700; position: relative; overflow-x:auto; overflow-y:hidden"> <div id="compass_rose" style="top: 5px; left: 1200px; position: absolute; z-index: 2; visibility:visible;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe> </div> </td> </tr> </table> I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
Hey guys, so i have a comment section. And what i want to do is if the height of the comment box is larger then lets say 100px. I want to set the height of the comment box to 50px and then display a "read more" button. And this read more button would toggle and allow the height to be "auto" and not set to 50px. so my html would look like this Code: <div class="comment-section"> <div class="comment"><p>This is where text would go. </p></div> <div class="read-more">Read More</div> </div> I have the class "read-more" set to "display:none" How would i do this? This is what i have / was trying and have been unsuccessful Code: <script type="text/javascript">
$(function(if ($".comment".style.height > 100px;){
{
$".comment".style.height = 50px;
$".read-more".style.display = block;
}
});
</script>
Hi Coders, I was wondering if anyone knows how you would create a link when clicked will change the width of the content. I have a feeling this will use jQuery? E.g. A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'. When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand' Thanks in advance! Haydn. I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be. Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? Hi guys, My site has links in it with hash tags so people can share information externally, and when the link is clicked on my page loads already scrolled down on the correct div. ex. http://www.mysite.com/#div123 My issue is the top of the div is aligned exactly on the top of the text in div123. Since the browser automatically scrolls there, is there a way to make the page scroll up by 20 pixels just to make it look nicer? Thanks!! Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve I am using a JavaScript price calculator. Right now it does everything I need except for one thing. If you look at the "type" field, they can choose either woven or printed. Right now, if they choose "woven" it adds 6 cents to to the total as you can see in this portion of the code: if (theForm.select.value=="woven") { priceeach+=0.06; Rather than 0.06, how do I get it to add a percentage--say 20% The form is located he http://goo.gl/YlJWo Thank you! I am having an issue with converting my decimal to a percentage... any suggestions? Thanks - it's probably an easy solution, but I am lost below is my code (cost * .06) is where the issue is - Thanks! var cost = prompt("What is the cost of your purchase?", "") document.write("Return Value: "+cost,("<br />")); var salestax = cost * .06 document.write("Return Value: "+salestax,("<br />")); var total = cost + salestax document.write(cost + salestax); |
|||||||