Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

[Solved] JQuery interaction question w/Vanilla embedded in wordpress

peregrineperegrine MVP
edited April 2012 in Vanilla 2.0 - 2.8

I'm looking for a Jquery solution or possibly a rewrite url rule.

It seems like some JQuery and javascript events won't work in vanilla when it is embedded in wordpress.

e.g. Just as an example. this code if executed in console will work perfectly fine. If you click on something it will scroll to the top of the page in in non-embedded vanilla.

jQuery(document).ready(function($) {
$('*').click(function(){
    window.scrollTo(0, 0);
   return false;
});
});

yet in embedded vanilla it will not do anything. Is there any function in Jquery that will allow scrolling to the top of the iframe ala (typical vanilla embedded in wordpress). using iframe instead of window will not solve problem, nor will local links.

-
It it requires a rewrite rule in urls.

what would be the correct syntax in a rule that excludes rewrites of urls
that end in 

#topdoc

e.g. http://vanillaforums.org/discussion/18780/vanilla-tutorialdocumental-site#topdoc

I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

«1

Answers

  • 422422 Developer MVP

    If its embedded and scrollto is in the iframe, then it will only work for the embedded content.

    There was an error rendering this rich post.

  • peregrineperegrine MVP
    edited April 2012

    Thats my problem scrollto does not work for embedded content!

    Huh? Can you provide any scrolling example or a go to top of document that would work in vanilla embedded in wordpress. That is my question.

    If you try the above jquery in console it works in non-embedded version.
    what would be a comparable jquery I could execute in the console that would work in embedded vanilla.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    Gimme a mo, the issue is anchors.

    There was an error rendering this rich post.

  • 422422 Developer MVP
    edited April 2012

    Rather than scroll to x y , why not scroll to id ?

    Or iframe.scrollto (#top)

    There was an error rendering this rich post.

  • peregrineperegrine MVP
    edited April 2012

    Thanks.
    I can scroll to anything in non-embedded using a million variations, none of them work in embedded vanilla. If you test one that works I'd love to see it. Perhaps JQuery scrolling does not work within an iframe, or some interaction with wordpress prevents it.

    The above code will place an anchor on the first comment.

    jQuery(document).ready(function($) {
    $("div.Meta:first").append('<a name="topdoc" id="topdoc"></a>');
    
    });
    

    Here's the anchor placement - try getting to it in an embedded version - I don't know if it can be done.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    why not create a jsfiddle and we can probably knock something out

    There was an error rendering this rich post.

  • peregrineperegrine MVP
    edited April 2012

    I've provided several examples.

    I don't know that jsfiddle, would emulate vanilla embedded in wordpress. I just want to be able to get to the #topdoc. Almost every variation I've tried will work in non-embedded version.

    Isn't it clear enough. There is an anchor in the above link. Try to get to the anchor tag in any method you want as long as it works in the embedded wordpress version.

        jQuery(document).ready(function($) {
        // create the anchor
        $("div.Meta:first").append('<a name="topdoc" id="topdoc"></a>');
    
    
     // click on anything to go to the anchor
       $('*').click(function(){
        // put whatever function and selector works in embedded vanilla here
        // nothing seems to work
        return false;
        });
        });
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP
    edited April 2012

    Have you checked this out ?

    http://demos.flesler.com/jquery/scrollTo/

    Just thought, are you wishing to scroll to x-y within iframe , and controlled within the iframe.

    Or from within the iframe and controlling scroll position within Parent ?

    There was an error rendering this rich post.

  • Thanks - I've looked at millions of scroll plugins and demos - none work in embedded vanilla to do what I am trying to achieve.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    Just havin a smoko and will do a mockup, or try.

    Is topdoc the id IN the iframe?

    And you want the controls IN the iframe.

    There was an error rendering this rich post.

  • peregrineperegrine MVP
    edited April 2012

    Thanks. In answer to your question - I didn't create an iframe per se - The iframe is vanilla embedded in wordpress.

    this put an anchor by the first comment in the discussion page.

    $("div.Meta:first").append('<a name="topdoc" id="topdoc"></a>');

    I was going to append a link Top that point to above and when you click on it it goes there.
    As I said works fine in regular vanilla - but embeded in wordpress - scrolling gets nullified so to speak.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    ok one mo

    There was an error rendering this rich post.

  • 422422 Developer MVP

    Made you a quick and dirty example. Pure n simple js

    http://vanillaskins.com/downloads/

    There was an error rendering this rich post.

  • peregrineperegrine MVP
    edited April 2012

    I appreciate the effort. You've proven it works in a iframe, and maybe my question was confusing and got you off-track. It doesn't work in vanilla embedded in wordpress which I assumed is an iframe but now I don't know what it is. technically a frame of some kind?

    I entered this code in my console (which is a slight mod of yours.

    jQuery(document).ready(function($) {
    // create the anchor
    $("div.Meta:first").append('<a name="topdoc" id="topdoc"></a>');
    
    $('*').click(function(){
    location.href="#";
    return false;
    });
    });
    

    once again it works fine in non-embedded version- you can try it on this page and then click a link and it goes to the top.

    However, it does not work with vanilla embedded in wordpress - so your code works in iframe but not in embedded wordpress.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    Im not used to embedded vanilla.

    I presume if you look at src code you will see iframe somewhere.

    The page controlling the index of your forum, is forum discussions index . php or something ..

    So this becomes the page you need to apend the js to, by adding id tag, to top of that page.
    Then apending the scroll to anchor link to a click element within your vanilla page.

    You cannot add content OUTSIDE of vanilla, to control stuff within vanilla via iframes, plus both pages must eb on same domain.

    so in your theme , views default.master.php you could add the anchor tag I made and append it to the tag

    Then in your page, add the function . Either ona button or a link.. menu item or image. Providing both click from and goto , ID's are within the same src element

    There was an error rendering this rich post.

  • Thanks for all your efforts. I'm going to leave the question unsolved.

    I tried the tpl change - didn't solve the problem for me. Tried four variations of "going up in page" - scrollto, window.location, and location.href, and normal hashtag. They all work in non-embed and they all don't work in embed. When top is clicked on in the embedded version the page jitters about 1/4 of an inch and returns to the same spot, as if it is trying to do something and is being overridden. I think I'll leave this to other pioneers.

    I've provided several examples bottom and top slightly different in PageNavigator plugin (top,bottom,first and last work in the non-embed standard version of vanilla) and (first,last do work in the embed version, while top and and bottom don't work in the embed version).

    I'll leave it be and maybe somebody with wordpress can solve the problem before the next millenium.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 422422 Developer MVP

    I am sure someone else can solve this for you, dont give up hope lol

    There was an error rendering this rich post.

  • where is the script placed?

    grep is your friend.

  • peregrineperegrine MVP
    edited April 2012

    Check pnav.js in the plugin below

    http://vanillaforums.org/addon/pagenavigator-plugin

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • x00x00 MVP
    edited April 2012

    I would check whether the following is firing

    $("a[href='#topdoc']").click(function() {
        alert('fired');
    }

    instead use something like pagenavigatorTop as the class

    $("a.pagenavigatorTop").click(function() {
         $('html, body').animate({scrollTop:0}, 100);
         return false;
    });

    grep is your friend.

Sign In or Register to comment.