小编Sar*_*ra_的帖子

如何正确实现自定义ajax

为了保留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)

javascript php ajax wordpress jquery

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

如何保持元素不刷新

主要目标是保持非刷新的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文件中看到的 …

html javascript css wordpress jquery

27
推荐指数
2
解决办法
1978
查看次数

如何在php中正确实现结构化菜单

我的目标是调整/替换现有的wordpress php菜单代码,以codepen中的这个html/ css/ jsmenu结构作为起点:

主页/投资组合/关于和进入投资组合结构,另一个页面有家庭/投资组合项目.

在几句话,我已经注册script-calls.phpmynewmenu.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)

html php wordpress

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

如何保持页面重新加载菜单状态

我有以下代码片段,并想知道是否有可能更新它实现此菜单行为:

步骤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)

html javascript css jquery wordpress-plugin

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

IE11中的固定位置异常

我仅在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

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

如何使用侧推菜单防止正文滚动

我正在尝试将推送侧菜单插件(响应式菜单)正确实现到 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; …

html javascript css wordpress jquery

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

如何使用响应式菜单防止身体滚动

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 …

html javascript css wordpress jquery

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