Since the Pinterest API is down, I am trying to write a CEFSharp app. to login and pin to my boards manually. Here is the Pinterest form html.
<form data-test-id="registerForm" method="POST" novalidate=""><div data-test-id="emailInputField" class="zI7 iyn Hsu"><fieldset style="position: relative; margin-bottom: 7px;"><span><input aria-invalid="false" autocomplete="username" class="wyq Hsu tBJ dyH iFc yTZ L4E unP iyn Pve pBj qJc aKM xD4" id="email" name="id" placeholder="Email" type="email" value=""></span></fieldset></div><div data-test-id="passwordInputField" class="zI7 iyn Hsu"><fieldset style="position: relative;"><span><input aria-invalid="false" autocomplete="new-password" class="wyq Hsu tBJ dyH iFc yTZ L4E unP iyn Pve pBj qJc aKM xD4" id="password" name="password" placeholder="Password" type="password" value=""></span></fieldset></div><div style="float: left; margin-bottom: 12px; margin-top: 8px;">Forgot your password?</div><div id="recaptcha_placeholder_1" class="g-recaptcha" style="margin-top: 16px; transform: scale(0.88); transform-origin: 0px 0px 0px;"></div><div data-test-id="registerFormSubmitButton"><button aria-label="" class="red SignupButton active" type="submit" style="border: 0px; height: 36px; display: inline-block; border-radius: 20px; -webkit-font-smoothing: antialiased; padding: 0px 18px; font-size: 15px; font-weight: bold; outline: none; box-shadow: none; cursor: pointer; margin-top: 10px; vertical-align: middle; text-align: center; background-color: rgb(230, 0, 35); color: rgb(255, 255, 255); width: 100%;"><div>Log in</div></button></div></form>
I put the code below in the JQuery section of JFiddle to test the code and it sets the 2 inputs. So I'm stumped why CEFSharp can't set those imputs. I'm also in need of how to write the code to click the Submit button but one step at a time.
Given the form html above running these 2 lines of code below in the test app called JFiddle sets the 2 input fields successfully.
$('input[name=id]').val('john#mydomain.com');
$('input[name=password]').val('pinterestpassword');
Doing the same thing using a CefSharp App, fails to set the 2 input fieds.
chromeBrowser = new ChromiumWebBrowser("https://www.pinterest.com/login");
chromeBrowser.LoadingStateChanged += chromeBrowser_LoadingStateChanged;
private void chromeBrowser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs la)
{
if(la.IsLoading == false)
{
// does not set the 2 input fields
chromeBrowser.ExecuteScriptAsync("$('input[name=id]').val('john#mydomain.com')");
chromeBrowser.ExecuteScriptAsync("$('input[name=password]').val('pinterestpassword')");
// tried the code below also but it doesn't work either
//chromeBrowser.ExecuteScriptAsync("$('input[name=id]').val(\"john#mydomain.com\")");
//chromeBrowser.ExecuteScriptAsync("$('input[name=password]').val(\"pinterestpassword\")");
}
}
Related
So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.
See for yourself here
If not here's the code,
.text1 {
display: inline-block;
font-size: 4vmin;
margin-right: -22px;
margin-left: -4px;
user-select: none;
text-align: right;
}
.fill-out {
outline: none;
border: 0;
margin-left: 18px;
display: inline-block;
}
#box1 {
width: 13px;
}
#box2 {
width: 13px;
}
#box3 {
width: 21px;
}
<div>
<input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
<span class="text1">:</span>
<input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
<span class="text1">.</span>
<input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />
</div>
```
Type in only 2's then run again and type in 1's
Try using monospaced fonts.
because i don't think you will have the result you want with the default font.
see on wikipedia the difference wiki.
I have a set of radio buttons, and everything works fine when onclick is used, but when onclick is replaced with onmousedown (or ontouchstart, tested in developer mode), checked+label works fine, but the alert requested in the HTML doesn't. The reason why I want to replace onclick (with ontouchstart) is to improve the performance of a hybrid app in IOS.
Any clue what my problem is... I've managed to get from zero coding to creating a quite complex physics app in 5 months without posting a single question anywhere, and I quite embarrassed by this one!
Here's the HTML:
<div class="switch-field1">
<input type="radio" id="sine1" name="switch_3" onclick = "alert('This works fine')" checked/>
<label for="sine1"> SINE </label><br>
<input type="radio" id="square1" name="switch_3" onmousedown = "alert('If I see this, problem solved')"/>
<label for="square1"> SQUARE </label><br>
<input type="radio" id="triangle1" name="switch_3" onclick = "alert('This works fine')"/>
<label for="triangle1"> TRIANGLE </label>
</div>
Here's the CSS:
.switch-field1 {
font-family: "sans-serif", Tahoma, Verdana, Lucida ;
padding: 0px;
overflow: hidden;}
.switch-title1 {
margin-bottom: 3px;
margin-left: 0px}
.switch-field1 input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden}
.switch-field1 label {
float: left;}
.switch-field1 label {
display: inline-block;
width: 100%;
background-color: #e6ffe6;
color: black;
font-size:11px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.2);}
.switch-field1 input:checked + label {
font-weight: bold;
font-size: 12px;
color: white;
background-color: #009900;}
The onmousedown event works, but only on the radio button, not on the label.
You should attach an event listener to the label itself, like:
<label for="square1" onmousedown="alert('If I see this, problem solved')">SQUARE</label>
Update:
The ontouchstart with function call worked for me, but you need to use it on touch capable 'device', I used the chrome device toolbar under dev tools (ctrl+shift+j, mobile icon at top left).
I used this function:
function whichbuttonID(){
// need js to select the option
document.getElementById("squarel").checked = true;
alert('Ok');
}
I have used this in my CSS to create an smaller input field:
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
border-radius: 3px;
}
But of course I need to adjust the input-group-addon as well or it will look like this.
To prevent this and make the input-group-addon smaller, I have added this to my CSS.
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
But it looks like this now.
Any suggestions to get it aligned again?
Complete code
<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
If I were you, I'd add the class name "input-group" before the "input-group-xs" in order to add the base css.
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
So your code should look like this:
<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
I took the following HTML:
<div class="small-6 columns">
<input id="temp-id-2" class="replace-checkbox" type="checkbox" checked="checked">
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
And implemented it in razor:
<div class="small-6 columns">
#Html.CheckBoxFor(m => m.InventoryItem.Taxable, new { #class="replace-checkbox", id="temp-id-2" })
#Html.LabelFor(m => m.InventoryItem.Taxable, new { #class="checkbox-label", #for="temp-id-2" })
</div>
It is getting rendered like this:
<div class="small-6 columns">
<input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
<input name="InventoryItem.Taxable" type="hidden" value="false" />
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
And I have the following css:
form.app-form label.checkbox-label {
display: block;
visibility: visible;
font-weight: bold;
cursor: pointer;
color: #5c5c5c;
padding: 9px 10px;
padding-left: 40px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("../images/field-check-inactive-10.png");
background-position: right center; padding-left: 10px;
}
form.app-form .replace-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
form.app-form .replace-checkbox:checked + label.checkbox-label {
padding-left: 40px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("../images/field-check-10.png");
background-position: right center;
padding-left: 10px;
}
When I run the plain HTML, I am able to check the checkbox and it changes from a greyed out check mark to a darkened in check mark. However, when I render it in razor, the checked state does not change. I noticed that the page is still detected that it is being checked because I can see the values change when I submit the form, but the css doesn't seem to get applied when it is in the checked state. I'm stumped. Any ideas?
As it turns out, the problem is with how MVC uses hidden fields to post data back to the controller. In this chunk:
<div class="small-6 columns">
<input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
<input name="InventoryItem.Taxable" type="hidden" value="false" />
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
It added the hidden field element which broke the css selector form.app-form .replace-checkbox:checked + label.checkbox-label which selects the label immediately following the checkbox. Since it no longer immediate follows the checkbox, it never gets applied.
My fix (for now) for this was to change the + to a ~
I'm a new user to StackOverflow. Looking forward to be part of your wonderful community. My question is as follows:
I want to use a Twitter Bootstrap modal box on my website. However, I'm facing problems getting the CSS to work on the modal box. I wrote the following HTML code:
<div id="playModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span class="login"><strong>Login</strong></span>
</div>
<div class="modal-body">
<form class="form-horizontal" accept-charset="utf-8" method="post" action="#">
<fieldset>
<div class="control-group">
<label class="control-label" for="play_form_username">Username</label>
<div class="controls">
<input type="text" id="play_form_username" name="username" placeholder="Enter your username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="play_form_password">Password</label>
<div class="controls">
<input type="password" id="play_form_password" name="password" placeholder="Enter your password" required />
</div>
</div>
</fieldset>
<span>Forgot your password?</span>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Play!</button>
</div>
</form>
</div>
<div class="modal-footer">
<span>Not a member yet? Join Now!</span>
<!--need to find a way to get this modal box to disappear if registerModal is called-->
</div>
</div>
Next, I want to configure the design of the page. I am using LESS to write code which is converted to CSS through SIMPLESS. I tried passing my desired CSS configuration through the modal div ID in the following LESS code:
#playModal{
width: 300px;
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 1;
filter: alpha(opacity=100);
}
.modal-header{
.login{
font-family: arial;
font-size: 60px;
font-weight: bolder;
}
}
.modal-body{
max-height: 200px;
}
}
This compiles successfully to CSS, but when I analyse the webpage using Firebug, it appears that none of the CSS has been passed for the modal box. Instead, if I use pass the CSS configurations by class, similar to the following, it works.
.modal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
}
Why is it that the CSS rules are not passed when referring to the modal box by ID? Isn't ID be more specific than class? Note: even when i use !important on the code using ID, it doesn't work.
It will be greatly appreciated if someone can help me out- though it's probably because I did something stupid. (The context why I need to use ID and not just class is: I'm needing to add a second modal box, and I want it to have different size, field sizes etc.) Thanks.
EDIT: (Answers my own silly question)
After dabbling around with the code, I found that the following works:
//Settings for all models
.modal-backdrop.fade.in{
opacity: 0.9!important;
filter: alpha(opacity=90)!important;
}
//Settings for playModal
#playModal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
.modal-body{
padding: 10px;
.control-group{
margin-bottom: 10px;
.control-label{
width: 65px;
text-align: left;
}
.controls{
margin-left: 75px;
}
}
span a{
display: block;
margin-top: 0px;
padding-top: 15px;
float: left;
&:hover{
text-decoration: none;
}
}
.form-actions{
display: block;
float: right;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #FFFFFF;
.btn{
font-size: 18px;
line-height: 24px;
}
}
}
.modal-footer{
padding: 7px!important;
}
}
I think what I did wrong was to put the .modal-backdrop.fade.in inside the #playModal, it dawns on me now that .modal-backdrop.fade-in would be referring to the area outside of the #playModal div.
So all in all it was just a trivial mistake that got me worked up for so many hours. Sorry to waste everyone's time. What a way to start on StackOverflow. But anyway thanks everyone for trying to help me out. Please vote to close this post.
You're using the wrong case.
You give the element the id, playModal
Your css refers to #playmodal
Css is case-sensitive.