Menu icon Foundation

Developer | Belgium, Koersel

My Posts




My Comments

Maarten Tibau commented on Maarten Tibau's post about 4 years

OMG.. how stupid am I :s...
Thanks!

Maarten Tibau commented on Joop Vos's post about 4 years

Perfect! Glad I could help out :-)

Maarten Tibau commented on Joop Vos's post about 4 years

OK, i get what you mean. Now in your links of the accordion blocks, you have "#panel1" .. "#panel2" .. etc.. This is used to put the scroll bar at the correct position when clicking on such an element.

But since the normal behavior of the anchor isn't working anymore.. you'll have to trigger that action by yourself. You could do this in a few ways.

URL: http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript

OR a more smooth way

URL: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

Maarten Tibau commented on Joop Vos's post about 4 years

What do you mean with "stays focused" ? Do you mean that your background color blinks when closing a accordion element?

Maarten Tibau commented on Markus Lind's post about 4 years

Overwrite the height attribute of your .top-bar class, because this class has a fixed height set in the foudation.css code. And remove the "border-bottom" from your anchor element.

.top-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #EBEBEB;
    height: auto;
}

.top-bar-section ul li > a {
  border-right: 1px solid #EBEBEB;
  color: #747474;
}

Codepen: http://codepen.io/anon/pen/rOzrZp

Maarten Tibau commented on sally willard's post about 4 years

A link to you website or a code example would do wonders :-)

Maarten Tibau commented on Joe Workman's post over 4 years

@Rafi

You say that the "even" class is mentioned in the Grid section? But when I surf to the link you've posed in your comment, I don't see anything mentioned about the "even" classes.

It is mentioned on the "Button Groups" page, under the section "Advanced".
URL: http://foundation.zurb.com/docs/components/button_groups.html#advanced

Advanced

Adding an even class with the specified number of buttons in that group allows the button group to evenly expand to the edges of its container. With Foundation classes you can use the even class up to even-8.

Maarten Tibau commented on Maarten Tibau's post over 4 years

Hi Rafi,

With your code I found the solution! :-)
If you put the image in the background, that the doesn't receive an actually width and height, that's why I put the image there. Now I like your idea of using a background-image and then use "cover", because that gives me a lot more options.

Now I found a solution using the image.. so that the gets a proper height and width, I could just change that image to a blank .png image and then set a background-image of course.

Here's a link to my solution, thanks for your input!
URL: http://codepen.io/anon/pen/gpzBRv

Maarten Tibau commented on Maarten Tibau's post over 4 years

Hi Rafi,

Thanks for your reply, but your solution doesn't work. I can't even see the background-image in your example. I tried it on my own project as well, but without any result.

Maarten Tibau commented on Maarten Tibau's post over 4 years

Hi,

Since the boxes need to be responsive, I can't set a fixed height in the boxes. That's why I use the equalizer to on-the-fly set the heights.

Since the box with the text in it is positioned absolute, so it can be placed over the image it needs a height so that "vertical-align" works.

Anyhow.. the CSS works, that's not the issue, it's the fact that I always need to refresh to make it work in the iPad, it seems that the Equalizer doens't load on time or something, I don't know..

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Maarten Tibau's post about 4 years

OMG.. how stupid am I :s...
Thanks!

You commented on Joop Vos's post about 4 years

Perfect! Glad I could help out :-)

You commented on Joop Vos's post about 4 years

OK, i get what you mean. Now in your links of the accordion blocks, you have "#panel1" .. "#panel2" .. etc.. This is used to put the scroll bar at the correct position when clicking on such an element.

But since the normal behavior of the anchor isn't working anymore.. you'll have to trigger that action by yourself. You could do this in a few ways.

URL: http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript

OR a more smooth way

URL: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

You commented on Joop Vos's post about 4 years

What do you mean with "stays focused" ? Do you mean that your background color blinks when closing a accordion element?

You commented on Markus Lind's post about 4 years

Overwrite the height attribute of your .top-bar class, because this class has a fixed height set in the foudation.css code. And remove the "border-bottom" from your anchor element.

.top-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #EBEBEB;
    height: auto;
}

.top-bar-section ul li > a {
  border-right: 1px solid #EBEBEB;
  color: #747474;
}

Codepen: http://codepen.io/anon/pen/rOzrZp

You commented on sally willard's post about 4 years

A link to you website or a code example would do wonders :-)

You commented on Joe Workman's post over 4 years

@Rafi

You say that the "even" class is mentioned in the Grid section? But when I surf to the link you've posed in your comment, I don't see anything mentioned about the "even" classes.

It is mentioned on the "Button Groups" page, under the section "Advanced".
URL: http://foundation.zurb.com/docs/components/button_groups.html#advanced

Advanced

Adding an even class with the specified number of buttons in that group allows the button group to evenly expand to the edges of its container. With Foundation classes you can use the even class up to even-8.

You commented on Maarten Tibau's post over 4 years

Hi Rafi,

With your code I found the solution! :-)
If you put the image in the background, that the doesn't receive an actually width and height, that's why I put the image there. Now I like your idea of using a background-image and then use "cover", because that gives me a lot more options.

Now I found a solution using the image.. so that the gets a proper height and width, I could just change that image to a blank .png image and then set a background-image of course.

Here's a link to my solution, thanks for your input!
URL: http://codepen.io/anon/pen/gpzBRv

You commented on Maarten Tibau's post over 4 years

Hi Rafi,

Thanks for your reply, but your solution doesn't work. I can't even see the background-image in your example. I tried it on my own project as well, but without any result.

You commented on Maarten Tibau's post over 4 years

Hi,

Since the boxes need to be responsive, I can't set a fixed height in the boxes. That's why I use the equalizer to on-the-fly set the heights.

Since the box with the text in it is positioned absolute, so it can be placed over the image it needs a height so that "vertical-align" works.

Anyhow.. the CSS works, that's not the issue, it's the fact that I always need to refresh to make it work in the iPad, it seems that the Equalizer doens't load on time or something, I don't know..

Posts Followed




Following

  • No Content

Followers

  • No Content