|
JavaScript - Resize Image Bbcode - Need Help To Fix It
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! Similar TutorialsI 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 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> "; ?> 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 hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can. This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob hello i'm building a search engine and one of the options i'm implementing is this: the user is able to control the scale of the thumbnail, small, medium and large the problem is that when i have 1000 pictures inside a div when i hit resize i get like a 5 sec delay for them to resize here is the javascript code: Code: Code: var factor;
function fillImg(imgPath, imgElement){
imageObj = new Image(32,32);
imageObj.src = imgPath;
if(imgElement.src != imgPath ){
imgElement.src = imgPath;
}
}
function errHandler(err){
alert("Error occured!");
}
function resizeImgList(scale){
if(scale == "s"){
factor = 50;
}else if(scale == "m"){
factor = 100;
}else{
factor = 150;
}
var lists = document.getElementById("rs_ls").getElementsByTagName("li");
for(var li_index = 0; li_index < lists.length; li_index++){
var canvas = lists[li_index].getElementsByTagName("span");
for(var c_index = 0; c_index < canvas.length; c_index++){
var link = canvas[c_index].getElementsByTagName("a");
for(var a_index = 0; a_index < link.length; a_index++){
var image = link[a_index].getElementsByTagName("img");
for(var i_index = 0; i_index < image.length; i_index++){
var w = $(image[i_index]).attr("width");
var h = $(image[i_index]).attr("height");
var results = resizeItem(w,h,factor,factor);
var w = results[0];
var h = results[1];
var m = results[2];
$(image[i_index]).attr("width",w);
$(image[i_index]).attr("height",h);
$(image[i_index]).attr("style","width:"+w+"px;height:"+h+"px;");
}
wa = w+12;
ha = h+12;
$(link[a_index]).attr("style","width:"+wa+"px;height:"+ha+"px;");
}
wc = w+12;
hc = h+12;
$(canvas[c_index]).attr("style","width:"+wc+"px;height:"+hc+"px;margin-left:"+m+"px;margin-right:"+m+"px;");
}
wli = w + 12 + m * 2;
hli = h + 12;
$(lists[li_index]).attr("style","width:"+wli+"px;height:"+hli+"px;");
}
}
function resizeItem(eWidth, eHeight, tWidth, tHeight) {
percentage = (tHeight / eHeight);
newHeight = parseInt(eHeight * percentage);
newWidth = parseInt(eWidth * percentage);
if (newWidth > tWidth) {
percentage = (tWidth / newWidth);
newHeight = parseInt(newHeight * percentage);
newWidth = parseInt(newWidth * percentage);
}
margin = (tWidth - newWidth + 12) / 2;
results = [newWidth, newHeight, margin];
return results;
}
each result set of 50 images has this structu HTML Code: Code: <span> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> . . . <li>...</li> <!-- 50 <li> --> </ul> </span> so 50 results are contained inside a span each <li> has this structure inside: HTML Code: Code: <li> <span> <a href...> <img> </a> </span> </li> I altered the resizeImgList function with 1 for loop but even then it didnt seem to improve. i was thinking that i could resize only the results the user is currently seeing inside the div, the current <span> of results but i'm anaware of how to accomplish this please if anyone has any idea I would be gratefull. Thank you. Peter. PS. results (spans) are fetched via AJAX on scrolldown inside the a div (which is the result container). Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? Hey I am looking for a better way of adding BBCode to a textarea. Here's the code I use right now: Code: function insertext(text){
document.addnews.userpost.focus(); document.addnews.userpost.value=document.addnews.userpost.value +" "+ text;
document.addnews.userpost.focus()
}
This adds the BBCode tag to the end of the text in the textarea. How can I make it insert the tags where the the textarea cursor is? And if possible too could I make it so if you were to highlight something and press the bold tag button it would add the tags around that automatically? Hey i am trying to create a BBCode thing, and i need a checker which wont let the users send a reply with out the TAGs being correct to of my tags are [ php ] and [ /php ] there arnt spaces in it tho, but i am stuck for some reason i cant get it to work, i am not very good with JQuery or Javascript i am more based in PHP and HTML and MySQL can anyone help Code: function Reply_Box_Check(){
if($("#reply_box").innerHTML().indexOf('[ PHP ]') >= 0 && $("#reply_box").innerHTML().indexOf('[ /PHP ]') < 0){
alert("Please Close PHP code");
}
}
It is ment to: if the user has inputed [ php ] but not [ /php] then it will alert them of this and will not send there data, and also is there a way to make this post after checking? Code: function goBullet()
{
var formBody = document.getElementById("body");
var listCount = prompt("Please enter the number of items in the list.", "1");
if (listCount == null || listCount == "")
{
formBody.value += "";
}
else
{
var listCountInt = parseInt(listCount);
var listItem = new Array();
formBody.value += "[UL]";
for (var i = 0; i < listCountInt; i++);
{
listItem[i] = prompt("Please enter an item.", "");
if (listItem[i] != null || listItem[i] != "")
{
formBody.value += "[LI]" + listItem[i] + "[/LI]";
}
}
formBody.value += "[/UL]";
}
}
The problem I'm having is no matter what number I'm entering, the for loop only executes once, thus only adding the first list item. Any ideas? Hi all, I'd like to use the bbcode editor at http://php-login-script.com/bbdemo.php. Currently that script doesn't set the focus on the textarea after tag insertion. I've tried to to make it by inserting textarea.focus() at the end of their function, like Code: function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementById(obj);
// Code for IE
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
//alert(sel.text);
sel.text = tag1 + sel.text + tag2;
}
else
{ // Code for Mozilla Firefox
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;
var sel = textarea.value.substring(start, end);
//alert(sel);
var rep = tag1 + sel + tag2;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
textarea.scrollTop = scrollTop;
textarea.scrollLeft = scrollLeft;
}
textarea.focus();
}
But, in IE that sets the cursor the end of the last inserted tag and in FF the cursor moves at the end of the whole text in textarea. How can i set it ine between the tags(say ), after insert? Thanks. Hi; I'd like to ask you a question; why my mouse cursor does not sit in the position of the leftmost and topmost of a bbcode form. Thanks. my form as following; bbcode form PHP Code: <form action="story_verify1.php" method="post" name="editform" onsubmit="return checkForm(this)"> <table id="editform"> <tr> <td id="story">My story</td> </tr> <tr> <td> <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onmouseover="helpline('bold')" /> <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onmouseover="helpline('italic')" /> <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onmouseover="helpline('underline')" /> <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onmouseover="helpline('quote')" /> <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '[/code]', 'code', 'code');" onmouseover="helpline('code')" /> <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onmouseover="helpline('url')" /> <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img]', 'img*', '[/img]', 'img', 'img');" onmouseover="helpline('img')" /> <br /> Font size: <select name="fontsize" onchange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onmouseover="helpline('fontsize')" class="form_elements_dropdown"> <option value="50%" >Tiny</option> <option value="75%" >Small</option> <option value="100%" selected="selected" >Normal</option> <option value="150%" >Large</option> <option value="200%" >Huge</option> </select> Font color: <select name="fontcolor" onchange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onmouseover="helpline('fontcolor')" class="form_elements_dropdown" > <option value="black" style="color:black">Black</option> <option value="silver" style="color:silver">Silver</option> <option value="gray" style="color:gray">Gray</option> <option value="maroon" style="color:maroon">Maroon</option> <option value="red" style="color:red">Red</option> <option value="purple" style="color:purple">Purple</option> <option value="fuchsia" style="color:fuchsia">Fuchsia</option> <option value="navy" style="color:navy">Navy</option> <option value="blue" style="color:blue">Blue</option> <option value="aqua" style="color:aqua">Aqua</option> <option value="teal" style="color:teal">Teal</option> <option value="lime" style="color:lime">Lime</option> <option value="green" style="color:green">Green</option> <option value="olive" style="color:olive">Olive</option> <option value="yellow" style="color:yellow">Yellow</option> <option value="white" style="color:white">White</option> </select> <br /> <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/> </td> </tr> <tr> <td> Post:***<br /> <textarea rows="10" cols="50" name="Content" class="form_elements_text" id="thread"> <?php echo trim(stripslashes($_SESSION['story_content'])); ?> </textarea> </td> </tr> <tr> <td colspan="2" class="security_check"> <?php $_SESSION['fvalue']=rand(0,9); echo $_SESSION['fvalue']; ?> + <?php $_SESSION['svalue']=rand(0,9); echo $_SESSION['svalue']; ?> = <input type="text" name="result" /> ** </td> </tr> <tr> <td colspan="2" id="post"> <input type="submit" name="Post" value="Post" class="button" /> <input type="submit" name="preview" value="Preview" class="button"/> <input type="reset" value="Reset" class="button" onclick="javascript:confirm_reset();"/> </td> </tr> </table> </form> bbcode.js PHP Code: //Variables for controlling opening and closing tags (function tag) var b = 2; var i = 2; var u = 2; var q = 2; var mail = 2; var url = 2; var img = 2; //Function for creating non-font tags function tag(v, tagadd, newbut, tagclose, oldbut, name) { var r = document.selection.createRange().text; rr = tagadd + r + tagclose; if(r) { document.selection.createRange().text = rr; } else { if (eval(v)%2 == 0) { eval("window.document.editform."+name+".value = newbut;"); var content = window.document.editform.content.value; window.document.editform.content.value = content + tagadd; window.document.editform.content.focus(); } else { eval("window.document.editform."+name+".value = oldbut;"); var content = window.document.editform.content.value; window.document.editform.content.value = content + tagclose; window.document.editform.content.focus(); } eval(v+"++;"); } } //Function for adding font color and size tags function font(bbopen, bbclose) { var r = document.selection.createRange().text; rr = bbopen + r + bbclose; if(r) { document.selection.createRange().text = rr; }else{ var post = document.editform.post; post.value += bbopen +r+ bbclose; post.focus(); } return; } function smilie (tag) { var myField; tag = ' ' + tag + ' '; if (document.getElementById('thread') && document.getElementById('thread').type == 'textarea') { myField = document.getElementById('thread'); } else { return false; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus(); } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos; } else { myField.value += tag; myField.focus(); } } //Helpbox messages bold_help = "Bold text: [b]text[/b]"; italic_help = "Italic text: [i]text[/i]"; underline_help = "Underline text: [u]text[/u]"; quote_help = "Quote text: [quote]text[/quote] or [quote=name]text[/quote]"; code_help = "Code display: [code]code[/code]"; img_help = "Insert image: [img]http://image_url[/img]"; url_help = "Insert URL: [url]http://url[/url] or [url=http://url]URL text[/url]"; fontcolor_help = "Font color: [color=red]text[/color] Tip: you can also use color=#FF0000"; fontsize_help = "Font size: [size=50%]small text[/size]"; //Function for displaying help information // Shows the help messages in the helpline window function helpline(help) { var helpbox = document.editform.helpbox; helpbox.value = eval(help + "_help"); } //Function to confirm reset function confirm_reset () { if(confirm("If you continue you will loose everything you have entered so far. \n \n" + "Click OK to proceed and start again. \n \n Alternatively click cancel to continue " + "working on your post.")) { return true; } else { return false; } } //Check the form submission for errors function checkForm() { var subject = document.editform.subject; var post = document.editform.post; //Check to make sure post lengths are sensible if (subject.value.length < 2 && post.value.length < 2) { alert("This is a short post!" + " \n \n " + "We require that each post (and subject) \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { if (subject.value.length < 2) { alert("We require that the subject \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { if (post.value.length < 2) { alert("We require that each post \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { return true; } } } } This is the code my js script. I don't know how to edit the size in this script. My pic is around 300x300. Please teach me thanks a lot. Javascript if ($(".brandbtnch").size()>0) { $(".brandbtnch").click(function(){ var id=$(this).attr("data-id"); var data=$(".data"+id).html(); $(".brandbigpicl").html(data); }); } I just want to resize the pic edit with this script. Thanks Hello awesome coders! I am here in need of your help. I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">. Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all. Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually. Hello Frnds, I made a website, but when I resize my window the content get disturbed. How to stop it. Please gimme suggestion ASAP jQuery(window).resize(function(){ window.location.href=window.location.href; }); this code was work all browsers but not work IE6. if anyone knows reply.. Hi, I got some JavaScript code from the net to resize DIV's depending on the window-size. It works perfectly in FF, but it won't work in IE. Code: function Resize(){
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-30;
winH = window.innerHeight-200;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth-30;
winH = document.body.offsetHeight-200;
}
}
var topHeight = document.getElementById('top').offsetHeight;
var setHeight = document.getElementById('settings').offsetHeight;
var headersHeight = document.getElementById('headers').offsetHeight;
var leftWidth = document.getElementById('left_column').offsetWidth;
document.getElementById('container').style.width=winW+"px";
document.getElementById('container').style.height=(winH-topHeight-setHeight)+"px";
document.getElementById('headers').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.height=(winH-topHeight-setHeight-headersHeight)+"px";
}
I've been working on this for some days. I would appreciate any help I can get. Erik 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. |
|||||||