Good morning all,
I have to show a 16x40 pixel image in a jqGrid column, that changes when I click
on it; at this purpose, I defined my formatter as follow:
function dataViewLink(cellValue, options, rowdata, action)
{
var chartLink = "<div style='float:left;'><img id='_addtochart" + options.rowId + "' class='ui-icon-addtochart' onclick='devToggleChartChecked(" + options.rowId + ")'></img></div>";
return chartLink;
}
and created two CSS classes with different images:
.ui-icon-addtochart
{
content: url(../images/addtochart.jpg) !important;
}
.ui-icon-removefromchart
{
content: url(../images/removefromchart.jpg) !important;
}
then, I dynamically switch these classes using jquery. Everything
works fine on chrome, but there is no way to get it working on firefox.
The images does not show on firefox.
I have already found an issue related to the 'content' attribute on firefox:
Content url does not display image on firefox browser
and tried all the suggested workarounds, but none of them worked for me.
I cannot show these images with firefox.
This little problem is driving me crazy. Does anyone have any suggestion?
Thank you very much in advanced.
Bruno
It seems I found a solution; I changed my formatter with:
function dataViewLink2(cellValue, options, rowdata, action)
{
var chartLink = "<div style='float:left;' id='_addtochart" + options.rowId + "' class='ui-icon-addtochart ui_add_dev' onclick='devToggleChartChecked(" + options.rowId + ")'></div>";
return chartLink;
}
and the CSS classes:
.ui-icon-addtochart
{
background: url(../images/addtochart.jpg);
height: 16px;
width: 144px;
}
.ui-icon-removefromchart
{
background: url(../images/removefromchart.jpg);
height: 16px;
width: 215px;
}
it works both on chrome and on firefox.
Thank you very much anyway!
Bruno
Related
I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:
LastPass iFrame
<iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&add=1" scrolling="no"
style="height: 27px; width: 1263px; border: 0px;"></iframe>
The CSS:
.button-bar {
width: 175px;
float: left;
top: 113px;
text-align: right;
right: 20px;
position: absolute;
}
Image: http://i.stack.imgur.com/Rq5Z5.png
How can I avoid this case? Thanks so much!
I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.
<div id="lptopspacer48468746" style="height: 27px;"></div>
It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.
Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.
Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.
So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.
<script>
var log = function(msg) {
if (console && console.log){
console.log(msg)
}
};
$(document).ready(function(){
var maxTry = 5, lptopHideTimeout;
var clearLptop = function(delay) {
var $lptop = $("div[id^='lptopspacer']");
if (lptopHideTimeout) {
window.clearTimeout(lptopHideTimeout);
}
if ($lptop.length && $lptop.is(':visible')) {
log("** Hiding lastPass lptopspacer...");
$lptop.css( "display","none" );
}
else {
maxTry -= 1;
if (maxTry > 0) {
log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
lptopHideTimeout = window.setTimeout(function(){
clearLptop(delay);
},delay);
}
else {
log("## Giving up after too much attempts.");
}
}
};
clearLptop(500);
});
</script>
Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.
Uninstalling Mcafee safekey solved it for me.
I'm trying to add an asterisk before the placeholders of required inputs. I was using input::-moz-placeholder:before which I found on this StackOverflow post and it was working the last time I checked in January. However, it seems that it is no longer supported. Here's what I have going:
div.interactFieldRequired {
input::-webkit-input-placeholder:before {
content:'* ';
color: $error-color;
}
input:-moz-placeholder:before {
content:'* ';
color: $error-color;
}
input::-moz-placeholder:before {
content:'* ';
color: $error-color;
}
input:-ms-input-placeholder:before {
content:'* ';
color: $error-color;
}
input::-moz-selection:before {
content:'* ';
color: $error-color;
}
input[type="text"]:before {
content:'* ';
color: $error-color;
}
}
This is working in every browser except Firefox and IE10. I cannot alter the HTML, although I can use Javascript. However, I'd prefer to do this with scss.
That is strange indeed. I haven't found any reasons why placeholder css support has been removed from Firefox - this applies for Developer Edition too. So if you are OK with JS, you can take advantage of JavaScript document.getElementsByTagName() method and loop through this list and concat() each input's placeholder to an asterisk , like so:
var asterisk = "* ",
inputList = document.getElementsByTagName("input");
for(i=0; i < inputList.length; i++) {
inputList[i].placeholder = asterisk.concat(inputList[i].placeholder);
}
It has a wide support amongst the browsers. I've made an example of that on jsfiddle
Hope this helps
I am fairly new to jquery all together. Basically what I have done is made a dynamic gallery populated from images retrieved from an ajax call. The images are appended to a unordered list and supposed to receive special css formatting specific to the image gallery, other ul lists are untouched. Everything works great, however when I view the gallery, the proper css formatting is not rendered on the images. I have searched all over stackoverflow and tried many of the options presented to similar problems including .listview('refresh'); and after an ajax complete: as well as some other solutions. Nothing is working. If I navigate away from the page and come back, the formatting is applied. Here is the following code I am working with.
Link to Gallery
$('ul#fieldList').append('<li id="albums"><img src="images/1.jpg"><h3>'+value.name+'</h3><p>'+value.description+'</p><div class="ui-li-count">'+value.count+' Images</div></li>');
onClick Function
function GetUserPhotos(albumid) {
console.log("Get User Photos Function Ran");
var get_user_photos_album_id = albumid;
var get_user_photos_client_id = window.localStorage.getItem("client_id");
var get_user_photos_user_id = window.localStorage.getItem("user_id");
console.log("Assign Variables from local storage");
var formData = {
user_id: get_user_photos_user_id,
client_id: get_user_photos_client_id,
album_id: get_user_photos_album_id
}; //Array
$.ajax({
url: "client_photos.php",
type: "POST",
data: formData,
async: "false",
success: function (data) {
$("ul#photosList li#photos").remove();
$("#test1").html('');
//data - response from server
var PhotoData = $.parseJSON(data);
console.log("PhotoData json data parsed");
$("ul#fieldList li#albums").remove();
$.each(PhotoData, function (key, value) {
$('ul#photosList').append('<li id="photos"><a rel="' + value.album + '" href="http://www.myphotoshootapp.com/cms/uploads/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" class="swipebox" title="' + value.fullname + '""><img src="http://www.myphotoshootapp.com/cms/uploads/thumbs/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" alt="' + value.fullname + '" /></a></li>');
});
Swipe();
},
complete: function () {
$('#ul#photosList').listview('create');
$.mobile.changePage("#Gallery1");
}
});
}
DIV Item's Are Added To
<div data-role="content">
<ul data-role="listview" data-inset="true" id="photosList">
<li id="title">Photos</li>
<div class="main" id="test1"><img src="images/ajax-loader.gif" alt="Loading..." /></div>
</ul>
</div>
And CSS
li#photos { float: left !important; width: 33.33333333% !important; }
li#photos a { display: block !important; margin: 5px !important; border: 1px solid #3c3c3c !important; }
li#photos img { display: block !important; width: 100% !important; height: auto !important; }
As I said, I am pretty new to this and learning as I go, I have learned so much from reading a lot of other questions here but this one I can not figure out. Thanks for the help.
On the first visit, a bunch of extra classes like ui-btn, ui-btn-icon-right, ui-li-has-arrow, ui-li, ui-li-has-thumb, ui-btn-up-c are being added and the second time, only my normal formatting is applied.
First Visit
This image shows what the css formatting looks like on the first page visit
Here's Image
Second Visit
This image shows what the css formatting looks like when I return to the page (LIKE ITS SUPPOSED TO)
Here's Image
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
width: attr(data-width);
I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.
Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.
I'm trying to print iframe content.
contentWindow.focus();
contentWindow.print();
This code works in IE, Firefox and Safari. But don't work in Chrome and Opera. These browsers print entire page.
I tried to use this topic How do I print an IFrame from javascript in Safari/Chrome. But it didn't help me.
Could someone help me?
This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this:
var clone=document.documentElement.cloneNode(true)
var win=window.open('about:blank');
win.document.replaceChild(clone, win.document.documentElement);
win.print();
I have not tested this but it should create a copy of the page in a popup window and print it, without having to load the content a second time from the server or loosing any DOM modifications you may want printed.
As I understand, it's impossible to implement iframe printing without opening new window.
My print function:
if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) {
var href = contentWindow.location.href;
href = href.indexOf("?") > -1 ? href + "&print=1" : href + "?print=1";
var printWindow = window.open(href, "printWindow", "scrollbars=yes");
printWindow.focus();
}
else {
contentWindow.focus();
contentWindow.print();
}
Also I added the following code to the end of the body (when print==1):
<script type='text/javascript'>
function invokePrint() {
if (document.readyState && document.readyState!='complete')
setTimeout(function() { invokePrint(); }, 50);
else if (document.body && document.body.innerHTML=='false')
setTimeout(function() { invokePrint(); }, 50);
else {
focus();
print();
}
}
invokePrint();
</script>
I cannot reproduce your problem with Chrome. Opera, however, does indeed still print the entire outer page when trying to only print the iframe.
I have devised a workaround and although it does work mostly, it is not 100% failsafe (amongst others because Opera wraps lines for printing; I don't know how to calculate the correct height in such cases). That said, the following code works at least reasonable (using jQuery for convenience):
if ($.browser.opera) {
var ifr = $('#youriframe');
var ifrbody = ifr.get(0).contentDocument.body;
var sheet = $([
'<style type="text/css" media="print">',
'body * {',
' display: none;',
'}',
'#youriframe {',
' border: none;',
' display: block;',
' height: ', ifrbody.scrollHeight, 'px;',
' margin: 0px;',
' padding: 0px;',
' width: ', ifrbody.scrollWidth, 'px;',
'}',
'<\/style>'
].join(''));
$('head').append(sheet);
window.print();
sheet.remove();
}
Hope this helps.
I tried above code and after making changes to the above codes I came with conclusive code as follows
var win=window.open('about:blank');
win.document.write('<html><head></head><body>');
win.document.write('<iframe frameBorder="0" align="center" src="'+window.location.href+'" onload="test()" style="width: 619px; height: 482px;"></iframe>');
win.document.write('<scr'+'ipt>function test(){window.focus();window.print()}</sc'+'ript></body></html>');
win.document.close();
if (window.focus) {win.focus()}
try this one