JavaScript - Removing Zoom From This Script
I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example:
http://www.intelsystech.com/ab/SampleOverlay.html That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div. Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for. Thanks! Script follows: Code: function Position(x, y) { this.X = x; this.Y = y; this.Add = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X += val.X; if(!isNaN(val.Y)) newPos.Y += val.Y } return newPos; } this.Subtract = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X -= val.X; if(!isNaN(val.Y)) newPos.Y -= val.Y } return newPos; } this.Min = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X > val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y > val.Y) newPos.Y = val.Y; return newPos; } this.Max = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X < val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y < val.Y) newPos.Y = val.Y; return newPos; } this.Bound = function(lower, upper) { var newPos = this.Max(lower); return newPos.Min(upper); } this.Check = function() { var newPos = new Position(this.X, this.Y); if(isNaN(newPos.X)) newPos.X = 0; if(isNaN(newPos.Y)) newPos.Y = 0; return newPos; } this.Apply = function(element) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(!isNaN(this.X)) element.style.left = this.X + 'px'; if(!isNaN(this.Y)) element.style.top = this.Y + 'px'; } } function hookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.addEventListener) { element.addEventListener(eventName, callback, false); } else if(element.attachEvent) element.attachEvent("on" + eventName, callback); } function unhookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.removeEventListener) element.removeEventListener(eventName, callback, false); else if(element.detachEvent) element.detachEvent("on" + eventName, callback); } function cancelEvent(e) { e = e ? e : window.event; if(e.stopPropagation) e.stopPropagation(); if(e.preventDefault) e.preventDefault(); e.cancelBubble = true; e.cancel = true; e.returnValue = false; return false; } function getMousePos(eventObj) { eventObj = eventObj ? eventObj : window.event; var pos; if(isNaN(eventObj.layerX)) pos = new Position(eventObj.offsetX, eventObj.offsetY); else pos = new Position(eventObj.layerX, eventObj.layerY); return correctOffset(pos, pointerOffset, true); } function getEventTarget(e) { e = e ? e : window.event; return e.target ? e.target : e.srcElement; } function absoluteCursorPostion(eventObj) { eventObj = eventObj ? eventObj : window.event; if(isNaN(window.scrollX)) return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop); else return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY); } function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; var cursorStartPos = null; var elementStartPos = null; var dragging = false; var listening = false; var disposed = false; function dragStart(eventObj) { if(dragging || !listening || disposed) return; dragging = true; if(startCallback != null) startCallback(eventObj, element); cursorStartPos = absoluteCursorPostion(eventObj); elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top)); elementStartPos = elementStartPos.Check(); hookEvent(document, "mousemove", dragGo); hookEvent(document, "mouseup", dragStopHook); return cancelEvent(eventObj); } function dragGo(eventObj) { if(!dragging || disposed) return; var newPos = absoluteCursorPostion(eventObj); newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos); newPos = newPos.Bound(lowerBound, upperBound) newPos.Apply(element); if(moveCallback != null) moveCallback(newPos, element); return cancelEvent(eventObj); } function dragStopHook(eventObj) { dragStop(); return cancelEvent(eventObj); } function dragStop() { if(!dragging || disposed) return; unhookEvent(document, "mousemove", dragGo); unhookEvent(document, "mouseup", dragStopHook); cursorStartPos = null; elementStartPos = null; if(endCallback != null) endCallback(element); dragging = false; } this.Dispose = function() { if(disposed) return; this.StopListening(true); element = null; attachElement = null lowerBound = null; upperBound = null; startCallback = null; moveCallback = null endCallback = null; disposed = true; } this.GetLowerBound = function() { return lowerBound; } this.GetUpperBound = function() { return upperBound; } this.StartListening = function() { if(listening || disposed) return; listening = true; hookEvent(attachElement, "mousedown", dragStart); } this.StopListening = function(stopCurrentDragging) { if(!listening || disposed) return; unhookEvent(attachElement, "mousedown", dragStart); listening = false; if(stopCurrentDragging && dragging) dragStop(); } this.IsDragging = function(){ return dragging; } this.IsListening = function() { return listening; } this.IsDisposed = function() { return disposed; } if(typeof(attachElement) == "string") attachElement = document.getElementById(attachElement); if(attachElement == null) attachElement = element; if(!attachLater) this.StartListening(); } function ResizeableContainer(contentID, parent) { var MINSIZE = 38; var EDGE_THICKNESS = 7; var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3; var EDGEDIFFPOS = EDGE_THICKNESS + 1; var TEXTDIFF = EDGE_THICKNESS + 2; var _width = 38; var _height = 38; var _maxWidth = 900; var _maxHeight = 600; var _minWidth = MINSIZE; var _minHeight = MINSIZE; var _container = document.createElement('DIV'); _container.className = 'reContainer'; var _content = document.getElementById(contentID); _content.ResizeableContainer = this; _content.className = 'reContent'; var _rightEdge = document.createElement('DIV'); _rightEdge.className = 'reRightEdge'; var _bottomEdge = document.createElement('DIV'); _bottomEdge.className = 'reBottomEdge'; var _cornerHandle = document.createElement('DIV'); _cornerHandle.className = 'reCorner'; var _leftCornerHandle = document.createElement('DIV'); _leftCornerHandle.className = 'reLeftCorner'; var _topCornerHandle = document.createElement('DIV'); _topCornerHandle.className = 'reTopCorner'; var _rightHandle = document.createElement('DIV'); _rightHandle.className = 'reRightHandle'; var _bottomHandle = document.createElement('DIV'); _bottomHandle.className = 'reBottomHandle'; var _topRightImageHandle = document.createElement('DIV'); _topRightImageHandle.className = 'reTopRightImage'; var _bottomLeftImageHandle = document.createElement('DIV'); _bottomLeftImageHandle.className = 'reBottomLeftImage'; var _leftEdge = document.createElement('DIV'); _leftEdge.className = 'reLeftEdge'; var _topEdge = document.createElement('DIV'); _topEdge.className = 'reTopEdge'; _cornerHandle.appendChild(_leftCornerHandle); _cornerHandle.appendChild(_topCornerHandle); _rightEdge.appendChild(_topRightImageHandle); _rightEdge.appendChild(_rightHandle); _bottomEdge.appendChild(_bottomHandle); _bottomEdge.appendChild(_bottomLeftImageHandle); _container.appendChild(_topEdge); _container.appendChild(_leftEdge); _container.appendChild(_rightEdge); _container.appendChild(_bottomEdge); _container.appendChild(_cornerHandle); _container.appendChild(_content); var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true); var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true); var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true); UpdateBounds(); UpdatePositions(); AddToDocument(); function moveStart(eventObj, element) { if(element == _cornerHandle) document.body.style.cursor = 'se-resize'; else if(element == _bottomEdge) document.body.style.cursor = 's-resize'; else if(element == _rightEdge) document.body.style.cursor = 'e-resize'; } function moveEnd(element) { UpdatePositions(); document.body.style.cursor = 'auto'; } function rightHandleMove(newPos, element) { _width = newPos.X + EDGE_THICKNESS; UpdatePositions(); } function bottomHandleMove(newPos, element) { _height = newPos.Y + EDGE_THICKNESS; UpdatePositions(); } function cornerHandleMove(newPos, element) { _width = newPos.X + EDGE_THICKNESS; _height = newPos.Y + EDGE_THICKNESS; UpdatePositions(); } function UpdateBounds() { _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS; _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS; _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS; _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS; _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS; _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS; _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS; _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS; } function UpdatePositions() { if(_width < _minWidth) _width = _minWidth; if(_width > _maxWidth) _width = _maxWidth; if(_height < _minHeight) _height = _minHeight; if(_height > _maxHeight) _height = _maxHeight; _container.style.width = _width + 'px'; _container.style.height = _height + 'px'; _content.style.width = (_width - TEXTDIFF) + 'px'; _content.style.height = (_height - TEXTDIFF) + 'px'; _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px'; _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px'; _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px'; _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px'; _cornerHandle.style.left = _rightEdge.style.left; _cornerHandle.style.top = _bottomEdge.style.top; _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px'; _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px'; _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px'; _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px'; } function Listen(yes) { if(yes) { _rightHandleDrag.StartListening(); _bottomHandleDrag.StartListening(); _cornerHandleDrag.StartListening(); } else { _rightHandleDrag.StopListening(); _bottomHandleDrag.StopListening(); _cornerHandleDrag.StopListening(); } } function AddToDocument() { if(typeof(parent) == "string") parent = document.getElementById(parent); if(parent == null || parent.appendChild == null) { var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647); while(document.getElementById(id) != null) id += Math.round(Math.random()*2147483647); document.write('<span id="'+ id + '"></span>'); element = document.getElementById(id); element.parentNode.replaceChild(_container, element); } else { parent.appendChild(_container); } Listen(true); } this.StartListening = function() { Listen(true); } this.StopListening = function() { Listen(false); } this.GetContainer = function() { return _container; } this.GetContentElement = function() { return _content; } this.GetMinWidth = function() { return _minWidth; } this.GetMaxWidth = function() { return _maxWidth; } this.GetCurrentWidth = function() { return _width; } this.GetMinHeight = function() { return _minHeight; } this.GetMaxHeight = function() { return _maxHeight; } this.GetCurrentHeight = function() { return _height; } this.SetMinWidth = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _minWidth = value; UpdatePositions(); UpdateBounds(); } this.SetMaxWidth = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _maxWidth = value; UpdatePositions(); UpdateBounds(); } this.SetCurrentWidth = function(value) { value = parseInt(value); if(isNaN(value)) value = 0; _width = value; UpdatePositions(); } this.SetMinHeight = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _minHeight = value; UpdatePositions(); UpdateBounds(); } this.SetMaxHeight = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _maxHeight = value; UpdatePositions(); UpdateBounds(); } this.SetCurrentHeight = function(value) { value = parseInt(value); if(isNaN(value)) value = 0; _height = value; UpdatePositions(); } } Similar TutorialsHi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hello all. This script is working fine in IE7 but FF is complaining about undeclared variables. Can anybody assist to get this working in FF or do I need a new script? Any and all advice is welcome. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test ZOOM</title> <script type="text/javascript"> //Image zoom in/out script- by javascriptkit.com //Visit JavaScript Kit (http://www.javascriptkit.com) for script //Credit must stay intact for use var zoomfactor=0.05 //Enter factor (0.05=5%) function zoomhelper(){ if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){ whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix } } function zoom(originalW, originalH, what, state){ if (!document.all&&!document.getElementById) return whatcache=eval("document.images."+what) prefix=(state=="in")? 1 : -1 if (whatcache.style.width==""||state=="restore"){ whatcache.style.width=originalW+"px" whatcache.style.height=originalH+"px" if (state=="restore") return } else{ zoomhelper() } beginzoom=setInterval("zoomhelper()",100) } function clearzoom(){ if (window.beginzoom) clearInterval(beginzoom) } </script> </head> <body> <!-- CHANGE 99 to your image width, 100 to image height, and "office_map" to your image's name--> <a href="#" onmouseover="zoom(100,63,'office_map_6','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(100,63,'office_map_6','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'office_map_6','out')" onmouseout="clearzoom()">Zoom Out</a> <div style="position:relative;width:420;height:300"> <div style="position:absolute"><img name="office_map_6" src="images/office_map_6.gif" width="100" height="63"> </div> </div> </body> </html> low tech ** edit so i managed to find a thread that removed the time stamp, all i need now is to change the date format and i'll be finished. thanks to Phillip_M for his post on that thread.** ========= hello i found this script for a datetime picker for a class project, which you can see he http://www.javascriptkit.com/script/...imestamp.shtml I want the date to be displayed as MMDDYYY instead of day-month-year this is the script below- Quote: function show_calendar(str_target, str_datetime) { var arr_months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; var n_weekstart = 1; // day week starts from (normally 0 or 1) var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); var dt_prev_month = new Date(dt_datetime); dt_prev_month.setMonth(dt_datetime.getMonth()-1); var dt_next_month = new Date(dt_datetime); dt_next_month.setMonth(dt_datetime.getMonth()+1); var dt_firstday = new Date(dt_datetime); dt_firstday.setDate(1); dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); var dt_lastday = new Date(dt_next_month); dt_lastday.setDate(0); // html generation (feel free to tune it for your particular application) // print calendar header var str_buffer = new String ( "<html>\n"+ "<head>\n"+ " <title>Calendar</title>\n"+ "</head>\n"+ "<body bgcolor=\"White\">\n"+ "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+ "<tr><td bgcolor=\"#4682B4\">\n"+ "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+ "<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+ str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+ "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+ " alt=\"previous month\"></a></td>\n"+ " <td bgcolor=\"#4682B4\" colspan=\"5\">"+ "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">" +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+ " <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('" +str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+ "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+ " alt=\"next month\"></a></td>\n</tr>\n" ); var dt_current_day = new Date(dt_firstday); // print weekdays titles str_buffer += "<tr>\n"; for (var n=0; n<7; n++) str_buffer += " <td bgcolor=\"#87CEFA\">"+ "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+ week_days[(n_weekstart+n)%7]+"</font></td>\n"; // print calendar table str_buffer += "</tr>\n"; while (dt_current_day.getMonth() == dt_datetime.getMonth() || dt_current_day.getMonth() == dt_firstday.getMonth()) { // print row heder str_buffer += "<tr>\n"; for (var n_current_wday=0; n_current_wday<7; n_current_wday++) { if (dt_current_day.getDate() == dt_datetime.getDate() && dt_current_day.getMonth() == dt_datetime.getMonth()) // print current date str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">"; else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6) // weekend days str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">"; else // print working days of current month str_buffer += " <td bgcolor=\"white\" align=\"right\">"; if (dt_current_day.getMonth() == dt_datetime.getMonth()) // print days of current month str_buffer += "<a href=\"javascript:window.opener."+str_target+ ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">"; else // print days of other months str_buffer += "<a href=\"javascript:window.opener."+str_target+ ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">"; str_buffer += dt_current_day.getDate()+"</font></a></td>\n"; dt_current_day.setDate(dt_current_day.getDate()+1); } // print row footer str_buffer += "</tr>\n"; } // print calendar footer str_buffer += "<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+ "<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+ "Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+ "\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" + "</table>\n" + "</tr>\n</td>\n</table>\n" + "</body>\n" + "</html>\n"; var vWinCal = window.open("", "Calendar", "width=200,height=250,status=no,resizable=yes,top=200,left=200"); vWinCal.opener = self; var calc_doc = vWinCal.document; calc_doc.write (str_buffer); calc_doc.close(); } // datetime parsing and formatting routimes. modify them if you wish other datetime format function str2dt (str_datetime) { var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\\d+)\\d+)$/; if (!re_date.exec(str_datetime)) return alert("Invalid Datetime format: "+ str_datetime); return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6)); } function dt2dtstr (dt_datetime) { return (new String ( dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" ")); } function dt2tmstr (dt_datetime) { return (new String ( dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds())); } any help is appreciated ive been at this for two days with no result. thank you Hi i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this? $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 189, cKey = 187; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(document).keydown(function(e) { //alert(ctrlDown); if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false; }); }); Please provide me do you have any other code to do this? Thanks, Jagadeesh. Greetings all, I picked up a Theme Forest site template and I'm trying to remove the social media tools for Facebook & Twitter from the "work" section on my site. When a picture is clicked you can see the social media buttons at the bottom of the viewer and I'd like to remove that function. Site with issues: www.lenoxcruthers.com Here is a dropbox file containing my java script files: https://www.dropbox.com/sh/io29dadjx23haa7/nPE-jJcP06 Thanks, I think this is done by Javascript. I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good. Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it? The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4 On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image. All help will is much appreciated Hello, I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work.. Can someone please tell me what is wrong with it? What did i do wrong? Here is the script i wrote: Code: <script type="text/javascript" > var img1 = "img1.jpg"; function zoomin() { document.getElementById('img1').style.height = 220; document.getElementById('img1').style.width = 200; } function zoomout() { document.getElementById('img1').style.height = 60; document.getElementById('img1').style.width = 50; } </script> <img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/> Please help.. Thank you in advance. The problem is I am drawing vml shapes on my webpage, at 100% everything is fine, click events works fine, mouseover also works fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up. Click works, but away, like if there are 2 shapes together and I click on one, the other one will show the data. same with mouseover, I take the mouse over the shape, but before reaching the shape, it starts showing the effects of that mouseover. I tried to tackle this on window resize event. But it dont work. I wonder, If anyone has encountered this type of problem before & have a solution. on http://d11882157.a148.awebforyou.com...14_1422_p.html I use a javascript zoom but it disables the users from clicking on the link above the zoom is there any solution for this? I'm searching for a crossbrowser script to zoom in/out the full website content (not text only). Who can provide me a link to that kind of script?
Hello folks, I'm new here. This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images. It is probably best I explain this by using drawings. As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later) (Figure 1) Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position. (Figure 2) The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example! Is there any way to do this or script I can use? My javascripting skills aren't brilliant! Cheers. Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.
Thanks in advance for any help. I am not very experienced at web design. I have spent a ton of time making a webpage with text in graphics (yes, I know, bad idea). The person I am making it for decided "on my bigger laptop, the text is too small. Can you fix that" So to save myself a ton of work, I'd like to set an automatic css zoom based on the browsers screen resolution. e.g. If 1024, then zoom: 100. if 1440, then zoom 120. If 1600, then zoom 150 or somethings like that. I can do some basic stuff in CSS, but seems like maybe javascript is required to pull this off. Help! I've seen a bunch of these around but most of them take over the screen, etc. We found the perfect one and wondered if anyone knows of any scripts that are like this one: http://www.panic.com/transmit/ (See "Screenshots" towards the bottom for the zoom lightbox effect). Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!
Hi, I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out. What exactly would be the code for that? Thanks Map can be viewed BY CLICKING HERE. I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array. I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/ Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Marker Simple</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); // Make an array of the LatLng's of the markers you want to show var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017)); // Create a new viewpoint bound var bounds = new google.maps.LatLngBounds (); // Go through each... for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { // And increase the bounds to take this point bounds.extend (LatLngList[i]); } // Fit these bounds to the map map.fitBounds (bounds); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:650px;height:550px;"></div> </body> </html> Does anyone have any idea how to imitate browser zoom with javascript? I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript? In firefox, when you press ctrl+, the whole page resizes appropriately, even background images. With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS. It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800). That's be neato!! Any ideas? Anyone know a script? I am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business. Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business. If you want to see the mapping code, I can post it. I wasn't sure what to do. This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon. THANKS! |