Having an issue with around 200 clickable buttons on my website, all designed the same:
<div>
<asp:hyperlink> //or LinkButton
</div>
The background-style of the button is within the Div and the text of the button is in Hyperlink / LinkButton. Currently, only the text is clickable so clicking under the text but on the button does not work.
I want to make the whole button clickable without having to rewrite all 200 buttons individually. What would be the quickest and easiest solution?
Presenting a CSS-only solution
Transform your anchor tag to act like a block-level element and match the size of its parent.
Check out the live demo on jsfiddle
HTML Markup
<div class="wholediv">
<a href="http://www.google.com">Your link</a>
</div>
Styling with CSS
.wholediv{
width: 100px;
height: 100px;
background-color: #efefef;
}
.wholediv a {
width: 100px;
height: 100px;
display:block;
background-color: pink;
}
One possible solution would be to simply utilize:
<div onclick="callJavascriptFunction()">
Text for the Button
</div>
If you want to add a click event handler to all DIVs using jQuery, you can do so with the following code:
HTML:
<div style="background-color: red; width: 50px; text-align: center;" id="one">
<a>Hello</a>
</div>
<br/>
<div style="background-color: yellow; width: 50px; text-align: center;" id="two">
<a>World</a>
</div>
JavaScript:
$("div").click(function (event) {
alert(event.currentTarget.id);
});
You can view a working example on jsFiddle.
To handle server-side logic, you can use the __doPostBack() function in your jQuery click event handler like this:
$("div").click(function (event) {
__doPostBack(event.currentTarget.id,'');
});
On the server-side, you can retrieve the ID of the clicked element using the __EVENTTARGET value in the Request object:
if (IsPostBack)
{
string ControlID = string.Empty;
if (!String.IsNullOrEmpty(Request.Form["__EVENTTARGET"]))
{
ControlID = Page.Request.Params["__EVENTTARGET"];
Control postbackControl = Page.FindControl(ControlID);
// Perform actions based on the control that caused the post back
}
}
One way to achieve this is by utilizing jQuery. Take a look at the code snippet below:
<div id="button">
<asp:hyperlink> //or LinkButton
</div>
$("#button").click(function (event) {
// Add your custom functionality here.
});
I'm experiencing some difficulties trying to set up a login for my website. I have a user registered in my database with the email: [email protected] and password 123. The issue arises when I attempt to use the POST method, as it returns the fo ...
I am facing an issue where I cannot retrieve the selected value from my second select element. Even though I have selected the second option in the dropdown, it keeps returning the value of the first option as empty. Here is a snippet of the HTML code: & ...
When sending data (values and dates) from a hard-coded function, everything works fine - the JSON file is populated and the chart is displayed. However, when I send data from the database, the JSON file is populated but the chart does not appear. Here is ...
Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for ...
I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...
I'm looking to populate a table with data on customers including their name, customer ID, and rental cost. Can anyone help me with the JavaScript code needed to insert this data into rows of the table? Your assistance is greatly appreciated. Below is ...
My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...
I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...
My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...
I am facing an issue with a JPG image that I am attempting to use in CSS as a background-image for a div container. For some reason, this particular image refuses to render in the viewport. Interestingly, when I inspect the element, I can see its thumbnail ...
Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...
I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...
Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...
fetch(www.gnewsapi.com/news/someID).then(response => newsurl.href = JSON.stringify(data.articles[0].url) fetch('https://gnews.io/api/v3/search?q=platformer&token=642h462loljk').then(function (response) { return response.json(); }).th ...
I decided to create a new template page for one of the pages on my WordPress site because I only wanted to have some text and a YouTube video displayed. It turns out that embedding a YouTube video directly into the code is not supported by WordPress, so I ...
I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...
I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...
I've encountered a perplexing CSS display issue and I'm at a loss for alternative solutions besides simply widening the width of the parent div. Allow me to explain the layout: <div> <ul> <li> <a href="javascrip ...
I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...
I am attempting to create an HTML + Images Signature in Mozilla Thunderbird. I understand that this may not be the most ideal software for designing email signatures, but I am looking for a free alternative. While my image is attached to the email itself ...