为了保留logotext <div class="small-7 medium-4 columns logo">和菜单<nav class="pagedMenu" role="navigation">,不刷页面刷新或内容从一个页面加载到另一个页面,我试图实现@Buzinas提出的这个解决方案(特别感谢).再补充一句话:
在header.php我们这个脚本:
<head>
...
<script>
function ajax(url, callback, method, params) {
if (!method) method = 'GET';
var xhr = new XMLHttpRequest();
xhr.open(method, url);
if (callback) xhr.addEventListener('load', function() {
callback.call(this, xhr);
});
if (params) {
params = Object.keys(params).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
xhr.send(params);
} else {
xhr.send();
}
}
// CUSTOM AJAX CONTENT LOADING FUNCTION
function ajaxRevslider(obj) {
// obj.type : Post Type …Run Code Online (Sandbox Code Playgroud) 主要目标是保持非刷新的logotext <div class="small-7 medium-4 columns logo">和菜单<nav class="pagedMenu" role="navigation">,而不会在页面刷新时剪切或在内容从页面加载到另一页面时.此外,菜单状态应从页面保留到另一页.
我在这里找到了一个可以解决问题的可能解决方案(您可以使用ajax获取更新的内容并使用jQuery将新内容放在页面上并完全避免刷新.这样做,现有的数据在页面将保持不变.说@ jfriend00)
所以,我试图使用Ajax插件(称为AWS).在AWS选项页,我(想),我已经做了指向正确的事wrapper作为阿贾克斯容器ID,也pagedMenu作为菜单的容器类,过渡效果已启用,没有AJAX容器ID空白,没有选择的装载机,其已经是一个脉冲装载机实现在主题中.
在这一点上,我得到的是菜单/侧面菜单(shiftnav)/脉冲点加载器/内容加载故障,可能是由错误定义的Ajax容器ID和/或菜单容器类(?)产生的,或者是由于与现有JS/ jQuery代码,不太确定.
此外,在Chrome控制台中还有一个错误:
Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4
Run Code Online (Sandbox Code Playgroud)
在页面刷新时,一切都恢复正常,但根本没用,没用.
我还要提到,对于菜单,我试图使用jQuery-Storage-API来保持状态,storage=jQuery.sessionStorage;正如你在mynewmenu.js文件中看到的 …
我的目标是调整/替换现有的wordpress php菜单代码,以codepen中的这个html/ css/ jsmenu结构作为起点:
主页/投资组合/关于和进入投资组合结构,另一个页面有家庭/投资组合项目.
在几句话,我已经注册script-calls.php的mynewmenu.js文件,按以下顺序
js:
// mynewmenu implementation
jQuery(function($){
var height, index, prevIndex
$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
//Gets relevant data required for scrolling of menuRight
height = $("#menuRight").css("height").replace('px','');
index = $(this).index();
//If the category button (from the navlist) has changed
if (index != prevIndex){
$("#menuRight").stop();
$("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing …Run Code Online (Sandbox Code Playgroud) 我有以下代码片段,并想知道是否有可能更新它实现此菜单行为:
步骤1.鼠标悬停Link 1 ---->它将被翻译为1.5em(已设置);
步骤2.在链接1上单击---->菜单按钮将在页面重新加载的已翻译位置(完成,特别感谢@ guest271314)保持固定,直到单击新菜单按钮(未设置)然而)又加载了另一个页面.
注意:next/prev按钮代码部分保持不变(或者如果必须,可以编辑,以保持功能).
注意2:我必须提到,最终,解决方案将在wordpress中实现,而不是静态网站html页面.
$(function () {
$('nav ul li').click(function (e) {
//Set the aesthetics (similar to :hover)
$('nav ul li')
.not(".clicked").removeClass('hovered')
.filter(this).addClass("clicked hovered")
.siblings().toggleClass("clicked hovered", false);
}).hover(function () {
$(this).addClass("hovered")
}, function () {
$(this).not(".clicked").removeClass("hovered")
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = …Run Code Online (Sandbox Code Playgroud)我仅在IE(11)中遇到元素位置异常行为进入我的页面;现场链接在这里。徽标文字,菜单和左侧边栏文本保持不变,并且在wrapper打开左侧滑块(单击“信息+”按钮)时不会随其移动。我已经阅读了IE问题中的position: fixed+ transition。
我曾尝试将其应用于position: expression(fixed);,header但出了点问题,并且wrapper在打开/关闭滑块时收到制动动作。(侧边栏不适用于position: expression(fixed);)
我也尝试过css修改元素位置值的修改,static/ absolute但没有成功。测试是在全屏模式下进行的,主题不适用于手机屏幕。
LE:我找到了一种可能与IE11中的滑块一起使用的解决方案:
.header {
position: absolute;
}
.bar-side {
position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
可以使用滑块,但也可以在垂直滚动上移动。如果我以某种方式解决此问题,则可以解决。
css internet-explorer css-position css-transitions internet-explorer-11
我正在尝试将推送侧菜单插件(响应式菜单)正确实现到 wordpress 主题中。基于SO @Congrim 的回答,我设法实现了一种body在推送菜单打开时锁定滚动条的方法(所有元素包括header固定元素),除了class=edge-ils edge-ils-with-scroll edge-ils-light在推送菜单打开时仍会上升的交互式链接。
我已将此序列保存到congrim.js文件中,并将脚本放入functions.php文件中的主题中:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
/* I've implemented `onclick="lockScroll();"` in button element,
* using this sequence in the same congrim.js file:
*/
$(document).ready(function() {
$('#responsive-menu-pro-button').click(function() {
lockScroll();
});
});
Run Code Online (Sandbox Code Playgroud)
卸下jQuery的包装不会放弃在浏览器控制台(在Chrome测试)的任何错误可能仍然是一个不错的办法,以wrapp这样的代码在WordPress(?)在这些情况下,不幸的是,overflow: hidden;不适用,在按压侧菜单打开,我不能在 CSS 文件/部分中使用这个类:
.lock-scroll {
overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)
该代码将只允许我使用
.lock-scroll {
position: fixed;
}
Run Code Online (Sandbox Code Playgroud)
问题:
是否有可能强制代码实现overflow: hidden; …
I am trying to properly implement the Responsive Menu plugin into a wordpress theme. The issue appears when the push-side menu is open, which cause body to move at vertical scroll.
At this moment, there is a solution for this template page that is working amazing and I'm happy with the result.
The question: Taking in consideration Outsource WordPress's answer, which fix the above specified page, is there any possibility to tweak the below code in order to be …