ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Zoom in Zoom out using jQuery ImageMapster plugin<p>Hi i need use zoom in and out for image which has hotspot . for some reason it is not working . please help</p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css&#34; /&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;jquery.maphilight.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function zoomin() { &nbsp;&nbsp;&nbsp; var myImg = document.getElementById(&#34;pic&#34;); &nbsp;&nbsp;&nbsp; var currWidth = myImg.clientWidth; &nbsp;&nbsp;&nbsp; if (currWidth == 2500) return false; &nbsp;&nbsp;&nbsp; else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; myImg.style.width = (currWidth + 100) + &#34;px&#34;; &nbsp;&nbsp;&nbsp; } } function zoomout() { &nbsp;&nbsp;&nbsp; var myImg = document.getElementById(&#34;pic&#34;); &nbsp;&nbsp;&nbsp; var currWidth = myImg.clientWidth; &nbsp;&nbsp;&nbsp; if (currWidth == 100) return false; &nbsp;&nbsp;&nbsp; else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; myImg.style.width = (currWidth - 100) + &#34;px&#34;; &nbsp;&nbsp;&nbsp; } } &lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(window).on(&#34;load&#34;, function () { &nbsp;&nbsp;&nbsp; $(document.body).click(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#34;a&#34;).each(function (i) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //$(this).removeClass(&#34;active&#34;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; var urlParam = function (name, w) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; w = w || window; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var rx = new RegExp(&#39;[\&amp;|\?]&#39; + name + &#39;=([^\&amp;\#]+)&#39;), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; val = w.location.search.match(rx); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return !val ? &#39;&#39; : val[1]; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; var useId = urlParam(&#39;Use_Id&#39;); &nbsp;&nbsp;&nbsp; $(&#34;#link&#34; + useId).addClass(&#34;active&#34;); &nbsp;&nbsp;&nbsp; if (useId == &#39;1&#39; || useId == &#39;2&#39; || useId == &#39;3&#39; || useId == &#39;4&#39; || useId == &#39;5&#39; || useId == &#39;6&#39; || useId == &#39;7&#39; || useId == &#39;8&#39; || useId == &#39;9&#39; || useId == &#39;10&#39; || useId == &#39;10A&#39; || useId == &#39;10C&#39; || useId == &#39;11&#39; || useId == &#39;12&#39; || useId == &#39;12B&#39; || useId == &#39;12C&#39; || useId == &#39;13B&#39; || useId == &#39;14&#39; || useId == &#39;15&#39; || useId == &#39;16&#39;) window.location.hash = &#39;one&#39;; &nbsp;&nbsp;&nbsp; $(&#34;#link&#34; + useId + &#34;A&#34;).addClass(&#34;active&#34;); &nbsp;&nbsp;&nbsp; if (useId == &#39;17&#39; || useId == &#39;18&#39; || useId == &#39;19&#39; || useId == &#39;20&#39; || useId == &#39;21A&#39; || useId == &#39;22&#39; || useId == &#39;23&#39; || useId == &#39;24&#39; || useId == &#39;25&#39; || useId == &#39;150&#39; || useId == &#39;150-1&#39; || useId == &#39;151&#39; || useId == &#39;151-1&#39; || useId == &#39;152&#39; || useId == &#39;152-1&#39;) window.location.hash = &#39;two&#39;; }); function linkClick(x) { &nbsp;&nbsp;&nbsp; $(&#34;[id^=&#39;link&#39;]&#34;).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var eleminterest = String($(this).attr(&#39;id&#39;)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#&#39; + eleminterest).removeClass(&#34;active&#34;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#&#39; + eleminterest).addClass(&#34;link&#34;); &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; document.getElementById(x).setAttribute(&#34;class&#34;, &#34;active&#34;); &nbsp;&nbsp;&nbsp; //document.getElementById(x+&#39;A&#39;).setAttribute(&#34;class&#34;,&#34;active&#34;); &nbsp;&nbsp;&nbsp; //document.getElementById(x+&#39;B&#39;).setAttribute(&#34;class&#34;,&#34;active&#34;); &nbsp;&nbsp;&nbsp; document.getElementById(x + &#39;C&#39;).setAttribute(&#34;class&#34;, &#34;active&#34;); &nbsp;&nbsp;&nbsp; document.getElementById(x + &#39;D&#39;).setAttribute(&#34;class&#34;, &#34;active&#34;); &nbsp;&nbsp;&nbsp; document.getElementById(x + &#39;E&#39;).setAttribute(&#34;class&#34;, &#34;active&#34;); &nbsp;&nbsp;&nbsp; //alert(x); } function getID(id) { }; function getID2(id) { }; &lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(window).on(&#34;load&#34;, function () { &nbsp;&nbsp;&nbsp; var urlParam = function (name, w) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; w = w || window; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var rx = new RegExp(&#39;[\&amp;|\?]&#39; + name + &#39;=([^\&amp;\#]+)&#39;), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; val = w.location.search.match(rx); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return !val ? &#39;&#39; : val[1]; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; var useId = urlParam(&#39;Use_Id&#39;); &nbsp;&nbsp;&nbsp; $(&#39;.mapimg&#39;).maphilight(); &nbsp;&nbsp;&nbsp; if (useId != &#39;&#39;) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var i = 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#34;.map&#34; + useId).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (i == 0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var eleminterest = String($(this).attr(&#39;id&#39;)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //console.log(eleminterest);&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //$(&#39;#&#39; + eleminterest).mouseover();&nbsp; //Old Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#&#39; + eleminterest).click(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; // Resize Image to Fit &nbsp;&nbsp;&nbsp; $(&#39;.mapimg&#39;).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).css(&#34;width&#34;, 603); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).css(&#34;height&#34;, 812); &nbsp;&nbsp;&nbsp; }); }); function linkClick(x) { &nbsp;&nbsp;&nbsp; var class_name = document.getElementById(x).className.split(&#39; &#39;); &nbsp;&nbsp;&nbsp; $(&#34;[id^=&#34; + x + &#34;]&#34;).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var eleminterest = String($(this).attr(&#39;id&#39;)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#&#39; + eleminterest).removeClass(&#34;active&#34;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#&#39; + eleminterest).addClass(class_name[0]); &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; document.getElementById(x).setAttribute(&#34;class&#34;, class_name[0] + &#34; active&#34;); &nbsp;&nbsp;&nbsp; //alert(document.getElementById(x).className); } function getID2(id) { }; function getID(id) { }; &lt;/script&gt; &lt;body&gt; &lt;nav class=&#34;navbar-fixed-top navbar-default&#34;&gt; &lt;button type=&#34;button&#34; onclick=&#34;zoomin()&#34;&gt; &lt;span class=&#34;&nbsp;&nbsp; &nbsp;glyphicon glyphicon-zoom-in&#34;&gt;&lt;/span&gt; Zoom In&lt;/button&gt; &lt;button type=&#34;button&#34; onclick=&#34;zoomout()&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-zoom-out&#34;&gt;&lt;/span&gt; Zoom Out&lt;/button&gt; &lt;button type=&#34;button&#34; onclick=&#34;document.location.reload(true);&#34; value=&#34;Reload Page&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-repeat&#34;&gt;&lt;/span&gt; Reset&lt;/button&gt; &lt;button type=&#34;button&#34; onclick=&#34;myprint()&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-print&#34;&gt;&lt;/span&gt; Print&lt;/button&gt; &lt;/nav&gt; &lt;p class=&#34;FM_Body&#34; style=&#34;text-align: center; font-family: &#39;Courier New&#39;; font-weight: bold; &nbsp;&nbsp;&nbsp; font-size: 10.0pt;&#34;&gt; &nbsp;&nbsp;&nbsp; &amp;#160;&lt;/p&gt; &lt;p class=&#34;FM_Body&#34; style=&#34;text-align: center; font-family: &#39;Courier New&#39;; font-weight: bold; &nbsp;&nbsp;&nbsp; font-size: 10.0pt;&#34;&gt; &nbsp;&nbsp;&nbsp; &amp;#160;&lt;/p&gt; &lt;div id=&#34;one&#34; style=&#34;text-align: center;&#34;&gt; &nbsp;&nbsp;&nbsp; &lt;div class=&#34;main dragscroll&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src=&#34;VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg&#34; alt=&#34;VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;pic&#34; usemap=&#34;#image0Map&#34; class=&#34;mapimg&#34; /&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;map name=&#34;image0Map&#34; id=&#34;image0Map&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;218,268,231,284&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=2&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;2&#34; class=&#34;map2&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;2&#34; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;473,336,490,354&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=2&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;2-1&#34; class=&#34;map2&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;2&#34; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;237,277,250,292&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=3&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;3&#34; class=&#34;map3&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;3&#34; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;489,339,505,356&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=3&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;3-1&#34; class=&#34;map3&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;3&#34; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;411,559,428,575&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=4&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;4&#34; class=&#34;map4&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;4&#34; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;area shape=&#34;rect&#34; coords=&#34;92,552,106,568&#34; href=&#34;CHAP_55_30_00 TABLE 01.htm?Use_Id=4&#34; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&#34;4-1&#34; class=&#34;map4&#34; onclick=&#34;linkClick(this.id)&#34; target=&#34;frameleft&#34; alt=&#34;4&#34; /&gt; &nbsp;&nbsp;&nbsp; &lt;/map&gt; &lt;/div&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/415590/Zoom-in-Zoom-out-using-jQuery-ImageMapster-plugin/https://www.aspforums.net:443/Threads/415590/Zoom-in-Zoom-out-using-jQuery-ImageMapster-plugin/Mon, 28 Jan 2019 23:47:53 GMTZoom in and Zoom out multiple Images and Print using jQuery<p>Hi,</p> <p>I want to zoom multiple images and print it.</p> <p>Hi i have a problem which is i have 2 images with seperate div in a same page. how do i use only one zoom query. and also i have a print button where i have to print zoomed image .please help</p> <pre class="brush: js"> var currentZoom = 1.0; $(document).ready(function () { &nbsp;&nbsp;&nbsp; $(&#39;#zoomin&#39;).click( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; currentZoom = currentZoom + 0.03; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var scaleString = &#34;scale(&#34; + currentZoom + &#34;)&#34;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#divName&#39;).css(&#34;transform&#34;, scaleString); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp; $(&#39;#zoomout&#39;).click( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; currentZoom = currentZoom - 0.03; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var scaleString = &#34;scale(&#34; + currentZoom + &#34;)&#34;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#divName&#39;).css(&#34;transform&#34;, scaleString); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) }); function myprint() { &nbsp;&nbsp;&nbsp; var divone = document.getElementById(&#39;one&#39;); &nbsp;&nbsp;&nbsp; divone.style.display = &#39;none&#39;; &nbsp;&nbsp;&nbsp; window.parent.frameright.focus(); &nbsp;&nbsp;&nbsp; window.print(); }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</pre> <pre class="brush: html"> &lt;nav class="navbar-fixed-top navbar-default"&gt; &lt;button type="button" id="zoomin"&gt; &lt;span class="glyphicon glyphicon-zoom-in"&gt;&lt;/span&gt; Zoom In&lt;/button&gt; &lt;button type="button" id="zoomout"&gt; &lt;span class="glyphicon glyphicon-zoom-out"&gt;&lt;/span&gt; Zoom Out&lt;/button&gt; &nbsp;&nbsp;&nbsp; &lt;button type="button" onclick="document.location.reload(true);" value="Reload Page"&gt; &lt;span class="glyphicon glyphicon-repeat"&gt;&lt;/span&gt; Reset&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button type="button" onclick="myprint()"&gt; &lt;span class="glyphicon glyphicon-print"&gt;&lt;/span&gt; Print&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/nav&gt; &lt;div id="one" style="text-align: center;"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="wrapper"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="main dragscroll"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="divName"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id="image0" usemap="#image0Map" class="mapimg" /&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div id="two" style="text-align: center;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="main dragscroll"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="wrapper"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="divName1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="VERTICAL_FIN_INSTALLATION_(SHEET_2_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_2_OF_10).jpg" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; usemap="#image1Map" id="image1" class="mapimg" /&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/div&gt;</pre>https://www.aspforums.net:443/Threads/172193/Zoom-in-and-Zoom-out-multiple-Images-and-Print-using-jQuery/https://www.aspforums.net:443/Threads/172193/Zoom-in-and-Zoom-out-multiple-Images-and-Print-using-jQuery/Thu, 07 Feb 2019 22:44:32 GMTZoom In and Zoom out Images like Google Maps using jQuery<p>hi</p> <p>i am developing a application in which i want the image zoomin and zoomout effect on imaga mousehover same like as google images</p> <p>help me</p> <p>thanks</p>https://www.aspforums.net:443/Threads/131709/Zoom-In-and-Zoom-out-Images-like-Google-Maps-using-jQuery/https://www.aspforums.net:443/Threads/131709/Zoom-In-and-Zoom-out-Images-like-Google-Maps-using-jQuery/Wed, 13 Nov 2013 05:47:31 GMTZoom image on mouse over in GridView in ASP.Net using jQuery<p>Hello friends,</p> <p>&nbsp;</p> <p>I want to zoom the picture in another division. for example i have a image when i hover on the image then that part of image will be large in another division. i think you know what i want to say.</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/167590/Zoom-image-on-mouse-over-in-GridView-in-ASPNet-using-jQuery/https://www.aspforums.net:443/Threads/167590/Zoom-image-on-mouse-over-in-GridView-in-ASPNet-using-jQuery/Mon, 20 May 2013 01:19:57 GMTZoom Enlarge Effect On An Image using jQuery<p>Sir,</p> <ul> <li>I have saved an image in sql database in binary format. Then retrieved that image dynamically on aspx page.</li> <li>Now i want to give a lightbox or fancybox effect on that images dynamically. I have tried but when i clicks on thumbnails it zooms in but shows image in binary format.</li> <li>Then i have tried on photos saved in folder, it's woking on it properly. But not working properly with the images that are saved in databse.&nbsp;</li> </ul> <p>any suggestions .......</p>https://www.aspforums.net:443/Threads/170712/Zoom-Enlarge-Effect-On-An-Image-using-jQuery/https://www.aspforums.net:443/Threads/170712/Zoom-Enlarge-Effect-On-An-Image-using-jQuery/Mon, 17 Dec 2012 04:01:19 GMTZoom (Enlarge) thumbnail image on MouseOver using jQuery in ASP.Net<p>i want to display thumbnail image from the database and when on click thumbnail image open zoom image and it was original image ..so hoe can i do?</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/138843/Zoom-Enlarge-thumbnail-image-on-MouseOver-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/138843/Zoom-Enlarge-thumbnail-image-on-MouseOver-using-jQuery-in-ASPNet/Tue, 14 Mar 2017 01:50:42 GMTYes No Confirm Box using jQuery SweetAlert plugin in ASP.Net<p>I am trying to replace Alert with Bootstrap alert but not able find perfect solution.</p> <p>I want to pop alert box with Yes or No. If user select Yes than process resumes with operations. If user select No the current pop will hide.</p> <p>Any help will be appreciated.</p> <pre class="brush: js"> var me = $(this); if (me.data(&#39;requestRunning&#39;)) { return; } me.data(&#39;requestRunning&#39;, true); if (confirm(&#34;Do you want to delete ?&#34;)) { var row = $(this).closest(&#34;tr&#34;); var ProductID = { ProductID: row.find(&#34;.ProductID&#34;).find(&#34;span&#34;).html() } $.ajax({ type: &#34;POST&#34;, url: &#39;@Url.Action(&#34;DeleteData&#34;, &#34;Product&#34;)&#39;, data: JSON.stringify(ProductID), contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { row.remove(); } }); } me.data(&#39;requestRunning&#39;, false);</pre> <p>&nbsp;</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/101892/Yes-No-Confirm-Box-using-jQuery-SweetAlert-plugin-in-ASPNet/https://www.aspforums.net:443/Threads/101892/Yes-No-Confirm-Box-using-jQuery-SweetAlert-plugin-in-ASPNet/Sun, 03 Dec 2017 23:26:03 GMTWithout using database create Bootstrap Vertical menus with collapse and expand using jQuery<p>I want to implement bootstrap vertical menus with toggle button to collapse without database.</p> <p>I have referred following link,</p> <p><a href="http://www.aspforums.net/Threads/794320/Database-driven-N-Level-Bootstrap-Vertical-Menu-with-expand-and-collapse-using-C-VBNet-and-jQuery-in-ASPNet/">Database driven N-Level Bootstrap Vertical Menu with expand and collapse using C#, VB.Net and jQuery in ASP.Net</a></p> <p>i want to implement it like below link:</p> <p><a href="https://colorlib.com/polygon/gentelella/">https://colorlib.com/polygon/gentelella/</a></p> <p><a href="https://adminlte.io/themes/AdminLTE/index2.html">https://adminlte.io/themes/AdminLTE/index2.html</a></p> <p>Where the header is fixed and left side contains menu and right side contains content section.</p>https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/Wed, 06 Dec 2017 00:59:51 GMTWhy the dynamic created textboxbutton do not do the jquery behavior<p>Hello,</p> <p>I have a div that has a class of "delbtn"<br /><br />inside that div, there is a txtbox + a delbtn(an image)<br /><br />and I write a simple jquery file so that whenever i move on the delbtn, the image will be change to another.<br /><br />However, If I dynamically create the same set of div:txtbox+ delbtn, all having the same setting, using the Jquery, the mouse over effect doesnt work.<br /><br />and I try to press F-12 the developer tool in IE, i even found that the dynamically created textbox is not included in the page (and therefore i cant select those dynamically created objects by using the F-12 selection tool)..<br /><br />But if i tried to type sthing on the textbox, it can display normally..<br />Anyone has the idea on it?<br />Great THanks!</p>https://www.aspforums.net:443/Threads/102042/Why-the-dynamic-created-textboxbutton-do-not-do-the-jquery-behavior/https://www.aspforums.net:443/Threads/102042/Why-the-dynamic-created-textboxbutton-do-not-do-the-jquery-behavior/Mon, 12 Mar 2012 03:50:16 GMTWhich one is better JavaScript or jQuery<p>i m confused which one is better JS or Jquery to fill cascading Dropdownlist</p> <p>my colleague told me that jquery is problematic when server error comes on the page</p> <p>JS is better .</p> <p>now i m confused have i done some wrong pick by choosing jquery to fill cascading ddl</p> <p>as i want to do it without page refresh</p> <p>&nbsp;</p> <p>???????</p> <p>&nbsp;</p> <p>Please if anybody can correct or clear my confusion&nbsp;</p> <p>???????</p>https://www.aspforums.net:443/Threads/165535/Which-one-is-better-JavaScript-or-jQuery/https://www.aspforums.net:443/Threads/165535/Which-one-is-better-JavaScript-or-jQuery/Sat, 22 Sep 2012 10:11:21 GMTWhat is the use $ character in jQuery<p>What&rsquo;s the deal with the <code>$</code> in jQuery? What is it and what does it mean?</p>https://www.aspforums.net:443/Threads/915708/What-is-the-use-character-in-jQuery/https://www.aspforums.net:443/Threads/915708/What-is-the-use-character-in-jQuery/Thu, 06 Aug 2015 07:45:46 GMTWhat are the most useful jQuery plugins and BootStrap Plugin used for Front-End Design Purpose in ASP.Net<p><span class="inline_editor_value"><span id="__w2_wHwBHaE_text_snip_content"><span class="rendered_qtext">I understand this question is very generic, but I am just looking for a list of jQuery plugins front-end&nbsp;<a href="http://www.grabbitmedia.com/" target="_blank">designers</a> seem to continue to use over and over again.</span></span></span></p>https://www.aspforums.net:443/Threads/285536/What-are-the-most-useful-jQuery-plugins-and-BootStrap-Plugin-used-for-Front-End-Design-Purpose-in-ASPNet/https://www.aspforums.net:443/Threads/285536/What-are-the-most-useful-jQuery-plugins-and-BootStrap-Plugin-used-for-Front-End-Design-Purpose-in-ASPNet/Thu, 19 Jan 2017 05:36:41 GMTWebsite to learn jQuery and Plugin basics with example<p>Can any one provide me an link that better understand of the jquery and its plug ins.</p> <p>Thanks.</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/189536/Website-to-learn-jQuery-and-Plugin-basics-with-example/https://www.aspforums.net:443/Threads/189536/Website-to-learn-jQuery-and-Plugin-basics-with-example/Fri, 17 Aug 2012 03:07:25 GMTWatermark using jquery or javascipt<p>hi i have three textbox </p> <p>1.txtcity, <br />2. txtproduct</p> <p>3. txtarea</p> <p>if i type mumbai in txtcity textbox then display the default area in another txtarea textbox(</p> <p>which is retrieved the area based on city). simpy to say mean same as http://www.justdial.com&nbsp; search</p> <p>&nbsp;</p> <p>i have done it using server side in asp.net by textchangedevent of textbox but it is taking to refresh the page. </p>https://www.aspforums.net:443/Threads/130917/Watermark-using-jquery-or-javascipt/https://www.aspforums.net:443/Threads/130917/Watermark-using-jquery-or-javascipt/Tue, 15 May 2012 08:04:11 GMTVertical NewsTicker ( Marquee ) with Image and HyperLink using jQuery<p>I want to add marquee to my website i refer this link</p> <p><a href="http://jsfiddle.net/FWWEn/">http://jsfiddle.net/FWWEn/</a></p> <p>but i want top to bottom text not left to right, how i can i modify it.</p>https://www.aspforums.net:443/Threads/989468/Vertical-NewsTicker-Marquee-with-Image-and-HyperLink-using-jQuery/https://www.aspforums.net:443/Threads/989468/Vertical-NewsTicker-Marquee-with-Image-and-HyperLink-using-jQuery/Fri, 17 May 2013 06:29:24 GMTVertical Bootstrap Responsive ASP.Net Menu using C#<p>please refer to&nbsp;<a href="https://www.aspsnippets.com/Articles/Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display.aspx">https://www.aspsnippets.com/Articles/Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display.aspx</a></p> <p>I want to make it vertical on left side </p> <p>can you please help me.</p>https://www.aspforums.net:443/Threads/145878/Vertical-Bootstrap-Responsive-ASPNet-Menu-using-C/https://www.aspforums.net:443/Threads/145878/Vertical-Bootstrap-Responsive-ASPNet-Menu-using-C/Wed, 03 Jan 2018 05:56:29 GMTValidation to allow only Alphabets using jQuery<p>hi,</p> <p>i want allow only alphabatics in textbox using jquery.............. pls give me reply</p>https://www.aspforums.net:443/Threads/964588/Validation-to-allow-only-Alphabets-using-jQuery/https://www.aspforums.net:443/Threads/964588/Validation-to-allow-only-Alphabets-using-jQuery/Mon, 06 May 2013 00:30:45 GMTWebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery<p>why are validation controls working with master page where as page with no master in solution gives error while running could anyone please explain ?</p> <h1>Server Error in '/' Application.</h1> <hr size="1" width="100%" /> <h2><em>WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).</em></h2> <p><font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "><strong> Description: </strong>An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. <br /><br /><strong> Exception Details: </strong>System.InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).<br /><br /><strong>Source Error:</strong> <br /><br /></font></p> <table width="100%" bgcolor="#ffffcc"> <tbody> <tr> <td><code> An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.</code></td> </tr> </tbody> </table> <p><font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "><br /><strong>Stack Trace:</strong> <br /><br /></font></p> <table width="100%" bgcolor="#ffffcc"> <tbody> <tr> <td> <pre>[InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).] System.Web.UI.ClientScriptManager.EnsureJqueryRegistered() +2287918 System.Web.UI.WebControls.BaseValidator.RegisterUnobtrusiveScript() +10 System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) +9829837 System.Web.UI.Control.PreRenderRecursiveInternal() +83 System.Web.UI.Control.PreRenderRecursiveInternal() +155 System.Web.UI.Control.PreRenderRecursiveInternal() +155 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +974 </pre> </td> </tr> </tbody> </table> <p>&nbsp;</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/200937/WebForms-UnobtrusiveValidationMode-requires-a-ScriptResourceMapping-for-jquery-Please-add-a-ScriptResourceMapping-named-jquery/https://www.aspforums.net:443/Threads/200937/WebForms-UnobtrusiveValidationMode-requires-a-ScriptResourceMapping-for-jquery-Please-add-a-ScriptResourceMapping-named-jquery/Mon, 06 Apr 2015 07:38:25 GMTWebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'.<p>the error shows&nbsp;....</p> <h2><em>WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).</em></h2> <table width="100%" bgcolor="#ffffcc"> <tbody> <tr> <td><code></code> <pre>[InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).] System.Web.UI.ClientScriptManager.EnsureJqueryRegistered() +2170706 System.Web.UI.WebControls.BaseValidator.RegisterUnobtrusiveScript() +10 System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) +9576593 System.Web.UI.Control.PreRenderRecursiveInternal() +83 System.Web.UI.Control.PreRenderRecursiveInternal() +168 System.Web.UI.Control.PreRenderRecursiveInternal() +168 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +974 </pre> </td> </tr> </tbody> </table> <p><em>&nbsp;</em></p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/118652/WebForms-UnobtrusiveValidationMode-requires-a-ScriptResourceMapping-for-jquery/https://www.aspforums.net:443/Threads/118652/WebForms-UnobtrusiveValidationMode-requires-a-ScriptResourceMapping-for-jquery/Wed, 11 Mar 2015 00:31:17 GMTValidation for TextBox in accordion pane using jQuery in ASP.Net<p>I need help to validate textboxes and controls with javascript in accordion panes and also focus on error is in which control</p> <pre class="brush: csharp"> &lt;div id=&#34;accordion&#34;&gt; &lt;%--//////////////////////////////////////////////////////////////1//////////////////////////////////////////////////--%&gt; &lt;h3&gt;1. Personal details &lt;/h3&gt; &lt;div&gt; &lt;table width=&#34;100%&#34; class=&#34;border &#34;&gt; &lt;tr&gt; &lt;td class=&#34;border italics&#34; width=&#34;450px&#34;&gt;Name &lt;/td&gt; &lt;td class=&#34;border italics&#34;&gt; &lt;asp:TextBox ID=&#34;txtEmployeeName&#34; runat=&#34;server&#34; Width=&#34;750px&#34;&gt;&lt;/asp:TextBox&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&#34;border italics&#34; width=&#34;450px&#34;&gt;Position and role in firm &lt;/td&gt; &lt;td class=&#34;border italics&#34;&gt; &lt;asp:TextBox ID=&#34;txtEmployeePosition&#34; runat=&#34;server&#34; Width=&#34;750px&#34;&gt;&lt;/asp:TextBox&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&#34;border italics&#34; width=&#34;450px&#34;&gt;Lotus Notes address &lt;/td&gt; &lt;td class=&#34;border italics&#34;&gt; &lt;asp:TextBox ID=&#34;txtlnAdd&#34; runat=&#34;server&#34; Width=&#34;750px&#34;&gt;&lt;/asp:TextBox&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&#34;border italics&#34; width=&#34;450px&#34;&gt;Engagement Office &lt;/td&gt; &lt;td class=&#34;border italics&#34;&gt; &lt;asp:TextBox ID=&#34;txtEngagementOffice&#34; runat=&#34;server&#34; Width=&#34;750px&#34;&gt;&lt;/asp:TextBox&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/209459/Validation-for-TextBox-in-accordion-pane-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/209459/Validation-for-TextBox-in-accordion-pane-using-jQuery-in-ASPNet/Thu, 18 Aug 2016 04:36:25 GMT