|
JavaScript - Auto-adjusting Menu Image Based On Browser Size Possible With Js?
I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate.
Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. Similar TutorialsI have dealt with window open before and i know how to adjust the size of the window in the parameters assigned but i have never dealt with window.opener before and have had several failed attempts and adjusting the window size here.. any help would be appreciated.. there is some inline css that i can change the background and stuff but i tried using height and width in the css to no avail, so i thought i would ask do i need to assign a new var inside the script ? how do i change the size. ? it needs to be 300x300 thanks Code:
<script language="JavaScript">
var host = '<?php echo $_SERVER['HTTP_HOST'];?>';
var win = false;
if (window.opener) {
win=window.opener;
} else if (top.document) {
win=top.document;
}
if (!win || win.location.href.toString().indexOf('<?php echo $parent_href;?>')==-1) {
window.location.href = '<?php echo $parent_href;?>';
}
Hey all- trying to get this bit of js to work properly. I'm close, but the issue is that if the window is opened at a size that is SMALLER than the original image, it wont scale down to the smaller size until i first make the window bigger, THEN size it down smaller. The image itself is big (its fashion photography so it needs to be high res) and the js sets the minimum width at 1070. Id like to have the image as big as possible and then on page load automatically drop down to as low as 1070px if the window size is small. Here is the js: Code: jQuery.noConflict();
function screenSize() {
var w, h;
w = (
window.innerWidth ?
window.innerWidth :
(
document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.offsetWidth));
h = (
window.innerHeight ?
window.innerHeight :
(
document.documentElement.clientHeight ?
document.documentElement.clientHeight :
document.body.offsetHeight));
return {w:w, h:h};
}
jQuery(document).ready(function ()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
})
jQuery(window).resize(function()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
});
let me know if you have any ideas Hi. Sort of new to Javascript. I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched. I plan to apply it to several pages, and don't really fancy working out the pixels for each. I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks! Code: <script>
$('#in').click(function() {
$('#drag img').animate({
width: '150%',
height: '150%',
}, 5000, function() {
// Animation complete.
});
});
</script>
Hello all, Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. Sup everyone I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script he Code: <!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this??? Hi, How can I auto populate the data by dropdown selected? and my dropdown result already appear as well, the code as following: PHP Code: <?php echo '<tr> <td>'.$customer_data.'</td> <td><select name="customer_id">'; foreach ($customers as $customer) { if ($customer['customer_id'] == $customer_id) { echo '<option value="'.$customer['customer_id'].'" selected="selected">'.$customer['name'].'</option>'; } else { echo '<option value="'.$customer['customer_id'].'">'.$customer['name'].'</option>'; } } echo '</select> </td> </tr>'; ?> and the result of dropdown above listed as admin customer1 FREE loaded from following db PHP Code: INSERT INTO `my_customer` (`customer_id`, `name`, `firstname`, `lastname`) VALUES (8, 'admin', '', ''), (6, 'customer1', 'ok', ''), (7, 'FREE', 'marj', 'om'); so whenever dropdown selected i want the all data below: PHP Code: <tr> <td><?php echo $firstname; ?></td> <td><?php echo $lastname; ?></td> </tr> also auto populate, it seem need javascript/ajax/jquery to fixed it, I was Wondering if someone could help me, and thanks in advance Hi all, I am trying to find out if it's possible to auto populate a text input based on the value of another. e.g. there is an input called name.. the user completes this and enters something like John, then in the same form there is another input called username. Once the person enters John in the name field, the username automatically displays John. I'm not sure how doable this is, I'm not very familar with Javascript, so any advice would be greatly appreciated. Many thanks, Greens85 Hello! I need some help here. I need to pre-populate a name and a phone number box based on what's entered in the employee id box. By entering in the employee id - EMPLOYEE ID: [JOHN R] It automatically fills in - Employee Name: [John Roberts] Employee Phone: [1234567890] Thanks. Hello, First I want to say I have no experience with coding, I develop eLearning via Adobe Captivate. We recently implemented a new LMS from PeopleSoft. This new LMS is launching the eLearning in a small browser window probably 500x400 without the ability to resize this. I am wondering first, if it's possible to edit the htm/js file that Captivate produces, and if anyone is aware of code that could then be entered into the htm/js file to resize the browser upon launch? Thanks! Hi, this will probably make a bit more sense it you read my topic in the HTML section (http://www.codingforums.com/showthread.php?t=57093) where I had a problem with two floating divs, in the end the solution was to give both on my floating divs a fixed width. Now, the menu bar div will always be 150 pixels and i wanted the remaing width to be taken up by the main content div. This script here seems to work very wel in firefox but in ie I get scrollbars. This seems to be because firefox returns the actuall width of the viewing 'frame' while IE seems to give the width of the window itself. PHP Code: <script type="text/javascript"> onload = function getBrowserWidth() { if (!document.all) { var width = document.body.offsetWidth; var newWidth = width - 150; document.getElementById('main').style.width = newWidth; } } </script> After a bit of playing with it I found that IE seems to return in offsetWidth about 19 more pixels than the actual size of the viewable 'frame', can anyone confirm this? Now, when the browser window is resized I want the width of the element to be resized as well, which meant I had to add to the body tag <body onresize="getBrowserWidth();"> is there a better way to attach the function to when the window is resized? I am not sure how Opera and Safari return offsetWidth and if they do it like mozilla, or need special values like IE does to make it fit. Thanks for all of your help with any of these 'mini' questions Im coding an internet browser and when I put it in full screen the web browser part is staying the same size as it was on small screen. How do I make it so when its on small screen it is the size of the window but when its on big screen its the size of the whole screen? Hi, I'm creating web application that picks out a randomly chosen image from google, and displays it in the browser window every time it is refreshed. What I'm struggling with is that I want the browser window to resize automatically to exactly fit the image displayed. I know how to resize a browser window, but I want it done dynamically. Can anyone help me with this? Hi, I have some code that performs differently in Opera than it does in any other browser. So I have a stylesheet specifically for opera. Is there a way to do something like this, where I check the browser, and if it's not opera, then load the default sheet, otherwise load the opera-specific css? Code: <script>
// Browser Detection Javascript
// copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd
// You have permission to copy and use this javascript provided that
// the content of the script is not changed in any way.
function whichBrowser() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));}
else return 'Netscape';} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
if(whichBrowser() != 'Opera')
{
<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
}
else
{
<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.OPERA.css" rel="stylesheet" />
}
</script>
As of this writing, that code seems to break my page, as if it doesn't like loading a sheet based on an if/else clause. i have been trying all sorts of things, but falling short... i'm trying to set up a way to detect a user's browser size and then call a specific background image accordingly... say (for example) that BKGD1.jpg is for users who have browsers that are 1280x1024 and higher; BKGD2.jpg is for users who have browsers that are smaller than 1280x1024... i'm even open to an option that only displays a background image if the browser is (as in the example above) 1280x1024, and just a background color if the browser is smaller than that... i don't know... i am totally lost on this one... any help would be amazing!!! thank you... i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! I have a page up with an iframe that's approximately 300px by 405px. When I load up the site in FF and IE, it frames just fine. However, in Chrome and Opera the iframe is shifted upwards and is off-frame. I've tried looking for a solution to center the iframe correctly. Someone said to make a php code that loads 2 different iframes depending on browser (1 iframe for IE/FF and another frame for OP/CH). I have no knowledge of php coding, so I couldn't get it to work. So now, I think I'm limited to redirecting users based on browser type. If the user is using FF or IE, I'll redirect them to my original page. If they're using some other browser, I'll redirect them to a different page without the iframe. I've tried to set up a redirector, but it has trouble distinguishing between FF and Chrome. It treats them exactly the same. Does anyone have any advice on what to do? I've done tons of searching for what seems to be such a small problem. Someone please enlighten me. I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. QUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat". thanks!! Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! |
|||||||