HTML 5 Overriding all other Web Content

Gabe Gibitz's Avatar

Gabe Gibitz

05 Nov, 2012 05:31 AM

When I paste the HTML5 code for my elements into my web pages, everything is overridden including CSS, all other text (headers and footers alike), and my menu bar. I've tried that with two separate elements on two separate pages, and it does the same thing.

I know my way around code but not enough to troubleshoot like this. Would love if it's a quick fix, but am willing to hire a 16-year old techie if need be. Thanks, you guys!

See below page for example:
http://s380042071.onlinehome.us/CASHMusic2/#!Events.html

See below page for what page should look like:
http://s380042071.onlinehome.us/CASHMusic2/#!Events2.html

And see file for HTML.

Thanks!
Gabe

  1. Support Staff 1 Posted by Jesse von Doom on 05 Nov, 2012 07:17 AM

    Jesse von Doom's Avatar

    Hey Gabe,

    Well shit. I'm dumb. This is the first revision of the HTML5 stuff and I hadn't tested against content loaded by AJAX yet. Funny — I was planning on adding element previews in the admin but figured no one would try dumping it into an AJAX site before I got that done.

    Opened a bug. Should (hopefully) be able to get to it this week:

    https://github.com/cashmusic/platform/issues/241

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom

    cashmusic.org / @cashmusic

  2. 2 Posted by Gabe Gibitz on 05 Nov, 2012 07:30 AM

    Gabe Gibitz's Avatar

    Leave it to me, huh? Thanks, man!

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  3. Support Staff 3 Posted by Jesse von Doom on 05 Nov, 2012 08:31 AM

    Jesse von Doom's Avatar

    Well it's super helpful. It's pretty much just me building things, and even with a decent test suite it's obviously pretty easy for me to miss things in testing — especially with some pretty major deadlines approaching. Thanks for letting me know about it!

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom

    cashmusic.org / @cashmusic

  4. 4 Posted by Gabe Gibitz on 18 Nov, 2012 02:38 PM

    Gabe Gibitz's Avatar

    Any news on this one? Will this be in the Alpha release this week? Just
    want to know how to plan because I was planning to cancel my Bandzoogle
    account at the end of this month and go strictly to CashMusic. Thanks, man!

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  5. Support Staff 5 Posted by Jesse von Doom on 19 Nov, 2012 06:07 PM

    Jesse von Doom's Avatar

    Hey Gabe,

    Yeah I've got the fix sketched out. Should have been dealt with last week but my wife's been sick and now our three-year-old has it too. Running a few days behind, but you'll have a drop-in JS fix no later than tomorrow.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom

    cashmusic.org / @cashmusic

  6. 6 Posted by Gabe Gibitz on 19 Nov, 2012 06:40 PM

    Gabe Gibitz's Avatar

    Sickness is no fun. Sounds great, man!

    Gabe

    Sent from my phone.

  7. Support Staff 7 Posted by Jesse von Doom on 19 Nov, 2012 10:10 PM

    Jesse von Doom's Avatar

    Oh and just so you know...we're not doing an auto-upgrade on the single-user version just yet, but I'll make sure you have a drop-in replacement so you'll just need to swap out a couple files and off you go. Should be crazy easy, and won't hurt your upgrade path.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom

    cashmusic.org / @cashmusic

  8. 8 Posted by Gabe Gibitz on 19 Nov, 2012 11:50 PM

    Gabe Gibitz's Avatar

    You're awesome! Thanks for all the special treatment. I'll be on the lookout.

    Gabe

    Sent from my phone.

  9. Support Staff 9 Posted by Jesse von Doom on 22 Nov, 2012 05:27 AM

    Jesse von Doom's Avatar

    Hey Gabe,

    Sorry...I'm a day late. Family's still on the mend, so it's been a SLOW week.

    So this one should be your fix:

    https://github.com/cashmusic/platform/commit/c6657d75e7c30e0408dab761e7b174c721d9c0f5

    There are really just two files you care about, and both are easy to find. If you FTP to your server just look at the folder where the cash /admin/ directory is stored. Next to /admin/ should be a folder called /public/ — not too many files, and there are just two that you need to replace: request.php and cashmusic.js. Here are direct links to the raw code on github:

    https://raw.github.com/cashmusic/platform/c6657d75e7c30e0408dab761e7b174c721d9c0f5/interfaces/php/public/request/request.php
    https://raw.github.com/cashmusic/platform/c6657d75e7c30e0408dab761e7b174c721d9c0f5/interfaces/php/public/cashmusic.js

    This should clear it up, but let me know if you have any more trouble!

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  10. 10 Posted by Gabe Gibitz on 22 Nov, 2012 02:26 PM

    Gabe Gibitz's Avatar

    Awesome! I'll try it out before the week is finished.

    Tell me if I can do anything to promote you guys or help out in any way! You've been so great to work with.

    Happy Thanksgiving!

    Gabe

    Sent from my phone.

  11. 11 Posted by Gabe Gibitz on 22 Nov, 2012 10:42 PM

    Gabe Gibitz's Avatar

    Oh, jeez.

    Head here:

    http://s380042071.onlinehome.us/CASHMusic2/#!Home.html

    And then click "About." That looks fine. Click "Events" (that's where
    I'm using the HTML5 script from CashMusic). Nothing shows up. Then, go
    back to "About." Totally messed up. What happened?

    :)

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  12. 12 Posted by Gabe Gibitz on 23 Nov, 2012 03:54 PM

    Gabe Gibitz's Avatar

    Fwiw, I didn't put the uncompressed JS file in my admin folder. Would that affect things?

    Gabe

    Sent from my phone.

  13. Support Staff 13 Posted by Jesse von Doom on 23 Nov, 2012 07:17 PM

    Jesse von Doom's Avatar

    I think I know what's going on. It's a bit of guesswork not seeing it all, but I think the issue is that there are two <script> tags. The first is needed to run the code in the second, but because of the way you're using jquery to load things it's running the second before the first. Try this:

    <script type="text/javascript">
    $.getScript("http://yourdomain.com/public/cashmusic.js", function(){
       window.cashmusic.embed('http://yourdomain.com/public/','1');
    });
    </script>

    That should do it. There are a couple other options if those don't work...

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  14. 14 Posted by Gabe Gibitz on 23 Nov, 2012 09:50 PM

    Gabe Gibitz's Avatar

    Ok, we're closer! The page loads now, but there's no content...

    http://s380042071.onlinehome.us/CASHMusic2/#!Events.html

    And when you go from the Events page to the About page and back to the
    Events page (for example), there are still script problems. Here's what
    I have on there right now.

    <!--full width text-->
             <div class="row">
                <script type="text/javascript">
    $.getScript("http://s380042071.onlinehome.us/GabeGibitz2/public/cashmusic.js",
    function(){
    window.cashmusic.embed('http://s380042071.onlinehome.us/GabeGibitz2/public/','1');
    });
    </script>
           </div>
             <!--/full width text-->

    Closer, but not there yet...

    The Twitter feed on the Home Page is doing the same thing the Events
    page is... :)

    Gabe

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

    On 11/23/12 2:17 PM, Jesse von Doom wrote:
    > <script type="text/javascript">
    > $.getScript("http://yourdomain.com/public/cashmusic.js", function(){
    > window.cashmusic.embed('http://yourdomain.com/public/','1');
    > });
    > </script>

  15. Support Staff 15 Posted by Jesse von Doom on 23 Nov, 2012 10:45 PM

    Jesse von Doom's Avatar

    Well it looks like you're not actually pointing to the script or the proper /public/ link ->

    http://s380042071.onlinehome.us/GabeGibitz2/public/cashmusic.js

    This is pointing to a full HTML page if you look at it...seems like something in the template you're using isn't letting it load...or maybe it's just the wrong URL?

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  16. 16 Posted by Gabe Gibitz on 24 Nov, 2012 04:18 AM

    Gabe Gibitz's Avatar

    Here's a link to the video of what I was doing...looks like that HTML
    file was my fault:

    http://screencast.com/t/PCUVvReSvqI

    Still having script problems (I can contact the creator of the template
    for that). And still having load problems even after those two files
    were updated (and refreshed on my browser)...

    Do you want me to wait for the Alpha release?

    Gabe

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  17. 17 Posted by Gabe Gibitz on 24 Nov, 2012 04:26 AM

    Gabe Gibitz's Avatar

    I'm willing to keep troubleshooting...just don't want you to focus too
    much time on my problems. Not sure where it falls in the grand scheme of
    your next release.

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  18. Support Staff 18 Posted by Jesse von Doom on 24 Nov, 2012 07:02 AM

    Jesse von Doom's Avatar

    Oh shit...haha. I'm SUPER DUMB. So what we did was clear things out so they aren't pitching errors, but I was using that first <script> tag to find where we are in the document — need to give a new roadmap. Working through some test cases and I'll have a new version for you tomorrow. Should be an easy enough fix. Obvious miss on my part...I wasn't testing in a good enough environment.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  19. 19 Posted by Gabe Gibitz on 24 Nov, 2012 12:41 PM

    Gabe Gibitz's Avatar

    Ha! Sounds good. Thanks, man!

    Gabe

    Sent from my phone.

  20. Support Staff 20 Posted by Jesse von Doom on 24 Nov, 2012 07:59 PM

    Jesse von Doom's Avatar

    Hey Gabe,

    Here's the latest version of the script:

    https://raw.github.com/cashmusic/platform/e12a461ddeeebc21e6025c046f625f2d49061e12/interfaces/php/public/cashmusic.js

    For usage, check here:

    https://github.com/cashmusic/platform/wiki/Embedding-HTML5-elements-%28using-cashmusic.js%29

    It's basically the same as before, but you need to add a <div> tag before it with an id, and reference that id in the script. (Your example is the first one under AJAX — basically just copy that and change the URLs and you should be good.) I've tested this one with jQuery AJAX loads as well as with non-AJAX loads so it should be good. Worked like a charm both ways.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  21. 21 Posted by Gabe Gibitz on 25 Nov, 2012 03:16 AM

    Gabe Gibitz's Avatar

    Yes!

    Well, sorta . The content loads, but I'm still having script problems if
    you jump from page to page . I copied and pasted this into the Events page:

    <!--full width text-->
             <div class="row">

    <div id="element-space"></div>
    <script type="text/javascript">
    $.getScript("http://s380042071.onlinehome.us/GabeGibitz2/public/cashmusic.js",
    function(){
    window.cashmusic.embed('http://s380042071.onlinehome.us/GabeGibitz2/public/','1','#element-space');
    });
    </script>
           </div>
             <!--/full width text-->

    And this into the Home page (Twitter column):

    <div class="one-third column">
                     <img class="imageLeft"
    src="pages/home_images/twitter.png" />
                     <h3 class="textColor01">Twitter Feed</h3>
                     <p class="defaultText textColor01">
    <div id="element-space"></div>
    <script type="text/javascript">
    $.getScript("http://s380042071.onlinehome.us/GabeGibitz2/public/cashmusic.js",
    function(){
    window.cashmusic.embed('http://s380042071.onlinehome.us/GabeGibitz2/public/','2','#element-space');
    });
    </script>

                     </p>
                 </div>

    If I need to contact the developer of my site, I can!

    Also, any Wiki's on how to address CSS of the CASHMusic script not
    matching the CSS of the rest of the site? Or is that to come?

    Thanks, Jesse!

    Gabe

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  22. Support Staff 22 Posted by Jesse von Doom on 25 Nov, 2012 05:12 AM

    Jesse von Doom's Avatar

    Hi Gabe,

    Those errors look like they're coming from the theme or from the carousel/slide bit. Here's what I'm getting:

    I double-checked, but I'm not using .toString() anywhere in my code so it's definitely coming from elsewhere. (And if you find it — that's not correct as-is. It should be a method, like .toString() not a property, which is more like a fixed value without the parenthesis. Looks like maybe a typo somewhere?)

    But I think it's that undefined "currentSlideNo" that's causing you real headaches. It's in the DegradeSlider.js file, if you're feeling bold.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  23. Support Staff 23 Posted by Jesse von Doom on 25 Nov, 2012 05:15 AM

    Jesse von Doom's Avatar

    Oh and as for setting the look of the embeds, it's hella easy, but I don't have it documented yet. For now, just crack open the core of the CASH install. Not the admin, but the more secure stuff. In it you'll see a folder called "framework/settings/defaults" — look for embed.mustache (might be called embed_template.mustache in your version...)

    Don't let the .mustache fool you — it's basically just HTML. Mustache is a basic templating language used to pre-render templates. Use it for everything in the platform. You can change all the CSS and everything else you need right in there, copy and paste from your site, and get it all looking perfect. Lemme know if you need any guidance.

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  24. 24 Posted by Gabe Gibitz on 26 Nov, 2012 03:39 AM

    Gabe Gibitz's Avatar

    I'll be bugging the theme creator for that one. :)

    Not feeling brave enough...will tackle the CSS, though!

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  25. 25 Posted by Gabe Gibitz on 28 Nov, 2012 11:33 AM

    Gabe Gibitz's Avatar

    Jesse,

    The template creator couldn't fix my site, but he did say this:

        I've tried to fix your cash music problem but I could not, I'm sorry
        I do not have the time to go through all cash music documentation,
        still I have some recommendation for you: (I have attached two
        screen shoots)

        1. you should not load the cash music script script within pages
        (ex: Home.html), you should load the script within index.html
        (please see figure cash_m1)

        2. you should remove the "get script from your page code" -see
        figure cash_m2.

        Now the problem is that you need to find a new method to embed the
        code (other than "window.cashmusic.embed"), it seems this one does
        not work.

    That's just for your information...I'm not expecting you to fix that
    problem for me if it works on other AJAX sites you tested.

    It's all way over my head, so I'm going to wait for his Wordpress
    version of the site that comes out in the next week or two and use
    CASHMusic through there That's my next best bet. Thanks, Jesse!

    Gabe

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  26. Support Staff 26 Posted by Jesse von Doom on 28 Nov, 2012 08:07 PM

    Jesse von Doom's Avatar

    Hi Gabe,

    The window.cashmusic.embed() 100% absolutely scientifically definitely works. He's right that you can just embed the main cashmusic.js in the head of your index.html or main template — after doing that you can just call the embed code. I really have no idea why his code is tripping up after ours, but running a trace on the errors it's definitely coming from his stuff.

    But there might be an easier solution. Any reason you're not just using the WordPress plugin to embed things directly? In theory it'd solve all your problems and be a pretty easy route forward...

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  27. 27 Posted by Gabe Gibitz on 28 Nov, 2012 08:16 PM

    Gabe Gibitz's Avatar

    Wordpress isn't out yet. That's in the next week or two. I'll just wait for that. Thanks, man!

    Gabe

    Sent from my phone.

  28. 28 Posted by Gabe Gibitz on 29 Nov, 2012 03:36 AM

    Gabe Gibitz's Avatar

    I trust you over this other guy. He's from Europe... :)

    I'll tell you when my site is up and running with Wordpress. In the
    meantime, keep coding away! Looking forward to the final product!

    Gabe

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  29. Support Staff 29 Posted by Jesse von Doom on 29 Nov, 2012 03:49 AM

    Jesse von Doom's Avatar

    Oh is it not WP right now? Let me know. If not I can give you one last five-minute thing to try...

    j

    ***
    Jesse von Doom
    CASH Music

    @jessevondoom / (401) 864-2118

    cashmusic.org / @cashmusic

  30. 30 Posted by Gabe Gibitz on 29 Nov, 2012 04:07 AM

    Gabe Gibitz's Avatar

    Nope, not WP just yet...

    Listen: http://listn.to/gabegibitz
    Download: www.gabegibitz.com/sampler
    Support: www.gabegibitz.com

  31. Jesse von Doom closed this discussion on 29 Jan, 2013 03:03 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac