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

HTML & CSS
1

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>
2

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

3

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
4

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
5

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

6

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

2 Likes
7

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

8

It is lovely. thank you, frank

9

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

2 Likes
10

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

11

Hi
I postpone the videocarusel.I have the code below.

If I put buttons in form placed in .containerfrm it will not work. can I get help with it? thank you.

12

Hi there toronto2009,

are you looking for something like this example…

CSS Content Changer

coothead

13

yes but for form. if I put form in .containerfrm and .frame in form, buttons /left, right/ won’t work .frame, just outside form. why?thank you.

14

Hi there toronto2009,

change this…

<div class="slider">
	<div class="containerfrm">
		<div class="frame">1
		</div>
		<div class="frame">2 
		</div>
	</div>
</div>
<button class="left">Go Left</button>
<button class="right">Go Right</button>

…to this…

<div class="slider">
	<div class="containerfrm">
		<div class="frame">1
                <button class="left">Go Left</button>     
		</div>
		<div class="frame">2 
                <button class="right">Go Right</button>      
		</div>
	</div>
</div>

coothead

15

this is what try to get but I am not re if the code is ok

16

this…

</div>
<button class="left">Go Left</button>
<button class="right">Go Right</button>
</body>
</html>

…should now be this…

</div>

</body>
</html>

coothead

17

in fact I need just the internal buttons , is it ok rest of the code?

18

Hi
Please help me. here is me code, if I put sliding control buttons is sliding area stops working. somehow form would affect there work./sliding control button doesn’t work in form/ I was thinking on combinators, possibly with jquery.
https://codepen.io/cfrank2000/pen/BaareGW.
thank you

19

Hi there toronto2009,

this project really does not need overkill so
I have removed all this extravagance …

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

…and reduced the HTML code somewhat. :winky:

Play around with this…

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

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

<title>HTML Tutorial</title>

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

<style media="screen">
h1 {
    padding: 1em 0;
    font-size: 1.25em;
    color: #555;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

.slider {
    max-width: 62.5em;
    margin: auto;
    border: 1px solid #060;
    box-shadow: 0.5em 0.5em 0.5em rgba( 0, 0, 0, 0.3 );
    overflow: hidden;
 }

.slider form {
    display: flex;
    flex-wrap: nowrap;
    width: 200%;
 }

.slider div {
    position: relative;
    width: 100%;
    padding: 2em 2em 4em;
    box-sizing: border-box;
    background-color: #90ee90;
    transition: 1s ease-in-out;		
	}

.slider label {
    display: block;
    margin: 0.5em 0;
 }

.slider input[type=email], 
.slider input[type=password],
.slider textarea {
    width: 100%;
    padding: 0.25em;
    margin: 0.5em 0;
    font-size: 1em;
    resize: vertical;
 }

.slider textarea {
    width: 48.5%;
 }

.slider input[type=checkbox] {
    margin-right: 0.75em;
 }

#goleft, 
#goright {
    position: absolute;
    left: -999em;
 }

#goleft:checked ~ .slider div {
    margin-left: -50%;
 }

#goright:checked ~ .slider div {
    margin-left: 0;
 }

.slider label[for=goleft],
.slider label[for=goright] {
    position: absolute;
    bottom: 1em;
    display: block;
    width: 6em;
    padding: 0.25em 0;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-image: linear-gradient( to bottom, #fff, #ccc );
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    text-align: center;
    cursor: pointer;
 }
</style>

<body>

 <h1>This is a contact form</h1>

 <input type="radio" id="goleft" name="r">
 <input type="radio" id="goright" name="r" checked>

<div class="slider">
 <form action="#">
  <div>
   <label for="email">Email address:</label>
   <input type="email" id="email" name="email" required>
   <label for="pwd">Password:</label>
   <input type="password" id="pwd" name="pwd" required>
   <label for="goleft">Go Left</label>
  </div>

  <div>
   <label for="comment">Comment:</label>
   <textarea rows="5" id="comment" name="comment"></textarea>
   <label><input type="checkbox">Remember me</label>
   <label for="goright">Go Right</label>
  </div>
 </form>	
</div>

</body>
</html>

coothead

1 Like
20

Hi
Many thanks for this amazing code. it runs even in ie. my version did not work in ie that is why I experimented the previous code. If I want to ad submit and reset button can do in the bottom of the form?thank you.