Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Masonry Script/Grid Tumblr layout help

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 20, 2016 at 5:15 pm #248050
    polter211
    Participant

    Hi! I’m trying to make a layout for my friend’s tumblr, which will be her base of business operations. I’m not incredibly well versed in coding for tumblr (mostly she asked me because she wanted me to make the banner), but I’ve been able to tweak and edit the HTML for layouts before.

    This is one I’ve been tweaking and I’ve got it almost the way I want it, but the grid/masonry script is not working for me. I’m not quite sure whether it’s the script itself or the CSS, but I figured I would post it here because that’s the main mechanism of getting this grid to work.

    I have the entries floated to the left. Without the script, it looks like a really messed up grid with huge gaps and the dates/notes aren’t lined up with their respective posts. Once I put in the masonry script, all of my posts get pushed to the left with the dates and notes lined up with their entries. I can’t figure out how to get them back into the grid format without turning it back into that messed up version.

    Here’s the site:

    http://sebtestszebras.tumblr.com/

    And here’s the CodePen, but since I don’t know what’s wrong I haven’t isolated anything except for the JS section (which I’ve put right after my <head> tag) and CSS:

    http://codepen.io/anon/pen/XNMWex

    Since I’m not especially well versed with code lingo, any simplified explanations would be great!

    November 20, 2016 at 6:13 pm #248051
    I.m.learning
    Participant

    I’m actually surprised you have it working the way it is. There are many issues with your code. I don’t normally use Codepen, so I’m unfamiliar with that, but you have an error that prevents your code to run. It looks like you combined HTML inside your CSS and JS in your Codepen.

    I been out of the game for several months and have to relearn a lot of what I’ve learned in the past, but I wouldn’t even know why your source code runs the way it is. Maybe just because it’s not valid don’t mean it won’t work, but maybe someone can make sense of why things aren’t working for you.

    I would suggest making it valid, then seeing if those changes would work. I see div tags that aren’t closed out, I see styles not inside the head, I see you are using HTML4, meta tags not inside the head.

    Then I ran a validator…it gave 75 errors.

    I tried posting the link, but it won’t load.

    I’ve tried several times, only a few times it works. There must be issues with the server. This is the last error message I received:

    Error: X-UA-Compatible HTTP header must have the value IE=edge, was IE=Edge,chrome=1.

    2.Internal Error: Oops. That was not supposed to happen. A bug manifested itself in the application internals. Unable to continue. Sorry. The admin was notified.

    The result cannot be determined due to a non-document-error.

    November 21, 2016 at 1:39 pm #248076
    polter211
    Participant

    Wow, that’s a lot. This is a layout I got from another Tumblr user and I’ve only edited some style attributes and added the script, so most of these errors aren’t mine, but I will try my best to clean these up. Hopefully that might help getting the grid working the way I want.

    Thank you!

    November 21, 2016 at 3:56 pm #248079
    polter211
    Participant

    Update: I have fixed all of the errors I could and everything is working as intended now! Thank you so much!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.