I have an application that does some searches against post codes and for the most part it works fine. However, I have noticed that the clear icon which appears on the right-hand side of the field does not appear in some browsers.
So I created a basic HTML markup to test against some browsers. This is not have any accompanying CSS stylesheet.
<input type="search" />
Under iOS 7 Safari and Chrome this does not appear.
Under Safari 7.0.1 and Chrome 31.0.1650.63 on the Mac this works perfectly fine.
Under Firefox 26 for Mac this does not appear.
The main reason why I want it is because the web app will be running mainly on the mobile platform and removing post codes in a flash would be very convenient for continued usage.
The other tactic I tried was to select the entire text once the field was on focus.
<input id="orig" type="search" value="" placeholder="Origin" onclick="this.select()">
This works under Firefox/Safari/Chrome on the Mac but not on iOS.
I do not really mind which of the above works as long as I can quickly get rid of the old text from the search field. Is there a universal markup I could use that would work across all browsers?
I have solved my query with the following code using Jquery mobile:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="content">
<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
I hope this helps anyone having the same issue.
Related
So I have a strange problem regarding the, play icon on click event on Samsung S7.
On other phones everything is working correctly but, on Samsung S7 I have strange issue, so when user clicks on icon it doesn't recognize the click event, it just opens google search.
Here is my html
<div id="video-blurb" class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_blurb_0 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #23282d;">I</span></div>
<div class="et_pb_blurb_container">
<h4>Play Video</h4>
<div id="cover-video">
<span class="closer">X</span><br>
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe id="youtube-vid" src="https://www.youtube.com/embed/AoHDeBBx4og?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div> <!-- .et_pb_blurb_content -->
</div>
And also Js
$('#video-blurb .et-pb-icon').click(function(ev) {
$('#cover-video').fadeIn();
$(videoBlure).attr('src','https://www.youtube.com/embed/AoHDeBBx4og?wmode=opaque');
$('#youtube-vid')[0].src += "&autoplay=1";
ev.preventDefault();
});
I hope you understood the question
Here is screenshot:
I'm trying to use Selenium in python to web scrape some data that is behind a login page. By viewing source, the page source code is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sometitle</title>
</head>
<body>
<div id="id1"></div>
<div id="wrapper">Loading...</div>
<div id="id2">
... some code ...
</div>
... some code ...
<script data-main="main" src="libs/requirejs.js"></script>
</body>
</html>
I tried to use the following code to log into system and go to the next page, but it cannot find username/password elements in the above source code:
from selenium import webdriver
browser = webdriver.Chrome()
username = 'username'
password = 'password'
browser.get("https://sometitle.com")
browser.find_element_by_name("callback_0").send_keys(username)
browser.find_element_by_name("callback_1").send_keys(password)
browser.find_element_by_name("callback_2").click()
I then examined elements by inspect elements and found the elements on that page:
<div id="wrapper"><div id="login-base" class="base-wrapper">
<div id="header" class="clearfix">
...
</div>
<div id="content" class="content"><div class="container-shadow" id="login-container" style="background-image: url(../images/box-bg.png);">
<br>
<h1>Header</h1>
<form action="" method="post" class="form small">
<fieldset>
<div class="group-field-block">
<label class="short">Username:</label><input type="username" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block">
<label class="short">Password:</label><input type="password" name="callback_1" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block float-left">
<input name="callback_2" type="submit" class="button" index="0" value="Login">
</div>
<ul class="link-box float-left"></ul>
</fieldset>
</form>
</div>
</div>
</div>
</div>
My question is - how can I locate the username/password/submit elements on the page that is only visible from inspect elements but not page source? Did some research, seems the website was built as dynamic website and it's redirecting to other page via jquery or javascript or something. I don't quite understand what's going on. Really appreciate some help or some insights!
In the HTML document there is script tag that contains some javascript function
<div class="container">
<div id="container2">
<div id="container3">
<script>
loadme ('main');
</script>
</div>
</div>
But when I do 'Inspect Element' on browser, instead of this, appears a block of tags.
<div class="container">
<div id="container2">
<div id="container3">
<div class="content">
<div class="contenthead">
Some Text
</div>
<div class="c1">
<div class="c2">
<form id="myForm">
<label>
Text
</label>
</form>
<div class="c3">
<a href="#" onclick="javascript:f1('Text', 0, 0)">
</a>
</div>
<div class="clear">
</div>
</div>
...
I want to get this block with my own app but I cannot. I use Delphi TWebBrowser to do this.
How can I get this HTML code using Delphi WebBrowser?
Yes, obviously. because while inspecting through Firefox Firebug or Chrome Firebug or IE Firebug, you can't see the script like the one you mentioned.
And you can see your script tag by viewing through Source Window (ctrl + u => shortcut to open source window for Chrome and Firefox. )
I'm having a weird problem where datetime-local inputs overflow their boundaries on Chrome (tested so far on Chrome 35 x64 for Linux), but don't on Firefox (29.0). Here's a screenshot of what happens in Chrome:
chrome screenshot
And here's what it looks like in Firefox:
firefox screenshot
Here's the relevant HTML:
<div class="container-fluid">
<div class="row">
<div id="filter-panel" class="col-md-3">
<ul class="list-group">
<!-- Filter by time -->
<li class="list-group-item">
<h4>Filter by Time</h4>
<div class="input-group">
<span class="input-group-addon">Oldest</span>
<input type="datetime-local" class="form-control" id="log-filter-early-time">
</div>
<div class="input-group">
<span class="input-group-addon">Newest</span>
<input type="datetime-local" class="form-control" id="log-filter-late-time">
</div>
</li>
<!-- more li elements -->
There isn't any css except the twitter bootstrap affecting it. I'm using the most recent version (downloaded a few days ago).
How can I make it so that the input fields are constrained in their div? I do want them to take the whole width, but nothing more. Also, is it possible to get the spans with .input-group-addon to be the same width without giving them fixed, pixel-unit-ed values? I tried assigning them the same width as a percent but that didn't have any effect.
datetime is no longer supported in firefox when you put datetime-local it seems to work
here is a discussion about it
in chrome the datetime-local which is supported has a min width regardless of the container div so appears to be broken but its not .. if you want the datetime-local input you have to have enough space in the container
http://html5test.com/compare/feature/form-datetime-local-element.html
I have looked into many similar problems and solutions but none that have fixed this problem. This form works in Firefox but not Chrome. I would like to understand what Firefox is doing that Chrome is not and fix this page so it works in all browsers.
The form seems to become unusable once it is placed inside JQuery UI tabs but only in Chrome.
<form method="post" action="/data-page/" id="enter_exercise" >
<div id="tabs_ajax">
<ul>
<li>General Info</li>
<li>Heart Rate</li>
<li>Exercise</li>
</ul>
<div id="tabs-1" style="padding:0;" >
Workout Title:<input type='text' name='title' value="" />
</div> <!-- END tab-1 -->
<div id="tabs-2" style="padding:0;" >
Average Heart Rate:<input type='text' name='avgHR' value="" />
</div> <!-- END tab-2 -->
<div id="tabs-3" style="padding:0;" >
Run Miles:<input type='text' name='miles' value="" />
</div> <!-- END tab-3 -->
</div>
</form>
The javascript (which is posted at the bottom of the page)
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j( "#tabs_ajax" ).tabs({
});
});
</script>
This page is for exercise input on a wordpress blog and is initiated as a fancybox popup. I use include("../../../wp-load.php"); to allow this popup to access the wordpress functions. I also use wp_enqueue_scripts("jquery"); and wp_enqueue_script('jquery-ui-tabs');
If I create a plain form on this popup, it works, but when I place the form within the <div id="tabs_ajax">content, it does not allow me to enter form data in Chrome. It works in Firefox but Chrome is unresponsive, including the submit button.