Difference between revisions of "Demo why"

(Created page with "{{2015CSS}} <style> .pop_why_div { position: fixed; border: 2px solid gray; ... } </style> <div class='pop_why' data-poptitle='Instructors'>Why...")
 
 
(119 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{2015CSS}}
+
<html>
−
 
+
  
  
  
 
<style>
 
<style>
 +
 +
.wrappedP {
 +
float:left;
 +
}
 +
 +
.pop_why {
 +
 +
        border: 1px solid #f58631;
 +
        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 {
−
         position: fixed;
+
         position:fixed;
−
         border: 2px solid gray;
+
        margin: auto;
−
         ...
+
        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 18: Line 52:
  
  
−
<div class='pop_why' data-poptitle='Instructors'>Why</div>
 
  
 +
<div class="pop_why" data-poptitle="/Pop/Try2">?</div>
 +
<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>
  
−
<script>
+
 
−
// Attaches a hover script to every item with the class 'pop_why'
+
 
−
jQuery('.pop_why').hover(
+
 
−
        function() {
+
 
−
                // Does the pop_why_div need to be installed?
+
<script ="text/javascript">
−
                if ( ! jQuery(this).children('.pop_why_div').length ) {
+
$(document).ready(function() {
−
                        jQuery(this).append(\"<DIV class='pop_why_div'></div>\");
+
 
−
                        jQuery(this).find('.pop_why_div').load( this.data('poptitle') + '?action=raw');
+
// Attaches a hover script to every item with the class 'pop_why'
−
                }
+
$('.pop_why').hover(
−
                jQuery(this).find('.pop_why_div').show();
+
        function() {
−
        },
+
                      // Does the pop_why need to be installed?
−
        function() {
+
                if ( ! $(this).children('.pop_why_div').length ) {
−
                jQuery(this).find('.pop_why_div').clearQueue();
+
                        $(this).append("<DIV class='pop_why_div' style='display:block'>Loading...</div>");
−
        jQuery(this).find('.pop_why_div').hide();
+
                              $(this).find('.pop_why_div').load( $(this).attr("data-poptitle") + '?action=raw' );
−
                jQuery(this).find('.pop_why_div').clearQueue();
+
                }
−
                jQuery(this).find('.pop_why_div').hide();
+
                var foo = $(this).find('.pop_why_div').show();
−
        }
+
        } ,
−
);
+
        function() {
 +
                $(this).find('.pop_why_div').clearQueue();
 +
        $(this).find('.pop_why_div').hide();
 +
                $(this).find('.pop_why_div').clearQueue();
 +
                $(this).find('.pop_why_div').hide();
 +
}
 +
        );
 +
});
 
</script>
 
</script>
 +
 +
 +
 +
</html>

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.