Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

frozen scroll

1guest172.69.33.373j82a06Mar 28, 2024 8:03:44 AMlink

Gmarker and forEach

1guest172.68.67.1362lpvk1hMar 28, 2024 7:29:50 AMlink

Gmaps

1guest172.68.67.1363dvghg5Mar 28, 2024 7:28:20 AMlink

grid demo

5guest172.71.158.2371grhhu3Mar 27, 2024 7:46:36 AMlink

grid demo

4guest172.71.158.2371grhhu3Mar 27, 2024 7:46:25 AMlink

grid demo

3guest172.71.154.181grhhu3Mar 27, 2024 7:44:16 AMlink

grid demo

2guest172.71.154.181grhhu3Mar 27, 2024 7:43:58 AMlink

grid demo

1guest172.71.154.191grhhu3Mar 27, 2024 7:42:54 AMlink

Scrollable Panel

13guest172.69.223.193ctlblaMar 27, 2024 5:31:21 AMlink

Scrollable Panel

12guest172.69.223.194ctlblaMar 27, 2024 5:30:56 AMlink

Another new ZK fiddle

2guest115.249.163.17034851bJan 14, 2020 9:46:12 AMlink

resources

index.zulzul<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class="img-magnifier-container"> <img id="myimage" src="https://www.w3schools.com/images/picture.jpg" width="600" height="400"> </div> <p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> </body> </html> test.htmlhtml<html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class="img-magnifier-container"> <img id="myimage" src="https://www.w3schools.com/images/picture.jpg" width="600" height="400"> </div> <p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> </body> </html> </html>