I have created a URL preview box for the entered URL.
Preview is shown in the div box. I want to add a close option on the right top. How could be done so that when users click on its box should be disabled?
Here is my fiddle.
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
code is inside php
This question is related to
javascript
php
html
You can use this jsFiddle
And HTML:
<div id="previewBox">
<button id="closeButton">Close</button>
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
With JS (jquery required):
$(document).ready(function() {
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
});
Here's the updated FIDDLE
Your HTML should look like this (I only added the button):
<a class="fragment" href="google.com">
<button id="closeButton">close</button>
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
and you should add the following CSS:
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
Then, to make the button actually work, you should add this javascript:
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
We're using e.preventDefault()
here to prevent the anchor from following the link.
it's easy with the id of the div container : (I didn't put the close button inside the <a>
because that's does work properly on all browser.
<div id="myDiv">
<button class="close" onclick="document.getElementById('myDiv').style.display='none'" >Close</button>
<a class="fragment" href="http://google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
Updated your fiddle: http://jsfiddle.net/xftr5/11/ Hope, everything is clear?
$(document).ready(function() {
$('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});
Added jQuery and inserted an <i>
as close trigger...
jQuery("#your_div_id").remove(); will completely remove the corresponding elements from the HTML DOM. So if you want to show the div on another event without a refresh, it will not be possible to retrieve the removed elements back unless you use AJAX.
jQuery("#your_div_id").toggle("slow"); will also could make unexpected results. As an Example when you select some element on your div which generates another div with a close button(which uses the same close functionality just as your previous div) it could make undesired behaviour.
So without using AJAX, a good solution for the close button would be as follows
HTML____________
<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">✖</span>
</div>
JQUERY__________
function close_div(id) {
if(id === 1) {
jQuery("#your_div_id").hide();
}
}
Now you can show the div, when another event occures as you wish... :-)
A jQuery solution: Add this button inside any element you want to be able to close:
<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>
or to 'just' hide it:
<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
Source: Stackoverflow.com