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>
Related
I am using the Firefox webdriver for Selenium to scrape a webpage that looks to be rendered with React on the client side. The classes in the rendered DOM look dynamically generated, and seem to change with every new request. There are also many button elements on the page, some of which are not in the viewport. So my strategy is to search for a way to click on a button that contains text that I enter using selenium. Several buttons will contain the text, and I want to just find the first such button.
Using selenium/xpath, how would I select the first button that contained the text E9 1QJ?
<button>
<div><svg ...> </div>
<div>
<div>London</div>
<div>E9 1QJ</div>
</div>
</button>
<button>
<div><svg ...> </div>
<div>
<div>London Foo Bar</div>
<div>E9 1QJ</div>
</div>
</button>
Thanks
This should work:
{driver}.find_element_by_xpath("//button[div/div[text()='E9 1QJ']][1]")
But keep in mind that a solution like this it is not very flexible and could break with a minimum change in the html structure.
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>
I'm trying to customize the form layout of edit/add/del dialogs but the problem is that the height of my custom fields are not following the standard height (from the fields created automatically by jqgrid). Here is an image:
What I want is that the height of td.DataTD from my custom fields 'Responsável' and 'Componente' keep the same as the other fields. Here is the important part of my code:
beforeShowForm: function(form) {
$('#tr_responsavel').html('<td class="CaptionTD">Responsável</td><td class="DataTD"> <table><td><select role="select" id="resp" name="responsavel" size="1" class="FormElement ui-widget-content ui-corner-all"><option role="option" value="1">Usuário</option><option role="option" value="2">Área</option><option role="option" value="3">Grupo</option></select></td><td><input id="inputResponsavel" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
$('#tr_componente').html('<td class="CaptionTD">Componente</td><td class="DataTD"> <table><td><input id="comp" type="text" role="textbox"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
},
Why you replace existing jqGrid fields with another HTML code? Additionally it seems strange to set <table> inside of the field 'Responsável'. How you imagine that jqGrid get the results from such custom fields? Is it not more easy to append or prepend standard input fields of the Add/Edit form with additional information. In the case the standard fields with the standard ids will stay unchanged and you will have less problems. jqGrid will get the information from the fields without any problems. If one uses jQuery UI Autocomplete or jQuery UI Datepicker controls it do that.
If you really need custom field you should follow the documentation and use edittype: "custom". Look at the demo from the answer for more information.
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>