Geek asks and answers

Creating a lamp pull chain in CSS and HTML

Take a look at the following image:

enter image description here

I am trying to create higher in CSS and then use some Javascript, so when people click in a circle it pulls down (i.e. the chain gets longer). The next click will pull it back.

That's what I still have, but I'm not sure I'm on the right track.

http://jsfiddle.net/5CLUg/9/

#pull-chain{    
    display: block;
    position: absolute;
    right: 70px;
    width: 15px;
}
#pull-chain .chain{
    border-left: 2px dotted #333;
    height: 200px;
}   
#pull-chain .handle{
    background-color: #333;
    width:15px;
    height:15px;
    border-radius: 50%;
    position: relative;
    left: -6px;
}

<div id="pull-chain">
    <div class="chain"></div>
    <div class="handle"></div>
</div>

Any idea on how to improve it will be appreciated.

+3
source share
4 answers

You can simply add an event listener for the event clickand use classList.toggle()to add or remove a class. Then for this class you can simply configure height:

http://jsfiddle.net/5CLUg/5/

var el = document.getElementById("pull-chain");

el.addEventListener("click", function() {
    el.classList.toggle("pulled");
}, false);

CSS

#pull-chain.pulled .chain {
    height: 350px;
}

, , transition .chain:

#pull-chain .chain {
    /* removed other declarations for clarity */
    transition: height 0.5s ease-in-out;
}

: http://jsfiddle.net/5CLUg/8/

, CSS , . - . .chain #pull-chain .chain .. CSS .pulled .chain. , , , height.

+4

, , , CSS.

:

  • , .
  • , .
  • A div, .

checked, :checked ( ). , checked , .

() (div), , , .

#pull-chain {
  display: none; /* no need to display checkbox */
}
#chain {
  position: relative;
  margin: 0px auto;
  border-right: 2px dotted tomato;
  height: 200px;
  width: 15px;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  transition: height 0.5s;
}
#handle {
  display: block;
  position: absolute;
  /* left: width of chain div (15px) + half of border (1px) - radius of handle (8px)*/  
  left: 8px; 
  bottom: 0%;
  background-color: tomato;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer
}
#pull-chain:checked + #chain > #handle {
  background-color: seagreen;
}
#pull-chain:checked + #chain {
  height: 250px;
  border-color: seagreen;
}
<input type="checkbox" id="pull-chain" />
<div id="chain">
  <label for="pull-chain" id="handle"></label>
</div>
Hide result
+3

, CSS : http://jsfiddle.net/xrj5w/6/

<div id="pull-chain">
    <a id="pulled" href="#"></a>
    <a class="unpulled" href="#pulled"></a>
    <div class="chain"></div>
</div>

...
#pull-chain .unpulled {
    z-index: 10; /* makes sure #unpulled is the initial click target */
}
#pull-chain #pulled:target {
    top: 230px;
    z-index: 20; /* after .unpulled is clicked, #pulled becomes the new click target */
}
#pull-chain #pulled:target + .unpulled {
    top: 230px;
}
#pull-chain #pulled:target + .unpulled + .chain {
    height: 230px;
}
+1

http://jsfiddle.net/5CLUg/7/
, , : D

BTW , , , . CREDIT TO: http://jsfiddle.net/rashomon/8vLQ9/

#pull-chain{    
    display: block;
    position: absolute;
    right: 70px;
    width: 15px;
}
#pull-chain .chain{
    border-left: 2px dotted #333;
    height: 250px;
}   
#pull-chain .handle{
    background-color: #333;
    width:15px;
    height:15px;
    border-radius: 50%;
    position: relative;
    left: -6px;
}    

<body>
<div id="pull-chain"><div class="chain" style="padding-left: 0px; padding-right: 0px; margin-right: 0px;"></div><div class="handle" style="padding-right: 0px; margin-right: 0px;"></div></div>
</body>  

$(document).ready(function() {

    var $handle = $('.handle'),
        $chain = $('.chain'),
        $initHeight = 200; // Initial height

    $chain.each(function() {
        $.data(this, "realHeight", $(this).height());    // Create new property realHeight
        }).css({ overflow: "hidden", height: $initHeight + 'px' });

    $handle.toggle(function() {
          $chain.animate({ height: $chain.data("realHeight") }, 600);          
        }, function() {
            $chain.animate({ height: $initHeight}, 600);
        });
});
0

More articles:


All Articles