Solved

div close

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

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Adding Extra Information box 4 25
C3-->D3 Line Chart 4 19
Phone Dialer 5 36
Re-position sub-options beneath the TAB 7 42
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…

760 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

20 Experts available now in Live!

Get 1:1 Help Now