I have multiple links, each embedded in its own list-item, like so:
<ul id="topLinks">
<li>Link 1</li>
...
<li>Link 4</li>
</ul>
What I would like done is, when the user is hovering over the link, dashes are added to the link text. For example, when the mouse rolls over "Link 1", it turns to "-Link 1-", and goes back to normal when the cursor is not over that link anymore - leaving the other links alone (until user rolls its cursor over each respective link).
I've tried writing a few scripts of my own for it, but Im still pretty new to JavaScript, so Im kind of lost. Oh, by the way, I apologize for not having a live example, Im working on my LocalHost at the moment...
In fact, you can use :after and :before CSS selectors, in combination with :hover: http://jsfiddle.net/pimvdb/p9Qfu/. It is more straightforward and faster than doing it in JavaScript.
li:hover:before {
content: "-";
}
li:hover:after {
content: "-";
}
If you're willing to do jQuery then this would work: http://jsfiddle.net/MrrZs/ If not, I can try something else for you.
Related
I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.
I'm not a programmer. I can read and understand some code, and I can google for answers. But this one escapes me. I built a test page to try my hand at coding for mobile devices - http://www.stovebolt.com/testing2.html
At 800 pixels, the navigation stack on the left is hidden and replaced with a dropdown menu that uses a list structure with a hover function. This will work on mobile devices if the href for the parent li is #. However, you have to reload the page to get it to close the menu.
So I cast about for a solution and came across this: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I'm using his DoubleTapToGo javascript, and it works, but it applies to all the elements not just the parent li. According to his page you just need to use the following to only have the parent require a double tap:
$( '#nav li:has(ul)' ).doubleTapToGo();
I'm not using the id #nav. I'm using the class .mobile, so I replaced #nav with .moblie. But you have to double tap ALL the links, not just the dropdown.
I've tried negating the function, but that didn't work. I tried changing to li:hasClass() and created a new class for that one li. Didn't work. How can I get the doubleclick to only work on the parent li? The code li:has(ul) should work, because there's only one sublist. But it doesn't.
I can't help but think I'm missing something very simple. Here's the code on my page, which I copied directly from the source of his webpage:
<script>
$( function()
{
$( '.mobile li:hasClass('mobileParent')').DoubleTapToGo();
});
This is the html for the mobile list:
<div class="mobile" role="navigation">
<ul>
<li>Around the 'Bolt...
<ul>
<li>Home</li>
<li>Search</li>
<li>Discussion Forums</li>
<li>Gallery</li>
<li>Tech Tips</li>
<li>Links</li>
<li>Events</li>
<li>Swap Meet</li>
<li>FAQs</li>
<li>Features</li>
<li>Stovebolt Hoo-ya</li>
<li>Stovebolt Office</li>
</ul>
</li>
</ul>
</div>
Please try this
$( function()
{
$( '.mobile li.mobileParent').DoubleTapToGo();
});
But in you html there is no li with the class mobileParent. So $( '.mobile li.mobileParent').DoubleTapToGo(); wont work. Add that calss and then use this code.
This is how I solved the problem. I ripped out all the double-click stuff (since it was giving me errors), changed the link in the primary LI to "#" and added another LI to the dropdown menu to close it:
<li>Around the 'Bolt...
<ul>
<li>Close this Menu</li>
That just left one problem. Apparently Apple tries to emulate the hover event, so it requires a double click on dropdown menu items. So I added this script to over come that: http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices
I am currently using anchor tags and have implemented smooth scrolling on 5 links. This currently works perfectly. However, I would now like to add the ability to use the arrow keys to navigate through these same anchor tags.
I can only fumble through javascript and jquery, so I'm pretty confused when it comes to that stuff.
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
So basically, I want a user to hit the down arrow and them to be taken to the next section, depending on where they are on the page. If they are on section 2, take them to three. If they hit up again, they would be taken back to two and so forth. Make sense?
Checkout Mousetrap. It's a nifty little library that makes binding keys pretty easy. There are a few good examples on the site as well.
Perhaps something like this would suffice:
Mousetrap.bind('up', function() {
your_up_function();
});
Mousetrap.bind('down', function() {
your_down_function();
});
I have the following menu items:
<ul>
<li class="static">
<a class="static menu-item" href="/mySites/AboutUs">About Us</a>
</li>
<li class="static">
<a class="static-menu-item" href="/mySite/Practices">Practices</a>
</li>
<li class="static">
<a class="static-meunu-item" href="/mySite/Sectors">Sectors</a>
</li>
</ul>
I cannot add specific background images to the menu items as they all have the same class. In order to achieve this it will be ideal if specific classes could be added for example:
<ul>
<li class="static">
<a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a>
</li>
<li class="static">
<a class="static-menu-item practices" href="/mySite/Practices">Practices</a>
</li>
<li class="static">
<a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a>
</li>
</ul>
In the above example highlighted in red are the classes that have been added. This will then allow me to add the specific background images to each menu item.
How can I achieve this using the .addClass() method in jQuery?
In this case, adding specific classes is overkill. I would simply use an href selector since that seems to be what you're basing your classes off of:
// *= indicates contains
$('a[href*="AboutUs"]').addClass("about-us");
$('a[href*="Practices"]').addClass("practices");
$('a[href*="Sectors"]').addClass("sectors");
If there are other anchors on the page with the same href's that you don't want to include, simply use the parent > child selector:
// *= indicates contains
$('.static > a[href*="AboutUs"]').addClass("about-us");
$('.static > a[href*="Practices"]').addClass("practices");
$('.static > a[href*="Sectors"]').addClass("sectors");
Here is a working jsFiddle to illustrate the solution.
You should be able to add a class by passing a callback function to the addClass function -
$("a").addClass(function() {
var newclassname = $(this).text().toLowerCase();
return newclassname.replace(/ /g,'-');
})
Demo - http://jsfiddle.net/aZEZN/
I personally find it overkill to do such things with Javascript.
Makes more sense doing it server side as it's been mentioned above.
Or...
CSS! You could use CSS3 pseudo classes to do this.
I have created an example here
To make this work in older browsers such as IE7, make sure you add Selectivizr to your head section
define your class like this;
.highlight { background:yellow; }
.highlight2 { background:yellow; }
.highlight3 { background:yellow; }
then add your class like this;
$(".about-us").addClass("highlight");
$(".practices").addClass("highlight2");
$(".sector").addClass("highlight3");
It's not necessarily overkill specifying individual classes for each list item. A class should be used (as opposed to an ID) when there is even a possibility to group multiple elements together (for scripting, styling). In your case, as this is a navigation menu, you might have multiple menus (such as a left-side pane side bar, a footer menu aswell). From my experience, I would specify each menu button as its own class in order to handle the group of links together (ie all links that directs the user to the About us page).
The most obvious benefit of this is that you will be able to handle the active links as a group vs. individually; just as you would have a hover color on these links, you might as well want the link to be bold when the user is on that specific page. Grouping the links together and handling this as a class would allow you to bold all the links if you have multiple menus.
To add to this, erimerturk had a good idea of specifying highlights or 'themes' within your styles. This is a good practice (although not for your case) when you want to specify a certain color scheme for your site. Specify your color, background color and highlights as classes and tag these classes to the required elements within your html directly. This is a huge boost for maintainability and scalability, so although I wouldn't say as far as saying it's good practice, it's certainly not bad practice as far as I'm concerned.
Overkill or not, sometimes we may just want to test out ideas quickly on the browser, or you might be working on nodejs. I have edited the link classes to static-menu-item.
var links = $("body").find("a.static-menu-item");
$.each(links, function(value) {
var items = $(this).attr('href').split("/");
$(this).addClass(items[items.length-1].toLowerCase() );
});
Working example
Is there a way (ideally easy) to make headings and sections autonumber in HTML/CSS? Perhaps a JS library?
Or is this something that is hard to do in HTML?
I'm looking at an application for a corporate wiki but we want to be able to use heading numbers like we always have in word processors.
Definitely possible using css counters - just make sure you watch out for browser compatibility...:
This will make h2 get 1., 2., h3 gets 1.1, 2.1, 2.2 etc...
<style>
body{counter-reset: section}
h2{counter-reset: sub-section}
h3{counter-reset: composite}
h4{counter-reset: detail}
h2:before{
counter-increment: section;
content: counter(section) " ";
}
h3:before{
counter-increment: sub-section;
content: counter(section) "." counter(sub-section) " ";
}
h4:before{
counter-increment: composite;
content: counter(section) "." counter(sub-section) "." counter(composite) " ";
}
h5:before{
counter-increment: detail;
content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
}
</style>
As lpfavreau says, it's the same as another question I believe.
Also note that using css will not change the heading (e.g. selected text will give you the heading without the numbers). This may or may not be desirable. lpfavreau's (accepted) answer will give you the jquery code to modify the heading text.
See MDN: Using CSS counters for details.
3rd Party Edit
I created an example with the css above
2016 update. Please see Stephen's answer below for a proper method in CSS. My answer made sense in 2009 when the browsers and libraries were different. We are now living in a whole new world and the method presented here is outdated. I'm leaving it for the poor souls that are still living in corporate microcosms made of IE7 and tears.
See this other question if you're wondering how to do it in CSS, the answer might be what you are looking for. But titel has a good proposition too, depending how your HTML document is made.
It should be noted that, as Triptych said in another comment, this is of interest only if it's for an internal tool where you have control over which browsers are used and using CSS is worth it because modifying the HTML would be hard for example. Support of this CSS feature is limited.
It would of course be easy to use something like jQuery to do the increment also. Something like this untested snippet:
$(document).ready(function() {
$('h1').each(function(index) {
$(this).html((index + 1) + '. ' + $(this).html());
});
});
Don't forget to include the jquery.js file in your document of course.
The simplest method would be Numbered Lists
<ol>
<li> Section
<ol>
<li>Nested one</li>
<li>Nested two</li>
</ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>
will be something like:
Section
I. Nested one
II. Nested two
Section
Section
Section
Could possibly be done either serverside or with JavaScript. Don't know about any premade scripts that does it though.
Impossible to do with HTML/CSS, at least - unless you manually add all numbers into your headings.
Lists do it, why not other elements? http://www.w3.org/TR/CSS2/generate.html#scope
<ol>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
</ol>
It is possible to implement auto numbering using HTML itself using ordered lists, and nesting them if necessary. Below there is a link to a live example of this, example I found after a fast search on Google.
http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html
There is also an possibility to use Unordered Lists and CSS as shown in this example:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/