Masonry not working quite right - javascript

I'm working on a Wordpress project that features a glossary page with 3 columns. I'm trying to use Masonry to get all the entries to fit together nicely, which is almost working, but not quite.
Here's the page in question: http://ratherbrilliant.com/staging/starstruck/category/glossary/browse-A/
It's a usual Wordpress setup meaning that there are a number of articles nested in a container div.
<div id="glossary-content">
<article class="post">article content</article>
<article class="post">article content</article>
<article>article content</article>
</div>
The articles are percentage width and floated:
body.category-glossary article {
width: 26%;
padding: 0 3% 0 4%;
text-align: justify;
margin-bottom: 25px;
float: left;
}
I'm using just the the default Masonry setup, though I've tried all sorts of options to get it to work.
$('body.category-glossary #glossary-content').masonry({
itemSelector : '.post',
});
It's almost working, but if you scroll down, you'll see a giant gap between the first entry and the one below it. I simply cannot get this to work. Any help would be greatly appreciated.
Thank you!

Related

CSS animation - slide line in from left to right next to title

Wondering if I could get some help/direction...
Basically, I'm building my portfolio website. Here's work in progress, it's not finished!
https://reenaverma.github.io/
Basically, when you scroll down the page, you'll see a grey line moves from left, to the middle of the screen. It should basically be an animation to accompany the title on scroll.
I basically want the grey line to stop, at the beginning of each title. So for 'about reena', it should stop before "a", (not underneath).
I wanted to know the best way to achieve this? The relevant code so far is below. I got some of this off google and stackoverflow already.
I suppose I could drop the title before a div, (so the animation sits in a div on the left of the title). And use animate.js fadein/slidein. But I just wanted to know if there was a better/right way to do this?
HTML
<section class="section-white">
<div class="container">
<div class="flex-grid">
<div class="col-white">
<h2><span>about reena</span>
<div class="line"></div>
</h2>
<!-- <div id="trainMotion">
<img src="http://i.imgur.com/uKxkshD.png" alt=""
class="line">
<p>A Full Stack Developer etc etc etc...</p>
</div>
</div>
</div>
</section>
CSS:
.line {
display: block;
position: relative;
margin: 0 auto;
height: 3px;
background-color: #ccc;
width: 150px;
left: -300px;
transform: translateX(-50%);
}
JAVASCRIPT
$(window).on('scroll',function(){
const trainPosition = Math.round($(window).scrollTop() /
$(window).height() * 100);
$('.line').css('transform','translateX('+(trainPosition-30)+'%)');
});
Thank you!
You can divide the <h2> container into two parts. And add the animation container adjacent to the title making sure that the animation is restricted to that container only.
I am adding a codepen link which might help. Link
In this scenario, I restricted the width of the animation container. You can synchronise the timing with the JS.
You'll want to play around with the values at transform: translateX(-50%); in your CSS and +(trainPosition-30)+'%) in your JS to achieve the destination coordinates that are ideal for your project. Where your translateX value is the starting position then on scroll you're adding an additional 30%.
I don't know that this would be the cleanest option, but you can experiment with media queries to ensure that on all screen sizes it'll reach the position you want.

Incorrect viewport size causing animations to not excute on scroll

Note: This has been solved. Look at the bottom of this post for the fix.
I have this bizarre issue that I've pulling my hair out over for the past few days. Thankfully I think I've isolated it to an issue with incorrect window / document heights causing my scroll animations to never appear. I'm trying to use the lightSpeedIn animation from animate.css to animate a h2 header in, but wow.js will simply hide the element and never reveal it despite scrolling past it. If I remove wow.js and use only Animate.css the h2 title will animate just fine.
I've done some debugging using the following code and I think I know why wow.js (I've also attempted using other scrolling libraries without success) is breaking - for some reason jQuery is reporting both the window height and document height to be 943. There's clearly a scroll bar on the website, so I'm pretty sure any scroll implementation I do won't work because the code never sees anything to scroll to.
<div id="console">
$(window).height() = <span id="winheight"></span> <br/>
$(document).height() = <span id="docheight"></span>
</div>
Will result in the following appearing on the website.
Implementation with wow.js - doesn't work
<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>
In this case wow.js seems to be assiging the following style to the header, but it never seems to be toggled.
visibility: hidden; animation-name: none
Implementation with only animate.css - works
<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>
The strangest fact about this is that the problem only occurs on one part of the website - I've got wow.js working just fine on other parts. Some digging with firebug revealed that animation "lightSpeedIn" doesn't exist when it does. I've even attempted copying and pasting animation names from other areas of the website (e.g. the legacy tab) into the h2 element but it'll always think the animation name doesn't exist.
I'm stumped as to how to go about fixing this. Anyone have any insight into my issue? You can view a live demonstration of this problem here.
UPDATE 1: I thought this might have been a plugin/library incompatibility, so I removed everything but animate.css and wow.js - didn't fix anything. I'm completely stumped.
UPDATE 2: Attempted using other scroll libraries. They don't work either. Narrowed it down to a possible issue with content being "invisible" to the viewport.
UPDATE 3: Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.
Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.
Previous CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
overflow-x: hidden
}
Fixed CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
}

Has to be easy - Div panel text seems to realign center when clicking to collapse the panel

The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}

Creating a dashboard evenly distributed and with flow behavior

I am trying to build a dashboard for a web application. The requirements are for this screen to be responsive to the client screen in the following way:
Dashboard should hold 4 widgets (same size) in a row. The widgets should be distributed across the screen evenly.
When the minimum size of the screen does not allow all widget to be displayed (with minimal space between them) those widgets that cannot fit, should continue to the next line (flow).
Now i saw this post that answers the first definition but I could not find a way to enforce the flow behavior on it with the second idea. Does anyone has a clue of how it can be done?
You need to give your widgets a width and height and make them display:inline-block:
HTML:
<div class="widget">One</div>
<div class="widget">Two</div>
<div class="widget">Three</div>
<div class="widget">Four</div>
CSS:
.widget {
width: 100px;
height: 100px;
background-color: #ddd;
margin: 2px;
display: inline-block;
}
Live example here.

Javascript show/hide links not working

Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.
First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!

Categories

Resources