I'm having issue with a css rule i wrote, the issue is that the rule works
with IE but doesn't work with any other browser.
the rule looks like this ->
.ui-toggle:focus .toggleMsg, .ui-toggle:focus .toggleAcc, .toggleAcc:hover,
.toggleMsg:hover {display:block}
my aim here is to turn either toggleMsg class or toggleAcc class to display:block
it works fine only with IE, if i change the .ui-toggle:focus to .ui-toggle:hover
then when I hover I get display:block rule to kick in.
I have uploaded a minified version of my code to http://www.incapsulatest.tk/test
if anyone has any idea why using :hover works while :focus only works with ie
that would be great
Related
I'm running Rails 5.x, with, Cucumber, Siteprism and Capybara through chromedriver. Most things work except..
I have a tiny bit of javascript that changes the class on an element in response to an event. But Capybara never sees the change. It only ever sees the class the element has when the page initially loaded.
Using Chrome, and debugging my Cucumber steps, I can see the element has the new class, but Capybara doesn't see it.
This must be an issue other people have encountered and solved, though I can't find the right subject title.
example coffeescript
$(document).on('focus', 'tbody#item-entry > tr > td > input', (e) ->
$(#).closest('tr').addClass('focused-row')
$(#).closest('td').addClass('focused-cell')
)
example html after the focus event has been triggered
<tr class="focused-row">
<td>ignore this </td>
</tr>
The purpose is to change the background colour of the row containing an input element that has focus. It works.
But Capybara, can't see the class, but it can see any classes added when the page is loaded. e.g.
expect(siteprism_stuff.root_element['class']).to match(/focused-row/)
Ignore the SitePrism stuff, that just gets the right element. root_element is the Capybara class for the dom node.
Now I know it's getting the right Capybara element because if I change my view to put stuff in the class for each row, then it sees that perfectly OK. What it can't see is the any new class added via Coffeescript. Although it's visible in the Chrome inspector, and changes the background color of the focused row as required.
You're specifying an "ends with" CSS attribute selector ($=)
input[class$='form-control']
which since the class attribute for the element you're interested in
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="universitiesTable">
doesn't end with 'form-control' is correctly not matching. You probably just want to use a normal CSS class selector input.form-control if continuing to do it the way you are. Any of the following options should find the search field and fill in the data you are trying to fill in.
fill_in 'Search:', with: string
fill_in type: 'search', with: string
find(:field, type: 'search').set(string)
find('input.form-control').set(string)
Note: Your question is still unclear as to whether you are seeing the class added in the inspector in test mode, and whether the line color is changing while the tests are running (or whether you're only seeing that in dev mode) - This answer assumes the JS is actually running in test mode and you're seeing the line color change while the tests are running.
You don't show how you're actually triggering the focus event but I'll assume you're clicking the element. The thing to understand when working with Capybara is that the browser works asynchronously, so when something like click has been done, the actions triggered by that click have not necessarily been done yet. Because of that, whenever doing any type of expectation with page elements you should always be using the matchers provided by Capybara rather than the basic matchers provided by RSpec. The Capybara provided matchers include waiting/retrying behavior to handle the asynchronous nature of dealing with the browser. In this case, assuming siteprism_stuff.root_element is the row element then you could be doing something like
expect(siteprism_stuff.root_element).to match_css('.focused-row')
or depending on exactly how your siteprism page objects are setup you could pass the class option to the siteprism existence checker
# `page_section` and `have_row` would need to be replaced with whatever is correct for your site prism page object
expect(page_section).to have_row(class: ['.focused-row'])
When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?
Using jQM, a simple link can be turned into a button by using the following code:
Link button
data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>
Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?
I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.
Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?
Basically what I am asking is how do I edit the jQuery Mobile built in theme?
Thanks and look forward to your answers :)
Intro
If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.
Theme roller
Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).
Custom CSS changes
This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.
Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time.
To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.
Problem to think about
Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:
<input type="text" value="Some value" id="change-me"/>
you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>
To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.
How to correctly override CSS styles
This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:
#change-me .ui-input-text {
background-color: red !important;
}
If nothing else works change original CSS file(s)
jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.
One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.
The solution lies in CSS specificity within your own additional CSS file. All you need to do to override any formatting in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.
Next, in your own CSS, specify that the class be applied to the id of the container.
As an example, I'll remove the JQM border from an image link below.
#img_button_1 .ui-btn-inner {border: none !important;}
Where #img_button_1 is the id of the HTML anchor element.
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
It's as simple as that.
One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS after JQM CSS.
I have forked a working example at jsFiddle below.
http://jsfiddle.net/Z8Xnx/14/
The biggest benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. This becomes important if your want to import your JQM back into the ThemeRoller tool at a later date. If you modify the actual JQM CSS by hand, you may have an issue successfully importing your JQM back into ThemeRoller again.
I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue.
Hope this helps everyone with an easy solution to their JQM style conundrums.
** UPDATE **
It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the implementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...
jQuery Mobile CSS Override Example
If you are looking to simply change the styling then you can use the jQuery Mobile themeroller.
http://jquerymobile.com/themeroller/index.php
Otherwise, I would suggest using another stylesheet rather than directly editing the jQuery mobile stylesheet.
If you are looking to reduce the number of files that you are serving to your visitors then I would compress both stylesheets and then just insert your styles below their styles as a production copy. That way, you can keep them compressed and combined for production, but you could keep them separate for easy upgrading later and for development ease of use.
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
I am using the DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) plugin for a page with the latest build of JqueryMobile but am finding an odd bug.
When I open my app on index.html and navigate through the pages to the page with the date picker is I get this - http://cl.ly/19022K40472e3k0D0D2H
However if I go direct to the page via the address bar it works fine and shows up as it should.
So just wondering is anyone else having problems with this? Or any idea how to fix it?
Also I might add does anyone know how I can have the current date show in the text field?
Thanks.
1) Looks like it is a problem with the css of datebox not being loaded properly.Are you loading the CSS of datebox in index.html?.In that case,when you directly go to the page with the datepicker,CSS might not be loaded.You can check if datebox css is loaded by using firebug for firefox or the in built developer tool in Chrome/Safari.(Check the resources tab to see all the loaded resources)
2)Check this example - http://jsfiddle.net/BNsPB/. In this example I wrote the code in document ready,in your case you might have to write it in pageinit or pagecreate event handlers
After checking your actual code I think you have to add the above code snippet in the pageshow event handler like this:(Assuming bookingPage is the id of the page)
$("#bookingPage").live( 'pageshow',function(event, ui){
var today = new Date();
var todayStr = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
$('#mydate').trigger('datebox', {'method':'set', 'value':todayStr});
});
});
You need to load the files in the actual file that your site navigates to in the first instance (index.html presumably). It sounds like you have only referenced the CSS and plugin code in your date picker page, but in default mode jQM uses an ajax hash-based navigation system, so you need to reference assets in such a way that they are available right from the get-go.
I need to render user submitted html within an xul:panel. I'm inserting the html into an xul:browser element within the panel so that invalid xhtml is not an issue (it's sandboxed within the browser frame).
Is there anyway to disable javascript within the xul:browser? My original plan was to write some regex that strips out all JS from the html, but it would be so much easier if I could simply disable JS and not worry about it.
EDIT: Well, browser.docShell.allowJavascript = false; is what I was looking for. Unfortunately this only works if the browser type is set to "content", and if I set a type to "content" xul:browser doesn't render correctly within a panel (known firefox bug that has been around for years). Without a content type it gives the loaded page access to CHROME, which is the reason I wanted to disable JS in the first place.. ugh