Difference between revisions of "Demo why"

 
(83 intermediate revisions by 2 users not shown)
Line 4: Line 4:
  
 
<style>
 
<style>
 +
 +
.wrappedP {
 +
float:left;
 +
}
 +
 
.pop_why {
 
.pop_why {
−
         position: fixed;
+
 
−
         border: 2px solid gray;
+
         border: 1px solid #f58631;
−
width:70px;
+
         width: 18px;
 +
        color:#f58631;
 +
font-weight: bold;
 +
text-align:center;
 +
border-radius: 50%;
 +
float:left;
 +
margin-right:5px;
 +
margin-left:5px;
 
}
 
}
 +
 +
.pop_why:hover {
 +
        color: #fff;
 +
        background-color:#f58631;
 +
font-weight: normal;
 +
}
 +
 
.pop_why_div {
 
.pop_why_div {
−
         width:200px;
+
        position:fixed;
−
         height: 200px;
+
        margin: auto;
−
         background-color:blue;
+
        top: 100px;
 +
         width:400px;
 +
         color:black;
 +
         background-color: white;
 +
        border: 2px solid #f58631;
 +
        border-radius: 5px;
 +
        padding: 10px 10px 10px 10px;
 +
        text-align:left;
 +
-webkit-box-shadow: -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
-moz-box-shadow:    -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
box-shadow:        -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
 
 
}
 
}
 
</style>
 
</style>
Line 22: Line 52:
  
  
−
<div class="pop_why" data-poptitle="/Pop/Instructors">Why</div>
+
 
 +
<div class="pop_why" data-poptitle="/Pop/Try2">?</div>
 
<br>
 
<br>
 +
<br><br><br>
 +
 +
 +
<div class=wrappedP> <p> Lorem ipsum dolor sit amet </p></div> <div class="pop_why" data-poptitle="/More/TeamSize">?</div> <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
 +
</div>
 +
 +
<br>
 +
<br><br><br>
 +
 +
  
  
Line 33: Line 74:
 
$('.pop_why').hover(
 
$('.pop_why').hover(
 
         function() {
 
         function() {
−
                // Does the pop_why need to be installed?
+
                      // Does the pop_why need to be installed?
 
                 if ( ! $(this).children('.pop_why_div').length ) {
 
                 if ( ! $(this).children('.pop_why_div').length ) {
 
                         $(this).append("<DIV class='pop_why_div' style='display:block'>Loading...</div>");
 
                         $(this).append("<DIV class='pop_why_div' style='display:block'>Loading...</div>");
−
                                        var page_url = $(this).data("poptitle");
+
                               $(this).find('.pop_why_div').load( $(this).attr("data-poptitle") + '?action=raw' );
−
alert( page_url );
+
−
                               $(this).find('.pop_why_div').load( page_url );
+
 
                 }
 
                 }
−
 
 
                 var foo = $(this).find('.pop_why_div').show();
 
                 var foo = $(this).find('.pop_why_div').show();
−
 
 
         } ,
 
         } ,
−
 
 
        function() {
 
        function() {
−
 
 
                 $(this).find('.pop_why_div').clearQueue();
 
                 $(this).find('.pop_why_div').clearQueue();
 
         $(this).find('.pop_why_div').hide();
 
         $(this).find('.pop_why_div').hide();

Latest revision as of 15:00, 9 February 2015

?




Lorem ipsum dolor sit amet

?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.