Menu icon Foundation

Designer

My Posts











My Comments

Glynn Williams commented on Glynn Williams's post over 1 year

If you want to have the logo fade in and out, I started by adding an ID tag to the logo image...
<img id="YOURID" src="../images/your-image.png" alt="Image alt text">
...then on document ready (if you want it to fade in when the page first loads)...
$(document).ready(function() {$('#YOURID').hide();$('#YOURID').fadeIn(1500);});
...and then to fade the logo in and out when the user scrolls...
<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
$(this).addClass('shrink');
$('#logo').addClass("hide");
$('#text-logo').removeClass("hide");}
).on('sticky.zf.unstuckfrom:top', function(){
$(this).removeClass('shrink');
$('#logo').removeClass("hide");
$('#YOURID').hide();
$('#YOURID').fadeIn(1500);
$('#text-logo').addClass("hide");}
)
</script>
By hiding the image with Javascript means it will show by default if the user has JS turned off. You can play with the fade in time to meet your requirements.
Hope this is useful too.
G

Glynn Williams commented on Glynn Williams's post over 1 year

 PS This is built using this building block
http://zurb.com/building-blocks/shrinking-sticky-navigation-menu-f6
G

Glynn Williams commented on Glynn Williams's post over 1 year

I worked it out!
Firstly I added class="hide" to the text-logo li...
<div class="top-bar-left">
<ul class="menu">
<li id="text-logo" class="hide"><a href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home">The Congregation of Yahweh</a></li>
<li id="logo"><a class="nmarg" href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home"><img class="nmarg" src="'.BASE_DIR.'img/coy-white-logo.png" alt="Congregation of Yahweh white logo"></a></li>
</ul>
</div>
...then I amended the Javascript to this...
<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
$(this).addClass('shrink');
$('#logo').addClass("hide");
$('#text-logo').removeClass("hide");
}).on('sticky.zf.unstuckfrom:top', function(){
$(this).removeClass('shrink');
$('#logo').removeClass("hide");
$('#text-logo').addClass("hide");
})
</script>
...works great. Hope this might prove helpful to others looking to do this.
CheersG

Glynn Williams commented on Glynn Williams's post over 1 year

Thanks Stuart
I'll have a play with that.
G

Glynn Williams commented on Glynn Williams's post over 1 year

 UPDATE
Actually, both your code and mine seems to work on the live website! I was only testing it in codepen. :-)


 
Many thanks Rafi.
G

Glynn Williams commented on Glynn Williams's post over 1 year

Hi Rafi
Many thanks for this, a great start. Sorry, I'm not very good with JQuery :/
Could there be an if else condition? As in if the toggle-button is clicked activate all options/de-activate all options, else if each individual option is ticked/unticked do that...
I found this "How to Select / Deselect All Checkboxes using jQuery". I tried to implement it, but it didn't work:
http://codepen.io/WOWDS/pen/oxowLx
I've applied a class to each tick box to give more control. Any ideas?
Cheers
Glynn

Glynn Williams commented on coralie diatkine's post over 1 year

Hi Coralie
Is this any good? I've changed the slide in from the left to dropdown from the top.
https://jsfiddle.net/y0tnwatk/
CheersG

Glynn Williams commented on Glynn Williams's post over 1 year

Right.
This is the CSS for tooltips in the downloaded Foundation 6 sheet:
.tooltip{background-color:#0a0a0a;color:#FEFEFE;font-size:80%;padding:.75rem;position:absolute;z-index:3;top:calc(100% + .6495rem);max-width:10rem!important;border-radius:0}
.tooltip:before{border-color:transparent transparent #0a0a0a;border-bottom-style:solid;border-top-width:0;bottom:100%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.tooltip.top:before,.tooltip:before{content:'';display:block;width:0;height:0;border:.75rem inset}
.tooltip.top:before{border-color:#0a0a0a transparent transparent;border-top-style:solid;border-bottom-width:0;top:100%;bottom:auto}
.tooltip.left:before{border-color:transparent transparent transparent #0a0a0a;border-left-style:solid;border-right-width:0;left:100%}
.tooltip.left:before,.tooltip.right:before{content:'';display:block;width:0;height:0;border:.75rem inset;bottom:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.tooltip.right:before{border-color:transparent #0a0a0a transparent transparent;border-right-style:solid;border-left-width:0;left:auto;right:100%}
I then looked at the Docs page for tooltips (http://foundation.zurb.com/sites/docs/tooltip.html) and checked what the CSS looked like there and it was this (I've tidyed it up a bit, merging the same styles in one line):
.tooltip {background:#0a0a0a;color:#FEFEFE;font-size:0.875rem;padding:0.75rem;position:absolute;z-index:3;top:calc(100% + 0.6495rem);max-width:10rem !important;border-radius:0}
.tooltip::before, .tooltip.top::before, .tooltip.left::before, .tooltip.right::before {content:'';display:block;width:0;height:0;border:inset 0.75rem;position:absolute}
.tooltip::before, .tooltip.left::before, .tooltip.right::before {-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.tooltip.left::before, .tooltip.right::before {bottom:auto;top:50%}
.tooltip::before {border-color:transparent transparent #0a0a0a;border-bottom-style:solid;border-top-width:0;bottom:100%;left:50%}
.tooltip.top::before {border-color:#0a0a0a transparent transparent;border-top-style:solid;border-bottom-width:0;top:100%;bottom:auto}
.tooltip.left::before {border-color:transparent transparent transparent #0a0a0a;border-left-style:solid;border-right-width:0;left:100%}
.tooltip.right::before {border-color:transparent #0a0a0a transparent transparent;border-right-style:solid;border-left-width:0;left:auto;right:100%}
There's a few differences. I copied the CSS styles from the tooltips page, amending where neccessary, and it now works fine.
CheersG

Glynn Williams commented on coralie diatkine's post over 1 year

Does it have to come down or just appear? Try this: http://jsfiddle.net/JamesD/xsFmA/2/
If you want movement use css3 transitions: http://www.w3schools.com/css/css3_transitions.asp
G

Glynn Williams commented on coralie diatkine's post over 1 year

You need to wrap the link around the .image-overlay-content, such as:
<div class="row">
<div class="small-4 columns">
<div class="image-wrapper overlay-fade-in">
<img src="https://tourneau.scene7.com/is/image/tourneau/DEV9900004?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="image-wrapper overlay-slide-in-left">
<img src="https://tourneau.scene7.com/is/image/tourneau/ZEN0101011?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="image-wrapper overlay-fade-in-new-background">
<img src="https://tourneau.scene7.com/is/image/tourneau/FRK0100001?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
</div>
In HTML5 wrapping a link around block elements is perfectly acceptable. Also, although I'm not sure it's needed (please check various browsers), I added a new line of CSS:
.image-wrapper a {display:block}
Try this. I removed the button too. No point hiding something that's not required. :-)
CheersGlynn
PS I've tested the above on a MAC, running the latest OS, with the latest browsers of Safari, Chrome and Firefox and it works fine.

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Glynn Williams's post over 1 year

If you want to have the logo fade in and out, I started by adding an ID tag to the logo image...
<img id="YOURID" src="../images/your-image.png" alt="Image alt text">
...then on document ready (if you want it to fade in when the page first loads)...
$(document).ready(function() {$('#YOURID').hide();$('#YOURID').fadeIn(1500);});
...and then to fade the logo in and out when the user scrolls...
<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
$(this).addClass('shrink');
$('#logo').addClass("hide");
$('#text-logo').removeClass("hide");}
).on('sticky.zf.unstuckfrom:top', function(){
$(this).removeClass('shrink');
$('#logo').removeClass("hide");
$('#YOURID').hide();
$('#YOURID').fadeIn(1500);
$('#text-logo').addClass("hide");}
)
</script>
By hiding the image with Javascript means it will show by default if the user has JS turned off. You can play with the fade in time to meet your requirements.
Hope this is useful too.
G

You commented on Glynn Williams's post over 1 year

 PS This is built using this building block
http://zurb.com/building-blocks/shrinking-sticky-navigation-menu-f6
G

You commented on Glynn Williams's post over 1 year

I worked it out!
Firstly I added class="hide" to the text-logo li...
<div class="top-bar-left">
<ul class="menu">
<li id="text-logo" class="hide"><a href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home">The Congregation of Yahweh</a></li>
<li id="logo"><a class="nmarg" href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home"><img class="nmarg" src="'.BASE_DIR.'img/coy-white-logo.png" alt="Congregation of Yahweh white logo"></a></li>
</ul>
</div>
...then I amended the Javascript to this...
<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
$(this).addClass('shrink');
$('#logo').addClass("hide");
$('#text-logo').removeClass("hide");
}).on('sticky.zf.unstuckfrom:top', function(){
$(this).removeClass('shrink');
$('#logo').removeClass("hide");
$('#text-logo').addClass("hide");
})
</script>
...works great. Hope this might prove helpful to others looking to do this.
CheersG

You commented on Glynn Williams's post over 1 year

Thanks Stuart
I'll have a play with that.
G

You commented on Glynn Williams's post over 1 year

 UPDATE
Actually, both your code and mine seems to work on the live website! I was only testing it in codepen. :-)


 
Many thanks Rafi.
G

You commented on Glynn Williams's post over 1 year

Hi Rafi
Many thanks for this, a great start. Sorry, I'm not very good with JQuery :/
Could there be an if else condition? As in if the toggle-button is clicked activate all options/de-activate all options, else if each individual option is ticked/unticked do that...
I found this "How to Select / Deselect All Checkboxes using jQuery". I tried to implement it, but it didn't work:
http://codepen.io/WOWDS/pen/oxowLx
I've applied a class to each tick box to give more control. Any ideas?
Cheers
Glynn

You commented on coralie diatkine's post over 1 year

Hi Coralie
Is this any good? I've changed the slide in from the left to dropdown from the top.
https://jsfiddle.net/y0tnwatk/
CheersG

You commented on Glynn Williams's post over 1 year

Right.
This is the CSS for tooltips in the downloaded Foundation 6 sheet:
.tooltip{background-color:#0a0a0a;color:#FEFEFE;font-size:80%;padding:.75rem;position:absolute;z-index:3;top:calc(100% + .6495rem);max-width:10rem!important;border-radius:0}
.tooltip:before{border-color:transparent transparent #0a0a0a;border-bottom-style:solid;border-top-width:0;bottom:100%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.tooltip.top:before,.tooltip:before{content:'';display:block;width:0;height:0;border:.75rem inset}
.tooltip.top:before{border-color:#0a0a0a transparent transparent;border-top-style:solid;border-bottom-width:0;top:100%;bottom:auto}
.tooltip.left:before{border-color:transparent transparent transparent #0a0a0a;border-left-style:solid;border-right-width:0;left:100%}
.tooltip.left:before,.tooltip.right:before{content:'';display:block;width:0;height:0;border:.75rem inset;bottom:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.tooltip.right:before{border-color:transparent #0a0a0a transparent transparent;border-right-style:solid;border-left-width:0;left:auto;right:100%}
I then looked at the Docs page for tooltips (http://foundation.zurb.com/sites/docs/tooltip.html) and checked what the CSS looked like there and it was this (I've tidyed it up a bit, merging the same styles in one line):
.tooltip {background:#0a0a0a;color:#FEFEFE;font-size:0.875rem;padding:0.75rem;position:absolute;z-index:3;top:calc(100% + 0.6495rem);max-width:10rem !important;border-radius:0}
.tooltip::before, .tooltip.top::before, .tooltip.left::before, .tooltip.right::before {content:'';display:block;width:0;height:0;border:inset 0.75rem;position:absolute}
.tooltip::before, .tooltip.left::before, .tooltip.right::before {-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.tooltip.left::before, .tooltip.right::before {bottom:auto;top:50%}
.tooltip::before {border-color:transparent transparent #0a0a0a;border-bottom-style:solid;border-top-width:0;bottom:100%;left:50%}
.tooltip.top::before {border-color:#0a0a0a transparent transparent;border-top-style:solid;border-bottom-width:0;top:100%;bottom:auto}
.tooltip.left::before {border-color:transparent transparent transparent #0a0a0a;border-left-style:solid;border-right-width:0;left:100%}
.tooltip.right::before {border-color:transparent #0a0a0a transparent transparent;border-right-style:solid;border-left-width:0;left:auto;right:100%}
There's a few differences. I copied the CSS styles from the tooltips page, amending where neccessary, and it now works fine.
CheersG

You commented on coralie diatkine's post over 1 year

Does it have to come down or just appear? Try this: http://jsfiddle.net/JamesD/xsFmA/2/
If you want movement use css3 transitions: http://www.w3schools.com/css/css3_transitions.asp
G

You commented on coralie diatkine's post over 1 year

You need to wrap the link around the .image-overlay-content, such as:
<div class="row">
<div class="small-4 columns">
<div class="image-wrapper overlay-fade-in">
<img src="https://tourneau.scene7.com/is/image/tourneau/DEV9900004?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="image-wrapper overlay-slide-in-left">
<img src="https://tourneau.scene7.com/is/image/tourneau/ZEN0101011?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="image-wrapper overlay-fade-in-new-background">
<img src="https://tourneau.scene7.com/is/image/tourneau/FRK0100001?hei=450&amp;wid=300&amp;fmt=png-alpha&amp;resMode=bicub&amp;op_sharpen=1" />
<a href="pages.php">
<div class="image-overlay-content">
<h2>.overlay-fade-in-new-background</h2>
<p class="price">$189,000</p>
</div>
</a>
</div>
</div>
</div>
In HTML5 wrapping a link around block elements is perfectly acceptable. Also, although I'm not sure it's needed (please check various browsers), I added a new line of CSS:
.image-wrapper a {display:block}
Try this. I removed the button too. No point hiding something that's not required. :-)
CheersGlynn
PS I've tested the above on a MAC, running the latest OS, with the latest browsers of Safari, Chrome and Firefox and it works fine.

Posts Followed

Following

  • No Content

Followers

  • No Content