打造浮动推荐框

最近想把博客改改: 1. 推荐框固定在页面右下角; 2. javascript代码可以直接运行看效果;

这篇说说推荐框固定的事, 其实这个有好多例子, 我看了看 这个人的比较有意思, 参考了一些代码, 我做的效果就看右下角.

  转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/float-digg.html

推荐框的id是div_digg.

首先是css, 没什么好说的自己找吧. (非博客园的网站看到了找到博客园的链接)

其实把css贴在后台管理的页面定制css里就初步满足要求了, 但是仅仅是这样那就不用写博客了.

我也想要能加关注, 能调到评论能回顶部的按钮, 后两个好说:

$(‘#div_digg‘).append(‘<div><a onclick="javascript:document.getElementById("tbCommentBody").focus();" href="javascript:void(0);" style="font-weight: bold; padding-left: 5px;">快速评论</a>&nbsp;&nbsp;<a href="#top" style="font-weight: bold; padding-left: 5px;">返回顶部</a></div>‘);

哦, 添加这个需要先申请js权限, 样式自己调整吧.(博客园有引用jQuery库, 无需自己再添加)

下面说说加关注怎么弄上去:

查看页面代码发现加关注的js方法c_follow(); 我又不想再直接添加a标签了, 而是把 #author_profile 层里的dom用上:

1 一堆代码

just kidding. 总之找不到 #author_profile_detail . 研究发现这块是异步加载的, 做个定时器吧.

十几分钟过去了~

中间遇见了一个兼容性问题: remove()有兼容问题, 改为removeChild().
还发现在IE下, 把代码添加到window.onload事件中会导致很长时间之后才执行(想到在哪看过Chrome和IE在onload上的区别), 遂改为#blog-comments-placeholder
//吐槽: 前天抢票装了个360抢票专版, 今天为了测兼容性打开了好多天没用的IE, 发现主页变成了 duba(其余部分忘记了), 还不让改, 囧~ 360浏览器卸了就好了, 再囧.

好了, 实际代码和上面有点出入. 另外我把#author_profile隐藏了. //对于不能跳转的<a>, 我觉得还是onclick事件最后加上‘return false;‘阻止跳转, href="#"这样写比较好.

你没看见代码? 自行F12.

加关注那块可能有问题, 因为博客园这块是异步修改的, 如果是刷新的话就没问题了. //想找人测测又怕被说是骗关注的T_T

时间: 2024-10-13 10:20:13

打造浮动推荐框的相关文章

JQuery打造下拉框联动效果

做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框所有清除,然后又一次拼接刷新的内容.用JQuery实现比較easy,代码以省市联动效果为例实现. JSP页面代码例如以下: <li id="base"> <p>生源地:</p> <label> <select id="

android浮动搜索框

android浮动搜索框的配置比较繁琐,需要配置好xml文件才能实现onSearchRequest()方法. 1.配置搜索的XML配置文件?,新建文件searchable.xml,保存在res/xml文件夹中. 1 <?xml version="1.0" encoding="UTF-8"?> 2 3 <searchable android:label="@string/search_label" 4 android:search

201510232153_《CSS——去除浮动推荐方式》

/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} <!--第一个div--> <div class="div1 clearfloat"> <div class="left"> Left </div> <div class

android浮动搜索框的使用

引言 在我们的应用程序中经常需要提供搜索服务,比如搜索联系人, 搜索商品信息等等.我们可以自己在布局中自定义我们的搜索框,实现我们的搜索逻辑.但是还有一种更简单的方法:使用android系统给我们提供的搜索功能框架. 在android中,提供两种实现搜索功能的方式:search dialog 和 searchView. search dialog类似于普通的dialog,悬浮于我们的窗体之上.示例图如下: searchView通常被嵌套在我们的布局之中,最典型的案例就是在actionBar中使用

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g

DIV+CSS区块框浮动设计

在页面布局的时候,可以用绝对定位来实现,但是由于调整某个区块框时其他区块的位置不会相应的改变,所以这并不是布局的首选方式.但是使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动狂的边框为止.并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现的像就浮动框不存在一样. 这篇文章就总结几种简单的区块框浮动的例子: 1.不浮动区块框排序 <html> <head> <title>DIV+CSS</title> <s

【从0到1学CSS】定位问题一(盒模型,浮动)

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度. 第一种实现方法,是借助css3的新属性calc,实现代码如下: body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态

CSS知识点:清楚浮动

开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一个简单的例子. 什么是CSS清除浮动? 借用W3C的定义. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(其实简单理解就是浮动的元素就是木板浮在水面上一样,和水平面不在一个平面上,因此

浮动 清除浮动(造成的影响)

一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 浮动 浮动:浮动的框可以左右移动,直至它的外边缘遇到包