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 RepliesThis 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>
Is there any way I can call a javascript function when the user resizes his text in the browser?
View 2 Replies View RelatedI 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 RelatedI 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]....
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 Relatedsoloution 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 RelatedI 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....
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.
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].....
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?
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 RelatedI 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[Code]...
when i load page it does nothing only blank page, may have code in wrong place but not sure so can someone show me a working example so i can find out what i'm doing wrong also i would like the part of page to refresh evey 120 seconds is this possibe with jquery?
I have a frameset like:Quote:
<frameset rows="100,*,80" border="none">
<frame src="header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
[code]....
I loaded page in div , usign jquery ajax
But the page which i loaded containg this code:
HTML Code:
To refresh all page index.php to redirect it to home.php
But the problem this, it's don't refresh all page which contain the div , but it's refreshed oly in the div wuch i loaded this code in it
So i want after i load this code in index.php div , then refres all page to redirect itto home.php
I've got 2 pages: a current events page and a past events page the current events page loads fine as there is only about 10 events the past events page takes about 30 seconds to load and will crash if u click your mouse in the loading time.
The pages are near identical the only difference is the query that selects the events (> versus <)
The page loads immediately without:
But when i put it back in the above happens. I'm using jQuery.roundedcorners.
I am using a Jquery/PHP/MySQL login script which is supposed to display an error or success message when the user enters their username/password and also if the username/pw is successfull go to a secure page. Right now as I have it coded, this isn't working properly. Basically nothing is displayed either way.Also,wasn't sure if I just needed to replace, the ?secure-page part with the file name of the page I want to go to if successful?Here is the code as I have it now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>[code].....
I'm trying to use the cookie plugin to remember the state of a navigation menu from page to page. Here is the snippet of code from towards the top of my page where I am including the jquery files and cookie plugin. The second part of the sample tries to determine whether the cookie exists.
[Code]....
I am working on a page that will load in other pages using AJAX and the .html method. Something like this :
<span id = "edit">Edit</span>
<div id = "cont">
</div>
//the click edit script
[Code]....
Unfortunately this does not seem to work, entirely. It does trigger the click event but it messes up the post for some reason. I have played around with it for the last 45 minutes or so and it seems like the click event trigger is what is messing things up, if I comment it out it works fine. Could anyone tell me why they think this is? note this is an over simplified version of my actual code, but the structure is the same.
On my webpage, I dynamically create an iFrame when a button is pressed, then load a html page from within my own domain into the iframe, based on what html page is loaded into a variable. My question is, can I dynamically change the font family of the loaded html page from the javascript of the main page? My code to create the iframe is:
function setSubTxt(){
var par = document.getElementById('parentDiv');
par.innerHTML = '<iframe src="'+subTxt+'" style="width: 375px; position: fixed; height: 365px; left: 400px; top: 145px; border=none;" name="subIframe" frameBorder=0></iframe>';
frames['subIframe'].window.location=subTxt;
document.subIframe.document.body.style.fontFamily = "Arial";
[Code]....
the variable "subTxt" has the url of the html page to be loaded (always on the same domain). The code: document.subIframe.document.body.style.fontFamily = "Arial"; was my attempt to dynamically change the font, but it didn't work. Also, it should be noted that there is no font family set in the html pages which would override this.
I have an webbpage, and in the middle of it there is an iframe to a php site. So i have used this code, so after some seconds the iframe will send the guest to another page. <meta http-equiv="refresh" traget="_top" content="5 url=http://mypage.com"/> But the thing is that i want the WHOLE page to reload, and go to that page after 5 seconds (we can say). With that code, only the iframe are going to another page. Is it possible to make the whole page send the user after some seconds, to another page and not only the iframe?
View 1 Replies View RelatedIt is possible to perform a find in page search that looks at a specific link, opens the page in a new window and finds the text within that document?? Basically I regularly use an html page in work that has a list of people and their telephone numbers. I want to be able to type in a searchbox on my main page and it open the target page and find the name I am looking for? Is this possible or can you only Find In Page on the same page or another frame?
View 1 Replies View RelatedI have the following bit of jQuery:
Code:
$("#save_photos_all_continue").click(function() {
event.preventDefault();
var $black_white_all = $("#black_white_all").is(':checked');
var $color_all = $("#color_all").is(':checked');
var $other_all = $("#other_all").is(':checked');
[Code]...
In Google Chrome it works fine but in Mozilla/5.0 it actually goes to the save_edits page instead of just using the post and staying on the original page.
I have an html page that uses javascript to open a new window and
display a file that gets created when a button is pressed.
My problem is when the file is changed and the display button is
pressed, the old file is still displaying. I have tried using
<META HTTP-EQUIV=expires CONTENT=0><META HTTP-EQUIV=PRAGMA CONTENT=NO-CACHE>, but doesn't work 100% of the time.
I am trying to incorporate two javascript files (using jQuery) and they are creating a conflict.If the main js is on the page part of the page does not work. If I do not include it my menu and some related features do not work correctly.One code is long so here is the link to it: *I removed Link* (this is the main code for the menu etc)The other js is:
$(document).ready(function(){
Engine.Initialize();
if( !$('body').hasClass('index') && !$('body').hasClass('homepage') ) {[code]....