I'm very new to CSS and HTML and I'm facing a very strange issue here, I have text area in my html as below.
<div class="ContentBox BPMSectionBody LastContentBox noHeader" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1" data-view-managed="false">
<div class="Text_Area fullWidthTextArea CoachView CoachView_hidden CoachView_show" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1" data-eventid="" data-viewid="Text_Area8" data-config="config99" data-bindingtype="String" data-binding="local.userAction.comments"
data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Text_Area">
<div class="textLabel">
<label class="text controlLabel" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label">Enter Cancellation Comments</label>
<div class="coachValidationDiv">
<img class="coachValidationImg smallImg CoachView_hidden" role="alert" alt="Error" src="/teamworks/webasset/2064.7a0c03cc-ccef-4582-a1bc-7ccc8e9be488/W/Error_icon_24x24.png">
<span class="coachValidationText" style="visibility: hidden;">!</span>
</div>
</div>
<textarea tabindex="0" class="dijitTextBox dijitTextArea dijitExpandingTextArea BPMTextAreaFont" id="dijit_form_Textarea_16" aria-labelledby="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label" style="-ms-overflow-x: auto; -ms-overflow-y: hidden; box-sizing: border-box;"
rows="1" data-dojo-attach-point="focusNode,containerNode,textbox" widgetId="dijit_form_Textarea_16" autocomplete="off" value=""></textarea>
</div>
</div>
And a button as below :
<div class="Button pageFlowButton CoachView CoachView_show" id="div_3_1_1_2_12_1_2" data-eventid="boundaryEvent_17" data-viewid="Button10" data-config="config83" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Button">
<button class="BPMButton BPMButtonBorder" type="button">Continue With Selected Action</button>
</div>
when I start typing in textarea and having my cursor still in the textarea and i click on button for the first time instead of action being taken, text area gets focused.
When I click button second time it works fine.
Can any body please help,what can be the possible reason here??
In case you are using jQuery, I guess you should use:
$('.Text_Area').click(function(noFocus){
noFocus.preventDefault();
});
Related
I have been given a problem to solve an issue. The task is to make the input form clickable. but I can't figure out what's going on in the code. It's the first time I'm seeing such code. Can somebody help me?
<div class="container-center-horizontal">
<form class="android-frontpage screen" onclick="window.open('javascript:SubmitForm(%27form2%27)', '_self');" name="form2" action="form2" method="post">
<div class="overlap-group">
<img class="android-frontpage-1" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/android---frontpage#2x.jpg" /> <img class="kid-pic-1" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/kid-pic-1#2x.png"
/>
<div class="rectangle-9"></div>
<img class="rectangle-8" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/rectangle-8#4x.png" />
<p class="text-1">Join our community to get early access.</p>
<div class="rectangle-4x input"></div>
<div class="text-2">Enter your email address</div>
<div class="rectangle-4"></div>
<div class="get-started valign-text-middle">Get Started</div>
<img class="evolvere-academy" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/evolvere-academy#1x.png" />
<div class="courses montserrat-bold-white-14px">Courses</div>
<div class="blogs montserrat-bold-white-14px">Blogs</div>
<div class="our-story montserrat-bold-white-14px">Our Story</div>
<div class="contact-us montserrat-bold-white-14px">Contact Us</div>
<h1 class="text-3">Building Education Of The Future!</h1>
</div>
</form>
</div>
First of all, The input isn't clickable because it isn't even an input. It's just a blank piece of text. So you could replace the text with a input box. Here, I made one based on your code.
<input class="text-2" type="email" placeholder="Enter your email address here">
You can remove the class and add it to the div or remove the entire div tag and just leave the class there. What ever works best for you.
Hope this helps!
I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>
So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
So I have this code:
<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
<span id="sitetour-pointer"></span>
<div class="content-wrapper">
<span id="sitetour-header" class="sitetour-header">Test Text</span>
<div id="sitetour-content">
Why this is not being read
<div id="demo-bb" class="demo-bg">
<div></div>
</div>
</div>
</div>
<div id="sitetour-footer">
<button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
<button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
<button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
</div>
</div>
And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?
I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.
when I'm using my phone to test the app, I use the back device button to show the previous page this is working with all the pages except one page that shows a not styled page when trying to get to the pervious page so there somthing Odd. Here a briefe explanation.
there is 3 page #main_menu , #first_map , #second_map
when I'm into the #second_map page it should go to the #first_page when I press back button
but actually its showing the #main_menu page with not css styling.
could you plz tell me what is the problem an how we can fix it thank you in advance .
I provide the source code :
this is the main_page
</div>
<h2 id="thx_msg" style="margin:0 auto;"></h2>
<div class="grid2">
<div class="first" id="search_btn">
<div>
<img src="images/loupe.jpg"/>
<div>
</div>Search for a Spot</div>
</div>
<div class="second" id="submit_spot_btn">
<div>
<img src="images/spot.jpg"/>
</div>
<div>Submit a spot</div>
</div>
</div>
<ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
<li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
<li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
</ul>
</div>
here is the first_map page is named spot_page
<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
<p class="center" style="font-size:16px;font-weight:bold;">
Search for a Spot
</p>
<ul class="some_space" style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
width:280px;">
<li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
<li id="to"></li>
<li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
</ul>
<div id="hidden_scroller" style="display:none">
<select id="distance" name="Within">
<option value="1">1 Mile</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
</div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
height: 247px;border:1px solid black;margin:0 auto">
</div>
</div><!-- split view -->
and finally the second map here :
<div data-role="page" id="nearby_page">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div class="second_header">Spots nearby</div>
<div id="map" style="width: 100%;
height: 398px;border:1px solid black;margin:0 auto">
</div>
</div>
As you can see the pages are separate from each other.
I have a last question could a navigation plugin help to fix the problem like jquery history plugin and thanks for your help.
Make sure to have your pages on different separate pages. If not these kind of errors will occur. Mostly, you will encounter abnormal navigation error. That is what I have experienced in my experience.
BTW, you should show more of your code for people here to help you out.
Update
PhoneGap and Android's back button do behaves odd. What I have done in my application is disabled the back button and given the soft back button on the top header. Simple history.back() will do the magic for back buttons.
You can disable as follows.
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
console.log("Back button pressed but nothing happened");
}
Anyway this is my approach. You may choose to be different.