小编INT*_*INT的帖子

如何缩放此布局?

我已经在这个布局上工作了一段时间,每一次我都遇到了某种障碍(这里的v1:https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs -div-within-specific-area)

我现在要做的是使.spread的大小适应浏览器窗口的宽度和高度,所以它永远不会超过用户目前在浏览器中看到的内容(.spread目前有固定的宽度/高度,用于演示目的).理想的是能够即时调整大小并立即适应(即没有媒体查询).

它在我链接到上面的v1版本中应该工作,但是由于那个.spread缺乏实际的宽度/高度,因此我遇到了淡入淡出效果的问题.

这是新的演示:http:
//jsbin.com/uciguf/1

更新:只要符号如上所述,就可以更改标记.

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage.org/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left …
Run Code Online (Sandbox Code Playgroud)

html javascript css position scale

14
推荐指数
1
解决办法
839
查看次数

跟踪jQuery可排序中所有元素的位置

我试图找出如何跟踪jQuery中的元素如何排序.假设我的sortable中有四个元素(div),每个元素都有一个唯一的id.我们称它们为#100,#200,#300和#400,它们按顺序出现以开始.但是当我移动#100让我们说第3点时,我需要能够保存这个id的新位置,同时也要确保其他人获得更新的位置值.

我有意义吗?基本上我想得到每个唯一ID的位置,所以我可以保存列表的顺序供以后使用.

我无法找到报告可排序中所有元素的内容,只是针对被移动的元素.

指出我正确的方向?谢谢

jquery jquery-ui jquery-ui-sortable

13
推荐指数
2
解决办法
2万
查看次数

根据浏览器窗口的大小动态调整div的大小

我试图弄清楚如何根据浏览器窗口的大小动态调整div.我已经设置了一个jsbin来说明我的问题,在这里:http://jsbin.com/uxomul

我想要做的是调整保存图像的div的大小,以便div总是填充浏览器窗口高度的左边(除了底部的25px边距,设置在正文上).

这是一个演示,可能会说明我想要更清楚地实现的目标:http://emilolsson.com/shop/demo/layers

任何想法什么是最好的方法来解决这个问题?

html javascript css jquery resize

9
推荐指数
3
解决办法
10万
查看次数

将多个ui视图设置为一个动画的最佳实践

我有一个基本上看起来像这样的应用程序

<div ui-view="header">
<div ui-view="main">
<div ui-view="footer">
Run Code Online (Sandbox Code Playgroud)

现在,页脚将对应用程序的所有不同状态保持不变,但标题将在某些状态中更改,但也会在许多州共享内容.唯一ui-view会改变所有州的是ui-view="main".

目前我$stateProvider看起来像这样(页脚尚未实现):

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('root',{
      url: '',
      abstract: true,
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
      }
    })
    .state('root.home', {
      url: '/',
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
        'main@': {
          templateUrl: appHelper.views+'/home.html',
          controller: 'HomeController as homeVm',
        }
      },
      resolve: {
        posts: function(dataService) {
          return dataService.getPosts();
        },
        artists: function(dataService) {
          return dataService.getArtists();
        }
      }
    })
    .state('root.artist', {
      url: '/artist/:slug',
      views: {
        'header@': {
          templateUrl: …
Run Code Online (Sandbox Code Playgroud)

transition angularjs ng-animate angular-ui-router

8
推荐指数
1
解决办法
1110
查看次数

约束图像大小的最大宽度和最大高度取决于首先是真实的

试图找出一种可以将肖像和风景图像调整为视口大小的方法,其中包括最大高度和最大宽度场景.

只要宽度不超过1050px,图像应保持100%宽度.另一个限制因素是图像的高度最多为800px.因此,无论哪个是"真实的"首先应该限制图像的大小.

如果我设置max-width: 1050pxmax-height: 800px;然后将图像的纵横比被弄乱了.(如下面的演示所示).还有一个问题是图像宽度将比实际图像宽(836px宽度的肖像图像将高档到1050px).这可以用CSS控制吗?

演示

css aspect-ratio

5
推荐指数
1
解决办法
4142
查看次数

悬停元素,显示父元素兄弟姐妹的悬停效果

现在让我们看看,不确定我是否有100%的逻辑.

这就是我正在使用的(这里的 bootply演示)

<ul>
    <li class="row">
        <span class="category col-sm-2 highlight">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Hello world!</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Keep them coming</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">The other posts</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2">Cities</span> 
        <span class="title col-sm-4"><a href="#">Tezt</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span> …
Run Code Online (Sandbox Code Playgroud)

html css parent-child hover css-selectors

3
推荐指数
1
解决办法
1292
查看次数

Tumblr OAuth - 缺少或无效的请求令牌

通过OAuth对Tumblrs API进行授权时遇到一些问题.
这就是我的想法callback.php:

require_once('../vendor/autoload.php');

// some variables that will be pretttty useful
$consumerKey = 'xxx';
$consumerSecret = 'xxx';
$client = new Tumblr\API\Client($consumerKey, $consumerSecret);
$requestHandler = $client->getRequestHandler();
$requestHandler->setBaseUrl('https://www.tumblr.com/');

// Fetch the current URL which holds important data
$link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

// get the verifier value
$verifier = $_GET['oauth_verifier'];

// exchange the verifier for the keys
$resp = $requestHandler->request('POST', 'oauth/access_token', array('oauth_verifier' => $verifier));
$out = $result = $resp->body;
$data = array();
parse_str($out, $data);

echo '<pre>';
var_dump($data);
echo '</pre>';

$token = …
Run Code Online (Sandbox Code Playgroud)

php api oauth tumblr

3
推荐指数
1
解决办法
1226
查看次数

我可以通过他们的API模仿Tumblr交互,例如reblog等吗?

所以,我正在做一个单页网站,其中应该包含Tumblr.我认为有两种方法可以实现这一目标.

  1. IFRAME
  2. Tumblr API

由于Iframe感觉不好,我认为我会使用Tumblr API.使用API​​密钥,我可以从Tumblr获取内容并将其放在网站上并模仿Tumblr博客的外观和感觉.

现在我已经达到了我想要包含Follow,Reblog和Like等功能的程度.这些都可能使用API​​和Oauth作为auth方法,但是,我现在想知道,因为我想完全模仿Tumblr博客的外观和感觉,我真的不希望在与...交互时出现弹出窗口"Tumblr"我已经进入了我的单页网站(当通过Twitter使用Oauth时,你会得到这个弹出窗口,要求你在事情发生之前允许我的许可).

情况会是这样吗?如果是这样,我唯一可以使用iframe在我的网站中添加Tumblr Feed吗?

php api tumblr

1
推荐指数
1
解决办法
1319
查看次数

将 React Dropzone 与 React Final Form 一起使用

试图弄清楚如何一起使用这两个组件。github 上有一个问题,人们参考它来启动并运行它,但我无法弄清楚。其要点是这样的:

<Field name={`logo`}>
  {(fieldprops) => (
    <div>
      <label>Logo</label>
      <Dropzone 
        onDrop={(files, e) => {
          props.change(`logo`, files);
          props.blur(`logo`);
        }}
      />
      <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
    </div>
  )}
</Field>
Run Code Online (Sandbox Code Playgroud)

使用确切的代码对我来说会抛出错误:TypeError: children is not a function

我在代码沙盒上设置了一个使用挂钩和文件预览的简化测试用例。我还尝试查看文档中的自定义输入,但似乎缺少一些东西才能正常工作。如果有人能指出我正确的方向,我会非常高兴。

reactjs react-dropzone react-final-form react-hooks

1
推荐指数
1
解决办法
4259
查看次数