Autoresize Script Worked Well But Top Banner Also Resized
May 14, 2010
My community runs a set of forums, (phpbb with the Brushed Metal template, if that is important.) and people often use large images in their posts. This ends up cutting off the majority of the image, so we thought we'd install an auto-resize script, to resize anything wider than 600 px. It works too well, it also resizes the banner at the top of the screen. A bunch of us hacked at it trying to get it to work, but none of us know anything about javascript, so it's not going so well. Either the script still resizes everything, or it does nothing at all.
Here's the earliest version I could find. It's not the original script, however...
<script>
onload_functions.push('resizeimg();');
function resizeimg() {
if (document.getElementsByTagName) {
for (i=0; i<document.getElementsByTagName('img').length; i++) {
im = document.getElementsByTagName('img')[i];
if (im.source == '[URL]')
/*PATH TO TOP BANNER THAT SHOULD NOT BE RESIZED*/
{ continue; }
if (im.width > 600) {
im.style.width = '600px';
eval("pop" + String(i) + " = new Function("pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title = 'Click Here To See Image Full Size ';
}}}}
</script>
We're stuck, we have no idea what to do.
View 3 Replies
ADVERTISEMENT
Mar 10, 2010
I write a plugin to resize the outer div to fit the image (so that the caption wraps properly). The markup is something like this:
<div class="image-container image-center">
<a href="url/to/orig"><img src="url/to/scaled" alt="Caption"/></a>
<div>Caption</div>
</div>
[Code].....
But it sometimes it doesn't work as expected: the div width can be 0 or 28px (I don't know from where this comes). The Drupal.behaviors is called after the dom ready.
View 1 Replies
View Related
May 8, 2010
Recently I was forced to change hosts for my wife's on-line business. On the previous host my JS for displaying date last modified worked ok. But on the new host it is not visible. The new host calims that my code must be wrong but I do not see how as it is unchanged. Before is the code
[Code]...
View 1 Replies
View Related
Jul 8, 2011
effect fadeIn to load The work. my code: to load not work fadeIn?
[Code]...
View 1 Replies
View Related
Jan 21, 2011
We've been using ajaxSubmit to process a login form request (can be found here: [URL] Login Link in navigation). However when we attempted to upgrade from 1.3.2 to 1.4.4, we get the following error whenever we submit the form:
"jQuery(this).ajaxSubmit is not a function"
The only way we've been able to get the form to work again is to go back to vs. 1.3.2.
Has something changed in 1.4.4 that would prevent the form from working? Is "ajaxSubmit()" no longer a valid function?
Here's the javascript below:
jQuery(document).ready(function() {
jQuery("#show_login").click(function() {
formLogin();
jQuery('#user').focus();
[Code].....
View 2 Replies
View Related
Jun 28, 2011
I have 2 fun() i.e;
function add(arg)
{
$('<span id='+arg+''>hello</span>').appendTo($('#mydiv'));
}
[Code]....
Both are works in FF and Chrome, butremovenot worked in IE 8.
View 2 Replies
View Related
Jun 28, 2011
I have the code
<div id="outd"></div>
<input type="button" id="addbtn" onclick="add()" value="Add"/><input type="button" id="delbtn" onclick="del()" value="Del"/>
function add()
{
[Code]...
View 2 Replies
View Related
Feb 15, 2010
I have a button that opens up a dialog box. When "search" in the dialog box is clicked, another dialog box is supposed to open. Everything works great ONE TIME. If I try clicking on the button again, the first dialog box opens, but when I click on "search" again, nothing happens.
First time:
Second time:
You can download the css "lightness" theme from [url]
Here is the code:
View 3 Replies
View Related
Nov 16, 2011
There are two text boxes in a HTML form.The first text box takes the time when the user starts to work on a project. The second box takes the time when the user stops working on that project.Now, I would like to calculate the total time worked on that project for that user. That is (stop time - start time). I tried few things without success.
View 4 Replies
View Related
Jul 29, 2011
i have an html page with no DOCTYPE and this image carousel works fine across all browers.i tried to add a DOCTYPE (tried, xhtml, xhtml, html5) and all their various to narrow down what it doesnt like to no avail.after adding the DOCTYPE it still worked fine in all browsers except IE7. its like it ignored hiding the overflow.. all of the images we just displayed inline across the page.
View 2 Replies
View Related
Dec 18, 2005
This code dynamically resizes all the images in the slideshow to a static width and height, specified in the Customization section.
Other customization variables are available, as well.
It's useful for when your images are larger than 640x480 and manually resizing them is impractical, and especially if many of your users are on dial-up connections and the delay in preloading/loading "large" or many images would be annoying.
The slide images are displayed in a new, reused, centered window, just large enough to hold the image.
The code uses consecutive integers for the slide image file names, beginning with 1.jpg, etc.
You are not required to code each file by name, just rename your images and set the imgCount variable, in the Customization section, to the number of images in the show.
A .txt file is attached, which if saved as a .bat file, (remember those?), and when executed in folder containing .jpg files, will rename up to 100 of them to the required convention of consecutive integers, so long as the existing file names are at least three characters long.
The code generates a set of "controls," consisting of a Start/Resume button, Pause button, Cancel button, and a set of radio buttons for the user to dynamically select the slide interval from 2 to 10 seconds.
<html>
<head>
<script type="text/javascript">
// -------- Begin Resized Slideshow -------------
//--- Customization ------
var imgCount = 10; // number of images in the show
var textColor = "Blue";
var backColor = "#F0F8FF";
var btnColor = "lightblue"
var dispW = 400; // this is the width for the slide image
var dispH = 300; // this is its height
var imgPath = "Images/"; // use "" if the images are in the current directory
// --- End Customization -------
// --- Do not edit below this line -------
var useWidth = screen.width*.85;
var prevActive = "i5";
var leftStr = Math.round((screen.width-useWidth-36)/2);
var absStr = "Position:Absolute;Bottom:10px;Left:"+leftStr+"";
var userDelay = 0;
var tick = 0;
var count = 0;
var wStr = 0;
var hStr = 0;
var tStr = 0;
var lStr = 0;
var IMGStr = "";
var miscFlag = false;
var cancelFlag = false;
var pauseFlag = false;
var slideWindow = "";
function manageBtns(n){
if (n == 1) //start
{
document.getElementById('startBtn').disabled = true;
document.getElementById('pauseBtn').disabled = false;
document.getElementById('cancelBtn').disabled = false;
document.getElementById('startBtn').value = "Start Slideshow"
}
if (n == 2) //paused
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disable = false;
document.getElementById('startBtn').value = "Resume Slideshow"
}
if (n == 3) //canceled
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
document.getElementById('startBtn').value = "Start Slideshow"
}
if (n == 4) // done
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
document.getElementById('startBtn').value = "Start Slideshow"
}
}
function cancelShow(){
count = imgCount;
cancelFlag = true;
slideWindow.focus();
self.status = "One Moment...";
tick = 0;
if (miscFlag == true){runShow()}
}
function pauseShow(){
slideWindow.focus();
tick = 0;
pauseFlag = true;
miscFlag = true;
}
function waitLoadImage(){
if (slideWindow.document.images[0].complete)
{
if (count < imgCount){countDown()}
else if (cancelFlag == true){runShow()}
}
else {setTimeout("waitLoadImage()",500)}
}
function displayIt(){
if(slideWindow == ""){slideWindow = window.open("","SlideShow","toolbar=0,status=1,"+tStr+","+lStr+","+wStr+","+hStr+"")};
slideWindow.document.open();
slideWindow.document.write(IMGStr);
slideWindow.document.close();
slideWindow.status = "This is " + count + " of " +imgCount;
slideWindow.focus();
IMGStr = "";
waitLoadImage();
}
function getNextimage() {
document.getElementById('nullIMG').src = imgPath + count + ".jpg";
wStr = document.getElementById('nullIMG').width;
offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
hStr = document.getElementById('nullIMG').height;
offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
tStr = (screen.availHeight-90-offsetH)/2;
tStr = "top="+tStr;
IMGStr = document.getElementById('dispIMG').innerHTML;
displayIt();
}
function closeLastImage(){
if (slideWindow.document.images[0].complete)
{
if (cancelFlag == true){isDelay = 1000}
else {isDelay = userDelay*1000}
setTimeout("slideWindow.close();slideWindow=''",isDelay);
count = 0;
}
else {setTimeout("closeLastImage()",500)}
}
function countDown(){
if (tick > 0){self.status = tick}
if (tick == 0 && (pauseFlag == false && cancelFlag == false)){self.status = "Loading Next Image...";}
if (tick >= 0)
{
setTimeout("countDown()", 1000);
tick--
}
else {runShow()}
}
function runShow() {
manageBtns(1);
tick = userDelay-1;
if (count < imgCount && pauseFlag == false)
{
count++;
getNextimage();
miscFlag = false;
}
if (pauseFlag == true)
{
self.status="Slideshow Paused at Image "
+count + " of " +imgCount + "."
pauseFlag = false;
manageBtns(2);
}
if (count == imgCount && cancelFlag == false)
{
self.status = "Slideshow Is Complete."
manageBtns(4);
closeLastImage();
}
if (count == imgCount && cancelFlag == true)
{
self.status = "Slideshow is Canceled."
closeLastImage();
cancelFlag = false;
pauseFlag = false;
miscFlag = false;
manageBtns(3);
}
}
function updateInterval(Active) {
next = "i"+Active;
next = next.toString();
document.getElementById(prevActive).bgColor="#F0F8FF";
document.getElementById(next).bgColor="darkorange";
prevActive = next;
userDelay = Active;
tick = userDelay-1;
if (slideWindow != ""){slideWindow.focus()}
}
function buildSupport(){
var divStr = "<Div style='Position:Absolute;Top:-2000' id='dispIMG'><IMG Src='"+imgPath+"1.jpg' width="+dispW+" height="+dispH+" ID='nullIMG'></Div>"
document.write(divStr);
}
function buildBox(){
var styleStr = "<Style type='text/css'>.cDiv {"+absStr+";Height:54pt;Padding-Left:0px; Padding-Right:0px;Padding-Top:6px;Padding-Bottom:6px;Margin-Right:4px;Margin-Left:6px;Margin-Top:0px;Margin-Bottom:0px;Text-Indent:0px;Text-Align:None;width:"+useWidth+";Border-Top:#C0C0C0 1px solid;Border-Left:#C0C0C0 1px solid;Border-Bottom:Black 1px solid;Border-Right:Black 1px solid;background-color:"+backColor+";}.iBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:none;Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:5px;Padding-Right:3px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .nBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:none;Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;}.nxBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:none;Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Border-Right:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .cBtns{Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:"+btnColor+";Border-Right:Black 1px solid;Border-Top:White 1px Solid;Border-Left:White 1px Solid;Border-Bottom:Black 1px Solid;Cursor:Pointer;}</Style>";
var controlStr = "<Table cellspacing=Ɔ'><TD class='iBox' bgColor='moccasin'>SlideShow Interval:<TD class=nBox id =i2><input type='radio'name='interval' onclick='updateInterval(2)'>2</TD><TD class=nBox id =i3><input type='radio'name='interval' onclick='updateInterval(3)'>3</TD><TD class=nBox id =i4><input type='radio'name='interval' onclick='updateInterval(4)'>4</TD><TD class=nBox id =i5 bgcolor='darkorange'><input type='radio' name='interval' checked onclick='updateInterval(5)'>5</TD><TD class=nBox id =i6><input type='radio'name='interval' onclick='updateInterval(6)'>6</TD><TD class=nBox id =i7><input type='radio' name='interval' onclick='updateInterval(7)'>7</TD><TD class=nBox id =i8><input type='radio'name='interval' onclick='updateInterval(8)'>8</TD><TD class=nBox id =i9><input type='radio' name='interval' onclick='updateInterval(9)'>9</TD><TD class=nxBox id =i10><input type='radio'name='interval' onclick='updateInterval(10)'>10</TD></Table><Table><TD><input type='button' id='startBtn' class='cBtns' value='Start Slideshow' onClick='runShow()'></TD><TD><input type='button' id='pauseBtn' class='cBtns' value='Pause Slideshow' onClick='pauseShow()'></TD><TD><input type='button' id='cancelBtn' class='cBtns' value='Cancel Slideshow' onClick='cancelShow()'></TD></Table>"
var tblStr = "<DIV id='isFloat' class='cDiv' align='center'>"+controlStr+"</DIV>"
document.write(styleStr);
document.write(tblStr);
}
function initControls(){
buildBox();
buildSupport();
updateInterval(5);
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
}
// ---- End Resized Slideshow ---------
</script>
</head>
<body>
<h3 align='center'>Resized Image Slideshow</h3>
<!-- Keep the following line as the LAST line in the BODY -->
<script type="text/javascript"> initControls()</script>
</body>
</html>
View 4 Replies
View Related
Jan 15, 2004
Is there any way I can call a javascript function when the user resizes his text in the browser?
View 2 Replies
View Related
Mar 17, 2010
Is there a way to force a window to open in a predefined size by adding HTML or Javascript code on the page you want to be resized, not the page that has the link the takes you to the resized wondow. Theres a page that has a link on it that I need opened to a certain size and I don't have access to it, so what I can do is add a javascript to the page that the link is going to.
View 4 Replies
View Related
Oct 25, 2010
I am trying to create a panel that can be resized, its all working however if I resize the panel then try to resize the browser the panel doesn't resize to the browser width: [url]
View 2 Replies
View Related
Jun 30, 2011
I am trying to make a popup window with Javascript that will let a user choose either a Yes or No button and then be sent to a page after that.I really do not want this popup to be resizable. I have read that is not really possible in current browsers, but that you can prevent it form happening with resizeTo().I am not sure I'm doing this right though:
<input type='button' value="DELETE GROUP" onclick="javascript:Popup('deleteGroupWarning.html')" />
var stile = "top=10, left=10, width=300, height=300 status=no, menubar=no, toolbar=no
[code]....
View 1 Replies
View Related
Jan 5, 2010
I have an accordion style navigation bar which works fine, except when the user enlarges the screen with, for example, Ctrl and Plus.You can see what I'm talking about here:http://www.ruhr-uni-bochum.de/igsn/example/Is there any way using JavaScript to detect when the user enlarges the screen?Is it even good style to do this?I've found the offending css rule which makes the menu slow to a crawl in anything but its original resolution, but as this is a template that I have to use, there is not much scope to change things.
View 10 Replies
View Related
Mar 31, 2011
soloution that will enable me to set a divs min-height to 350px then when the window is resized it will increase over that 350 this supose to allow people with larger resoloutions to see more of the content.
View 4 Replies
View Related
Jul 23, 2005
I have created a web site, where I use a dropdown menu when the mouse
goes over an image.
My problem is that when I resize the browser, the menu's position
changes relatively and goes way to the left.
I am stuck I don't know which parameter to change exactly so that the
menu behaves properly....
View 2 Replies
View Related
Apr 8, 2010
I ran in to a strange problem with a client who uses Yahoo hosting. The web site uses AJAX (jquery, php, javascript). There is no problem viewing the site using IE8, Firefox on a Windows 7 computer. On an XP computer the site worked fine in IE, but not in Firefox. The site never worked properly using Chrome or Safari.
I tried jquery 1.3.2 and 1.4.2 but got the same results.
I use this same combination (jquery, php, javascript) on other web hosts and don't have these problems.
I know that Yahoo hosting injects tracking code in the web pages it serves for the sites it hosts (at least for my client). I think this could be the source of the problem.
When I removed jquery (I was only using the load function anyway) and used my own code- the problem disappeared. The site now works in all browsers.
View 2 Replies
View Related
Aug 19, 2010
Can DIV located in the MasterPage be resized depending on the screen resolution?
<tr style="vertical-align: top;"><td>
<div id="mainArea">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />
</div></td></tr>
I've tried unsuccessfully -
var height = screen.height;
var area1 = document.getElementById('ctl00_mainArea');
if (height == 1024) {[code].....
View 6 Replies
View Related
Mar 23, 2010
I am using Ben Alman's JQuery resize plugin in order to obtain the varying computed width of an element when the window is resized (the element in question is a page wrapper that exhibits the expand-to-fit behavior of a block box, and it's computed width is obviously influenced by the resizing of the window. Essentially, what I need to be able to do, is to reference a variable that is defined in a .resize() function ('width_page') in a seperate .each() function.
[Code]...
I now understand that variables can't cross boundaries like in the example above, which leaves me a little stuck. I also understand that this is specific to the context of the .resize() function, and that it can't be taken out of it without using an element selector. Is there some way I can call the .resize() function in my .each() function?
View 3 Replies
View Related
Apr 26, 2011
I have a website which displays photos. I want the photos to be resized depending on the innerWidth and innerHeight of the browser. I have my resolution set to 1024x768. So if you go to [URL] and click on 'Commissions' my 'w' variable in the URL contains 1024 but for some reason the 'h' variable displays 50. If I click on 'Commissions' one more time then it correctly displays h=602.
View 9 Replies
View Related
May 5, 2010
I currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies
View Related
Aug 7, 2009
I have a javascript banner on my site which is working perfectly. however if the user goes to my domain without www. infront of the address the banner is non existent. I'm pretty sure there should be some kind of option for this on my hosts control panel but I can't find anything on it however. (bluehost)
or is there something else that must be done?
View 2 Replies
View Related
Apr 22, 2006
I will like to do something like banner advertisment. Which when my page load, the advertisment will pop out and running around the screen.
View 1 Replies
View Related
May 8, 2006
I have a banner and it is for an internet radio station. I want the DJ to be shown on the banner be this would change every hour. 24/7 how shall i do this? :thumbsup:
View 8 Replies
View Related