All geek questions in one place

DIV animation after jQuery.html

I have a UL DIV. When the DIV is clicked, the page should animate the slide displaying information about the pressed topic. It works great. Now I have added the code below to add page 2, which will overwrite the sections above with new topics. When loading the page, you can click the div to view the information. But after selecting the next page when you click on the div. Nothing happened. For testing, I just redid divs. therefore, I know that the identifier names are the same. I am new to this, but feel that there may be an easier way to do this. I also wondered if there is an upper and lower div in the code to animate. after its change will now be upperhidden? Any help would be greatly appreciated. It seems to me that I did a terrible job explaining what to do. but I can ensure that I will ever need it.

UPDATE:
Thank you. I'll try again. I have a website. which has 2 lines of 3. These are images such as:

password | HMS | pluto
citrix | java | Email
Button1

say that you press the password, the page opens, like at the bottom of the top animated line up, and the bottom line animates down, and information opens between them.

password | HMS | pluto
     pw reset information
citrix | java | Email
Button1

This aspect is all working correctly. I added code that will replace the top and bottom lines. for testing, I have this where the bottom goes up and vice versa. When it button1changes to a click screen like this.

citrix | Java | email
password | HMS | pluto
button2

, , , ,

citrix | java |
  PW reset
| HMS |
button2

. jquery code $('#upper').html(jQuery("#upperhidden").html());, , divs , . 2 , divs , . , //.

, .

Javascript

jQuery(document).ready(function() {
  var divClone = $("#upper").clone();
  var divClone1 = $("#lower").clone();
  $("#button1").hide();
  $("#button1").click(function(event) {
    $("#car").show();
    $("#button1").hide()
    $("#upper").replaceWith(divClone.clone());
    $("#lower").replaceWith(divClone1.clone());
  });
});


jQuery(document).ready(function() {
  $("#car").click(function() { 
    $('#upper').html(jQuery("#upperhidden").html());
    $('#lower').html(jQuery("#lowerhidden").html());         
    $("#car").hide(); 
    $("#button1").show();
  });
});


 $(function()
  {
  var closed = true;
  $('.password').click(function()
                       {
    if (closed = true)
    {
      $("#upper").animate({'top' : '-200px'}, {duration: 400});
      closed = false;

      $("#maininfo").animate({'top' : '200px'}, {duration: 000});
      closed = false;

      $("#lower").animate({'top' : '400px'}, {duration: 400});
      closed = false;

      $("#filler").animate({'top' : '400px'}, {duration: 400});
      closed = false;

      var output = document.getElementById("maininfo");
      var sentence = '<h4>PASSWORD RESET</h4>';

      var open = true;
      output.innerHTML = sentence;
    }
    else
    {

    }
  });
});

function callShell(){
  var objShell = new ActiveXObject("WScript.shell");
  objShell.run('rundll32.exe user32.dll,LockWorkStation');
}

CSS


#upper, #lower {
  background: #849794;
  height: 300px;
  position: relative;
  z-index: 10;
}

#upper {
  /* For IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}

#upper ul {
  height: 100%;
  padding-top: 35px;
}

#upper ul li {
  display: inline-block;
  height: 230px;
  width: 230px;
  margin: 0 auto;
  margin-left: 30px;
}

#lower {
  background: #849794;
  height: 300px;
  overflow: hidden;
  /* For IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000');
}

#lower ul {
  height: 100%;
  padding-top: 35px;
}

#lower ul li {
  display: inline-block;
  height: 230px;
  width: 230px;
  margin: 0 auto;
  margin-left: 30px;
}

#filler {
  width: 100%;
  background: #849794;
  height: 400px;
  position: relative;
}


.password {
  background: url(../images/pr1.png);
  background-size: 100%;
}

.password:hover {
  background: url(../images/pr2.png);
  background-size: 100%;
}

.password:active {
  background: url(../images/pr3.png);
  background-size: 100%;
}

<div id="main">
    <div id="upper">
        <ul id="upper1">
            <!-- TOP BUTTONS -->
            <li class="password"></li>
            <li class="enable"></li>
            <li class="abstract"></li>
            <!-- TOP BUTTONS -->
        </ul>
    </div>
    <div id="upperhidden" style="display:none">
        <ul>
            <!-- TOP BUTTONS PAGE 2 -->
            <li class="abstract"></li>
            <li class="citrix"></li>
            <li class="password"></li>
            <!-- TOP BUTTONS PAGE 2 -->
        </ul>
    </div>
    <div id="maininfo">
    </div>
    <div id="lower">
        <ul id="lower1">
            <!-- BOTTOM BUTTONS -->
            <li class="threem"></li>
            <li class="citrix"></li>
            <li class="cerner"></li>
            <!-- BOTTOM BUTTONS -->
        </ul>
    </div>
    <div id="lowerhidden" style="display:none">
        <ul>
            <!-- BOTTOM BUTTONS PAGE 2 -->
            <li class="password"></li>
            <li class="enable"></li>
            <li class="abstract"></li>
            <!-- BOTTOM BUTTONS PAGE 2 -->
        </ul>
    </div>
    <div id="filler">
        <button id="car">Next Page</button>
        <button id="button1">Prev Page</button>
    </div>
</div>
+4
2

, JS-

if (closed = true)

=

if (closed == true)

, , "UL DIV"

+4

$('.password').on('click', function() { //do stuff here; }); $('.password').click(). .on('click', ...) DOM,

EDIT - http://jsfiddle.net/swm53ran/431/

$(document).ready(function() {
    $('.password').on('click', function() {
        if ($(this).hasClass('open')) {
            $('.content').fadeOut(500);
        	$('.bottom').animate({ marginTop: "0px" }, { duration: 1500, queue: false } );
            $('.top').animate({ marginTop: "0px" }, { duration: 1500, queue: false });
            var html = '';
            
            $(this).removeClass('open');
        }
        else {
            $(this).addClass('open');
            $('.bottom').animate({ marginTop: "+140px" }, { duration: 1500, queue: false });
            $('.top').animate({ marginTop: "-70px" }, { duration: 1500, queue: false });
            var html = 'this is the password stuff that goes in this place.';
            $('.content').html(html).fadeIn(3000);
        }        
    });
    $('.btn1').on('click', function() {
    	var newtop = $('.top').clone(true).removeClass('top').addClass('bottom');
        var newbot = $('.bottom').clone(true).removeClass('bottom').addClass('top');
        $('.upper').html('').append(newbot);
        $('.lower').html('').append(newtop);
    });
});
li {
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}
.main {
    margin-top: 100px;
    margin-bottom: 100px;
}
.btnDiv {
    display: inline-block;
    margin-left: 100px;
}
.content {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="upper">
        <ul class="top">
            <li class="password">password</li>
            <li class="hms">HMS</li>
            <li class="pluto">pluto</li>
        </ul>
    </div>
    <div class="content"></div>
    <div class="lower">
        <ul class="bottom">
            <li class="citrix">citrix</li>
            <li class="java">java</li>
            <li class="email">email</li>
        </ul>
    </div>
</div>
<div class="btnDiv">
    <button class="btn btn1">switch</button>
</div>
Hide result
+1

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

More articles:


All Articles