小编Awa*_*ran的帖子

在这个页面上,我有一个jQuery弹出窗口和缩略图可调整大小的图像.如果我将鼠标悬停在缩略图上,则图像会完美调整大小.此外,当我点击页脚中的大黄色电视按钮"QuickBook TV"时,弹出窗口完全按照我的要求显示.

但是,当我单击"下一步"或"上一页"按钮时,AJAX用于加载新内容,而我的jQuery不再适用于弹出窗口或缩略图图像.我搜索了很多论坛,寻找有关此问题的信息,但由于对jQuery的了解有限,我无法理解我需要做什么.

以下是弹出式jQuery

$(document).ready(function() {

        $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
        $(".inline").colorbox({ inline: true, width: "50%" });
        $(".callbacks").colorbox({
            onOpen: function() { alert('onOpen: colorbox is about to open'); },
            onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
            onClosed: function() { alert('onClosed: colorbox has completely closed'); }
        });

        //Example of …

如果我在默认隐藏的选项卡中渲染地图,然后导航到该选项卡(使其可见),则地图无法正确渲染.但是当我刷新页面时,地图会正确呈现.

问题

Google地图的Javascript

var map;
function initialize() {
    var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644);
    var myOptions = {
        zoom: 10,

        width: 1270,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(serLat, serLang),
            map: map,
            width: 1270,
            title: 'Click'
        }
    );
    //        var infowindow = new google.maps.InfoWindow({
    //            content: cntnt
    //        });
    //        google.maps.event.addListener(marker, 'click', function() {
    //            // Calling the open method of the infoWindow …

我在页面上有超过100个div,每行有3个div.我想从右div中删除第一个div和右边距的左边距,而中心div应该从左边和右边有15px的边距.请指导我如何在不给每个div的特定类(无边距)的情况下执行此操作.这是一个例子

这是我的css代码

.prp_box{
    margin:15px 15px;
    width:100px;
    height:100px;
    background:#5f03a6;
    }

如何避免列表样式的双边框线？请看下面的小提琴,以获得清晰的图片.我希望每个盒子的宽度为1px,但是当它们组合在一起时它们是双倍的.

http://jsfiddle.net/awaises/4SLPh/1/

HTML:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS:

ul{
     margin:0; padding:0;
     list-style:none;
     }
ul li{
     width:30%; height:200px;
     border:1px solid black;
     float:left;
     }

谢谢

我有两个容器(main-container和sub-container).正文,HTML和主容器都有100%高度类,而sub-container固定在1000px.主容器应与100%整个屏幕的高度配合,即使sub-container是小或大.现在的问题是,主容器没有根据子容器高度增加其高度.请查看以下示例以了解我的要求.

http://jsfiddle.net/awaises/dLeHL/

非常感谢您的帮助.

谢谢

你可以帮我设置下拉菜单位置垂直居中的父母(橙色)div？现在他们从父div的顶部边缘出现.我想下拉位置与下面屏幕截图中显示的完全相同.当您将鼠标悬停在橙色框上时,您会看到下拉列表.

小提琴:

码:

.parent{
width:100px; height:100px;
background:orange;
position:relative;
margin-right:100px;
float:left;
margin-bottom:80px;
}
.parent:hover .child{display:block;}
.parent .child{
    position:absolute;
    top:0;
    left:100%;
    display:none;
    }
.parent .child ul{    
    list-style:none;
    margin:0;
    padding:5px;
    background:#262626;
    }
    .parent .child ul li{
        padding:5px;
        font:normal 12px arial;
        border:1px solid black;
        background:#464646;
        color:#fff;
        }

我想将列表分成多列,每列应该有最多5个数据列表,如下图所示.请指导我如何实现这一目标？

我按以下顺序有3个浮动Div.

(1)(2)(3)

我想改变Div的顺序如下

(2)(1)(3)

请指导我如何实现这一目标？

小提琴示例:

码:

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>


div{
   height:50px;
   text-align:center;
   line-height:50px;
}
.div1{width:50%; background:red; float:left;}
.div2{width:40%; background:yellow; float:left;}
.div3{width:10%; background:green; float:left;}

有人可以告诉我以下代码中缺少的内容吗？为什么css没有反映在"dl"和"dd"标签内的按钮上？

HTML

<dl class="zend_form">
    <dd><button value="" name="submit" type="submit">Sign In</button></dd>
</dl>

CSS

.zend_form dd input[type="submit"]{
    background:red;
    }

的jsfiddle

http://jsfiddle.net/awaises/2RYyD/302/

我想在href链接内的span上添加不同的颜色.但由于某些原因,他们没有反思.请告诉我,我在这里做的错误是什么？

这是小提琴

HTML:

<div class="map_view_buttons">
<a href="draw"><span></span>Draw From Scratch</a>
<a href="add"><span></span>Add Area</a>
<a href="edit"><span></span>Edit Area</a>

CSS:

.map_view_buttons{
float:left;
}
.map_view_buttons a{
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #a8a8a8;
    font-weight:bold;
    color:#000;
    font-size:12px;
    }
    .map_view_buttons a span{
        display:inline-block;
        width:18px; height:18px;            
        vertical-align:middle;
        margin-right:5px;
        border:1px solid #ccc;
        }
        .map_view_buttons a.draw span{background:red;}
        .map_view_buttons a.draw span{background:orange;}
        .map_view_buttons a.draw span{background:green;}

请让我知道为什么Next和Previous Post链接不能处理以下代码？我试图一次只显示一个帖子.我试图检查不同的帖子,但无法找到类似于我的东西.请指导......

<?php 
    $args = array( 'numberposts' => 1 );
    $lastposts = get_posts( $args );
    foreach($lastposts as $post) : setup_postdata($post);
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div>
<?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
<?php endif; ?>
</div>

<?php the_content(); ?>
<?php endforeach; ?>
<?php comments_template();  ?>

<nav id="nav-posts">
  <div class="prev"><?php next_posts_link('PREVIOUS POSTS'); ?></div>
  <div class="next"><?php previous_posts_link('NEXT POSTS'); ?></div>
</nav>