I work on a multilingual website (French, English, German). I have built three navigations (with buttons), one for every language. When I open the site the French navigation appears (this works). I can change the navigation with three buttons (in form of flags). This works too. When I press one of the buttons in the navigation the correct page appears. BUT: I then see always all three navigations.
Question: what must I do that after havong pressed a button in a navigation bar this navigation stays alone? I tried it with JavaScript and jQuery but couldn't find a solution.
Any help/hint appreciated very much!
Max
1/ create a class in css
.notDisplay {
display: none;
}
2/ To each button you want to hide, apply the class in javascript using jquery
$('#button1').addClass('notDisplay');
If you want to show again the button, use
$('#button1').removeClass('notDisplay');
Do you understand it or have i to explain it more?
Related
Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!
I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!
Working with WordPress, I have created a one page site that uses anchors in a custom menu to jump to specific parts of the page.
It jumps to the section of the page that I have specified, as intended. However, it is creating a very visible, blue selection box around the content that it is jumping to. I have not included code in the CSS file or any project files that should be adding a selection box. So my assumption is that it is being caused by Wordpress?
Is there a way to disable a selection box around the content that is being jumped to?
What is happening is you are getting the outline property add around your selection this happens on chrome alot when you click buttons or focus on something. Try adding a class similar to this
SELECTION:focus {outline:0;}
to the object that is being highlighted or anchortag without seeing the code and what it is doing its hard to pinpoint the exact class
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
We had this problem and changed the hover to clicks.
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.
http://findaccountingsoftware.com/directory/gba-systems/fams-fixed-assets-management-system/
this site contain a tab container. On Applications tab clicking on + sign it goes to expand, I want to know this process name. How to do it?. There is a strange thing occur clicking on + sign expand automatically scroll move and focus on text. What this process name is. How to do that?
This effect is called an 'accordion' menu. jQuery UI has a great one which you can use and also has some great documentation explaining how to use it :)
http://jqueryui.com/demos/accordion/
Beautiful full customization accordion in Bootstrap.
Please refer the following documentation.
https://getbootstrap.com/docs/5.0/components/accordion/