You can use jQuery to hide the div. And give the IMAGE an alphabet "X" or an image with x or anything. But the div should have the class or id to close it.
This will hide it. After clicking on "X" You can use id of "X" in the first and id of div in the last one! So a click in "X" will hide the div.
The div in my last post is the dialog that drops down and I think you are correct that's where I need to put the CLOSE button but how using your example?
I will create the whole div for you with explaination.
<div class="div">
<p>My text<p><span class="hider" style="float: left">X</span>
</div>
// float left will make it float to the left side. And will be present on left.
<script>
$(document).ready(function() {
$(".hider").click(function() {
$(".div").hide();
});
});
</script>
This is the code needed to close the div with class "div" when the click is happened on X with class hider.
Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~
simflex
Member
69 Points
248 Posts
Adding a Close(X) button to div - how?
Jan 18, 2013 12:42 AM|LINK
GTSelection = function(){ //alert(basemapselection); if(gtselection == "" || gtselection == "close") { //alert(gtselection); graphicwipeInOne(); WipeOutControl(dojo.byId("measureToolDiv"), 500); WipeOutControl(dojo.byId('divBaseMapTitleContainer'), 500); } else if(gtselection == "open") { //alert(gtselection); graphicwipeOutOne(); } }A div with different graphing tools dropdown.
The html for that div is below:
This works good.
The problem is that you will have to click the same pen-looking icon to close the div.
This is not intuitive at all.
We would like to add a Close(X) icon to this div so that when it drops down, users can click the X or Close icon to hide it .
I appreciate any assistance with getting this task accomplished
raju dasa
Star
14410 Points
2451 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 04:43 AM|LINK
Hi,
Try this updated code: (make sure u have close.png)
GTSelection = function(){
//alert(basemapselection);
if(gtselection == "" || gtselection == "close")
{
//alert(gtselection);
graphicwipeInOne();
WipeOutControl(dojo.byId("measureToolDiv"), 500);
WipeOutControl(dojo.byId('divBaseMapTitleContainer'), 500);
document.getElementById("imgMarkup").src="MapViewer/images/close.png";
}
else if(gtselection == "open")
{
//alert(gtselection);
graphicwipeOutOne();
document.getElementById("imgMarkup").src="MapViewer/images/pen.png";
}
}
//or try toggling image paths
rajudasa.blogspot.com || blog@opera
simflex
Member
69 Points
248 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 01:27 PM|LINK
Thanks a lot raju for your help.
What happens to this html below?
How do I modify it to work with your changes in the js?
Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 03:56 PM|LINK
You can use jQuery to hide the div. And give the IMAGE an alphabet "X" or an image with x or anything. But the div should have the class or id to close it.
http://www.w3schools.com/jquery/jquery_hide_show.asp
This page will show.
~~! FIREWALL !~~
simflex
Member
69 Points
248 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 04:25 PM|LINK
Thanks Afzaal,
Do you mean something like this?
Notice, I added the call the jQuery <button>Hide</button> next to the div. Is that correct?
<button>Hide</button><div id="graphicToolDiv" style="visibility:hidden;"> <div style=" padding: 2px;"> <table cellpadding="2" border="0" bordercolor="#e0e0e0" STYLE="border-collapse:collapse"> <tr> <td><div dojoType="dijit.form.ToggleButton" id="pointgraphicIcon" iconClass="pointgraphicIcon" onclick="toggleButtonIcon(this);disconnectOnClick();tb.activate(esri.toolbars.Draw.POINT);" showLabel="false">Draw Point</div></td> <td><div dojoType="dijit.form.ToggleButton" id="freehandpolygraphicIcon" iconClass="freehandpolygraphicIcon" onclick="toggleButtonIcon(this);disconnectOnClick();tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);" showLabel="false">Draw Free Hand Polygon</div></td> <td><div dojoType="dijit.form.ToggleButton" id="freehandlinegraphicIcon" iconClass="freehandlinegraphicIcon" onclick="clearmeasureTool();toggleButtonIcon(this);disconnectOnClick();tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);" showLabel="false">Draw Free Hand Line</div></td> </tr> </table> </div> </div>Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 04:31 PM|LINK
Your code is something new to me. I hope you are writing it good. Because I never learnt it this way.
I used something like
<script> $(document).ready(function() { $("id_or_class_of_button").click(function() { $("id_or_class_of_div_to_be_closed").hide(); }); }); </script>This will hide it. After clicking on "X" You can use id of "X" in the first and id of div in the last one! So a click in "X" will hide the div.
~~! FIREWALL !~~
simflex
Member
69 Points
248 Posts
Re: Adding a Close(X) button to div - how?
Jan 18, 2013 05:04 PM|LINK
Thank you again.
I am still confused by your example.
Can you give me example of what you mean here?
This will hide it. After clicking on "X" You can use id of "X" in the first and id of div in the last one! So a click in "X" will hide the div.
The div in my last post is the dialog that drops down and I think you are correct that's where I need to put the CLOSE button but how using your example?
Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: Adding a Close(X) button to div - how?
Jan 19, 2013 06:46 AM|LINK
I will create the whole div for you with explaination.
<div class="div"> <p>My text<p><span class="hider" style="float: left">X</span> </div> // float left will make it float to the left side. And will be present on left. <script> $(document).ready(function() { $(".hider").click(function() { $(".div").hide(); }); }); </script>This is the code needed to close the div with class "div" when the click is happened on X with class hider.
~~! FIREWALL !~~