|
JavaScript - This Code Stretches To Full Screen Width
This is a search box that I can add to my site. However, it stretches to the full width of the screen. Is there any way I can get it to reduce in width to about 25%?
Code: <!-- place this javascript fragment in your page where you want the nhs evidence search panel to appear -->
<script type="text/javascript">
var _nhsesp_unique_id='b7130ea1-a037-4c09-85d9-e4341d8ad58b';
var _nhsesp_base_uri=("https:"==document.location.protocol?"https://":"http://")+'www.evidence.nhs.uk';
document.write(unescape("%3Cscript src='"+_nhsesp_base_uri+"/evidence-search-panel-1.1.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- end of evidence search panel script -->
Cheers Daniel. Similar TutorialsHi guys, I'm completely new here and seeking some help on this js: http://www.javascriptkit.com/script/...ow/index.shtml i'm building my picture website, an example is this one: http://www.lucagodina.com/mello/test.htm do you know how can i have all the thumbnails on the same row, and scrolling? because if i've let's say 100 pictures, the thumbnails will cover the pics itself! Would also be great to have play-next-previous button... i know i'm asking a lot! hope someone can help me out! There is a stand-alone, full-screen slide show code published at http://www.javascriptkit.com/script/...ow/index.shtml I would like to know how to set the size of the show to less than full-screen, and how to integrate the show with other web content. I have an emagazine i want to add to my website, the probelm is when it opens in a browser you have to sroll down the page, to view it all, what i was wondering is, is it possibe to create a link that when somebody selects to view the magazine it forces the browser to openin full screen mode so that it fits niely on the screen without the toolbars and evertything taking up half the page. Thanks Hi: The code below, partly suggested by Old Pedant, will open the radio button PDF file, but it will take up the entire screen. Is it possible to open the checked PDF file in a slightly smaller screen so that the user, when finished with the PDF file, can always be sure that he/she is closing only the PDF file and not the browser? I'm trying to use the showDetails() to do this, but am having two problems: 1) where in the <body> should this function be "called", and 2) how does one get a file name into the first parameter of window.open when the name of the file is not known until the user has checked one of the several choices? Or is it the Foxit and Adobe Readers that govern the screen size of the PDF files, and not Javascript? Thanks for any help and pointing me in the right direction. <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="en" lang="en"> <head> <title>Open smaller PDF window.html</title> <script type="text/javascript"> function goToCheckedValue ( rbs ) //courtesy of Old Pedant { var go = null; if (rbs.length == null ) { if (rbs.checked ) go = rbs.value; } else { for (var r = 0; r < rbs.length; ++r ) { if (rbs[r].checked ) go = rbs [r].value; } } if ( go == null ) return; location.href = go; } var detailsWindow; function showDetails() { //leave filename parameter blank detailsWindow = window.open("","", "width=500,height=350"); detailsWindow.focus(); } </script> </head> <body> <form name="myForm"> <fieldset id="pdfchoices"> <input type="radio" name="gmplitword" value="11.pdf" checked="checked" /> Gospel Acclamation <br /> <input type="radio" name="gmplitword" value="15.pdf" /> Gospel Acclamation - Lent <br /> <input type="radio" name="gmplitword" value="16.pdf" /> Gospel Acclamation - Paschal time <br /> <input type="radio" name="gmplitword" value="23.pdf" /> Apostles' Creed (IV) <br /> <br /> <input type="button" value="Open PDF file" onclick="goToCheckedValue(this.form.gmplitword)" /> </fieldset> </form> </body> </html> Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi I want to create a javascript form validation but i cant with the following code. What is wrong with the code? How to create a form validation without changing the following code- Code: <html>
<head><title>Javascript Validation</title>
<style>
.lf{
position:relative;
left: 30px;
float right;
}
</style>
<script>
function validate()
{
var c=document.getElementById("f1").value;
if(c.length<1)
alert(" Name Field can't be blank");
if(c.length<=5)
alert("Enter a valid name");
var a=parseInt(document.getElementById("f6").value);alert(a);
var b=document.getElementById("f7").value;alert(b);
var d=document.getElementById("f8").value;alert(d);
var lp=0;
if((d%400)==0 && (d%100==0) || (d%4==0))
lp=1;
if((a==31) && ((b=="4") || (b=="6") || (b=="9") || (b=="11")) )
alert("Date out of Range");
if((lp==0) && ((a=="29") || (b=="2") )
alert("Date out of Range");
}
</script>
</head>
<body>
<div style="width:50%;background-color:lightgray;">
<fieldset>
<legend style="color:brown;font-weight:bold;"> SignUp Form</legend>
<table height=300>
<form>
<tr><td> FirstName: <input type="text" name="fn" id="f1" class="lf" size=50 /></td></tr>
<tr><td> Address: <input type="text" name="adr" id="f2" class="lf" size=50 /></td></tr><br/><br/>
<tr><td> Zip:
<input type="text" name="zp" id="f3" class="lf" size=20 /></td></tr><br/><br/>
<tr><td> UserName: <input type="text" name="fn" id="f4" class="lf" size=30 /></td></tr>
<tr><td> Password: <input type="password" name="fn" id="f5" class="lf" size=30 /></td></tr>
<tr><td> DOB: <br /><br />Day: <input type="text" name="dy" id="f6" />
Month: <input type="text" name="m1" id="f7" />
Year: <input type="text" name="m2" id="f8" /></td></tr>
<tr><td> Email:
<input type="text" name="fn" id="f9" size=50 /></td></tr>
<tr><td><center>
<input type="submit" value="submit" onClick="validate()" />
</center></td></tr>
</form>
</table>
</fieldset></div></body>
</html>
I have a small webpage which checks for the dimensions of a screen before loading a website, then loading one (of several) which would fit the screen best. Originally this code was fine, until I decided to mesh with it some code that would open a window to specific dimensions and then some other code to remove scroll bars and menus... now leaving me just the lower option which works properly. I would like to sort this out so that each page loads as it should, in accordance with the conditions. Presently only the bottom part of the code works: "if (res!='1' && res!='2' && res!='3') PopupCenter ('http://www.meta.projectmio.com/800.html','MyWindow',800,531)" So the window will open at 800x531 and load ../800.html, but the other conditions will not work, unless I c&p them to this lower part of the code. I think I've gotten something wrong. website: www.meta.projectmio.com/pop.html Thanks. Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... I want to set the width of a div to be the same width of the image inside the div. The following code works great. But... The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier? Any help would be great! PHP Code: jQuery: $(document).ready(function(){ var newWidth = $('div.wrapper img').attr('width'); $('div.wrapper').width(newWidth); }); HTML: <div class="wrapper"> <p><img src="image1.jpg" width="200" /><br /> Caption</p> </div> <div class="wrapper"> <p><img src="image2.jpg" width="250" /><br /> Caption</p> </div> I have following JavaScript code, aim to open full window. It works fine except Firefox in one of my computers, in which the width is not full. Could someone help me to sort out? Quote: ; function openFullWin(urlPara) <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> <!-- This is to open a full size normal browser window with focus. --> <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> { ; var newUrl = ('http'==urlPara.substr(0, 4)) ? urlPara : ('http://' + urlPara) ; var windowFeatures = 'copyhistory=yes,directories=yes,location=yes,menubar=yes,modal=no,resizable=yes,scrollbars=yes,stat us=yes,toolbar=yes,width=' + screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0' ; var winNew = window.open(newUrl, '', windowFeatures) ; this.blur() ; winNew.focus() } I have a page with a customizable background. The user can choose a picture to set as the background by finding the picture file they want after clicking the upload input. The path of the file they select is saved into a cookie, and the page then switches backgrounds. This all works perfectly, but the value that the upload input returns is only the file name, not the full path. For example, let's say I wanted to choose a picture named "bg.jpg" in the "Windows" folder of the C drive. The full path would be "C:/Windows/bg.jpg". However, the value that the input returns is just "bg.jpg". How would I have the input return the entire path of the file using JavaScript? This has been bothering me for a while...any help would be much appreciated. Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts. Thanks xx Hello I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code: function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
CSS code i use: Code: <style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
</style>
On the site to to body I put this html code: Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
When Im hovering over the link image is shown full size, Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas? Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>
I am building a webpage to make my life easier at work. In the page i am simply loading 3 different web pages that i use 100% of the time between each other, and since they are little tools and i can fit them all nicely in one. However, i'm having a problem doing it with the most important one. I've included all 3 pages via iframes, but the third page doesn't work and becomes the topmost every time. This is because this web page uses the Javascript code snipset below in their page: ---------------------------------------- if (top.location != self.location) { top.location = self.location.href; } ---------------------------------------- Please advise me if you have any solution for that. Many thanks, Arch, 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 everyone. i am new to this forum and new with webdesigning.. i was wondering if anyone can help guide me to get the right coding im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow www.petpawfurry.com is the website in which im working on. also, is there anyway to make the slider, slide to the right, instead of fading in and out? thanks so much, hope someone can help OK, new to the boards. I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click. I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project. Any advice would be hugely appreciated. thanks in advance. |
|||||||