What's more semantic for organizing menus that change when you click any of their links into another menu? My idea is to have an "Edit" button and, when clicked, the buttons will change to show the proper edit actions for a text in that same page. First the user can only see the text, but when clicked on the edit button he can edit it. This is how I have it right now:
<ul>
<li class = "displaymode">
<a class = "edit">
Edit
</a>
</li>
<li class = "displaymode">
<a href = "/notes/history/<?= $id; ?>">
History
</a>
</li>
...
<li class = "editmode">
<a class = "save">
Save
</a>
</li>
<li class = "editmode">
<a class = "cancel">
Cancel
</a>
</li>
</ul>
<div id = "fulltext">
<p>
This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
</p>
</div>
Then with javascript it's simple to show/hide the classes with the editmode or displaymode. However, I have other ideas that would also work. One is having different full lists and showing/hiding the full lists:
<ul class = "displaymode">
<li>
<a class = "edit">
Edit
</a>
</li>
<li>
<a href = "/notes/history/<?= $id; ?>">
History
</a>
</li>
...
</ul>
<ul class = "editmode">
<li>
<a class = "save">
Save
</a>
</li>
<li>
<a class = "cancel">
Cancel
</a>
</li>
</ul>
<div id = "fulltext">
<p>
This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
</p>
</div>
And the last one is to just insert/remove the <li> elements with javascript. However this is not nice for translations nor for SEO. So, which way of the above or from what you've used has better semantics and why? I don't see any advantage/disadvantage from one to another of the ones shown here. From the names of the classes I think it's clear my objective, but if you need any further explanation don't hesitate to ask in the comments.
Related
I have 3 lists of a clickable links, so when you click one you go to that section and the line too.
so this is my code :
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
How it looks like is
How I want is when I clicked Testimony, the line goes there and our page got scrolled into Testimony Section.
How to improve this code so I can get that feature with React?
I'm using WPBakery Page Builder for tabs. And I want to show a text block outside the tab section (on a diferent row) with a specific class when first tab with href #1521496635357-e8313acf-e8c2 is open and another text block when the secound tab with href #1521496635380-99d0c08b-67d8 is open (and the first text block to be hidden).
Can you give me a hint with CSS or JS?
Thank you!
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX STANDARD</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#1521496635380-99d0c08b-67d8" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX BUDGET</span>
</a>
</li>
</ul>
Your example is not entirely clear to me, but you should be able to add event listeners to your tabs:
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta" onclick="doSomething()">
In your page javascript, you could have a function that does something:
function doSomething() {
document.getElementsByClassName("myclass")[0].style.display = "none";
document.getElementsByClassName("myotherclass")[0].style.display = "inline";
}
You could certainly handle this better by introducing jquery or another framework to simplify some of this handling, but depending on your situation that may or may not be feasible.
I'm making a chrome extension and one of the features is to click on one of the items in the list code below.
<ul class="js-tweet-actions tweet-actions full-width ">
<li class="tweet-action-item pull-left margin-r--13 "> <a class="tweet-action " href="#" rel="retweet"> <i class="js-icon-retweet icon icon-retweet icon-retweet-toggle txt-center"></i> <span class="is-vishidden">Retweet</span> </a> </li>
<li class="tweet-action-item pull-left margin-r--13 margin-l--1"> <a class="js-show-tip tweet-action position-rel" href="#" rel="favorite" title="" data-original-title=" Like from ILoveTomFan "> <i class="js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center"></i> <span class="is-vishidden"> Like </span> </a> </li>
</ul>
How would I mimic a browser click on these elements, the code below is what I tried and it has no effect at all, it doesnt correctly click the element that is being displayed.
I have tried;
document.getElementsByClassName("js-show-tip tweet-action position-rel").click;
document.getElementsByClassName("tweet-action-item pull-left margin-r--13 margin-l--1").click;
document.getElementsByClassName("js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center").click;
var test = x[y].querySelectorAll("li");
test[2].click;
Thanks #Zevee specially the code that made this work was
x[y].querySelector('.js-show-tip.tweet-action.position-rel').click();
Your first three don't work because there is an array of elements and because classname only takes one class (iirc)
Try document.querySelector(<here, put every single class that you want to select seperated by dots (in a string)>).click()
Note that this selects the first element with all of those classes (iirc)
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
<div class="filter-portfolio pull-right">
<ul>
<li class="always-visible">
****Categories <span class="icon-caret-down"></span>
</li>
<li>
All
</li>
<li>
Fashion
</li>
<li>
Nature
</li>
<li>
Animals
</li>
<li>
Architecture
</li>
</ul>
</div>`
Whenever I click on the **Categories link it is redirecting me to the index.php/#. Can anyone help me find out why it's happening ?
Prevent default click handler:
$('.filter-portfolio a[href="#"]').on('click', function(event) {
event.preventDefault();
});
The # sign scrolls the page to the top when the anchor is clicked, and adds the hash sign to the URL, if you don't want that, just prevent it
$('a[href="#"]').on('click', function(e) {
e.preventDefault()
});
You could also omit the href attribute like this and you would not need any javascript for it.
Like this:
<a data-filter=".all">All</a>