I does appear that the css and javascript library does work and I suspect that preview and edit a blog post provides a different environment in the way that a different library may not be compatible. This is not functional code as the references expand to places that do not exist (404). A reference for script is included here
from W3C. Another issue is that the "img" class has two different entries and I could look with firebug, but I already know that it chooses the first to over-ride my later definition and I could change it in my template, but this is just an exercise in learning by doing. You can see that the ajax inclusion is translated as the comment states. So link to
where that came from. And the origin of the wolf complete and I just warped it a bit with gimp. That is from World of Warcraft "pedia" via the elvi and some soup. The origin of the
wolf image link. So the wolf is about to eat LOL cats, and I hope that doesn't disturb anybody. This at least provides a realistic format that serves as reference as well as block diagramatic example.
<html>
<head>
</head>
<body>
<h3 class="post-title entry-title">
<a href="http://infinitefuture.blogspot.com/2012/12/i-am-not-markov-process.html">I am not a Markov process</a>
</h3>
<div class="post-header-line-1"></div>
<div class="post-body entry-content">
<p><br>
<!-- You will notice that include the script with one command and it is translated to a "local" reference.-->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> -->
<script src="AlephInstants%28AI%29Pop_files/jquery.js" type="text/javascript"></script><br>
<!-- also many <br>'s are added , I assume by some automagic transform which create white space lines in the post -->
<script>
type="text/javascript"
var meta_container = "";
var show_meta = function() {
name = $(this).attr('meta_name') || $(this).text() || '';
description = $(this).attr('meta_description') || '';
href = $(this).attr('href') || '';
if (href != '') { _class = 'meta-href'; }
else if ($(this).hasClass('terminal')) _class = 'meta-command';
else _class = 'meta-name';
image = $(this).attr('meta_img') || '';
if (!image=='') image = "<img class='meta-image' src='"+image+"'/>";
content = "<h2 class='"+_class+"'>
"+name+"</h2>"+image+" <span class='meta-description'>"+description+"</span>";
meta_container.html(content);
meta_container.css({'z-index':'100'});
meta_container.stop().fadeTo('fast',1);
}
var hide_meta = function() {
meta_container.stop().fadeTo('slow',0,function(){
meta_container.css({'z-index':'-100'});
});
}
$(document).ready(function() {
meta_container = $('div#meta-content');
$('.meta').hover(show_meta, hide_meta);
});
</script><br>
<style>
.meta{
border-bottom:dotted thin;
}
#meta-content {
position:fixed;
top:20px;
left:140px;
display:none;
z-index:2;
color:#f4f4f4;
}
.meta:hover {
cursor: pointer;
background:#000;
color:#fff;
}
.meta-image {
float:left;
}
.block {
display:block;
clear:both;
}
</style><br>
<div id="meta-content"></div>
<p>Mouseover test is
<span class="meta" meta_img="wolf_pop.png" meta_name="Blaidd Drwg" >
here</span> .</p>
</span>
</div>
</body>
</html>
0 comments:
Post a Comment