Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


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

peregrineperegrine MVP
edited April 2012 in Questions

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

Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

Answers

  • 422422 Developer MVP

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

    422 Real Estate Australia , now open Check it out

  • 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.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    Gimme a mo, the issue is anchors.

    422 Real Estate Australia , now open Check it out

  • 422422 Developer MVP
    edited April 2012

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

    Or iframe.scrollto (#top)

    422 Real Estate Australia , now open Check it out

  • 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.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

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

    422 Real Estate Australia , now open Check it out

  • 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;
        });
        });
    

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 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 ?

    422 Real Estate Australia , now open Check it out

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

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 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.

    422 Real Estate Australia , now open Check it out

  • 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.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    ok one mo

    422 Real Estate Australia , now open Check it out

  • 422422 Developer MVP

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

    http://vanillaskins.com/downloads/

    422 Real Estate Australia , now open Check it out

    peregrine
  • 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.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 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

    422 Real Estate Australia , now open Check it out

  • 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.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

    422
  • 422422 Developer MVP

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

    422 Real Estate Australia , now open Check it out

  • 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

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 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.

    peregrine
  • peregrineperegrine MVP
    edited April 2012

    I know the event is firing and I've actually tried the animate before.

    But here is my result

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

    non-embedded see alert then goes to top

    embedded see alert and doesn't go to top - just jitters 1/4 inch and is prevented from doing anything :)

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • fwiw - I think I found the problem - it is being overruled by remote.js in the embedvanilla plugin.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    Id clash?

    You must add the jquery to vanilla and not wormpress or external page.

    ie. Default.master.php or .tpl

    422 Real Estate Australia , now open Check it out

  • no id clash, but url rewriting and page position and urls controlled by remote.js- if you look at the plugin and look and remote.js, as mentioned above, you will be enlightened! You will also note as I said before changing tpl doesn't fix it and you will also note the jquery is added in vanilla. I'll let you know if I ever solve it, or maybe Lincoln or Todd or whoever will explain the ins and out of remote.js. I'll either wait for them to respond or somebody who actually has solved it in the appropriate software.

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    Why so complicated, all you wanna do is scroll to top from somewhere in your vanilla page. You cannot scroll to top if you are below the fold, within an iframe and you havent got scroll bars, the parent window will still remain in its position at whatever scroll position.

    Perhaps share a link, i am getting confused.

    422 Real Estate Australia , now open Check it out

  • peregrineperegrine MVP
    edited April 2012

    I don't think you will be able to experience it without loading the pagenavigator-plugin and embedding it in wordpress. The code is in the plugin. The explanation remains the same it works perfectly when not embedded in wordpress. The top and bottom navigation do NOT work when embedded in wordpress. Drop the iframe from your thoughts, and then look at remote.js in the the embedded theme plugin to take a gander at the machinations. Once again - these are the variations ( http://vanillaforums.org/discussion/comment/157435#Comment_157435 ). I tried as well as x00's suggestion and your tpl suggestion.

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

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    Mate,

    Why would i go to ALL that effort...

    Setting up wormpress , vanilla, embedding, adding plugins ... Just to experience your issue ?

    Either post a link, screenshot or your on your own, at least with my assistance cos...

    Im farting into a tornado, here ! Lol

    422 Real Estate Australia , now open Check it out

  • peregrineperegrine MVP
    edited April 2012

    Thanks for the help 422 - I appreciate you sticking with me. This works - http://vanillaforums.org/addon/pagenavigator-plugin You know the images are posted with the plugin, so you don't have to load the plugin to see what I am talking about.

    Solved. Browser specific Issue.It works (top and bottom) embedded and unembedded under google chrome. (doesn't work in firefox).

    Didn't occur to me that it could be a browser issue.

    Looks like you don't have to continue with the gas in a tornado. :).

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • the ultimate solution in all versions and embedded and unembedded

    the solution was using a parent.window

    jQuery(document).ready(function($) {
    
    $('a.pntop').click(function() {
    parent.window.scrollTo(0, 0);
    return false;
    });
    
    $('a.pnbottom').click(function() {
    ht = $(document).height();
    parent.window.scrollTo(0, ht-200);
    return false;
    });
    
    });
    

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

  • 422422 Developer MVP

    Glad you sorted it, no idea how this gets marked as solved.

    422 Real Estate Australia , now open Check it out

Sign In or Register to comment.