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!
Related
I've to filter the div elements obtained from a database based on user input. This is a list of users of a chat and I want to show only the div of the user written in the input.
I've tried several solutions on the site but they don't work in React. I'm getting mad. Ideas?
Thanks so much in advance.
<div class="sidebar__chat--container">
<a class="link" href="/room/A">
<div class="sidebar__chat">
<div class="avatar__container">
<img src="1" class="MuiAvatar-img">
</div>
</div><div class="sidebar__chat--info">
<h2>Mario</h2>
</div>
</div>
</a>
<a class="link" href="/room/B">
<div class="sidebar__chat">
<div class="avatar__container">
<img "2" class="MuiAvatar-img"></div>
</div>
<div class="sidebar__chat--info">
<h2>John</h2>
</div>
</div>
</a>
</div>
<div className="sidebar__search">
<form className="sidebar__search--container">
<input
placeholder="Search for users"
type="text"
id="search"
/>
</form>
</div>
I provided an example in this SandBox
Note: I created a custom usersList that will be replaced by the data fetched from database
I'm trying to set up an anchor link for my site to jump to a particular heading on the same page. Below is my current code, but when you select the link nothing happens. Any help would be great, thanks!
Section I want the link to jump to
<div class="heading1">
<h2 style="margin-bottom:-5px;font-size:40px;"><a id="#work"></a>content</h2>
<p style="font-size: 26px;">content</p>
</div>
Link
<div class="contact mobile">
<a href=“#work”>Work</a>
</div>
need to refer the href to the id of the div you want to jump to href="#jump"
<div class="heading1" id="jump">
<h2 style="margin-bottom:-5px;font-size:40px;">content</h2>
<p style="font-size: 26px;">content</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="contact mobile">
Work
</div>
brother remove hash from attribute id="#work" use just id="work">
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();
});
code below renders search form in below logo:
LOGO IMAGE
Logon or register
Search:
How to chage it so that Login/Search is rendered after logo in same row:
Logon or register
LOGO IMAGE
Search:
site.master contains:
<div id="header" style="margin: 0; background-color: white; width: 100%">
<a href="http://mysite.com">
<img alt='' style='width:30%' src='/Store/Logo' />
</a>
<div >
<p class="accBoxUnloggedOther">
Logon
or <a href="/register">
Register</a></p>
<br />
<form action="/Store/Search" style="margin:0">
<input class="searchfield" id="Search" />
<input class="button blue bigrounded" type="submit" value="Search... " />
</form>
</div>
....
Use style="float:right;" on the inner div. But you should try to avoid using inline CSS. It leads to a maintenance nightmare.
jsFiddle
You could also put the elements you want in the same line in a <div> tag and the image in another <div>
I'm having problem with IE 6 (what a surprise : D)
On this site, in the content, I cannot click on the first few links. But after a few items, the links are working fine.
This problem appears if I load a page with ajax from the menu.
I couldn't figure out the problem, has anybody seen something like this before?
The HTML code is:
<div id="cont" style="display: block;">
<div class="localHeader">
<span> Szállás > Magánszállás </span>
</div>
<div class="subList">
<div class="productContainer">
<div class="img">
<img style="width: 200px;" src="/up/21/480_98_szarka2_255.jpg">
</div>
<div class="text">
<div class="productName">
<a title="Szarka család" href="/cats/showItem/21" rel="history"> Szarka család </a>
</div>
<div class="productDatas">
kato55#freemail.hu
<br>
<a title="Szarka család" href=""></a>
<br>
+36 84 314 062
</div>
<div class="productText"></div>
<a title="Szarka család" href="/cats/showItem/21" rel="history" class="moreButton"> Részletek </a>
</div>
</div>
</div>
</div>
Of course the .productContainer is repeating in the .subList.
Thanks.
Make sure that you have explicitly set overflow:auto on .productContainer. If that doesn't work, try Googling "clearfix" and see if that doesn't fix your problem.
You should ensure that your HTML validates against the DocType you're using, at the moment it doesn't and this can effect how browsers render parts of the page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbalatonnet.com%2Fcats%2FlstSubCat%2F13