Solved

div close

Posted on 2013-10-26
5
389 Views
Last Modified: 2013-10-26
I have below codes in one of the js file, and I just want to create "x" on the right top corner, and once the "x" is clicked, it will close the div. how can I do that?

Thanks

 var myOptions = {
	        content: '<div class="infobox"><div class="image"><img src="http://xxx/imag.png" alt=""></div><div class="title"><a href="detail.html">' + unescape(location[3]) + '<br>' + unescape(location[5]) + ', ' + unescape(location[6]) + '</a></div><div class="area"><span class="key">Phone No.:</span><span class="value">' + unescape(location[7]) + '</span></div><div class="price">' + unescape(location[8]) + '</div><div class="link"><a href="detail.html">View more</a></div></div>',
             
            disableAutoPan: false,
	        maxWidth: 0,
	        pixelOffset: new google.maps.Size(-146, -190),
	        zIndex: null,
	        closeBoxURL: "",
	        infoBoxClearance: new google.maps.Size(1, 1),
	        position: new google.maps.LatLng(location[0], location[1]),
	        isHidden: false,
	        pane: "floatPane",
	        enableEventPropagation: false
	    };

Open in new window

0
Comment
Question by:solution1368
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39603133
I highly suggest going through some basic jquery courses.  If you spend 5 hours on something like http://www.codecademy.com/learn you will end up saving ten fold in the short term.

You did not post enough code for me to understand exactly what you are doing.  I have a simple example you can use in your own way.   http://jsbin.com/aQIJEpi/1/edit?html,css,js,output

The code for the jsbin I posted is below.  I also noticed you  have some open questions that would be nice to close out before we get too deep into this one.  


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>Padas</title>
</head>
<body>
  <h1><a href="http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28278111.html">Experts Exchange Q_28278111</a></h1>
  <div class="wrap">
    <div class="box open"><span class="close">x</span>This some some content for a box. This some some content for a box. This some some content for a box. This some some content for a box. This some some content for a box. This some some content for a box. This some some content for a box. This some some content for a box.This some some content for a box.This some some content for a box. This some some content for a box.This some some content for a box.</div>
    
  </div>
      <button class="openbox">Open It</button>
</body>
</html>

Open in new window

.wrap{
  margin-top:30px;
  
}

.box{
  border-style:solid;
  border-width:5px;
  margin-bottom:10px;
  min-height:100px;
  
}
.box span{
  float:right;
  font-size:30px;
  margin-right:10px;
  margin-left:10px;
  
}
.openbox{display:none;}

Open in new window

// Change the cursor to a pointer when you hover the X
$('.close').css( 'cursor', 'pointer' );

// When you click the X, hide it
$('.close').click(function(){
     $('.open').hide();
       // show the button
     $('.openbox').show();
 
});
// When you click the Open It button, show the hidden div
$('.openbox').click(function(){
     $('.open').show();
      // hide the button
     $('.openbox').hide();
 
});

Open in new window

0
 

Author Comment

by:solution1368
ID: 39603158
I can't post the entire js file here for u. But below is exactly what I have for this <div></div>
section. I added <span>x</span>
so when the x is clicked, infobox div is closed.

That is all I need.


 content: '<div class="infobox"><div><span class=close>x</span></div><div class="image"><img src="xxx/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">' + unescape(location[3]) + '<br>' + unescape(location[5]) + ', ' + unescape(location[6]) + '</a></div><div class="area"><span class="key">Phone No.:</span><span class="value">' + unescape(location[7]) + '</span></div><div class="price">' + unescape(location[8]) + '</div><div class="link"><a href="detail.html">View more</a></div></div>',
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39603162
If you looked at my sample, it is right here

// When you click the X, hide it
$('.close').click(function(){
     $('.open').hide();
       // show the button
     $('.openbox').show();
 
});

Open in new window

You can convert the above sample to meet your needs as below.  
// When you click the X, hide it
$('.close').click(function(){
     $('.infobox').hide();

});

Open in new window

You will want to make sure jquery is loaded first and also wrap the code in a ready function
$(function() {
  // Handler for .ready() called.
  $('.close').click(function(){
     $('.infobox').hide();
})
});

Open in new window

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39603168
Looks like you're dynamically creating the content, so you need to delegate the click event using on(). This will do it:

$(document).on('click', 'span.close', function() {
   $(this).parents('.infobox').hide();
});

Open in new window

FYI - wrap your class name in quotes:

<span class='close'>x</span>
0
 

Author Closing Comment

by:solution1368
ID: 39603406
thank. You are right. It is dynamic called by wcf. and .on does work
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question