Jump to content
iwato

Append a CSS Stylesheet with jQuery

Recommended Posts

Please consider the following code and see if you can find anything wrong.  The appended <link> does not appear to register the information contained in the stylesheet.  You can observe the failure by clicking on the menu item Weekly Podcasts under Products in the page's navigation bar (left column) and then passing your cursor across the blank area between the subtitle "Weekly Podcast Host Page" at https://www.grammarcaptive.com/overview.html

	$("#podcasts").mouseover(function() {
			$(this).css({"cursor": "pointer", "font-weight":"800"});
		})
		.click(function() {
			$("#main").load("podcast_filler.html #podcasts_div");
			$("<link/>", {
			   rel: "stylesheet",
			   type: "text/css",
			   href: "_utilities/css/podcast_filler.css"
			}).appendTo("head");
			$.ajax({
				url: './_utilities/php/most_recent_podcast.php',
//				context: '#main',
				dataType: 'JSON',
				success: function(jsonData) {
					$.each(jsonData, function(key, object) {
						var podcast_number = jsonData.podcast_no_item; 
						var podcast_title = jsonData.item_title; 
						var podcast_desc =  jsonData.item_description; 
						var podcast_guid =  jsonData.item_guid; 
						var podcast_pubdate =  jsonData.item_pubdate;
						$('#main span#pc_title').html(podcast_title);
						$('#main span#pc_desc').html(podcast_desc);
						$('#main span#pc_num').html(podcast_number);
						$('#main span#pc_pubdate').html(podcast_pubdate);
						var click_listen = 'podcast_hostpage.php?hash=' + podcast_guid + '&podcast_no=' + podcast_number;
						$('#pc_click_listen').attr('href', click_listen);
					});
				}
			});				
		})
		.mouseup(function() {
			$(this).css({"color": "#fadb9d","font-weight": "normal"});
		$('body, html').animate({scrollTop: $('#main').offset().top},800);
	});

 Roddy

Share this post


Link to post
Share on other sites

Yes,  you can see it as 

<link rel="stylesheet" type="text/css" href="_utilities/css/podcast_filler.css">

And, the link appears as

<a id="pc_click_listen" class="pc_link" href="podcast_hostpage.php?hash=30a6836a3f7c5fc57751a61098e5c2fc&amp;podcast_no=92" title="Grammar Captive Weekly Podcasts" target="_top">Click and Listen</a>

And, this is the CSS code in the stylesheet podcast_filler.css

			a:link.pc_link {color:#999999; font-weight: normal; text-decoration: none;}
			a:visited.pc_link {color:#aaaaaa; font-weight: normal;}
			a:hover.pc_link {color:#ffffff; font-weight: bold;}
			a:active.pc_link {color:#fadb9d; font-weight: bold;}

 

Share this post


Link to post
Share on other sites

The problem is, you have a preceding css styling with an id ref in the selector. this will have a higher precedence over styling of anchor using class only.

Share this post


Link to post
Share on other sites

'Tis true, but it says nothing about font color.

			h3 a#pc_click_listen {
				font-family: 'Bradley Hand', cursive;
				font-size: 1.6em;
			}

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

??

a.pc_link:link {
    color: #999999;
    font-weight: normal;
    text-decoration: none;
}
a.pc_link:visited {
    color: #aaaaaa;
    font-weight: normal;
}
a.pc_link:hover {
    color: #ffffff;
    font-weight: bold;
}
a.pc_link:active {
    color: #fadb9d;
    font-weight: bold;
}

but these do, the styling will be overridden by

 
#middle a:hover {
    color: #999999;
    font-weight: 800;
}

#middle a:link {

    color: #5a4149;

    font-weight: 400;

    text-decoration: none;

}

and so on.

  • Thanks 1

Share this post


Link to post
Share on other sites

Got it!  Problem resolved.

Another victory for W3Schools and me!

Roddy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×