?
Solved

div close

Posted on 2013-10-26
5
Medium Priority
?
391 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 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…
Suggested Courses

801 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