I cannot seem to get my jQuery Mobile styles to apply to my dynamically filled select. I have tried adding themes, adding the styles manually, refreshing, $('.ui-page-active').trigger('create'); etc. with no luck. The select:
<select id="CandidatesListBox" data-placeholder="true" onchange="myMethod()" style="width: 100%" aria-haspopup="true" class="candidatesList" data-theme="c" ></select>
To fill it:
var geocodeOption = document.createElement('option');
//fill option
if (_isMobile) {
$('#' + geocodesList.id).append(geocodeOption);
$('select#CandidatesListBox').selectmenu();
$('select#CandidatesListBox').selectmenu('refresh', true);
}
The select dropdown itself has the correct styles, but nothing else does. If I add
geocodeOption.className = geocodeOption.className + ' ui-btn'; the select just looks like a select and a button, and again the options contain no styling.
I also tried to read the jQuery forms link 1 and link 2 with no luck. I am using jQuery Mobile 1.4.2.
This is not actually an issue. I was unable to style the options, because in general, options cannot be styled. That was not a problem though because the Android OS handled the option styles. I was unable to see this because Google Canary did not render the Android option styles, but instead rendered the Windows option styles.
Related
Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.
Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?
Thanks!
I just opened up a random bootstrap template site and did what you where asking for.
Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.
Switch to the console tab.
Use Jquery selector to select all
the intended elements (you can use the same css selector here too
but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
The result is all the elements
of that selector.
NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.
In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).
Visually
Temporarily set a border or background color for the selector, like:
border: 1px solid red;
Or:
background: red;
This makes it very easy to find the affected elements.
Programmatically
On the JavaScript console, use:
// Replace with something that prints the relevant details
var stringify = function(element) { return element.innerHTML; };
// Iterate over all affected elements and print relevant info
var affectedElements = document.querySelectorAll('.your .selector');
var len = affectedElements.length;
console.log('Elements affected: ' + len);
for (var i = 0; i < len; i++) {
var affectedElement = affectedElements[i];
console.log(
'Element ' + (i+1) + ':\n' +
stringify(affectedElement) + '\n\n');
}
The inspection of elements feature of the browser is meant for the purpose you want.
1.Open up the index file in any browser(preferably Mozilla Developer edition),
2.Right click and Inspect element,
3.Then open the compiled stylesheet. Find out the style element you want to check the effect of.
4. Go back to inspection, remove/add CSS properties and see the effect in real time.
The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.
I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.
I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});
I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!
as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
need some help to style 2 datepicker on one site in different styles.
Want a different background in the second datepicker...
Tried to wrap the datepicker in seperate div, but doesnt work.
Even <%= Html.Telerik().DatePicker().Name("DatePickerStart").InputHtmlAttributes(new {#class="datepicker2"});%>
doesnt work..
but .InputHtmlAttributes(new { style = "width: 200px;" }) resizes my datepicker.
What do i wrong?
One possible solution is to use the t-animation-container class to modify the css properties.
But exists a better solution, especially when using more datepickers?
I'm trying to "single source" a form page which can be in edit mode or view mode. For various reasons, this isn't using the ASP.Net FormView or DetailsView controls.
Since there is no way to disable a textbox without turning its contents gray (well, we could "eat" all of the keystrokes into it, but that isn't very elegant either) and disabling a dropdown list or listbox isn't what we want, our first try was to duplicate all of the form input controls with a label and use CSS to select which ones are visible depending on the mode of the form. That works, but it's ugly to edit and the code-behind has to populate both controls every time.
We could control the visibility in the code-behind to avoid filling both controls, but we still have to add them both to the form.
So I had the idea to use jQuery to swap out the input controls for <label>, <div>, or <span> elements. This works, to some extent, by creating the appropriate selectors and using the replace() jQuery method to swap out the elements dynamically.
The problem is that I not only need to copy the contents, but also the styles, attributes, and sizing of the original input controls (at this point we're only talking about textboxes - we have a different solution for dropdown lists and listboxes).
Brute force should work - "backup" all of the attributes of the input control, create the new "read only" element, then replace the input control with the new element. What I'm looking for is something simpler.
Succinctly, using jQuery, what is the best way to replace a textbox with a label and have the label have the same contents and appear in the same location and style as the textbox?
Here is what I have so far:
$(":text").each( function() {
var oldClass = $(this).attr("class");
var oldId = $(this).attr("id");
var oldHeight = $(this).outerHeight();
var oldWidth = $(this).outerWidth();
var oldStyle = $(this).attr("style");
$(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
$("div#" + oldId).attr("class", oldClass);
$("div#" + oldId).attr("style", oldStyle);
$("div#" + oldId).width(oldWidth);
$("div#" + oldId).height(oldHeight);
$("div#" + oldId).css("display", "inline-block");
});
This may not suit your needs, but it's a possibility.
<input> and <textarea> tags support the read-only property. The behavior of read-only fields is slightly different than disabled. Here's what the HTML 4.01 Recommendation says:
When set, the readonly attribute has the following effects on an element:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful. ("Successful" means it will be submitted as a parameter.)
Another key difference is that elements with this attribute can be styled however you like. (You could remove or change the borders and background for instance.) So instead of having to create new elements and copy attributes, you could merely add or remove the read-only attribute.
You could then create a style for these fields "input[readonly] {}". Noting of course that popular versions of IE ignore the attribute selector in CSS. (So maybe just define a class that you add and remove.)
Why not use an edit in place plugin like Jeditable. This way you can generate your view mode and have each field editable at the click of a button.
When I've done this, I've had to "eat" each keystroke as you describe and mirror it into a "hidden" span tag that mirrors the <input or <select element. The span tags all have a css class that's styled using media selectors to only show for print, and the inputs have a css class that's styled to only show for the screen.
If you don't mind the static width that doesn't scale to the size of the text, you could also just style your <input tags to not show a border for print, but that's pretty ugly.