CSS-Tricks/MovingBoxes

Implementation with iFrames

Stevo-ID opened this issue · 7 comments

Stevo-ID commented

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 commented

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 commented

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 commented

Also, I was using the code from your demo i think, and it had it as "

" 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 commented

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

Stevo-ID commented

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 commented

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 commented

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.