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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

Image
recently have uploaded wordpress site onto server. have uploaded wordpress site in sub-folder under root folder ../root(domain root folder)/wordpress (where host wordpress folder). now problem content data in page or post in dashboard of wordpress admin panel not showing - see image. but data showing in front view - see image. if not browser cache issue , not issue happened tinymce editor during upgrade; try add config file: define('concatenate_scripts', false);
Read more

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

i trying ip address of vm , trying use establish ssh vm. following script: --- - hosts: localhost become: yes connection: local gather_facts: false serial: 1 vars_files: - createvmvars.yml tasks: - name: gathering vm info. vsphere_guest: vcenter_hostname: "{{vcenter_hostname}}" username: "{{vcenter_username}}" password: "{{vcenter_password}}" guest: "{{guest_name}}" vmware_guest_facts: yes register: var - debug: msg="{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" - name: establishing ssh connection. script: /home/shasha/devops/scripts/ssh_configure.sh "{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" following content of ssh_configure.sh : #!/bin/sh ssh-keygen -t rsa ssh-copy-id $1 but when running playbook, getting following error while executing third task: error! 'var' undefined but debug module(second task) printin
Read more

javascript - Get parameter of GET request -

i make request: createxhrrequest( "get", fileurl, function( err, response ) { if( err ) { alert( "error get!" ); } alert(response); }); and full response: { "status" : "ok", "message" : "jvberi0xljqkjdduxdgkmy how can jvberi0xlj ? i try response.message , response["message"]. nothing works. just simple access this: var json = json.parse(response); json.message
Read more