overflow-y:auto question

Sciter Forums Layout overflow-y:auto question

This topic contains 3 replies, has 2 voices, and was last updated by  Andrew 4 months, 2 weeks ago.

  • Author
    Posts
  • #49340

    Dothissq
    Participant

    Hi,Andrew.I have a html(use q.tis):

    <html>
      <head>
    	<meta charset="gbk">
      </head>
    <style>
    	*{
    		padding: 0;
    		margin: 0;
    	}
    	body{
    		border-right:#17488C 0px solid;
    		background-image:url(res/bg.jpg);
    		width:750px;
    		height:568px;
    		font-family:"Arial Normal", "Arial";
    	}
    	
    	a{
    		float:left;
    		margin-left:13px;
    		color:#100F86;
    		text-decoration:underline;
    		cursor:pointer;
    		width:45px;
    		z-index:1;
    		text-overflow:ellipsis;
    		overflow:hidden;
    		height:16px;
    		white-space:nowrap;
    	}
    	
    	.clearit {
    		position:absolute;
    		width:700px;
    		height:380px;
    		left:0px;
    		top:180px;
    		font-size:15px;
    		overflow:hidden;
    		overflow-y:auto;
    		overflow-y:scroll-indicator;
    	}
    	
    	.link {
    		position:absolute;
    		float:left;
    		left:-10px;
    		top:35px;
    		height:338px;
    		width:740px;
    		overflow-y:auto;
    		overflow-y:scroll-indicator;
    		z-index:-1;
    	}
    	
    	.link > div{
    		position:relative;
    		left:10px;
    		margin-top:12px;
    		height:100px;
    		width:80px;
    		background-image:url(res/webSiteImg.png);
    		background-repeat:no-repeat;
    		background-size:100% 80px;
    		cursor:pointer;
    		display:inline-block;
    	}
    	
    	.link > div:hover{
    		color:red;
    	}
    	
    	.link > div > p{
    		position:relative;
    		top:80px;
    		height:20px;
    		line-height:20px;
    		text-align:center;
    		font-size:12px;
    		text-overflow:ellipsis;
    		overflow:hidden;
    	}
    	
    	#logo{
    		position:absolute;
    		top:325px;
    		left:672px;
    		width:82px;
    		height:52px;
    	}
    	
    	#more{
    		position:absolute;
    		width:61px;
    		height:25px;
    		line-height:25px;
    		top:175px;
    		left:656px;
    		background-color:#157ECC;
    		font-size:15px;
    		z-index:10;
    		color:#FFFFFF;
    		text-align:center;
    		cursor:pointer;
    		display:none;
    	}
    	#more:hover{
    		background-color:#2C9FF0;
    	}
    	#more:active {
    		background-image:url(res/buttonBlueActive.png);
    	}
    	
    	#hot_city{
    		float:left;
    		width:470px;
    	}
    	
    	#search_info{
    		float:left;
    		margin-left:0px;
    		margin-top:-2px;
    		width:150px;
    		padding:3 3 3 3;
    		border:#157ECC 1px solid;
    		border-radius:1px;
    		z-index:1;
    		color:#969696;
    	}
    	
    	#search{
    		float:left;
    		margin-left:198px;
    		margin-top:7px;
    		font-size:15px;
    		width:90px;
    		height:25px;
    		line-height:25px;
    		z-index:1;
    		text-align:right;
    		color:#505050;
    	}
    	
    	#title{
    		width:750px;
    		height:140px;
    		background-image:url(headMenuBackgroundImg.png);
    		background-repeat:no-repeat;
    	}
    
    	#title > label{
    		position:absolute;
    		font-family:"Arial Normal", "Arial";
    		font-size:20px;
    		color:#FFFFFF;
    		top:32px;
    		left:74px;
    		width:130px;
    		height:33px;
    	}
    
    	#tip{
    		position:absolute;
    		top:69px;
    		left:74px;
    		width:647px;
    		height:32px;
    		color:#FFFFFF;
    		font-size:13px;
    	}
    
    </style>
    <script type="text/tiscript">
    	include "./q.tis"
    	VM.unhandledExceptionHandler = function(err) 
    	{
            view.msgbox(#error, err.toString());
            return true;
        }
    	function self.ready(){
    		$(span#more).style["display"] = "block";
    		for (var i = 0; i < 8; i++){
    					var elem = new Element("a", "test");
    					$(div#hot_city).append(elem);
    					var pelem = new Element("p", "123");
    					var divelem = new Element("div", "");
    					divelem.append(pelem);
    					$(div.link).append(divelem);
    					divelem.style["margin-left"] = "80px";
    			}
    	}
    	$(span#more).onClick = function(){
    		if ($(span#more).text == "more"){
    			for (var i = 8; i < 80; i++){
    				
    					var elem = new Element("a", "test");
    					$(div#hot_city).append(elem);
    					elem.style["margin-top"] = "5px";
    				
    			}
    			var height = (80 / 8) * 10 + 50 + ((80 - 8) / 8) * 10 + "px"; 
    			var heights = (80 / 8) * 10 + 50 + ((80 - 8) / 8) * 10 + "px";
    			$(div.link).style["top"] = height;
    			$(hr#appline).style["margin-top"] = heights;
    			$(span#more).value = "drop";
    		}
    		else if ($(span#more).text == "drop"){
    			var elem = q("div.clearit > div > a");
    			for (var i = 0; i < 80; i++){
    				elem[i].remove();
    			}
    			for (var j = 0; j < 8; j++){
    					var elem = new Element("a", "test");
    					$(div#hot_city).append(elem);
    			}
    			$(div.link).style["top"] = "35px";
    			$(hr#appline).style["margin-top"] = "34px";
    			$(span#more).value = "more";
    		}
    	}
    </script>
    <body>
      <div #title>
        <label></label>
    	<p #tip></p>
      </div>
      <div style="float:left;margin-left:74px;margin-top:10px;font-size:15px;color:#505050;">now</div>
      <div #city style="float:left;margin-left:22px;margin-top:10px;font-size:15px;color:#505050;width:100px;"></div>
      <span #search>serach</span>
      <div style="float:left;margin-top:9px;font-size:15px;"><input|text id="search_info"></input></div>
      <br />
      <span #more>more</span>
      <div class="clearit">
        <div style="float:left;margin-left:74px;width:12%;color:#505050;">hot:</div>
          <div #hot_city>
    	 
    	  </div>
    	<div>
    	<hr #appline style="border:0;background-color:#99C5D6;height:1px;margin-top:34px;width:642px;margin-left:74px;"></hr>
    	<div class="link">
    	
    	</div>
    	</div>
      </div>
    </body>   
    </html>  

    When I click “more” and the scroll go the bottom,the htm is:
    https://s27.postimg.org/zf8nsctbz/image.png
    At this time, I click “drop”,the htm is:
    https://s27.postimg.org/du86ihlz3/image.png.
    I use sciter.exe which version is 4.0.0.1.Please help me,thanks

    • This topic was modified 4 months, 2 weeks ago by  Dothissq.
    • This topic was modified 4 months, 2 weeks ago by  Dothissq.
  • #49353

    Andrew
    Keymaster

    Please help me

    Help you to do what?

    Variants I see:

    1. To convert that stream of nightmares into something meaningful
    2. Or to make it working somehow

    To be short: what is your question?

  • #49362

    Dothissq
    Participant

    I want the html will be this:
    https://s28.postimg.org/mbpt2xbfh/image.png
    And When I click “drop”,it will be the first image, and the “test” won’t overlay with “hot”.

  • #49387

    Andrew
    Keymaster

    will be the first image

    Where is that image?

    What exactly are you trying to achieve by using float:left there?

    What exactly is this:

    var height = (80 / 8) * 10 + 50 + ((80 - 8) / 8) * 10 + "px"; 
    var heights = (80 / 8) * 10 + 50 + ((80 - 8) / 8) * 10 + "px";

    and why it is not in CSS?

You must be logged in to reply to this topic.