All geek questions in one place

Divide the div into two parts and load the content in the second half

I have a div div and there are several css maps in it. I want to load this map into the second window (when I click this map on the div div, the window should be divided into two and load this map into the second div. But far I can’t cut the div just by clicking.

 var  $m = $("#split"), size = 2;

$m.click(function(){
  
    var  _size = $m.width/size;
    var i= "sec";
    
    
        $m.append(
            $('<div id='+ i +'/>')
            .css('background-color', 'white'));
       

    $m.find('> div').css({ width:_size, height:_size });

});
#split{
height:700px;
width:500px;
}

.tu{
        height: 162px;
    width: 350;
    float: left;
   
    position: relative;
    
}

 .gradient {
  
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
    background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
    background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
    background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="split" style="width:100%;">
        <div class="tu">
          <div class="card">
              <div class="gradient">
            <div class="card-image">
              <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
              </div>
          </div>
        </div>
        
        </div>
Run codeHide result

What I want is when I click on the .tu class. #split should be divided into two parts and show the loading of tu in the second half.

+4
source share
2 answers

Here you will find the solution https://jsfiddle.net/5kj0xoh4/

var  $m = $("#split"), size = 2;

$m.click(function(){
  
  var  _size = $m.width/size;
  var i= "sec";
	$m.append(
    $('<div id='+ i +'></div>')
    	.html($m.html())
      .css('background-color', 'white'));
  	
    $m.find('> div').css({ width:_size, height:_size }
  );

});
#split{
height:700px;
width:500px;
}

.tu{
  height: 162px;
  width: 50%;
  float: left;
  position: relative;
}

.gradient {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
  background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
  background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
  background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row" id="split" style="width:100%;">
  <div class="tu">
    <div class="card">
        <div class="gradient">
      <div class="card-image">
        <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg">
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information.
        I am convenient because I require little markup to use effectively.</p>
      </div>
        </div>
    </div>
  </div>
</div>
Run codeHide result

Change the width of the container .tufrom 350to 50%.

Hope this helps you.

+1

, , .

, , :

var $m = $("#split");

$m.on("click", function(){
    var tu = $m.find(".tu").first();
    var i = tu.length + 1;
    var _size = tu.width()/i;

    $m.append(
        $('<div id='+ i +' class="tu"></div>')
            .html($m.find(".tu").first().html())
            .css('background-color', 'white'));
       

    $m.find('.tu').css({ width:_size, height:_size });

});
#split{
height:700px;
width:500px;
}

.tu{
    height: 162px;
    width: 350px;
    float: left;
   
    position: relative;
    
}

 .gradient {
  
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
    background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
    background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
    background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="split" style="width:100%;">
        <div class="tu">
          <div class="card">
              <div class="gradient">
            <div class="card-image">
              <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
              </div>
          </div>
        </div>
        
        </div>
Hide result
0

Source: https://habr.com/ru/post/1684521/

More articles:


All Articles