I am using a Webbrowser on my new project and I want the scrollbar at the bottom to start at a specific position. Then I want only the scrollbar at the right to show, so you can't navigate from left to right and right to left.
Thank you in advance!
To scroll vertical you can check
http://www.quackit.com/html/codes/vertical_scroll.cfm
To scroll at specific position you can use
var xpos= document.getElementById('txtXpos').value;
var ypos= document.getElementById('txtYpos').value;
window.scrollTo(xpos,ypos);
<p>X-axis <input type="text" id="txtXpos" /></p>
<p>Y-axis <input type="text" id="txtYpos" /></p>
To scroll at element you can use
window.location.href = "#elementid"
Related
The Close Button seems to be a good way for displaying a notice which the user can click away. But its usage remains rather elusive to a newb.
I have placed one on a page:
<div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
But now I am unaware of any way of changing its color the Zurb way, or where to find closing animation options other than this one I use above. I would like the button to be colored e.g. as a Zurb success, and a fade out effect rather than the confusingly fast slide out effect. How do I go about that?
Actually I would also like the button to tightly wrap around the notice text, not take up the whole line width. Is that doable in any Zurb-idiomatic way?
Thanks!
To change the color of close button or other style, you can code the CSS like
.close-button{
color:red;
}
If you are using SASS you can customize the variables.
http://foundation.zurb.com/sites/docs/close-button.html#sass-reference
The animations you can use are:
slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw
http://foundation.zurb.com/sites/docs/motion-ui.html
You can add the callout to a column 1 to 12 wide (although 12 wide is what you already have with the callout on its own). Here I have added it to a 2 wide column. By removing the slide-out method it uses the default fade-out.
<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
</div>
</div>
The capybara choose method works well for a radio button which has the label tag next to it with the required text, like below:
<input id="rGEQr-real" type="radio" name="_pgcr6g7j"/>
<label id="rGEQr-cnt" class="z-radio-content" for="rGEQr-real">Web IDE Support</label>
page.choose('Web IDE Support') works fine for this.
But for something like this:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
which doesnt have label tag, the simple choose fails to set radio button.
How can we achieve this in Capybara??
If you need to choose a radio button by anything other than its name, id or label text, you will need to:
Find the radio button, typically with find and a CSS or XPath.
Call the set method
In this case, you will need to use XPath since CSS-selectors do not support locating by text. The XPath will need to check that the following sibling text node is the specified text. This can be done with:
# Select MALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set(true)
# Select FEMALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set(true)
I have a search bar on my web page. What do I use as the src="" if I want to make the link jump to the input section of the search bar, with the cursor blinking there too. I'm using twitter bootstrap 3 if that helps.
Try to use html label for your input.
<input type='text' id='search'/>
<label for='search'>Search</label>
Assuming that you have an input with an id of search like this:
<input type="text" placeholder="Search" class="form-control" id="search">
Then you can do this:
go to search
The preferred way to do this would be with an event handler (versus inline as I've shown above) for maintainability. That would look something like this if you're using jQuery (which I'm just assuming you are since you've marked this with a Twitter Bootstrap tag):
go to search
$(document).ready(function() {
$('.searchlink').on('click', function() {
$('#search').focus();
}):
});
Today I made my first Chrome extension and it's running good.
This extension is very simple it permits to the user to create a list of vocabulary in french and dutch.
When the pop-up opens the first field has the focus because I use .focus() for that. That's OK.
But when I press the TAB key, the focus disappears. I don't know where it goes.
If I click on the first field then I can fly to the second field and after to the submit button.
I dont want to click on the field. My goal is to use this extension only with the keyboard.
I try to solve this with 'tabindex' but it did not work.
Here the code (simplified) of my popup.html
<div>
<form action="#">
<div><h1>Vocabulaire / Woordenschat</h1></div>
<div><label for="fr">FR:</label><input type="text" id="fr"></div>
<div><label for="nl">NL:</label><input type="text" id="nl"></div>
<div><input type="submit" id="enregistrer" value="Sturen"></div>
</form>
I use Chrome version Version 24.0.1312.57 m
Any Idea ?
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>