Solved

div close

Posted on 2013-10-26
5
385 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
  • 2
  • 2
5 Comments
 
LVL 52

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 52

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…

838 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