Implementation with iFrames

[Stevo-ID]

Hi,

I am a extreme beginner in coding, and just in the past few months I have taught myself. I am a product designer, working on a portfolio site and started off using a WYSIWYG software called Webpage Maker (not great, but got it free from a friend). I have been using a unique combination of the software and hand writing stuff for the site. I can't seem to get Moving Boxes working on the site. It worked for a little while when working locally, but after I've published to my FTP, I can't get it to work. I think It may have something to do with how the WYSIWYG exports or accesses js and/or css. Is there a quick way to tell me why it is not working on this page... www.stephendiebold.com/PROJECTS . And if you can notice, I am using iFrames to try and implement multiple MB slideshows in one window. By the way, I am still using the default images from your slideshow. I just wanted to get it working first before I threw my own images in.

If this is too much a pain in the ass (I know WYSIWYG code can be fugly), or you just dont have the time, or anything. I completely understand. I am just out of options and I've spent hours and hours trying to get this thing to work (as well as another handful of JS plugins that aren't working currently). So any help would be appreciated. Just let me know. Please.

[Mottie]

Hi Stevo-ID!

I haven't dug into your code too much, but I think all that is missing on the main page and each iframe is the MovingBoxes initialization code:

$(ready(function(){
    $('#slider').movingBoxes({
        // add options here
    });
});

Also, the main page has a script tag pointing to the MovingBoxes script AND a second copy pasted into the page; the latter isn't necessary.

Lastly, I also wanted to ask why is each project inside an iframe? MovingBoxes can be applied multiple times to the same page.

[Stevo-ID]

Hi,

Thank you so much for the response. I will give that a try. And I had thought I read (either here or on the css tricks page that it couldn't be implemented multiple times on one page! Great to hear. That will make this much easier. I'll let you know how it all comes out.

Thank you again, Steve

On Tue, May 29, 2012 at 9:17 AM, Rob G < reply@reply.github.com

wrote:

Hi Stevo-ID!

I haven't dug into your code too much, but I think all that is missing on the main page and each iframe is the MovingBoxes initialization code:

$(ready(function(){
   $('#slider').movingBoxes({
       // add options here
   });
});

Also, the main page has a script tag pointing to the MovingBoxes script AND a second copy pasted into the page; the latter isn't necessary.

Lastly, I also wanted to ask why is each project inside an iframe? MovingBoxes can be applied multiple times to the same page.

---

Reply to this email directly or view it on GitHub: https://github.com/chriscoyier/MovingBoxes/issues/85#issuecomment-5984644

---

Stephen Diebold Industrial Designer Diebold.Stephen@gmail.com 847.366.9001 www.wix.com/SDiebold/Stephen-Diebold

[Stevo-ID]

Also, I was using the code from your demo i think, and it had it as "<div id="slider-two">" in the body, is that wrong?

On Tue, May 29, 2012 at 10:53 AM, Stephen Diebold dmbman@comcast.netwrote:

Hi,

Thank you so much for the response. I will give that a try. And I had thought I read (either here or on the css tricks page that it couldn't be implemented multiple times on one page! Great to hear. That will make this much easier. I'll let you know how it all comes out.

Thank you again, Steve

On Tue, May 29, 2012 at 9:17 AM, Rob G < reply@reply.github.com

wrote:

Hi Stevo-ID!

I haven't dug into your code too much, but I think all that is missing on the main page and each iframe is the MovingBoxes initialization code:

$(ready(function(){
   $('#slider').movingBoxes({
       // add options here
   });
});

Also, the main page has a script tag pointing to the MovingBoxes script AND a second copy pasted into the page; the latter isn't necessary.

Lastly, I also wanted to ask why is each project inside an iframe? MovingBoxes can be applied multiple times to the same page.

---

Reply to this email directly or view it on GitHub: https://github.com/chriscoyier/MovingBoxes/issues/85#issuecomment-5984644

---

Stephen Diebold Industrial Designer Diebold.Stephen@gmail.com 847.366.9001 www.wix.com/SDiebold/Stephen-Diebold

---

Stephen Diebold Industrial Designer Diebold.Stephen@gmail.com 847.366.9001 www.wix.com/SDiebold/Stephen-Diebold

[Mottie]

Each div or movingboxes block needs to have a unique ID... so slider1, slider-two, etc.

[Stevo-ID]

O ok. I got ya. I will give each a unique ID then. Like I said, I am very rough and self taught over the past two months basically haha. The initialization code is in the script in the header correct? And will I have to make "initialization code" for each of them? Sorry about all the questions. Just want to make sure I have my head wrapped around this and you are giving me some great help on somethign that would take much much longer without anyone to ask.

-Steve

On Tue, May 29, 2012 at 1:07 PM, Rob G < reply@reply.github.com

wrote:

Each div or movingboxes block needs to have a unique ID... so slider1, slider-two, etc.

---

Reply to this email directly or view it on GitHub: https://github.com/chriscoyier/MovingBoxes/issues/85#issuecomment-5991107

---

Stephen Diebold Industrial Designer Diebold.Stephen@gmail.com 847.366.9001 www.wix.com/SDiebold/Stephen-Diebold

[Mottie]

Well if all of the MovingBoxes will have the same settings, then yes, you can initialize them all from one call. It's easiest to just add a class name to each slider:

$('ul.movingboxes').movingBoxes({
    // initialization settings
});

or just include all of the ID's

$('#slider1, #slider-two, #slider3').movingBoxes({
    // initialization settings
});

[Mottie]

I'm guessing that these problems have been resolved, so I'm closing this issue. Please feel free to reopen it if you continue to have problems.