I am really new to JHipster. I am writing an application based on the JHipster Template. The JHipster template comes up with a lot of languages but I only need a few of them. My question is how can I delete the other one without getting errors. I can't just delete the menu entries. Because they come from Cookies and are initialized with the following coed.
<li class="dropdown pointer" ng-controller="LanguageController">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
<span>
<span class="glyphicon glyphicon-flag"></span>
<span class="hidden-tablet" translate="global.menu.language">Language</span>
<b class="caret"></b>
</span>
</a>
<ul class="dropdown-menu">
<li active-menu="{{key}}" ng-repeat="(key, language) in languages">
{{language}}
</li>
</ul>
</li>
Does someone now where those Cookies are initialized and how I can delete the other languages?
You can delete them, indeed. Have a look at the constants.js file.
In the next version we will make this easier, as indeed we are now having too many languages!
Related
I have the follwing html on my site's header
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="">
</a>
</div>
<nav class="">
<ul>
<li>
<a href="xxx" title="xxxx" >xxx</a>
</li>
<li>
<a href="xxxx" title="xxx" >xxx</a>
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
<div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em>
</div>
</header>
At this header the nav is hiding on mobile device and shows up when the user press the div.toggle_menu.
The way this is read by VoiceOver screen reader of iphone 14, is "Button, open menu, end banner".
I would like it to say just "open menu". So I remove the role button and left only the aria-label="open menu".
Now it reads just "End of banner". Νο "Open menu" or "button".
I am quite new on aria and I am not sure what do I have to do.
Any help is appreciated.
To make it short: You shouldn’t do that. There is a good reason screen readers read the way they do and you should respect that. Its users rely on that.
That being said, it’s great that you are diving into ARIA and caring about screen reader’s experience.
Role
The role is very important for screen reader users, to know what to expect in terms of interaction and keyboard control. Roles communicate interaction patterns.
The whole point of ARIA is to add meaning to otherwise meaningless elements, where you cannot use the proper HTML element.
By removing the role, you are leaving a meaningless <div>, which might be focusable, but it would be way less intuitive to screen reader users to know how to interact with it. Assistive technology couldn’t know what it’s good for, voice control software would probably not let you click on it.
The accessible name provided by aria-label cannot be used on any element. The role determines if the name should (or must) be used or not. VoiceOver will not announce names for meaningless elements like <div>.
Tabindex 1
By adding tabindex="1", you are putting the button before any other focusable page contents, which messes with the expected focus order.
I guess you placed it so that you could have the button after the navigation. But a large part of screen reader users are sighted, and rely on contents exposed by their screen reader to match with what they can see. The logo comes before the button, and it would be irritating if it’s not focused first.
Refer to the ARIA Authoring Practices Guide
When it comes to your toggle button, you should implement the ARIA pattern, which requires not only the role button, but also aria-expanded to explain to assistive technology that the button opens and closes something, and its state.
The button should be before the contents that get expanded.
See Disclosure (Show/Hide) on the ARIA Authoring Practices Guide (APG)
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="Home, ACME">
</a>
</div>
<button class="toggle_menu" aria-label="open menu" aria-expanded="false"><em class="fa-solid fa-bars"></em></button>
<nav hidden>
<ul>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
</header>
In my project (laravel+vuejs) i want to list the gantt chart of each project so when i click to the link of a specific project it redirect me to his gantt But in my case the the first click it work fine but one i click to choose other project it just change the url and dont refreshing the page (it didnt redirect me) it always work with the just first try.Any help guys?
this is the MainApp.vue:
<ul class="nav nav-treeview" >
<li class="nav-item" v-for="projet in projects.projets" :key="projet.id" v-if="currentUser.role==='admin'">
<router-link :to="`/gantt/${projet.id}`" class="nav-link ">
<i class="fas fa-circle" style="color:#05dfd7"> </i>
<p>Gantt:{{ projet.name }} </p>
</router-link>
</li>
</ul>
You need to add a :key attribute to your <router-view>
<router-view :key="$route.fullPath"></router-view>
Your ${projet.id} will be different each time, hence reload will be triggered.
Edit
$route.fullPath Vue API
type: string
The full resolved URL including query and hash.
I'm trying to add Google Analytics click tracking events to li list items (active thumbnails) used in a responsive grid application, and can't get it working. I've researched here and in the Google developer forums without success. I'm sure there is something simple I'm doing wrong. I have the latest GA script code installed (page view analytics are working fine). Here is a code sample:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Hope you can help. Feel free to suggest a better way of doing it.
Update: I'm still digging, and the GA code has been updated for Universal Analytics and looks like this:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Update 2: I tried opening the outbound link target in a new page to see if a lack of callBack might be the problem. No success. Following are two views of the code, one with the contained inside the li with the outbound link, the other in a separate li with the same parent ul. Neither works. Does anyone know which syntax is correct? Thx.
Example 1: With href in it's own li:
<ul>
<li></li>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_blank" ></li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Example 2: With href inside outbound link li:
<ul>
<li data-type="link" data-url="http://www.starz.com/outlandercommunity/home.html" data-target="_blank" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/community1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Starz: Outlander Community</p></li>
</ul>
The syntax you are using for the event tracking uses the classic GA syntax (_gaq.push), but if you are using Universal Analytics (assuming that is what you mean by using the "latest GA script code"), the syntax needs to be updated:
onClick="ga('send', 'event', 'GridLinks', 'Click', 'Outlander Clicks 1');"
I'm not familiar with Responsive Grid, but the likely explanation is that the call to ga only adds the event to a queue for asynchronous processing, and that the event is lost because the current document is immediately replaced afterwards (stopping the JavaScript execution for the current page). You would need to use a hit callback as described in the Google Analytics help, but I'm not sure how this would be integrated with Responsive Grid. Also note that there are a couple of other pitfalls you need to be aware of.
I have following html code. And I want to using Ruby Mechanize select dropdown element wit specific text (I want to click on it). Example Chinese. My question is how to do this? I am new in Mechanize.
<form class="form-inline search search-large" action="/translate" method="get">
<input id="q" name="q" type="text" placeholder="Search" class="input-large" value="" autofocus="autofocus" data-pons-redirect-input="true" data-pons-autofocus="true" autocomplete="off">
<div class="btn-group source open" data-pons-lang="de">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">
<span class="text">Chinese</span>
<i class="icon-angle-down"></i>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" class="language">
<span class="text">Chinese</span>
<span class="flag flag_zh"></span>
</a>
</li>
<li>
<a href="#" class="language">
<span class="text">Elvish</span>
<span class="flag flag_lb"></span>
</a>
</li>
</ul>
</div>
</form>
Bad News
As far as I see, your example page is too involved to let mechanize interface it with e.g. a .click method. Actually it will be able to follow the links (""), but I guess this will not help you much, because it seems there is some javascript or other black magic involved.
You can try first to see if the page will work nicely (not guaranteed) with mechanize by disabling JavaScript in your browser.
Good News
Anyway, at the end you will want mechanize to do certain kinds of HTTP requests - triggered by JS or not does not matter. That you will be able to do with mechanize (although it might not necessarily be the best choice for all scenarios).
Tips
I encourage you to use your browsers developer thing (often fired up by pressing F12) and see what is really happening, e.g. which form gets submitted with which values. And don't forget to check if its the same when used with and without javascript (mechanize will not execute JavaScript as far as i know).
Also, when developing your mechanize code, use irb or another repl like pry to try your code live. Your mechanize agent or page will have a method save or save_as or similar with which you can always save the current page and review it in your browser or favorite text editor. And remember _ in irb gives you your last return value.
I have a fully working rhinoslider and lightbox2. The images slide but are also clickable, when there clicked the nice lightbox2 pops up. But for some reason the captions in the slider won't display when the other link is above it.
My code:
<ul id="slider"><li><img src="images/1.jpg" alt="" title="test" /></li> </ul>
Does anyone know why the captions won't display? And is there a solution to this problem?
http://rhinoslider.com/
http://lokeshdhakar.com/projects/lightbox2/
First of all you should fix your markup.
<ul id="slider">
<li>
<a href="images/1big.jpg" rel="lightbox[roadtrip]" title="test">
<img src="images/1.jpg" alt="" title="test" />
</a>
</li>
</ul>
If the caption won't work afterwards, please make sure you enabled them in the settings of Rhinoslider.
If they still won't work try to set the captions manually: http://rhinoslider.com/tricks/html-captions/