JavaScript - Css Change With Resolution Not Working

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>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<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!

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 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.

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/

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

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 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

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

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

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>

Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php

The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/
The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/
And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images.

I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing...

First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine.

Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing.

Thanks for any help.

I hope I have this post in the right place! Any help would be very much appreciated...

I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website.

This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser)

My javascript is he
http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces)

The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces)

In the head I have:
<script type="text/javascript" src="../javascript/backgroundchange.js"></script>

...then I have: <body onload="set_style_from_cookie()">

...and for users to choose which background:
<form>
<input type="image" src="../images/white-background-thumb.jpg"
onclick="switch_style('bg1');return false;"
name="theme" value="White" id="bg1">
etc...
</form>

My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally!

I have tried putting the javascript directly onto each page but I still had the same problem.

I hope someone can help, I will be so grateful if I can get this to work.

Many thanks indeed!

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!