I'm working on a website redesign based on the Bootstrap 3 framework.
In configuring the site's contact form, and implementing a captcha, I've run into an issue with my CSS.
Everything works well in Chrome, but in Firefox, the captcha overflows the form boundaries, and is off to the side, whereas in Chrome, it's under the form and integrated more normally. To attempt to fix this, I put the captcha (which was outside of the form's div tags originally) inside it's own div group. That fixed part of the issue, in properly aligning the captcha under the rest of the form.
However, now that I've done that, the captcha (and the form label it's associated with) overruns the form boundaries on both sides, and doesn't display properly in either Chrome or Firefox. Further, it doesn't space properly, despite being in its own div.
http://www.weatherworks.com/contact/contact.php
I'm not sure how - or if - I can fix this. I'm a student and web design is more of a hobby for me; I'm actually doing this redesign as part of a weather-related internship. I'm fairly knowledgeable on HTML and CSS, but am pretty lost with this issue. Was hoping someone here who's worked with forms and/or Bootstrap might have some insight for me.
Thanks!
You missed a closing tag of the <div class="form-group" id="commentTxt">. Place a close tag above the next <div class="form-group">
<div class="form-group" id="commentTxt">
.
.
.
</div> <!-- Add this div -->
<div class="form-group">
<label class="col-lg-2 control-label">Verify Humanity</label>
Related
So I've spent a day on Google, and trying bits of jquery/javascript to do what I'm looking to do and am officially stuck.
I'm building a site using Squarespace, with the Marquee theme applied. I would like to be able to add a custom link in the primary navigation to send users to an alternative language version of each specific page.
But, I'm struggling. Ive found solutions on here that should work, but I don't think I'm applying it right. Ive tried adding a single link to the navigation and using a script on each page (in the code injection point of the head section) point that link somewhere else.
This would mean I have a single link in the navigation (which is standard across the site) pointing users to whichever page I want...on a per page basis. I know there is a solution out there....just can't make it work!
The section I need the link to work from is:
<div id="desktopNav" data-content-field="navigation-mainNav" data-annotation-alignment="bottom left">
<nav class="main-nav" id="yui_3_17_2_1_1450478013910_660">
<div class="nav-wrapper" id="yui_3_17_2_1_1450478013910_659">
<ul class="cf" id="yui_3_17_2_1_1450478013910_658">
<li class="page-collection">
<span>Menu</span>
</li>
</ul>
</div>
</nav>
</div>
None of this can be edited directly though...
I was thinking something like this could work, but I cant work out how to apply it to my situation...
Change href value for a hyperlink
Any help, gratefully received!
I fixed it...using this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href*="original.site"]').attr('href', 'http://website.com');
});
</script>
It allows me to point a single link in the navigation (which cant be edited directly) to whatever I want it to go to.
Okay so I have a basic webpage that just load a simple form.
This form submits a text field, a radio button selection. Very simple.
It sends it to a webpage that uses the data and displays a webpage based on the data.
What I am wondering is how can I submit this data to the webpage, which is located on a different server, and display what that webpage would then display inside of an Iframe.
The reason I ask is I just wish to have an iframe that has almost like a header that stays anchored at the top of their resulting webpage with an advertisement.
Hopefully this is clear enough. I just can't seem to find what I am looking for :(
Thanks everyone!
Are you looking for this? The form will targeted to the iframe with the domain http://example.com and also take its post value
<form action="#" method="post" target="iframe_name">
<input type="submit" name="post" value="Post">
</form>
<iframe src="http://example.com" name="iframe_name"></iframe>
Currently I have 3 comment boxes on a single page. The page has three tabs that display different content, and each tab content has its own comment section, differing from the other two.
To make sure unique comments are loading for each tab, I am currently using something similar to:
<div class="fb-comments" data-href="http://webpage.com/index.html#tab1"
data-num-posts="2" data-width="470"></div>
<div class="fb-comments" data-href="http://webpage.com/index.html#tab2" ...
<div class="fb-comments" data-href="http://webpage.com/index.html#tab3" ...
This works in displaying the relevant content. However, when someone replies to one of these comments, the original commentor receives a link on their fb profile that appears as:
http://webpage.com/index.html?fb_comment_id=fbc_26547577547547_477747457_3745757457435737#4574575475
The problem is that this link the user is given does not show the relevant comment thread, or even the anchor based data-href comment box. Perhaps the end anchor is tripping up the display? If so, is there a paradigm for having different facebook comment boxes on a single page?
Thanks for any help solving this annoying issue.
I implemented something similar using this code
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-enl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-esl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#psyc" data-width="880" data-num-posts="20"></div>
Perhaps your issue could be solved by simply removing 'index.html', as Facebook would then treat the '#tab' as the page, and not a link to a different part of the page
My solution can be seen working here http://stabmail.com/study-groups-tutoring/
I have a fairly simple jQuery mobile app, which works fine as a web app (tested in browsers on desktops/smartphones) but when porting it to android using phonegap, I have one major issue. It occurs both on a real phone and in an AVD.
there's a form in the app, like:
<div data-theme="a" data-role="dialog" id="a-form">
<div data-role="content">
<h3>...</h3>
<form action="http://a-live-site.com/a-form.php" method="post">
...
<div data-role="fieldcontain">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
Its response content loads perfectly in the browser (the action is a relative link there), but within phonegap I just get a white screen and the hardware back button exits the app instead of the usual step back in history. The puzzling thing is that the request actually gets through. The server side code triggers an email, so I know the server is getting the request. I have added the appropriate <access /> rules in the phonegap.xml file, but I'm not sure that's enough.
EDIT: the form is in static content so, in phonegap, it's loaded by file:// and shouldn't have cross-domain issues.
The problem was due to data-role="dialog" in the result. Using page fixed it. It only broke in phonegap and phonegap's logs made it look like it was something else. A real PITA.
Greetings,
I've been scanning the internet on how to do this, but so far no luck. There are numerous solutions posted, especially on this website (thank you for that), but none seem to work for me. This will most probably be because I am only learning asp.net since 4 months now, and lack the necessary knowledge.
What I would like to do is set focus on the username input textbox when the page is loaded. I've seen many solutions, such as "defaultfocus", body onload, etc, etc. Anyone can give me a simple way to accomplish this?
Our project is a MVC 2 Web application. We have a master site, which collects all the contentplaceholders. Here is the link to the logon.aspx
<div id="Clogin" onclick="logout();">
<asp:ContentPlaceHolder ID="LoginContent" runat="server" />
</div>
The LogOn.aspx is practically the same as the auto-generated one. And here is the textbox I would like to set focus on:
<div class="login-field">
<%: Html.TextBoxFor(m => m.UserName)%>
<%: Html.ValidationMessageFor(m => m.UserName) %>
</div>
How can I trigger the onload event, be it in the master page, or the LogOn page, so that the focus is generated on that particular textbox?
Thanks in advance, and apologies for having to rely on your knowledge.
Sincerely,
Nicolas
You will need to use javascript for this. If you are using jquery you could include the following script:
$(function() {
$('#UserName').focus();
});
Another possibility is to do this in the body tag:
<body onload="document.getElementById('UserName').focus();">