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

peregrine · April 2012

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

422 · April 2012

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

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

422 · April 2012

Gimme a mo, the issue is anchors.

422 · April 2012

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

Or iframe.scrollto (#top)

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

422 · April 2012

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

peregrine · 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;
    });
    });

422 · 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 ?

peregrine · April 2012

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

422 · April 2012

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.

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

422 · April 2012

ok one mo

422 · April 2012

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

http://vanillaskins.com/downloads/

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

422 · April 2012

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

peregrine · April 2012

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.

422 · April 2012

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

x00 · April 2012

where is the script placed?

peregrine · April 2012

Check pnav.js in the plugin below

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

x00 · 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;
});

peregrine · 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 :)

peregrine · April 2012

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

422 · April 2012

Id clash?

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

ie. Default.master.php or .tpl

peregrine · April 2012

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.

422 · April 2012

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.

peregrine · 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

422 · April 2012

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

peregrine · 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. :).

peregrine · April 2012

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

});

422 · April 2012

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

Howdy, Stranger!

Categories

In this Discussion

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

Answers