Using jquery, I am trying to slide a div embedded in an other

Hi
please help me, I don’t understand why stops working jquery in embedded situation? I try slide an embedded div in it’s parent div and it is not working. is there any explanation and help? thank you, frank

<!DOCTYPE html>
<html>
<head>

<style>
 .dv0{   
    background:pink;
    height:101px;
    width:201px;
    overflow-x:visible;
    }
 .dv1{   
    background:#98bf21;
    height:100px;
    width:100px;
    position:absolute;
    display:inline-flex;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){d
  
    $("dv1").animate({left: '100px'});
  });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div class="dv0">
<div class="dv1">1</div>
</div>

</body>
</html>

Hi there toronto2009,

an element can either be position:absolute
or display:inline-flex but not both. :eek:

Also note that you do not need a javascript
framework to animate the div element. :unhappy:

coothead

Hi there toronto2009,

here is a simple CSS example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#cb {
    position: absolute;
    left: -999em;
 }

label {
    display: block;
    width: 8em;
    padding: 0.35em 0;
    margin: 0.5em 0;
    border: 1px solid #999;
    border-radius: 0.5em;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    background-image: linear-gradient( to bottom, #fff, #ccc );
    text-align: center;
    cursor: pointer;
 }

label::after {
   content: 'right';
   margin-left: 0.25em;
 }

#cb:checked ~ label::after {
   content: 'left';
 }

#cb:checked ~ .dv div {
    margin-left: 6.25em;
    border-radius: 0 0.5em 0.5em 0;
 }

.dv { 
    width: 12.5em;
    height: 6.25em;
    border: 1px solid #000;
    border-radius: 0.5em;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    background: #ffc0cb;
 }

.dv div {   
    width: 6.25em;
    height: 6.25em;
    padding: 0.5em;
    border-radius: 0.5em 0 0 0.5em;
    box-sizing: border-box;
    box-shadow: inset 0 0 0.5em rgba( 0, 0, 0, 0.4 );
    background: #98bf21;
    transition: 0.5s ease-in-out;
 }
</style>

</head>
<body> 

 <input id="cb" type="checkbox">
 <label for="cb">move</label>

 <div class="dv">
  <div>1</div>
 </div>

</body>
</html>

coothead

1 Like

You have two typos.

First there is a stray d after the opening bracket for the button function.

$("button").click(function(){d

Secondly there is no element called dv1 but there is a class of that name.

$("dv1")

Add the dot.

$(".dv1")

Like so:

<script> 
$(document).ready(function(){
  $("button").click(function(){ 
    $(".dv1").animate({left: '100px'});
  });
});
</script>

@coothead has given you a much better example without the need for a framework :slight_smile:

I’m nitpicking a bit here but a flex element can be both of those but its behaviour will change according to situation as defined in the specs here.

There are rare situations where both are needed but 99% of the time its a mistake or the result of muddled thinking :wink:

2 Likes

I stand corrected. :winky:

Not enough research on my part. :unhappy:

It would have been better if I had just said that
neither were actually required. :biggrin:

coothead

No worries. I had to double check as I wasn’t sure.:slight_smile:

2 Likes

Hi there coothead
Thank you for help. I would like to ask for help in animation mater. searching the net for answer how to animate flex box, I could not find adecvat answer yet. you mentioned a solution, can you tell me a few words about it?thank you. frank

It is lovely. thank you, frank

There are many members here who will be
able to help you with animations.

All you have to do is define the problem fully,
with all the details that might be useful for it’s
solution.

coothead

1 Like

I try to build a video carousel, the available ones did not work, the “footage” enters in an endless loop. I have problem with " know-how too". I was thinking on pale up the frames with z-index so It can be played sequencialy or random. thank you, frank