Develop Reference

jquery .css background image

I have been working on my website and I'm having trouble with setting the css of my background.
This is the code that i have right now. Im trying to use only jquery and not a css file.
$('<div id="klanbot_config">').css({
position: "absolute",
left: 792,
top: -7,
width: 199,
height: 545,
border: "3px gold solid",
color: "white",
"font-size": "10px",
}).appendTo("#centerbox2");
I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.

I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.
You'd need to put the url('...') part in double-quotes:
background: "url('http://i.imgur.com/Uc3QUrs.jpg')"
Otherwise you're trying to call a function called url() and set the background to its return value.

When resizing jqxWindow, window body width and height not changing

Here is JSFIDDLE to my problem. As you can see, divs displayed inside window have set width to 100%, and my goal si to foce this divs to automatically resize when I am manually resizing the window.
#container {
width: 100%;
display: table;
table-layout: fixed;
border: 5px solid #ccc
}
I was looking inside this element throught element inspection in chrome and I figured out, that windowBody div doesn't change its width and height and that is the problem. Does anyone know how to achieve what I want?

I have just found out, that the problem was that you cannot declare maxWidth and maxHeight to 100% in jqxWindow declaration. You need to set absolute numbers. In my case worked setting them to max width of the screen.
$('#jqxwindow').jqxWindow({
height: 200,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true
});
here is JSFIDDLE

Overriding bootstrap maxWidth using Javascript and not css

So I have a .js file containing this:
var styles = {
wrap: {
left: 0
, top: 0
, overflow: 'hidden'
, margin: 0
, padding: 0
, height: '100%'
, width: '100%'
, zIndex: -999999
}
, img: {
position: 'absolute'
, display: 'none'
, margin: 0
, padding: 0
, border: 'none'
, width: 'auto'
, height: 'auto'
, maxHeight: 'none'
, maxWidth: 'none'
, zIndex: -999999
}
};
And the maxWidth line is being overridden by bootstrap. I want to override bootstrap by effectively making maxWidth !important, but am unsure about the correct syntax in doing so, for example:
, maxWidth: 'none !important'
Doesn't work. I can solve this problem by adding the rule as important in a stylesheet but am looking for a solution that doesn't require the use of the stylesheet.

Put the js containing those values after the bootstrap files. (Or just to be sure, put it at the end of the page)

Display title attribute of an image inside a DIV

This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.

I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.

Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html

Dynamic Links and jQuery Lightbox issue : Loading image in lightbox...completely stumped!

I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML Snippet
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
Subsequent CSS:
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
Any help would be greatly appreciated!!!

You can use .live() for the event handler, and .triggerHandler() to immediately open the lightbox, like this:
$("#lightboxlink").live('click', function(e){
$(this).filter(':not(.fb)').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
}).addClass('fb');
$(this).triggerHandler('click');
e.preventDefault(); //prevent opening in new window
});
This runs .fancybox() on the link, but only if we haven't already run it, which we're tracking with a .fb class addition. Whether it's a new or fresh bind, we need to trigger the click handler, which is what fancybox listens to in order to open.