Solved

div close

Posted on 2013-10-26
5
381 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Close "X" button on window popup in Firefox 7 36
jQuery scrollTop 2 40
Having problem getting this to work 2 18
two layers of simple javascript validation 2 21
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 …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now