我在开发站点上实现了fancybox2.
当我使用fancybox(点击链接等)时,整个html会在它后面移动 - 然后转到顶部.我在另一个演示中工作正常,但是当我将相同的代码拖到这个项目时,它会跳到顶部.不仅有内联div的链接,还有简单的图库.
有没有人经历过这个?
目标:将数据属性添加到 Leaflet.js 标记元素标记
我有一个带有地图和“聚光灯”区域的项目。
地图使用 Leaflet.js 填充了位置
当我点击地图上的图钉时,我想让它的相应图像和信息出现在聚光灯区域。
我做了一个没有地图的初步测试:http : //codepen.io/sheriffderek/pen/yOmjLV 我使用数据属性连接硬币的两侧。(一组数据是PHP吐出来的,地图数据是API ajax调用)
我理所当然地认为添加类或 Id 或数据或 rel 等将是一个可访问的选项。这是它的主要内容:
// Purveyor types - for query endpoints
var bar = 4;
var retailer = 3;
// Create the "map"
var onSiteMap = L.map('on-site-map').setView([34.0758661, -118.25430590], 13);
// Define the pin (no SVG?)
var onSiteIcon = L.divIcon({
className: 'my-div-icon' // this gets one class name as far as I can tell
});
// Setup map "Look"
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(onSiteMap);
// Grab the data
$.ajax( { …
Run Code Online (Sandbox Code Playgroud) 所以我有一些导航锚.我想在点击它们时更改页面上的一些基本配色方案.我能够做到这一点的唯一方法是使用下面的代码.
它工作正常,但我不禁认为有一种更优雅的方式.有人知道是否有可能在一次犯规中脱掉这些课程?
编辑:这可能更清楚了.我不希望原来的课程消失了.我想,只是添加了jQuery的类.对困惑感到抱歉.
谢谢.
编辑:看到这个骗局
试图实施所有解决方案.
得到"{"错误":"请使用POST请求"}"虽然......
编辑:这是因为href ="?" 与指出的href ="#"相对应.
$(".home").click(function() {
$(".primary-color").addClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".services").click(function() {
$(".primary-color").addClass("two");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".pricing").click(function() {
$(".primary-color").addClass("three");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".special-thing").click(function() {
$(".primary-color").addClass("four");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("five");
});
$(".contact").click(function() {
$(".primary-color").addClass("five");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
});
Run Code Online (Sandbox Code Playgroud) 我正在尝试制作一个像slideToggle()
方法一样的滑动切换淡入淡出动画但是使用velocity.js - 希望它会更顺畅.
因为我无法滚动到自动 - 我将高度放在变量中并使用它来设置动画高度.我遇到的问题是高度值存储一次,如果页面稍微调整大小,那么数字不再正确. - 另外 - 因为该区域在页面加载时隐藏(在它获得初始高度之后)我无法再次检查高度(如果发生窗口调整大小)
最后我想把它放到一个函数中,所以保持相对它的关键.
另外,如果你没有使用velocity.js,它基本上就像.animate() - 所以它并不是问题的一部分.
<section>
<div class="button-w">
<button>Toggle</button>
</div>
<div class="box">
<p>{{content}}</p>
<div class="button-w">
<button>Close</button>
</div>
</div>
</section>
Run Code Online (Sandbox Code Playgroud)
.button-w {
width: 100%;
float: left;
}
.box {
width: 100%;
border: 1px solid lime;
overflow: hidden;
color: white;
}
Run Code Online (Sandbox Code Playgroud)
var boxxHeight = $('.box').outerHeight();
$('.box').hide();
$('button').on('click', function() {
var boxx = $('.box');
if ( boxx.is(":visible") ) {
boxx.velocity({ opacity: 0, height: 0 }, { display: "none" …
Run Code Online (Sandbox Code Playgroud) 我目前正在使用JSON REST API (WP API)插件来获取我的帖子和页面数据。
我注意到我的自定义字段数据都没有在 json 中返回,并且查看路由,我认为我无法获取这些数据。
通过当前插件有什么想法,或者我如何才能实现这一目标?
我可以使用ic.ajax将数据导入我的应用程序,但似乎我应该使用RESTAdapter.解释如此简化,我不确定在各种情况下该怎么做.这是我认为应该工作的:(和固定装置,本地快递服务器和http-mocks一样)
我将使用tumblr作为示例 - 因为它总是一直是友好的API.
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
// tumblr posts
this.resource('posts', {
path: '/tumblr'
});
});
export default Router;
Run Code Online (Sandbox Code Playgroud)
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
Run Code Online (Sandbox Code Playgroud)
所以,据我所知 - find()
是一个神奇的 ajax调用...但是如果我想指定jsonp或者其他什么呢?
import DS from 'ember-data';
var tumblrBlogName = 'feministlibraryonwheels'; // friends site
var tumblrApiKey = 'UbB4p0GxqNa6wUa8VwpIdqtywjIiA6vljZXyI9wkx9hnQnAFyk';
var tumblrRequestUrl = 'http://api.tumblr.com/v2/blog/' + …
Run Code Online (Sandbox Code Playgroud) 我使用CLI和2.0构建了一个Ember应用程序 - 它是一个用植物制成的帽子的应用程序,所以我把它命名为"植物帽子".
几个月后,我意识到人们并不喜欢戴头上的植物,所以我把它改成卖"装满虫子的鞋子".我想这次它真的会起飞.
因此,我想重命名应用程序及其中的任何重要部分 - 就好像我从一开始就将它构建为"鞋子与蠕虫".
我采取了哪些步骤以便我不会错过任何内容.
我经常想要一个“模式”类型的div封面,或者一个简单的一键式UI屏幕的全屏图像。我使用flex-box的次数越多,我可以依靠的一些旧技术就越少。当达到100%的高度时,我通常会达到以下目的:
html, body {
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
HTML和主体没有明确的高度...并且无法真正知道它们的高度。为了告诉任何孩子身高多高,他们需要知道父母的身高。深度嵌套的元素会变得非常混乱。
100vh
视口高度可以消除嵌套问题,但在移动浏览器上,如何发挥效果似乎存在意见分歧。在iOS Safari中,vh
其区域将位于其底部的插队UI栏下方。居中的元素不会因为居中的偏移而居中显示,并且当您尝试滚动时,所有内容都会弄得一团糟,笨拙并感到折断。
我可以使用modernizr来检查触摸,但这是不希望出现的位置。在某些情况下,我可以为html和body添加100%的类,包括视图嵌套视图,但是当诸如flickity之类的东西注入许多子元素时,或者MVC中有嵌套的视图会生成更多的嵌套元素,告诉一切都为100%高度/触摸并不是一种一致的措施,因为存在触摸台式机等,这确实是不明智的。
.element-with-background-image {
width: 100%;
height: 100vh;
background-image: url(...);
background-size: cover;
background-position: center center;
}
Run Code Online (Sandbox Code Playgroud)
感觉就像我们应得的。他们在视口meta-tag上夺走了我们的max。我只想做点不觉得坏的东西。
简单的示例:http : //s.codepen.io/sheriffderek/pen/LWevrx 调试版本(在电话上进行测试):http : //s.codepen.io/sheriffderek/debug/LWevrx
带有滑块的更复杂的示例:http : //codepen.io/sheriffderek/pen/BWJEKJ 调试版本(用于在电话上进行测试):http : //s.codepen.io/sheriffderek/debug/BWJEKJ
制作东西position: fixed;
似乎是获得完全覆盖而又不会出现故障的唯一方法(通常直到最近才引起严重故障)
固定位置版本:http : //codepen.io/sheriffderek/pen/XMVQOX 调试版本(以在手机上测试):http : //s.codepen.io/sheriffderek/debug/XMVQOX
固定位置w滑块/需要获取窗口高度并将其添加到所有子窗口中-我已经能够提出的最佳解决方案:http ://codepen.io/sheriffderek/pen/RpxOzM 调试版本(用于在手机上进行测试) :http://s.codepen.io/sheriffderek/debug/RpxOzM
是不是在这种情况下不能使用100vh吗?我应该将其从工具箱中取出吗?或者-您是否有一套规则或技术可以让我继续生活?
我的身体元素有问题.它似乎正在填满100%的屏幕.但是,如果您将浏览器拖动得较小,然后向下滚动 - 主体不会延伸.
请将此jsFiddle视为一个主要示例.
在使用ember CLI时,我得到了这个:
version: 0.1.5
Could not find watchman, falling back to NodeWatcher for file system events
我真的不在乎它是否使用了守望者或NodeWatcher ...... - 但我不喜欢这个消息 - 我想用ember想要的东西.我用自制软件安装了守望者......但仍然是这个消息.有任何想法吗?
我是带守望者的3.0.0版本 - 和带有余烬的0.1.5版本.
当我 watchman watch ~/sites/mySite
我明白了
dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
Trace/BPT trap: 5
这是醇 - "酿造物品在非常规点"的问题吗?
css ×4
ember.js ×3
javascript ×3
jquery ×3
ember-cli ×2
html ×2
animation ×1
api ×1
ember-data ×1
fancybox-2 ×1
flexbox ×1
json ×1
leaflet ×1
tumblr ×1
velocity.js ×1
watchman ×1
wordpress ×1