managing scrolling, in progress

css/browsingldc.css

@@ -223,8 +223,8 @@ p{
 
 .minimap_container {
 	/*position: fixed;*/
-	top: 160px;
+	/*top: 160px;*/
-	left: 600px;
+	/*left: 600px;*/
 	min-width: 20px;
 	z-index: 100;
 	
@@ -275,3 +275,4 @@ p{
 	border: 1px solid white;
 }
 
+

js/cesareBrowse.js

@@ -224,7 +224,6 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 		//class="col-3 px-0"
 		minimap.append(minimapSize, viewer, minimapContent);
 		
-		
 		//document.body.appendChild(minimap)
 		if (mmplace!=null)
 			mmplace.appendChild(minimap)
@@ -236,17 +235,29 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 		}
 		
 		
-		//console.log(element)
 		
-		let html = document.getElementById(element).innerHTML
+		
+		let html = document.getElementById(element).outerHTML//innerHTML
 		//console.log(html)
 
 		let iFrameDoc = minimapContent.contentWindow.document;
+		var cssLink = document.createElement("link");
+		cssLink.href = "https://unpkg.com/tachyons/css/tachyons.min.css"; 
+		cssLink.rel = "stylesheet"; 
+		cssLink.type = "text/css";
+		
+		var cssLinkb = document.createElement("link");
+		cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
+		cssLinkb.rel = "stylesheet"; 
+		cssLinkb.type = "text/css";
+		
 		iFrameDoc.open();
 		iFrameDoc.write(html);
 		iFrameDoc.close();
+		iFrameDoc.head.appendChild(cssLink);
+		iFrameDoc.head.appendChild(cssLinkb);
 
-		getDimensions()
+		getDimensionsDiv()
 		
 		if (document.getElementById(displayId).getAttribute('target')==null)	
 			window.addEventListener('scroll', trackScroll)
@@ -255,9 +266,9 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 			
 			}*/
 		
-		document.getElementById(displayId).addEventListener('resize', getDimensions)
+		document.getElementById(displayId).addEventListener('resize', getDimensionsDiv)
 		
-		window.addEventListener('resize', getDimensions)
+		window.addEventListener('resize', getDimensionsDiv)
 		
 	}
 	
@@ -268,7 +279,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 		
 		cantoplace=document.getElementById(displayId)
 		mmplace=document.getElementById('displayminimap')
-		
+		isnick=mmplace=document.getElementById('apricerca')
 		let bodyWidth = document.body.clientWidth;
 		
 	    let bodyRatio = document.body.clientHeight / bodyWidth;
@@ -277,23 +288,32 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 	    
 	    //if(cantoplace!=null & mmplace!=null){
 		if(mmplace!=null){
-	    	winRatio = mmih / window.innerWidth;
+	    	//winRatio = mmih / mmiw;//window.innerWidth;
-	    	bodyRatio = cantoplace.clientHeight/ document.body.clientWidth;//cantoplace.clientWidth;	
+	    	//bodyRatio = mmih / mmiw;//mmplace.clientHeight/cantoplace.clientWidth;	
 	    }
-	    if(mmplace!=null){
+	     viewer.style.width='50%'
-	    	minimap.style.width = '70%';
+	    /*if(mmplace!=null){
-	    	viewer.style.width='18%'
+	    	//minimap.style.width = '75%';
+	    	//viewer.style.width='45%'
 	    	}
 	    else{
 			minimap.style.width = '15%';
 			viewer.style.width='25%'
+		}*/
+		if(isnick!=null){
+			minimap.style.width = '40%';
+			viewer.style.width='15%'
 		}
 	    
 	    //end test
 	    
 	   
 	    
-	    realScale = minimap.clientWidth / bodyWidth;
+	    
+	    realScale = minimap.clientWidth / mmih;//bodyWidth;
+	    
+	    console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale)
+	    //realScale=scale
 	    
 		minimapSize.style.paddingTop = `${bodyRatio * 100}%`
 		
@@ -306,6 +326,63 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 	    minimapContent.style.height = `${(100 / realScale)}%`
 	    
 	 }
+	 function getInnerHeight( elm ){
+  		var computed = getComputedStyle(elm),
+      		padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
+
+  		return elm.clientHeight - padding
+	}
+	 function getDimensionsDiv(){
+		
+		
+		cantoplace=document.getElementById(displayId)
+		mmplace=document.getElementById('displayminimap')
+		isnick=mmplace=document.getElementById('apricerca')
+		cpmaxh=cantoplace.style.maxHeight
+		cpmaxh=cpmaxh.replace('px','')
+		cpbw=cantoplace.style.width
+		let tebodyWidth = document.body.clientWidth;
+		
+	    let tebodyRatio = (document.body.clientHeight) / tebodyWidth;
+	    let tewinRatio = window.innerHeight / window.innerWidth;
+		
+		let bodyWidth = mmiw;
+		
+	    let bodyRatio = parseInt(cpmaxh) / bodyWidth;
+	   
+	   	elmih=getInnerHeight(cantoplace)
+	   	
+	    let winRatio = elmih / (mmiw-32);
+	    
+		
+	     viewer.style.width='50%'
+	   
+		if(isnick!=null){
+			minimap.style.width = '40%';
+			viewer.style.width='15%'
+		}
+	    
+	    
+	    
+	    realScale = minimap.clientWidth / cpmaxh;//bodyWidth;
+	    
+	    console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale)
+	    //realScale=scale
+	    
+		minimapSize.style.paddingTop = `${bodyRatio * 500}%`
+		
+		console.log (minimapSize.style.paddingTop)
+		
+		viewer.style.paddingTop = `${(winRatio) * 100}%`;
+	   
+		
+	    	
+	    minimapContent.style.transform = `scale(${realScale})`;
+	     minimapContent.style.width = `${(100 / realScale)}%`
+	    minimapContent.style.height = `${(100 / realScale)}%`
+	    
+	    
+	 }
 
 	function trackScroll(){
 		//console.log(window.scrollY)