I have a sidebar panel with an image and a button.
<div class="glyphRow" id="gly_Job" runat="server">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
<asp:Button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click" />
</div>
I want to make the button size to 100% so that I can click anywhere on the panel item but in order to do that I have to move the image inside button. How can I do that?
something like that ?
<div class="glyphRow" id="gly_Job" runat="server">
<button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
</button>
</div>
asp:button is not standard HTML, it is an ASP.net Webforms control, that renders HTML.
If you really want to keep using asp:button use the following javascript to add a click event to the div
document.getElementById("gly_job").addEventListener(function(){
//Find the button and click it
this.querySelector(".btn.btn-primary").click();
});
For added user friendliness add the following CSS to indicate the whole div is clickable
#gly_job {cursor: pointer;}
Note: code untested and may need syntax error fixes
Related
I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>
I found this html code on a website which is a click button and I want to learn how to click on this button using Javascript. Please someone help me to understand how to click such buttons. I'm trying this from past one hour.
This is the button which I want to click:
<div class="Button">
Tap this button
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p></div>
this is not my code. Its from a website.
You need to close the first div with a closing tag. Below is the updated code with the closing tag.
<div class="Button">
Tap this button
</div>
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p>
</div>
What is the purpose of enclosing your a tag in a div ? Can't you use only the a ?
You do not have any button in the HTML snipper shown, only div, a, and p
A button would be a <button>.
to click them using your current code you can use
<script>
document.getElementsByClassName("button")[0].click();
document.getElementsById("ButtonID").click();
</script>
A correct, valid and clear code would be
<!-- What is this button meant to do ? Can you use an actual button or do you HAVE to use a <a> ?
<button id="clickUsingJs" class="button yellow-btn addToCart trackEvent" rel="Thebutton" data-action="Tap">
Tap this button
</button>
<script>
document.getElementById("clickUsingJs").click();
</script>
<div class="Button" id="button1" onclick ="call some javascript method">
Tap this button
<div id="ButtonTwo" class="ButtonTest2" onClick="call some javascript method">
<p class="MeButton" id="ButtonID">Final button test</p></div>
try this
I am currently developing a website using ASP.NET and C#. In this website I display 2 sets of Image Banners, the first one is filled with my C# code and stays still (does not change).
<div class="divArticleCar">
<div id="OwlDemo" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation ">
<a class="btn prev "><span class="glyphicon glyphicon-menu-left"></span><br/></a>
<a class="btn next "><span class="glyphicon glyphicon-menu-right"></span><br/></a>
</div>
</div>
The second uses a connection to an external API from an image Database. I have a text input and a button so when user searches for a key word, the second banner updates with new images. I'm using AJAX <asp:UpdatePanel> tag to update the image result.
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="btnSearchImage" EventName="ServerClick" />
</Triggers>
<ContentTemplate>
<div class="divArticleCar">
<div id="OwlDemo2" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation CN2">
<a class="btn prev2 ">
<span class="glyphicon glyphicon-menu-left"></span> <br>
</a>
<a class="btn next2 ">
<span class="glyphicon glyphicon-menu-right"></span> <br>
</a>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The problem is when the Images in the ContentTemplate are updated. They are just not shown, the banner disappears. I have checked my background code, C# is getting the API results and it is adding the new images, they are just not visible. The Banners are managed with 2 Javascript files.
First: carrusel.js
Second: owlCarousel.js
Does someone know why the images are disappearing??
Every javascript function that is called when the page is done loading needs to be triggered again when you use an UpdatePanel.
So lets say you have something like this somewhere to build the carousel:
$(document).ready(function () {
buildCarousel();
});
You need to add some code to make sure buildCarousel() is triggered again after partial postback.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildCarousel();
});
I'm trying to have a fully-clickable span or Button with a Bootstrap refresh glyph-icon. With the code I've inherited, the icon itself is clickable, but the area between icon and button border isn't, i.e., it feels to the user as if clicking on the edge of the button doesn't work.
Here is the current code:
<span class="btn btn-default btn-xs" style="background-color: transparent;">
<h:commandLink id="refresh" style="height:25px">
<span class="glyphicon glyphicon-refresh"></span>
<a4j:ajax render="richTable cnt_label scroller"
execute="richTable cnt_label scroller" event="click" immediate="true"
oncomplete="richTableRerenderCompleted('refresh')"/>
</h:commandLink>
</span>
I've tryed replacing the outer span with a <button> and that seemed to do the trick, but it warps the table in a funny way while refreshing.
Using a RichFaces commandButton or commandLink directly made everything worse.
Any ideas?
Since the icon is just a letter you can create a button and put the icon in the label.
If you inspect the span you should see something like this:
<span …>
::before
</span>
Then check the CSS for ::before and you should see:
.glyphicon-refresh:before {
content: "\e031";
}
e031 is the number of letter, you can convert it to an HTML entity and do this:
<h:commandButton value="" styleClass="btn btn-default btn-xs glyphicon">
i was having a problem in searching for some example for make a page dynamic or adjustable on front end can any one help me in this please
for eg on front end a client wants to adjust the links from one place to another or can chage backgrounds looks like fonts + background color + placement of divs etc can any one help me in doing so or can anyone help me with example on internet which solves my problem i will be thankfull to you.......
little code
<body style="background-color:whitesmoke;">
<form id="form1" runat="server">
<div id="div1">
<div id="div1.1">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="div1.2">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
<div id="1.3">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</div>
<div id="1.4">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
</div>
</form>
here i am handling a major div div1 and child divs div1.1,div1.2,div1.3,div1.4 and i want to change place of these child divs