Junitar

If I'm not mistaken, the oninput event is supported on IE6 so I guess I will go for the jQuery method this time.

I assume I'm trying to do too much but as long as I can I would like to write a code that's compatible with as many browsers as possible. It's probably unnecessary (and I guess it's a beginner's mistake) considering that I'm just making a simple photography website that will go unnoticed for most users…

Thanks again for your help!

Thank you very much for the fast reply. Managed to get it work perfectly with your code, just had to switch the show and hide method… I primarily used the 2 .stop() to stop an animation but I forgot to remove them.

I wanted to use jQuery to prevent compatibility issues with old versions of IE. Since I don't plan to add a label outside the inputs, I wanted to be sure to have something that indicates what each input is for. I thought it was the best method but maybe I'm wrong. What do you think? I'm learning everything on my own so I wouldn't be surprised if I'm doing it wrong.

Hi,

I'm trying to fake the placeholder attribute for a contact form using jQuery. To do so, I placed an input on top of a label tag (which is basically the value I want inside the input), and used jQuery to hide the label when pressing a key and show it back when the field is empty. I used the keypress and keyup events, like so:

jQuery(function($){
    $(".placeholder").each(function(){
        var label = $(this).find("label");
        var input = $(this).find("input");
        […]
        input.keypress(function(){
            label.stop().hide();
        });
        input.keyup(function(){
            if(input.val() == ""){
                label.stop().show();
            }
        […]
}); 

It works just as expected except if I start filling the input out with accents/diacritical signs which will just write on top of my label until I end up pressing a key that doesn't take accents.

Is there any chance to fix this issue? Ideally, I would like to make my label disappear when pressing any key.

Thanks for your help.

Edit: just added an example here https://jsfiddle.net/0kfp10Lf/3/

The label doesn't hide if I start filling out the input with any of the following keys ~ ^ ¨ ` ´, whether I combine them or not with a a, e, y, u, i, o or n. Otherwise, everything's fine.

Oh, ok. I didn't get it that way.

I've just tried it out and it works perfectly! Thanks.

Thanks, I will try that out but I think I will stick with the margin-right method since it's the normal method around this issue.

Having a inline-block content for the menu is what I use for the horizontal menu of the desktop version of my site and it gives more control indeed. I didn't manage to do exactly what I wanted for the mobile version with a inline-block content but I still have a lot to learn.

Well, I guess my problem is solved anyway. Thank you to you both!

Here is an example of what I want to avoid and what I would like to have: https://jsfiddle.net/kpyjxne8/

As you can see in this example, the letter-spacing property doesn't add space between letters but after them. As a result, all my "contents" are shifted to the left by the amount of space I set to the letter-spacing and are no longer centered. The third "content", to which I applied a negative margin of 5px is well centered and helps visualize the decentering of the other elements.

 

 

If that's not it then what you actually want to do is remove space from the right edge of the container. A negative margin on the container would fix that.

Thanks, that fixed the problem for the menu at least. When I first tried that, I applied the negative margin to the <nav> tag which brought another problem. In fact, I needed to apply it to the <li> tags.

Unfortunately, all my elements outside the <ul> tag that have a letter-spacing are still not centered because of the letter-spacing. I guess I will need to fix them with the margin-right applied to a <span>.

Hello,

I've a vertical menu of this kind, styled with a letter-spacing of 5px:

<nav>
  <div class="menu-mobile" id="menu-mobile">menu</div>
					
  <ul>
    <li><a href="#" title="Home">home</a></li>
    <li><a href="#" title="Galleries">galleries</a></li>
    <li><a href="#" title="News">news</a></li>
    <li><a href="#" title="About">about</a></li>
    <li><a href="#" title="Contact">contact</a></li>
  </ul>
</nav> 

I was wondering what's the best way to remove letter-spacing from the last letter here in order to have the text well centered in my design.

The method I usually use for this is to do a horizontal menu, set the parent element in display: inline-block and then apply a margin-right to -5px to each <a> tags. It works great but it's not what I want here as I would like to have a centered vertical menu that takes a 100% width for mobile devices.

The other solutions I know consist in wrapping each text elements in a <span> tag to which I apply a margin-right to -5px, or to play with the padding property to adjust the position of the text, but both these solutions are quit exhaustive and I don't really like them.

Isn't it a more simple and "elegant" way to remove that space created by the letter-spacing property from the last letter?

Thanks for your help!

The 'showing' selector is indeed overridden by the other rule. I've not managed to fix the problem by using a more specific selector but now that I know where the problem comes from, it will be easier for me to figure it out.

Thanks again!

Thank you for the quick reply. I previously set 'showing' max-height to 20em like in the tutorial. But it didn't work. So I tried with the line-height. Forgot to remove it.

Anyway, I've just tried again with this line

.showing{ max-height: 20em; }

and I still have the same issue.

Hi all,

I'd like to make a responsive navigation bar with a drop down menu using jQuery but I'm having some difficulties getting it work properly. I've just started learning jQuery so my knowledges in this language are very limited for the moment. I know there is a tutorial precisely for that on w3school but I followed this tutorial on YouTube as the result is closer to what I would like to end up with. Besides, the code looks easier to me.

What I'm trying to do is basically the same thing but without using an external <div> for the menu bar, which I would like to include in the list elements. To do so, I hid all the list elements using a max-height to 0 except for the "menu" one, then I toggleClassed all the list elements but the "menu" one so they get the new declaration max-height= 3em.

Unfortunately, the menu doesn't drop down when clicking on the "menu" bar.

Any help?

Thanks.

Here is the .html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="responsiveMenu2.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Test</title>
</head>
 
<body>
<header>
<h2>responsive navigation (mobile first)</h2>
 
<nav> 
<ul>
<li class="menu" id="menu"><a href="#">menu</a></li>
<li class=""><a href="#">home</a></li>
<li class=""><a href="#">galleries</a></li>
<li class=""><a href="#">news</a></li>
<li class=""><a href="#">about</a></li>
<li class=""><a href="#">contact</a></li>
</ul>
</nav>
</header>
 
<section>
<article>
Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
</article>
</section>
 
<script>
$(".menu").on("click", function(){
$("nav ul li").not(".menu").toggleClass("showing");
});
</script>
</body>
</html>

And the .css

*{
box-sizing: border-box;
}
 
html{
width: 100%;
min-height: 100%;
}
 
body{
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
 
header{
background-color: #00795f;
width: 100%;
padding: 40px 0 0 0;
color: white;
text-transform: capitalize;
}
 
nav{
margin-top: 40px;
width: 100%;
background-color: #43a286;
text-transform: capitalize;
}
 
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
 
nav ul li:not(#menu){
max-height: 0;
-webkit-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
 
nav ul li a{
display: block;
width: 100%;
line-height: 3em;
text-decoration: none;
color: white;
}
 
nav ul li a:hover{
background-color: #399077;
}
 
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 0;
width: 100%;
}
 
article{
text-align: justify;
padding: 5% 4%;
}
 
#menu{
background-color: #005c48;
cursor: pointer;
}
 
.showing{
height: 3em;
}
 
@media screen and (min-width: 680px){
#menu{
display: none;
}
 
nav{
height: 3em;
}
 
nav ul li{
display: inline-block;
margin: 0 1%;
}
 
nav ul li a{
padding: 0 20px;
line-height: 3em;
}
 
section{
max-width: 900px;
margin: 0 auto;
}
}