All

I want to use iScroll in iframe.

This is my code

HTML

<form>
        <input type="text" class="frmUrlVal">
        <input type="submit" class="frmSubmit" value="Go">
      </form>
      <iframe src="" width="360" height="500" id="dynFrame"></iframe>

JS

$(function()
{
  $('.frmSubmit').click(function(e)
  {
    $('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
    e.preventDefault();
  });
});

This is my jsfiddle link : / ​ ​You can see here there is vertical scrollbar, i want to use iSroll instead of that regular scroller. I tried with applying the id but it not work for me.

Thanks In Advance !

All

I want to use iScroll in iframe.

This is my code

HTML

<form>
        <input type="text" class="frmUrlVal">
        <input type="submit" class="frmSubmit" value="Go">
      </form>
      <iframe src="http://www.css-tricks." width="360" height="500" id="dynFrame"></iframe>

JS

$(function()
{
  $('.frmSubmit').click(function(e)
  {
    $('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
    e.preventDefault();
  });
});

This is my jsfiddle link : http://jsfiddle/ajaypatel_aj/JtCJa/ ​ ​You can see here there is vertical scrollbar, i want to use iSroll instead of that regular scroller. I tried with applying the id but it not work for me.

Thanks In Advance !

• javascript
• html
• iframe
• iscroll4

3 Answers 3

I think the closest option you would have is http://jsfiddle/JtCJa/9/ it will still need tweaking and you cannot click the links but it works as you would expect :)

You can't do this from parent frame. You must add iScroll's script directly to "http://www.css-tricks." page. If this site doesn't belong to you, you can't do this because executing JavaScript code on pages from different domain is forbidden for security reasons.

You can set very big height of frame, so scroll bar inside the frame will disappear, only the scroll bar of parent frame will remain. This scrollbar can be styled with JavaScript because it belongs to your domain. But I think scrolling page with mouse inside frame will not work (you can't receive mouse events from third-party frame). And page height bees very big (you can't determine the height of frame contents).

Well, you can download entire page contents on server side and display its copy on your site. In this case JavaScript on this page will work and scrollbar can be styled. There are several scripts for doing this. Trey're called "web proxies". You can use one of them, for example, PHProxy. It's plicated to implement this functionality yourself because there are some techinal difficulties (downloading related files, redirecting ajax requests, saving cookies etc).

hey ajajy you have to add class also in your file

<iframe src="http://www.css-tricks." width="360" height="500" id="navbar" class="navbar_relative"></iframe>

and js funcation

function magentoScrollMimic(){
 j(document).scroll(function(e){
      if(j(window).scrollTop()>138)
        {
            j('#dynFrame').addClass('navbar_fixed');
            j('#dynFrame').removeClass('navbar_relative');

        }
        else
        {
            j('#dynFrame').removeClass('navbar_fixed');
            j('#dynFrame').addClass('navbar_relative');
        }
   }); 
}

samjyo

and use directly

<ul id="dynFrame" class="navbar_relative">

i used this and its working

j(document).ready(function(){
    magentoScrollMimic(); }