JavaScript - Resize Image In Javascript According To Browser Change.

Hi

I am using the css image gallery I got from:
http://www.dynamicdrive.com/style/cs...image-gallery/

I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click.

Is this possible using some javascript?

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Hi,

I am a JavaScript novice, and appreciate any help you can give.

For design reasons, we did not like the appearance of a still video on our web page. So I write a short little script to replace a picture that we selected, with the code for a flash player, once the image was clicked.

The code works exactly as designed on IE and Chrome. It works *almost* as designed on Firefox and Safari -- but on those browsers the "fullscreen" button in the plugin doesn't work.

It is *not* a problem with the FlowPlayer code. If I simply put the FlowPlayer code into a web page, it works fine. I think that somehow some browsers do not want to let the FlowPlayer expend outside of the JavaScript object box I created -- though that is just an hypthesis.

If you have any insight or suggestions, I would appreciate it.

The page is at http://sudval.org/test.html

The code:

Code:

<div style="line-height: 12px;letter-spacing: 0px;"> 
 
<script type="text/javascript"> 
function changeText(){
var strOut;
	strOut = "       <object id=\"videoplayer\" width=\"334\" height=\"204\" type=\"application/x-shockwave-flash\" data=\"http://app.provdn.com/flash/flowplayer.swf\">";
	strOut = strOut + "         <param name=\"movie\" value=\"http://app.provdn.com/flash/flowplayer.swf\" />";
	strOut = strOut + "         <param name=\"allowFullScreen\" value=\"true\" />";
	strOut = strOut + "         <param name=\"allowscriptaccess\" value=\"always\" />";
	strOut = strOut + "         <param name=\"flashvars\" value=\"config={\'playlist\':[{\'url\':\'http://cdn.provdn.com/4931/thumbnail/frame_0000.png\',\'scaling\':\'fit\'},{\'url\':\'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\',\'autoPlay\':true,\'scaling\':\'fit\'}],\'plugins\':{\'controls\':{\'url\':\'http://app.provdn.com/flash/flowplayer.controls.swf\',\'playlist\':false,\'backgroundColor\':\'#000000\',\'tooltips\':{\'buttons\':true,\'fullscreen\':\'Enter Fullscreen mode\'}},\'bwcheck\': { \'url\': \'http://app.provdn.com/flash/flowplayer.bwcheck-3.1.3.swf\', \'netConnectionUrl\': \'http://cdn.provdn.com/bitrate/test.mp3\', \'bitrates\': { \'http://app.provdn.com/output_videos/542539e49d4056ce6d3968958313be3dee94614b\':200, \'http://app.provdn.com/output_videos/d31b9a3562c35244cb2c2a28bb4a9aaa1edd1995\':600, \'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\':1000 }, \'urlPattern\': \'{1}\', \'urlExtension\': \'swf\' }}}\" />";
	strOut = strOut + "         <param name=\"bgcolor\" value=\"#000000\" />";
	strOut = strOut + "         <param name=\"wmode\" value=\"opaque\" />";
	strOut = strOut + "         <!--[if gt IE 6]><!-->";
	strOut = strOut + "         <object width=\"334\" height=\"204\" type=\"video/quicktime\">";
	strOut = strOut + "           <param name=\"src\" value=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" />";
	strOut = strOut + "           <param name=\"href\" value=\"http://app.provdn.com/output_videos/54339bc0f4a7c39dd0d746f52139d3a6b6c46375\" />";
	strOut = strOut + "           <param name=\"target\" value=\"myself\" />";
	strOut = strOut + "           <img src=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" width=\"334\" height=\"204\" alt=\"No Video\" title=\"No video playback capabilities.\" />";
	strOut = strOut + "         </object>";
	strOut = strOut + "         <!--<![endif]-->";
	strOut = strOut + "       </object>";
	document.getElementById('boldStuff').innerHTML = strOut ;
}
</script> 
 
<b id='boldStuff' onclick='changeText()'><img src="images/videoimg.png" alt="no video" title="Introductory Video" width="334" height="204"></b> 
 
 
<p><A HREF="/08_cont_03.html"><img src="images/OH012211.jpg" alt="button" width="161" height="181" title="Open House!" BORDER="0" ALIGN="right" style="margin-left: 10px;"> </A></p> 
 
 
<font size="2" style="font-family:arial; font-size:80%; line-height:1.3;"> 
 
<p id='boldStuff' onclick='changeText()' align="left"> 
 
This video is a glimpse into the life of our school.  Enter a world of young people who are exuberant about their lives, and are fully in control of their education.  We hope you will enjoy their spirit, their focus, and above all their intensity in pursuing their passions.
 
<br><img src="images/playvid.png" alt="Play Video" title="Play Video" width="100" height="25" style="margin-top:10px;"> 
 
</p> 
 
</font> 
 
</div>

Hello.

The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text.

Here is the code.

Code:

<html>
<head>
<style type='text/css'>

#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>

<script type='text/javascript'>
function div_bg(team){
	document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";	
}
</script>

</head>

<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>

Thanks in advance!!

Greetings,

I am currently using the websites tutorial about browser detection using the navigator.

http://www.javascriptkit.com/javatutors/navigator.shtml

I am however finding myself unable to detect a pattern in order to learn from.

My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws.

For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser.

There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose.

So if someone can explain how I could do it for Safari I would be very appreciative.

I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website?

We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window.

If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript.

http://www.louisvuitton.com/

Thanks all

Chris

Hey everyone

My project was to create 4 buttons , 2 for div 1 and 2 for div 2.

The two divisions have overflow container so that the information
will never leak outside the div.

At the moment I have it so the style is 1x1 with opacity to 0 , then when visitors want to find information about a subject they press a button to move the div to a possition , opacity to 1 and the size is changed and the other button to return it.

Ive hit many problems and for my project I need to follow these lines, Ive found that I cant make javascript resize the same div more than once after a while.

could someone help me with this, Im trully baffled.

Can someone tell me how to veiw this eval's out put?

PHP Code:
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
} 




PHP Code:
<?php 

// to change the image size within the web page
    function imageResize($width, $height, $target) {
        //takes the larger size of the width and height and applies the formula accordingly...
        //this is so this script will work dynamically with any size image 
        
        if ($width > $height) {
            $percentage = ($target / $width); 
        } 
        else { 
            $percentage = ($target / $height); 
        } 
        
        //gets the new value and applies the percentage, then rounds the value 
        
        $width = round($width * $percentage); 
        $height = round($height * $percentage); 
        
        //returns the new sizes in html image tag format...
        //this is so you can plug this function inside an image tag and just get the 
        
        return "width='$width' height='$height'"; 
    } 
?>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Ronnie T. Moore, Editor -->
<!-- Web Site:  The JavaScript Source -->

        <!-- Begin
        var photo_1 = new Image();
        var photo_2 = new Image();
        var photo_3 = new Image();

        photo_1.src = "uploads/harkly_1.jpg";
        photo_2.src = "uploads/harkly_2.jpg";
        photo_3.src = "uploads/harkly_3.jpg";

        function doButtons(picimage) {
        eval("document['picture'].src = " + picimage + ".src");
        }

        //  End -->
</script>
</HEAD>

<?php //get the image size of the picture and load it into an array 

$photo_1="uploads/harkly_1.jpg";
$photo_2="uploads/harkly_2.jpg";
$photo_3="uploads/harkly_3.jpg";

$myImg1 = getimagesize($photo_1);
$myImg2 = getimagesize($photo_2);
$myImg3 = getimagesize($photo_3);


echo "

<BODY>
    <center>
        <table border=1>
        <tr><td>

        <p>
        <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p>

        <td width=440 height=300> 
        <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> 

    </tr>
    </table>
</center>
    ";
?>

Hello,

I have a question what is the best way to identify a browser, browser version and OS in javascript.

I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers.

Thanks

Hi,
I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome).

Thanks,
akrylic

Hello Everyone!

I hope someone can help me with fixing this javascript code

About the Code
So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum.

What does the code do?
The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images.

There are different resize image options:
1. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do.
2. [rimg=Width,Height]IMG_SRC[/rimg ] // with this option, you can change the width and height of the image.
3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image
4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted
5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead.
6. [rimg=x]IMG_SRC[/rimg] //x will be both the height and width (so it'll be a square...)

Here is a test thread I made to test the "rimg code", so you can see how the code works:
http://s1.zetaboards.com/Piano2/topic/2874654/1/

What are the problems with the Code?
- the Images are not resized correctly
- sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong.
- or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again
- In the Search View (when using the search) the images are too big and almost take the whole screen...
- the first option "[rimg][rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled


And finally this is the Javascript Code:
PHP Code:
<script type="text/javascript">
// Rimg by RedBldSandman of ZBCode.com
$(function() {
if (location.href.match("topic")||location.href.match("single")) {
$(".c_post").each(function() {
parse_rimg(this);
});
} else if (location.href.match("search")) {
$(".search_results").each(function() {
parse_rimg($(this).children("div:eq(0)"));
});
} else if (location.href.match("post")) {
var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />";
$("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>");
$("button[name=rimg]").mouseover(function() {
$("input[name=helpbox]").val("Insert Image (with resize options)");
}).click(function(e) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
var u_p = prompt("Enter the Image Location","http://");
if (u_p==null) return;
var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image");
if (u_w==null) return;
u_w = u_w.replace(/s/gi,"").toLowerCase();
if (u_w=="") {
ZetaInsert("[rimg]"+u_p+"[/rimg]");
return;
} else if (u_w.match("%")) {
ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]");
return;
} else if (u_w=="h") {
var u_h = prompt("Enter Resize Height");
if (u_h==null) return;
ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]");
return;
} else if (u_w=="w") {
var u_h = prompt("Enter Resize Width");
if (u_h==null) return;
ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]");
return;
} else if (parseInt(u_w)) {
var u_h = prompt("Enter Chosen Height");
if (u_h==null) return;
ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]");
}
});
$("#topic_review tbody tr").each(function() {
parse_rimg($(this).children("td:eq(1)"));
});
}
});

function parse_rimg(z) {
$(z).html($(z).html().replace(/[rimg(?:=s*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) {
if (y.match("%")) {
y = y.replace(/[^d.]/gi,"");
return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />";
} else if (y.match(/D/i)) {
y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0];
y = (y!="h"&&y!="w")?null:y;
if (y) {
return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />";
} else {
return x;
}
} else if (!a) {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />";
} else {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />";
}
}));

$(".Rimg_single").not("div.spoiler .Rimg_single").each(function() {
Rimg_single(this);
});

$(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() {
Rimg_percent(this);
});

$(z).find("div.spoiler_toggle").click(function() {
$(this).next().toggle();
$(this).next().find(".Rimg_single").each(function() {
Rimg_single(this);
});
$(this).next().find(".Rimg_percent").each(function() {
Rimg_percent(this);
});
});
}

function Rimg_single(x) {
var oldH = $(x).height();
var oldW = $(x).width();
var newD = $(x).attr("alt").replace(/[^d.]/gi,"");
if ($(x).hasClass("Rimg_h")) {
$(x).height(newD).width((newD/oldH)*oldW);
} else if ($(x).hasClass("Rimg_w")) {
$(x).width(newD).height((newD/oldW)*oldH);
}
$(x).attr("alt","Posted Image").removeAttr("class");
}

function Rimg_percent(x) {
var NewD = $(x).attr("alt").replace(/[^d.]/gi,"")/100;
$(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class");
}

function Preview() {
var prevQuote;
if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) {
if (!$("#c_post-preview").length) {
$("#c_post").prepend("<div id='c_post-preview'></div>");
}
if ($("#txt_quote").length && $("#txt_quote").val()) {
prevQuote = "[quote]" + $("#txt_quote").val() + "[/quote]";
} else {
prevQuote = "";
}
$.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) {
$("#c_post-preview").html(s);
if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview"));
parse_rimg($("#c_post-preview"));
});
}
return false;
}
</script> 



Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE?

Thanks for your answers and help!

hey guys

i'd like to have a javascript code that resizes the window to full screen

it's my 404 page and I need it to resize the custom 404 page to fullscreen, or full window size

how would I go about doing that?

I have an asp.net textbox. I need to use javascript so that there are no postbacks. I would like to click the button and the textbox height kept increases each time the user clicks the button. So far I can toggle:

function resize(){
var textbox = $get('<%=txtWhoTo.ClientID %>');
textbox.style.height = textbox.style.height == '56px' ? '23px' : '56px';
}

I would like to increase the height 56px each time the clicks the button.

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 all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA"

Feel better now!

I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ!

My Code:

Code:

<SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
	try{	
	var oBody	=	ifrm.document.body;
	var oFrame	=	document.all("ifrm");
		
	oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
	}
	//An error is raised if the IFrame domain != its container's domain
	catch(e)
	{
	window.status =	'Error: ' + e.number + '; ' + e.description;
	}
}
//-->
</SCRIPT>


<body onload="reSize()" onresize="reSize()">

<li>
	<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
	<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
	<span class="nav_title">Home</span>
	<br/>
	</a>
</li>


<iframe onresize=reSize() id=ifrm  src="home.html" name="info" frameborder="0" 
	padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px" 
	allowTransparency="true" noresize>
</iframe>