css - change the position of an overlay using custom data attributes -
i have problem assignment know have mixed many things , not work @ all. please me? task
the overlay has opened @ specified left , top positions. these positions should specified in link used open overlay, using custom data attributes data-x , data-y show overlay if neither of 2 data attributes or 1 of them provided, default values css should used missing values. also, make sure values data-x , data-y not outside window area. can access inner width , inner height of current browser window window.innerwidth , window.innerheight, respectively.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <title>output</title> <style> /* overlay: */ .overlay { /* general properties: */ /* - hidden when page first displayed */ display: none; /* - displayed on top of other page elements */ z-index: 10000; /* - fixed position */ position: fixed; top: 50px; left: 50px; /* appearance: */ background-color: #ffffcc; width: 200px; height: 200px; padding: 5px; border: 1px solid #000000; -moz-box-shadow: 0 0 40px 5px #000000; box-shadow: 0 0 40px 5px #000000; -webkit-box-shadow: 0 0 40px 5px #000000; } /* close button: */ .overlay-close { /* button image: */ background-image: url(picture.jpg); /* location: */ position: absolute; right: -15px; top: -15px; /* mouse cursor: */ cursor: pointer; /* size: */ height: 35px; width: 35px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> /*var width = window.innerwidth; alert(width);1366 var heigth= window.innerheight; alert(heigth);667*/ /* extend overlay code virtual session overlay can opened at specified left , top positions. these positions should specified in link used open overlay, using custom data attributes data-x , data-y: <a href="#" data-overlay-id="#overlay1" class="overlay-link" data-x="100" data-y="50"> show overlay</a> if neither of 2 data attributes or 1 of them provided, default values css should used missing values. also, make sure values data-x , data-y not outside window area. you can access inner width , inner height of current browser window with window.innerwidth , window.innerheight, respectively.*/ $(document).ready(function() { $('a.overlay-link').click(function() { var my_overlay_id = $($(this).attr('data-overlay-id')); my_overlay_id.prepend('<div class="overlay-close"></div>').show(); var left = $($(this).attr('data-x'));// these act kind of containers elements can stored , attributed value later on (custom data attributes) $(this).css({left: left+"px"}); var top = $($(this).attr('data-y')); $(this).css({top: top+"px"}); if( $(this).css({left: left+"px"}) && $(this).css({top: top+"px"}) == 0 || $(this).css({left: left+"px"})== 0 || $(this).css({top: top+"px"})== 0 ){ $(this).css({left: 50 +"px"}); $(this).css({top: 50 +"px"}); } $(document).on('click', '.overlay-close', function() { my_overlay_id.hide(); }); }); }); </script> </head> <body> <h3>output:</h3> <div id="overlay1" class="overlay"> <h2 data-overlay-title = 'jesus love you'>hello, world!</h2> <p>i overlay.</p> </div><a href="#" data-overlay-id="#overlay1" class="overlay-link" data-x="1000" data-y="1000" >show overlay</a> </body> </html>
yeah, mixing things, take @ this:
$(function() { $('a.overlay-link').on('click', function() { var my_overlay_id = $( $(this).attr('data-overlay-id') ) , left = $(this).attr('data-x') , top = $(this).attr('data-y') , winw = $(window).width() , winh = $(window).height(); if( left > winw ) { left = 100; } if( top > winh ) { top = 100; } my_overlay_id.prepend('<div class="overlay-close"></div>').show(); my_overlay_id.css({left: left+'px', top: top+'px'}).show(); }); $(document).on('click', '.overlay-close', function() { $('.overlay').hide(); }); });/* overlay: */ .overlay { /* general properties: */ /* - hidden when page first displayed */ display: none; /* - displayed on top of other page elements */ z-index: 10000; /* - fixed position */ position: fixed; top: 50px; left: 50px; /* appearance: */ background-color: #ffffcc; width: 200px; height: 200px; padding: 5px; border: 1px solid #000000; -moz-box-shadow: 0 0 40px 5px #000000; box-shadow: 0 0 40px 5px #000000; -webkit-box-shadow: 0 0 40px 5px #000000; } /* close button: */ .overlay-close { /* button image: */ background-image: url(picture.jpg); /* location: */ position: absolute; right: -15px; top: -15px; /* mouse cursor: */ cursor: pointer; /* size: */ height: 35px; width: 35px; border: 1px solid red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>output:</h3> <div id="overlay1" class="overlay"> <h2 data-overlay-title = 'jesus love you'>hello, world!</h2> <p>i overlay.</p> </div><a href="#" data-overlay-id="#overlay1" class="overlay-link" data-x="1000" data-y="1000" >show overlay</a> <br /> <div id="overlay1" class="overlay"> <h2 data-overlay-title = 'jesus love you'>hello, world!</h2> <p>i overlay.</p> </div><a href="#" data-overlay-id="#overlay1" class="overlay-link" data-x="250" data-y="0" >show overlay</a>
Comments
Post a Comment