|
JavaScript - Remove Content Based On Resolution
Hi,
I know this is a very bad idea, but I need to do it just to prove a point. I was wondering if it is possible to remove content from a website based on the screen resolution, rather than have to redirect to a new URL. For example: Code: <if height greater than 800px>
Lots of code
<else>
<br/>
</if>
Thank you Similar TutorialsI have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign). What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html. If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html" width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe> If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html" width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe> This is the format that I would want it in: Code:
<script type="text/javascript">
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
</script>
I have a site that can be downloaded and run on a closed network (not needing an active Internet connection). I'd like a page that displays live data to a user with Internet connectivity (I can do this) but display "canned" data when the user is without an internet connection...and this difference in page display is transparent to the user. I know this can be done with php but the user without Internet connectivity will likely not be able to run php locally so the page must be an .htm file. I there a javascript somewhere that does this?Any help is greatly appreciated.
Hi Guys, i am wondering if there is a way to have an auto Complete form field from a db table data ? thanks Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hello! I'm currently working on trying to target an anchor based on what the contents of their 'title' attribute is, then apply a href to that anchor. Here is what I have so far Code: function(j){
$meh = $('a#mapThisLocation');
if ($meh.attr('title' == '192-dodge')){
$meh.attr('href', 'http://www.google.com')
}
};
the current html of that anchor when the page loads follows. Code: <a id="mapThisLocation" title="192-dodge"> any thoughts? Hi, I'm using javascript in addition to a web service (BTBuckets) to display different content to visitors based on actions they take on my site. The javascript is working fine, but I noticed that if I simulate BTBuckets being disabled using Firefox Adblock none of the content shows up. So in the off chance of the service going offline it'll leave some pretty funky holes in the my content. I tried <noscript> tags which works with javascript off, but the content is still blank when I disable BTBuckets. I'm wondering if there's a way to display the default content if the service is unavailable? Here's the code I'm using: In the head: Code: <script type="text/javascript">
//<![CDATA[[
$BTB={s:XXXXX};
$BTB.jsh="http://static.btbuckets.com/bt.js";
//]]>
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + $BTB.jsh.replace(/(https?:)/i,document.location.protocol) + "' type='text/javascript'%3E%3C/script%3E"));
</script>
The code in the body used to replace an image depending on visitor behavior: Code: <script type="text/javascript">
var _t = "";
if ($BTB.clusters["ppc_visitors"]) {
_t = "\"images/top-photo-tracking-number.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
} else {
_t = "\"images/top-photo.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
}
document.write('<img src= ' + _t );
</script>
<noscript><img src="images/top-photo.jpg" alt="Call
Toll-Free: 1-800-XXX-XXXX"></noscript>
Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.
All- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script>
<script type="text/javascript">
var x = (+screen.width);
var y = (+screen.height);
if (x == '1920' & y == '1080')
{
var xn = 1440;
var yn = 900;
document.write(xn);
document.write(yn);
}
if (x == '1024' & y == '600')
{
var xn = 900;
var yn = 400;
document.write(xn);
document.write(yn);
}
swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
</script>
To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
?>
<object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
?>
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./Images/nav/home2.png" ;
homebuttondown = new Image() ;
homebuttondown.src = "./Images/nav/home2.png" ;
newsbuttonup = new Image();
newsbuttonup.src = "./Images/nav/news.png" ;
newsbuttondown = new Image() ;
newsbuttondown.src = "./Images/nav/news2.png" ;
gallerybuttonup = new Image();
gallerybuttonup.src = "./Images/nav/gallery.png" ;
gallerybuttondown = new Image() ;
gallerybuttondown.src = "./Images/nav/gallery2.png" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>
This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! Hey guys I've been trying to get this script working to change a couple attributes in the CSS but it hasn't been working. It's supposed to change the left and right margins of the #content tag if the resolution is greater that 1024x768. The text doesn't seem to want to stay in the center. Heres the code: Code: <!--
if (screen.width > 1024)
{
ChangeCSS('#content','marginLeft','28%');
ChangeCSS('#content','marginRight','29%');
}
//-->
Heres the CSS: Code: #content {
margin-bottom:0;
margin-top:0;
margin-left:24%;
margin-right:27%;
position: absolute;
width: 38em;
}
The CSS code is all inline because this is a tumblr and I don't have a place to host style sheets. Can anyone tell me whats wrong? Thanks! I am struggling to find a solution that enables me to have a div that is a certain percentage height of the window and then when the user is using a different resolution, it remains at that percentage of the screen height - not going off of the bottom as I have a fixed percentage no scroll full background image. I have sorted it for width but can't get it to work for height. any ideas? lol Bee x Hi All! I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page. Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code. Thanks in advance Hey I have ben writing & understanding this code but I can't make this work, have done my homework..so I have atleast tried http://jsfiddle.net/defencedog/hLZCt/ I have set javasscript code to detect and store into variable screen resolution. How to store this javascript into variable PHP? PHP Code: <script type="text/javascript"> var ScreenWidth=screen.width; var ScreenHeight=screen.height; var ScreenResolution=ScreenWidth+"x"+ScreenHeight; document.write("<span style=\"color:red;text-transform: capitalize;\">your current screen resolution is " + ScreenResolution + "</span>"); --></script> } </script> <?PHP $screen=str_replace("#","",$resolution); echo "screen width is:".$screen; ?> I have this script: Code: <SCRIPT language="JavaScript">
<!--
// small
if ((screen.width>=1024) && (screen.width<1280))
{
window.location="0_framside/1_small/849x507.html";
}
// medium
else if ((screen.width>=1280) && (screen.width<1400))
{
window.location="0_framside/2_medium/1105x507.html";
}
// large
else if ((screen.width>=1400) && (screen.width<1600))
{
window.location="0_framside/3_large/1225x639.html";
}
// xlarge
else if ((screen.width>=1600) && (screen.width<1920))
{
window.location="0_framside/4_xlarge/1425x789.html";
}
// manual
else
{
window.location="resolution.html";
}
//-->
</SCRIPT>
See the page in action he http://www.kollalfa.com/temp_LesForMeg/index2.html The problem? On a computer with 1280x1024 resolution, IE detects it to be 1024 (thus sending the user to the wrong page). It works perfectly in all other browsers (that I have tried). Any ideas? Thanks in advance! Hi there. I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well. Code: <SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>
I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions. Is this an acceptable method, or do you think i'll run into problems? Any advice would be great. Cheers. Pat. Dear Forum, I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with: an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res) a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen) an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+) ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript: Code:
<SCRIPT language="JavaScript">
if (screen.width<1000)
{document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}
</SCRIPT>
This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser. If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/ many thanks Will |
|||||||