We Keep Coding

Html not loading dynamically into Div

I've been able to use answers provided at Load HTML page dynamically into div with jQuery to perfectly load html into divs in the past, however, with a new project that I've started which is based off of a codrops template (multi-level push menu), the pages do not load into the designated .content div
The webpage is here. I've loaded all the proper jquery libs, and the test page "bio.html" is properly pathed.
I am working very specifically on the first ul li menu list link "Biography" to just test the functionality of it.
The code I'm using in jquery is
$(document).ready(function(){
$("#bio").click(function(){
$('.content').load('bio.html');
//alert("Thanks for visiting!");
});
});
The selector "#bio" has been applied to
<li><a class="icon icon-male" id="bio">Biography</a></li>
in index.html. In the class="content" div tag I have it's css set to
.content {
color: white;
background: rgba(0,0,0,0.9);
background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
width: 60%;
border-radius: 2px;
padding: 3em 2em;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}
I don't know if any of the above code is interfering with whatever is not allowing the page to load dynamically when handler is clicked. I did make a change to class="content" from class="content clearfix" because I'm not too concerned about using the clearfix hack at the moment, which was the only change in identifying the element in the original codrops html.

you called jQuery library after your script ,
call jQuery first and then your script
and i encourage you to use 1.9.0 or later version.

Looking at your link you are loading your jquery file after your code therefor '$' is not defined move your jquery library above that and it should start working.

Button will not change color (HTML5)

I have three buttons that act much like radio buttons - where only one can be selected at one time:
<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>
For the normal, unselected state, all the buttons use a gradient background:
#btn-bronze
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
width: 33%;
height: 100%;
}
#btn-silver
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
#btn-gold
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
width: 33%;
height: 100%;
}
When selected, the selected button should add this class to modify the background color:
.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}
This is done using jQuery in the method that is called when the body loads:
$("#btn-bronze").click(function()
{
console.log("bronze");
$(this).addClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-silver").click(function()
{
console.log("silver");
$("#btn-broze").removeClass('blue-selected');
$(this).addClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-gold").click(function()
{
console.log("gold");
$("#btn-broze").removeClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$(this).addClass('blue-selected');
});
When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? Here is the fiddle.

I would fix a couple of things.
Use class instead of ID targeting. I left the IDs in, but you don't really need them now:
<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>
Then I would use these styles. This way I could add more buttons without creating new styles:
.btn
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
.btn:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}
.btn:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
.btn.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}
Finally, I would simplify the hell out of the javascript:
$(".btn").click(function () {
$(".btn").removeClass("blue-selected");
$(this).addClass('blue-selected');
});
http://jsfiddle.net/4ZygH/1/

#btn-bronze has a higher specificity than .blue-selected, so its background takes precedence.
You can get around this by using !important, but that's probably not the best solution.
The most reliable would be if the parent element also has an ID, then you can select #parent-element>.blue-selected and get a higher specificity.

A ID selector have a more priority then an class selector. You could use important in your css code.

Strange padding issue

Please look at this page
What I want to achieve is
and
Using following jQ function to dynamically resize div height based on document height
$(window).load(function() {
$('.sideBg').css({ 'height': ($(document).height())});
});
What am I missing?

Wouldn't it be better if you just used the background on the body? This way, you don't even need the additional elements or JavaScript.
body {
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black radial-gradient(ellipse at center, #45484D 0%,black 100%);
background-repeat: repeat-y;
}
Don't forget to use background: black url(/design/img/bg/000.png); for the footer.
And don't forget that you should also have the prefixed versions
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
before the unprefixed one in the styles for the body.
Works for me if I make these changes via Developer Tools
About compatibility: multiple backgrounds have better support than gradients (multiple backgrounds are supported by IE9, while CSS gradients are not). Actually, this won't work in IE 9 precisely because of the gradient. However, you can make it work in IE9 without the gradient by adding before all the prefixed versions a multiple background fallback (without the gradient).
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;

you need to remove the margin-top that is on your .wrapper <div> for the top to be fixed:
.wrapper {
background: url("/design/img/wrapper-bg.png") no-repeat center top;
margin-bottom: 0 !important;
margin-left: auto;
margin-right: auto;
/*margin-top: 20px; remove this */
padding-top: 120px;
position: relative;
width: 1020px;
}
Then for the bottom part i would suggest to get the height of the .wrapper <div>:
$(function() {
var wrapperHeight = $('.wrapper').height();
$('.sideBg').css('height': +wrapperHeight+'px');
});

If you are facing unnecessary padding always use a reset.css file.
Copy the code from here: http://meyerweb.com/eric/tools/css/reset/

Writing innerHTML with imgPreview.js

I am working with an image preview jQuery plugin, aptly named imgPreview.js (by James Padolsey).
I have the plugin working great, but I have hit a wall when trying to write some HTML into the rendered Div.
The plugin targets the rel attribute when added to an <img /> and renders the URL.
Our usage is for a car shopping website, where the 'tooltip' will show a larger picture of the car.
I would like to modify the implementation to also show the Year, Make, Model, & Price all within the 'tooltip'. Presumably using jQuery .html()
HTML:
<ul>
<li>
<a href="#">
<img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg"
rel="http://www.web2carz.com/images/articles/201205/bmw_bike_seats_1335883115_600x275.jpg" />
</a>
</li>
</ul>
CSS:
#imgPreview {
display:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow:0px 3px 15px rgba(0, 0, 0, 1);
padding: 15px 15px 30px;
z-index: 5;
border: 2px solid #D4D4D4;
background: #1a1a1a; /* Old browsers */
background: -moz-linear-gradient(top, #1a1a1a 0%, #1a1a1a 24%, #5e5e5e 50%, #1a1a1a 78%, #1a1a1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(24%,#1a1a1a), color-stop(50%,#5e5e5e), color-stop(78%,#1a1a1a), color-stop(100%,#1a1a1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* IE10+ */
background: linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#1a1a1a',GradientType=0 ); /* IE6-9 */
}
#imgPreview img {
box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 1);
border:1px solid #555;
}
#imgPreview span {
position:absolute;
bottom:0px;
left:0px;
color:#fff;
}
JavaScript:
jQuery(document).ready(function() {
// imgPreview
jQuery('#photo_lot .leftCol .photos ul li img').imgPreview({
srcAttr: 'rel',
containerID: 'imgPreview',
imgCSS: {
// Limit preview size:
height: 250
},
// When container is shown:
onShow: function(link){
// Animate link:
jQuery(link).stop().animate({opacity:0.4});
// Reset image:
jQuery('img', this).stop().css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
jQuery(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
jQuery(link).stop().animate({opacity:1});
}
});
});
If I modify the onLoad to this:
// When image has loaded:
onLoad: function(){
// Animate image
jQuery(this).animate({opacity:1}, 300);
jQuery('#imgPreview').html("<span>Hello <b>World</b></span>");
},
Only the text loads, overriding the image.
I also have a jsfiddle set up which has the full plugin code added as well:
http://jsfiddle.net/QjJ4G/3/

Best way to make text look fading away

I am creating an image effect where the text at the bottom of a paragraph fades away
This is the effect I'm trying to achieve:
I have some working HTML & CSS which achieves this look but I am looking to see if there is a better way to achieve this effect? I've often found that there are HTML tricks to do what I want that I dont know of.
I'm open to using JQuery if it has the ability to do this effect but a native HTML CSS effect would be best. Plus is my solution cross browser?
<html>
<head>
<title> </title>
<style type="text/css">
<!--
body {
background-color: blue;
text-align: center;
margin: 0 auto;
padding: 0 auto;
}
#mainContent {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
}
.textContainer {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
position: relative;
}
.recipeContentOverlay {
z-index: 5;
position: absolute;
left: 0;
top: 80px;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<div class="textContainer">
<h2 class="recipeText">Ingredients:</h2>
<p class="recipeText">Have you ever had broccoli rabe (pronounced "rahb" or "rah-bee" depending on where you are from)? I have sort of a love hate relationship with it. It looks like broccoli, but it doesn't taste like it. Broccoli rabe can sometimes be so bitter, even with blanching, there's no amount of vinegar or bacon that can save it. But bitterness heightens flavors</p>
<img class="recipeContentOverlay" src="images/overlay.png" width="100%" height="200px"/>
<!-- The idea is to get the above image to sit slightly over the top of the above "p" element so that some of the text
fades away. Is there a better way to acheive the same look/effect? -->
</div>
</div>
</body>
</html>

You can achieve this with Cufon, a legal way to embed [almost] any font into a webpage through Javascript. You'd just include the Cufon API as usual, and your Javascript code would look like this:
Cufon.replace('.paragraph', { color: '-linear-gradient(black, blue)' });
What this does is select the element with class "paragraph" (CSS selectors can only be used if you have a library that supports it on your webpage too, like jQuery and sets its color to a linear gradient. In this case I made it go from black to blue so that by the end it blends in with your background color (according to the image you showed us, that is).
I'll get a live demo up soon.
Fair warning though, text fading into the background is not exactly user friendly. It's up to you whether you'd like to continue using it. I do admit it's a nice effect, but only when it's still perfectly legible.

Try something like this. Basically we use CSS gradients and opacity to set the color.
http://jsfiddle.net/V45LW/
You can use a site like this one to help with getting the css written. Basically what you do is absolutely position a div at end of paragraph of fixed height. We apply a gradient opacity change to it.
div.fade {
position: absolute;
bottom: 0;
height: 45px;
width: 100%;
background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}