所以基本上我想在用户向下滚动一点之后从'header'中删除该类,并添加另一个类来改变它的外观.
试图找出最简单的方法,但我不能使它工作.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$(".clearheader").removeClass("clearHeader").addClass("darkHeader");
}
}
CSS
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader { height: 100px; }
.wrapper {
height:2000px;
}
HTML
<header class="clearHeader"> </header>
<div class="wrapper"> </div>
我确定我做的事情非常错误.
在我正在研究的网站上,随机数字出现在一个非常简单的jQuery中.
而不是出现什么意思,这些数字 48等等出现在开头.像这样:
<script type="text/javascript">
48 48document).ready(function () {
48 48".closed").click(function () {
48 48this).find("div.but").toggleClass('plus').toggleClass('minus');
48 48this).toggleClass('closed').toggleClass('open');
});
});
</script>
我甚至无法想象为什么当我将其硬编码到网站中并且没有外部文件或任何东西时它会吐出来.
好的,所以既然它是Perl我需要逃脱$(,但是怎么样？我看了一下Perl文档,我觉得自己被打了一拳.
我只使用单引号而不是双引号吗？
<script type="text/javascript">
$(document).ready(function () {
$('.closed').click(function () {
$(this).find('div.but').toggleClass('plus').toggleClass('minus');
$(this).toggleClass('closed').toggleClass('open');
});
});
</script>
这是完整的Perl脚本.这是一个网站的标题.
###########################
## META DATA AND HEADERS ##
###########################
$be_strict = 0; # 1 = 404 on page not found
if ((!$title{$loadpage} || !$h1{$loadpage} || !$description{$loadpage} || !$keywords{$loadpage} || !$breadcrumb{$loadpage}) && $be_strict) {
print "Status: 302 Found\r\n" .
"Location: http://www.realots.co/404/\r\n" . …我已经阅读了https://developers.google.com/maps/documentation/javascript/overlays一段时间了,我似乎无法为我的地图工作获取自定义图标.
这是我的javascript:
var simplerweb = new google.maps.LatLng(55.977046,-3.197118);
var marker;
var map;
function initialize() {
var myOpts = {
center: simplerweb,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOpts);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: simplerweb
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
有关gmaps的完整初学者的任何指针？
我的情况有点复杂,我会尽量简洁地解释一下.
我目前正在使用query_posts修改我网站上自定义页面的主要查询,据我所知,虽然我已经读到使用query_posts这是不好的做法,原因有很多.
那么,为什么我使用query_posts而不是创建WP_Query你可能会问的对象？
这是因为我使用的是无限滚动插件,无限滚动对WP_query不起作用,但是当你只使用query_posts修改主查询时它完全正常.例如,使用无限滚动+ WP_query(主要关注点)分页不起作用.
在一个页面上,我正在修改查询以获得最常见的帖子.
<?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; ?>
<?php query_posts( array( 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC' , 'paged' => $paged, ) ); ?>
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post() ?>
<?php if ( has_post_format( 'video' )) {
get_template_part( 'video-post' );
}elseif ( has_post_format( 'image' )) {
get_template_part( 'image-post' );
} else {
get_template_part( …自从我添加了一个css过渡(第一个是悬停,第二个是动画)它似乎搞砸了我的字体,它们看起来"不同".
这是完全奇怪的,我已经找了好几个小时,找不到任何东西,我也无法弄清楚它为什么会发生.
在firefox中似乎没问题,但是safari和chrome有问题.
左下方齿轮动画下方的所有内容看起来都像一个较轻的字体重量,导航菜单看起来看起来一样.
我完全迷失在这一个.
这是动画的CSS.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to { …我试图得到一个div来动画0% - 100%相对于元素滚动的百分比.
现在我已经设置了一些变量,但是我在尝试计算一个百分比的高度时遇到了麻烦.
我们可以很容易地设置起始宽度并且也可以很容易地检测滚动,因为我们可以获得触发动画的元素的高度,我只是无法将其作为百分比得到.
如果我能弄清楚如何返回滚动的conheight的百分比,那么这应该很容易.
$(window).scroll(function() {
// calculate the percentage the user has scrolled down the page
var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;
$('.bar-long').css('width', scrollPercent +"%" );
});
这是一个jsfiddle,http://jsfiddle.net/SnJXQ/
这是基于body元素的滚动百分比来设置bar-long的动画.
动画从0% - 100%(嗯,它不是真的,但我无法弄清楚为什么).
我想做的是获取.post div的滚动百分比,然后相对于那个动画条长.即.滚动10%.post,.bar-long为10%宽度,滚动70%.post,.bar-long为70%宽度.
我正在尝试使用lazyload来仅加载可见的图像(因为我的网站是响应式的,并且一些内容被隐藏了display:none给较小屏幕上的客户端).
基本上,lazyload工作,但只有在我滚动页面之后.
这是我正在使用的延迟加载设置,即使将阈值设置为2000px(超过整个页面高度),它仍然只在用户滚动页面后加载图像(甚至1 px).此错误仅出现在webkit浏览器中.
$(document).ready(function () {
$("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
我有一个3列布局,带有标题,左侧边栏,内容区域和右侧边栏.
左侧边栏在到达视口顶部时获得"固定"位置,因此它始终在视图中并且有溢出,因此可以通过滚动查看其中的任何内容.它总是有一个防止默认功能来停止主要内容区域和右侧边栏滚动时,因此页面的3个区域显然是他们自己的元素.
页面大部分是流体宽度,因此中心内容区域可以比右侧边栏更长或更短,具体取决于其中包含的内容.
这里有一些代码和一个帮助您可视化的jsfiddle. http://jsfiddle.net/9atDa/
我想要做的是让右侧边栏比中心div更快或更慢,具体取决于它们的相对高度,因此右侧边栏永远不会消失在视口的顶部.
效果可以在这里看到:http://readwrite.com/2013/02/06/blackberry-killing-it-in-canada-uk-with-launch-of-blackberry-10
我猜某种jquery可以处理这个？
<html>
<head>
<title>Layout Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>
<script>
$(function() {
var toolbox = $('.left'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.bind('mousewheel', function(e, d) {
if ((this.scrollTop === (scrollHeight - height) && d < 0) ||
(this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
});
$(function() { // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number …我想基于许多标准创建一个过滤帖子的页面.
我可以wp_query很轻松地处理和发布帖子,我的问题是我无法弄明白(我也无法在网上找到任何关于此的答案,相信我,我看了)如何让用户这样做.
以此为例,按价格(自定义字段元值)从最高到最低返回帖子,共33个帖子.
<?php
$featuredPosts = new WP_Query( array(
'posts_per_page' => 33,
'meta_key'=>'Price',
'orderby' => 'meta_value_num',
'order' => DESC
) );
?>
<?php if ( $featuredPosts->have_posts() ) : ?>
<?php while ( $featuredPosts->have_posts() ) : $featuredPosts->the_post(); ?>
<article <?php post_class('item-post block'); ?> id="post-<?php the_ID(); ?>">
<h2 class="price-title"><?php the_title(); ?> </h2>
</article> <!-- end div post -->
<?php endwhile; wp_reset_query(); ?>
<?php endif; ?>
现在,即使在阅读和谷歌搜索之后,如果我能弄清楚如何在前端实现这一点,我会被诅咒,以便用户过滤帖子.
我的意思是,我知道你可以附加到Wordpress中的URL来改变帖子的顺序,但在这种情况下,我完全迷失了.
我试过这个,但它不起作用.
<?php
$by_price = esc_url(add_query_arg(array(
'meta_key' => 'price',
'orderby' => 'meta_value_num',
'order' => …好吧,这是一个相当长的问题.我是AJAX的新手,特别是在WordPress的上下文中使用它,但我一直在线跟踪一些教程,我想我差不多了.
我会粘贴到目前为止的内容并解释我的想法.
好的,开始吧,JS.
jQuery(document).ready(function(){
jQuery('.gadgets-menu').mouseenter(function(){
doAjaxRequest();
});
});
鼠标进入.gadgets-menu并使用mouseenter触发请求,因此它会触发一次.
请求本身.
function doAjaxRequest(){
// here is where the request will happen
jQuery.ajax({
url: 'http://www.mysite.com/wp-admin/admin-ajax.php',
data:{
'action':'do_ajax',
'fn':'get_latest_posts',
'count':5
},
dataType: 'JSON',
success:function(data){
//Here is what I don't know what to do.
},
error: function(errorThrown){
alert('error');
console.log(errorThrown);
}
});
}
现在的php功能.
add_action('wp_ajax_nopriv_do_ajax', 'our_ajax_function');
add_action('wp_ajax_do_ajax', 'our_ajax_function');
function our_ajax_function(){
switch($_REQUEST['fn']){
case 'get_latest_posts':
$output = ajax_get_latest_posts($_REQUEST['count']);
break;
default:
$output = 'No function specified, check your jQuery.ajax() call';
break;
}
$output=json_encode($output);
if(is_array($output)){
print_r($output);
}
else{
echo …