divを動的に下位に配置しますか？

-1

div（.field_slide-produit）の位置を検出するためにjQueryを使用しようとしています。その位置を使用して、左下に正確に別のdiv（.slider-content）を配置できます。これを置き換える必要がありますウィンドウのサイズを動的に変更します。divを動的に下位に配置しますか？

私はこのコードを使用しましたが、うまくいかない理由は何ですか？

var offset = $('.field_slide-produit').offset(); 
var height = $('.field_slide-produit').height(); 
var width = $('.field_slide-produit').width(); 
var top = offset.top + height + "px"; 
var right = offset.left + width + "px"; 

$('.slider-content').css({ 
'position': 'absolute', 
'right': right, 
'top': top 
}); 

// listen the window changes and correct the newdiv position 
$(window).resize(function(){ slider-content(); });

このコードはここcodepenである：http://codepen.io/Laurentfrom47/pen/wJEKVb

おかげ

出典

2017-03-27 Laurent

あなたは 'slider-content（）;'関数を呼び出しますが、それは関数と呼ばれていません。それが機能するように、その関数内にコードを入れてください。 –

また、あなたのペンにはjqueryが含まれていないので動作しません。 –

これは望ましい結果ですか？ [codepen]（http://codepen.io/anon/pen/VpGedg） – SerCrAsH

を取得します呼んでいるが、

function slider-content(){ 
$('.slider-content').css({ 
'position': 'absolute', 
'right': right, 
'top': top 
}); 
}

を定義していないthatsのあなただけの仕事でもあなたの仕事

あなたはmoveitクラスとその絶対を追加することができますので、サイズ変更はうまく動作します

<head> 
    <title></title> 
</head> 
<style type="text/css"> 
.field_slide-produit { 
    width: 800px; 
    height: 300px; 
    background-color: blue; 
} 

.slider-content { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 
.main_container{ 
    position: relative; 
} 
.moveit{ 
     position: absolute; 
    bottom: 10px; 
    left: 10px; 
} 
</style> 

<body> 
<div class="main_container"> 
    <div class="field_slide-produit"> 
    </div> 
    <div class="slider-content moveit"> 
    </div> 

</div> 
</body> 

</html>

出典

2017-03-28 04:29:32

は、あなたがそこjqueryのファイルが含まれていますか？ウィンドウのサイズ変更にも

、スライダー・コンテンツ（）関数は、これらの点をチェックして、あなたはあなたが行うことができ、あなたの予想結果

出典

2017-03-27 09:47:18

実際に私はこれが必要ですhttp://i.imgur.com/EJBkond.jpg – Laurent

申し訳ありません私http://codepen.io/Laurentfrom47/pen/wJEKVb – Laurent

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <title></title> 
    <style type="text/css"> 
    .field_slide-produit { 
    width: 800px; 
    height: 300px; 
    background-color: blue; 
    } 

    .slider-content { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    } 
    </style> 
</head> 

<body> 
    <div class="field_slide-produit"></div> 
    <div class="slider-content"> 
    </div> 
    <script> 
    var offset = $('.field_slide-produit').offset(); 
    var height = $('.field_slide-produit').height(); 
    var width = $('.field_slide-produit').width(); 

    var slider_height = $('.slider-content').height(); 
    var slider_width = $('.slider-content').width(); 

    var new_top = Number(height - (offset.top + slider_height)) + "px"; 
    var new_left = (offset.left + offset.left) + "px"; 
    function slidercontent() { 
    $('.slider-content').css({ 
     'position': 'absolute', 
     'left': new_left, 
     'top': new_top 
    }); 
    } 
    slidercontent(); 
    // listen the window changes and correct the slider-content div position 
    $(window).resize(function() { 
    slidercontent(); 
    }); 
    </script> 
</body> 

</html>

出典

2017-03-28 04:25:11

divを動的に下位に配置しますか？

答えて

関連する問題