我有一个Rails网络应用程序(在线考试系统).我在检查界面中使用JavaScript禁用了右键单击,选择,复制等.所以,我希望我的应用程序检测是否在界面启动时启用了JavaScript.我通过使用<noscript>标签检查了如下.
<noscript>
<meta http-equiv="refresh" content="5">
<div id="noscript_message" style="color: white; background-color: red;">
It is detected that Javascript is turned off in your web brower. Please turn it on to load the page correctly. For more reference about how to turn it on, please refer <a href="http://www.enable-javascript.com/" target="_blank">
instructions how to enable JavaScript in your web browser</a>.
</div>
</noscript>
但我只能检测并显示一条消息作为警告.我的意图是不加载该页面并仅显示警告消息.如何实现？
谢谢 :)-
基本上我最初在我的css文件中设置了某些元素,display: none;并visibility: hidden;在jQuery的帮助下使它们可见.我在想,如果用户禁用了javascript,那就意味着他们根本不会看到任何这些隐藏的元素.为了向禁用javascript的浏览器显示此内容,我怎么能创建一种后备？
我知道有一些插件,如https://code.google.com/p/ie6-upgrade-warning/和http://browser-update.org,非常方便警告用户不要使用IE6/7.
但是,如果我想更进一步并自定义检测说"对不起,IE不支持,请下载Chrome"怎么办？那里有插件吗？谢谢
这很简单,但我不知道为什么IE没有做我的innerHTML更改和其他东西.
function changeele2() {
document.getElementById("eleme2");
document.getElementById("workout");
document.getElementById("workoutweek");
if(workout.value == "Yes") {
eleme2.style.display = "inline-block";
workoutweek.className += " requiredField";
}
}
如果我更改下拉列表的值,它会调用:
<select id="workout" onchange="changeele2()">
<option>No</option>
<option>Yes</option>
</select>
两者都不适用于带文字的按钮
我只是找不到它.有没有人有想法？
我创建了一个方法来启动一个活动指标和一个不同的方法来停止给定的指标.然后在执行耗时的任务时,我先调用start方法,然后调用stop方法.呼叫示例如下所示:
// Show loading
viewControllerShowAjax();
// Tasks that take time including large calculations and ajax requests
app.timeConsumingFunction();
// Hide loading
viewControllerHideAjax();
这适用于Firefox,但无法在IE或Chrome上运行.有没有解决这个问题？
编辑: 以下是我正在使用的功能:
function viewControllerInit() {
// Other initializations
...
// Initializing the activity indicator; the activity indicator is simply a jqueryui modal view with a spinjs spinner in it.
$(this.ajaxModalSelector).dialog({
resizable : false,
dialogClass : "no-close ajax",
autoOpen : false,
height : 500,
width : 500,
modal : true,
open: function( event, ui ) …javascript jquery internet-explorer google-chrome cross-browser
在Chrome和ff中,我的菜单有一个填充...我看到它在两个浏览器上都有效..但是当我在Safari中查看它时......填充不存在.
.jplnav li {
padding: 15px 0;
}
我的下一个问题是......我想使用bxslider.我按照他们的说明如何安装它但它不能在我的最后工作.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="/query.bxslider.css" rel="stylesheet" />
<title>My Slider</title>
</head>
<body>
<ul class="bxslider">
<li>Hi</li>
<li>Hello</li>
<li>Goodbye</li>
<li>Yes</li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
</body>
</html>
未捕获的ReferenceError:jQuery未定义jquery.bxslider.min.js:10
未捕获的ReferenceError:$未定义index.html:19
无法加载资源文件://ajax.googleapis.com/ajax/libs/jquery/1.10. 2/jquery.min.js
我犯了使用最新版本的safari/firefox和chrome设计网站的错误.我简单地检查了它在IE 10上看起来没问题,但没有过多地投入后备.然后我开始使用'sexier'css技术并忘记了IE.
我没有防守,这是一个愚蠢的错误.
该网站在IE的早期版本中看起来很可怕它在I.E8上进行了简要测试.导航栏横跨页面,entypo字体不显示,旋转器全部搞砸了.那是第一页,我还没能看到其他人.
更糟糕的是,我使用的是Mac,我在其上运行Windows的Windows正在运行Windows 8,如果没有先安装旧版本的Windows,我就无法安装旧版本的IE.
它接近于灾难.该网站位于kingpetroleum.co.uk,非常感谢任何帮助.
编辑:字体细节不起作用
@font-face{font-family:'EntypoRegular';
src:url(data:font/woff;charset=utf-8;base64,d09GRg ...... ...... ..... etc);
src:url(data:fnt/truetype)format(''truetype); //deliberately mispelt there to avoid pasting a ton of code
url('entypo-webfont-webfont.svg#EntypoRegular') format('svg');
font-weight:normal;
font-style:normal
我已经用Sauce进行了跨浏览器测试一段时间了.我最近听说过BrowserStack,并决定尝试一下.我挖掘它......它的速度更快,而且UI更加直观和合作.
我花了很长时间才找到让IE8识别媒体查询的方法.无论我做了什么(我在阳光下尝试了一切),Respond.js都不起作用,但最终我尝试了css3-mediaqueries.js,它似乎正在溜槽外工作.
但是当我在BrowserStack中测试同一页面时,没有媒体查询.
任何人都可以告诉我,相同的测试参数(IE8,Windows 7,1024x768)如何显示在Sauce中运行的媒体查询,但在BrowserStack中却没有？
这是我正在使用的精简测试页链接:
我无法弄清楚这一点.我已经完成了研究,请不要评论我做更多的研究.此外,我是一个菜鸟,所以要好;)
这是我的网站:http://library.skybundle.com/
将鼠标悬停在主蓝色导航栏(标题区域)中的两个黑色矩形上.a:悬停应该使颜色变为灰色.问题是在Chrome中,这看起来很完美.但是,在Firefox中,填充权限不够长或者其他东西,所以"教育课程"按钮的最右侧总是有一个小的黑色矩形(只有当光标悬停在按钮上时才会显示).换句话说,鼠标悬停时灰色框不会一直到按钮区域的右侧端.我只是不明白为什么这在Chrome中看起来效果很好,但在Firefox中却有问题......
相信我,当我说我已尝试使用Firebug在Firefox中修复它时所做的一切.如果您使用浏览器中的编辑器来玩它,您会看到如果您尝试为Firefox填充更长时间,它会将整个按钮弹出一个新行.因此,为了解决这个问题,你必须使容器更宽,但原来的问题又回来了.这是一个问题圈,我相信你们中的一个天才会看到一个我想念的简单解决方案.
请帮忙.谢谢!
编辑:
这是我的JSFiddle和代码.请注意它在Chrome中看起来很棒但在Firefox中看起来不是很好
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left"><a href="#">Product Training Videos</a></li>
<li id="li-right"><a href="#">Educational Courses</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block; …我们计划了很多动画,我正在寻找一种更清晰的方式来解决所有浏览器问题.像这样的东西会很棒:
@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
@#{$browser}keyframes rotate {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
}
除了@#{$vendor}keyfr...产生一个错误,期望一个数字或函数后@.有没有办法强制@通过css？
否则,有没有人想出一个更简洁的方法来完成这个@each,@mixin或者其他任何可以为每个浏览器列出每个动画(即下面)的东西？
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to { -o-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: …cross-browser ×10
javascript ×5
css ×4
jquery ×3
html ×2
browser ×1
browserstack ×1
fallback ×1
firefox ×1
sass ×1
saucelabs ×1