I am trying to create a div and add a background image to it in jQuery. For some reason, I cannot do it. If I instead make my background color white, I get a white background. Here is my code:
function appendToDom(poster) {
var aPoster = $('<div>');
aPoster.css({
display: 'inline block',
float: 'left',
margin: '10px',
marginLeft: '37px',
marginTop: '20px',
width: '200px',
height: '300px',
fontSize: '36px',
color: 'black',
//backgroundColor: 'white',
backgroundSize: '200px 300px',
backgroundImage: './../images/question.png'
})
/*
$(aPoster).attr("css","background-image: url(~/desktop/MyMovies/public/js/images/question.jpeg)");
$(aPoster).attr("css","background-size: 200px 300px");*/
$(main).append(aPoster);
}
Thanks for all the advice! So I took the suggestions given to me, but it still doesn't work for me.Here is a screenshot of what I have:
my improved code
NVM I got it! Thanks!
Try making your method look like this...
aPoster.css({
'display': 'inline block',
'float': 'left',
'margin': 10,
'margin-left': 37,
'margin-top': 20,
'width': 200,
'height': 300,
'font-size': 36,
'color': 'black',
'background-color': 'white',
'background-size': '200px 300px',
'background-image': 'url("./../images/question.png")'
Try something like this and see what you get. You also notice that I got rid of the values with pixel. Because JavaScript's default values for CSS properties like that have their units in pixels. Just try it and see if it works. Hope this helped. Oh and one last thing, if you used an external script, don't forget to use the URL and make it relative to the script itself and not your main page...but in your case, the styles would be added inline to the div element so you should probably make it relative to your main page, the page where the div would be created...
If the style is inline like in your case, the path has to be relative to the html document. Please check it.
Related
I have used jquery and css to show a loader with gray background during an ajax call. The thing is I need the loader and the gray background to be visible only within a box like as shown below with loading text and icon in center
My code is working fine but the loader with gray background is showing for the full page like as shown below.
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
ajaxindicatorstart('loading data.. please wait..');
function ajaxindicatorstop()
{
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeOut(300);
$('.myBox').css('cursor', 'default');
}
function ajaxindicatorstart(text)
{
if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){
$('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
}
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
$('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeIn(300);
$('.myBox').css('cursor', 'wait');
}
Your loader has a position of fixed, this takes the position of the viewport rather than the position of your element.
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'absolute',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'absolute',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
Also give your myBox a position of relative.
I am using this code to add textbox in canvas using fabric js,
var text = 'Type Text Here';
var textSample = new fabric.Textbox(text, {
left: getCardLeft() + 100,
top: getCardTop() + 10,
width: 200,
height: 20,
fontFamily: 'Helvetica',
fill: getColorPickerForegroundColor(),
fontWeight: '',
fontSize: parseInt('25'),
originX: 'center',
hasRotatingPoint: true,
centerTransform: true,
});
canvas.add(textSample);
Which successfully add textbox into canvas.
Now, if i try to make it bold using this command
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
Working, But when try to change it to normal,
canvas.getActiveObject().set("fontWeight", "");
canvas.getActiveObject().set("fontWeight", "100");
canvas.getActiveObject().set("fontWeight", "normal");
canvas.renderAll();
not working.
I don't know where the issue is. Am i doing anything wrong here?.
Its behaving strange
You can see it here.
visit first here
Then visit here
I just take fabric.js from here and replaced with mine, and working all.
The following code works for me. I see two points where I could failed at your side:
canvas.renderAll();
Needed to be rerendered properly. And also:
canvas.setActiveObject(textSample);
was neccessary for me. Because otherwise:
canvas.getActiveObject();
was undefined.
Now a full working code example:
var canvas = new fabric.Canvas('c', { selection: false });
var text = 'Type Text Here';
var textSample = new fabric.Textbox(text, {
left: 300,
top: 50,
width: 200,
height: 20,
fontFamily: 'Helvetica',
fill: "#fac",
fontWeight: '100',
fontSize: parseInt('25'),
originX: 'center',
hasRotatingPoint: true,
centerTransform: true,
});
canvas.add(textSample);
canvas.setActiveObject(textSample);
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
canvas.getActiveObject().set("fontWeight", "100");
canvas.renderAll();
Hope that helps.
How do I change the padding-left for an element in JavaScript? I have used this code and it works:
$(".number_1").stop().animate({height: '295px', width: '210px', opacity: 1}, 100);
However, when I add padding-left to the code, it doesn't work:
$(".number_1").stop().animate({padding-left: '10px', height: '295px', width: '210px', opacity: 1}, 100);
How do I add padding-left in code for it to work?
String in key for objects without quotes only work when they can be parsed successfully.
Add quotes around padding left and that should work.
$(".number_1").stop().animate({"padding-left": '10px' ,height: '295px' ,width: '210px' ,opacity: 1}, 100);
add quote(") if using padding-left or change first latter into upper case if properly have - then use paddingLeft
$(".number_1").stop().animate({paddingLeft: '10px' ,height: '295px' ,width: '210px' ,opacity: 1}, 100);
OR
$(".number_1").stop().animate({"padding-left": '10px' ,height: '295px' ,width: '210px' ,opacity: 1}, 100);
You have to wrap the style rule in quotes:
.animate({'padding-left' : '20px' });
Or you can use this:
$("#p1").animate({paddingLeft:"+=100px"});
Here is a W3Schools Tryit Editor demonstrating how to use 'padding-left' or 'paddingLeft' in JQuery animations.
Try 'paddingLeft' instead of 'padding-left'.
Use paddingLeft when you're working with javascript, although in this specific case 'padding-left' might also work (not entirely sure on that though, as that would be a jQuery specific implementation thing).
$(".number_1").stop().animate({paddingLeft: '10px' ,height: '295px' ,width: '210px' ,opacity: 1}, 100);
And just a general tip, you should not put a space before the comma, but after it.
I'm creating a simple jQuery plugin for my web app. Right now i'm adding a 'settings' option, which can be used to change the default CSS for the selected elements:
Html
<script type="text/javascript">
var mycss = {tagNormalStyle: {backgroundColor: '#ddd', color:'#222'}};
$(document).ready(function(){
$("#tag1").tagme(mycss);
$("#tag2").tagme(null);
});
</script>
jQuery plugin
$.fn.tagme = function(options) {
// some defaults
var settings = $.extend({
tagNormalStyle:{
backgroundColor: 'black',
color: 'white',
marginLeft: '5px',
marginTop: '5px',
padding: '5px',
float: 'left',
borderRadius: '5px'
},
//more stuff here...,
options
};
}
In my code, i'm using something like:
if (condition)
tag.css = settings.tagNormalStyle;
The problem is, what if the user only needs to change the color, for example?
var mycss = {tagNormalStyle: {color:'#222'}};
$("#tag1").tagme(mycss);
Now all the defaults are gone for tagNormalStyle! How can i avoid to 'hard-code' every css property on my settings object? Maybe i could 'merge' the defaults and options objects.
Any ideas?
Thanks!
pass true as the first parameter to the extend function.
something like:
$.extend(true,obj1,obj2)
I am having trouble getting the following code to render as I expect it to:
var img = Titanium.UI.createImageView({
top: 0,
left: 0,
width: 140,
height: 92,
image: 'http://cdn.monmotors.com/tn_' + imgr,
defaultImage: 'car.png'
});
post_view.add(img);
var lbl = Titanium.UI.createLabel({
text: desc,
left: 160,
width: 'auto',
top: 0,
height: 92,
textAlign: 'left',
color: '#ffffff',
font: {
fontSize: 12,
fontWeight: 'bold'
},
});
post_view.add(lbl);
This is how it is rendering:
I've set top: 0 and I assumed this would put the label at the top, but this is obviously not the case.
Anyone have any idea how I can achieve this? Thanks in advance.
If all the images are the same height, you can set top to a negative value (perhaps -92 if your height for the image is set to 92). However, if the image sizes vary, you will likely need to vary the value appropriately.
Ideally, setting layout: horizontal in a view you use to wrap the label and the image together would make it so that top: 0 would work for you, but it appears that horizontal may not be supported (yet, at least) for Android in Appcelerator. That info is 9 months old, this link from three weeks ago says that it's now supported, so it's probably worth giving it a shot.
top: -70(or other -#) should bring it up