Jump to content

Append a CSS Stylesheet with jQuery


iwato
 Share

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

Link to comment
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;}

 

Link to comment
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
Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...