hide/show language based div with jquery - javascript

I have a problem with my web page hiding and showing different <div> elements on it. I want to translate the page and add two buttons to switch between the languages.
$('#hu').click(function() {
$('#show').css('display', 'none');
$('#hide').show();
});
$('#en').click(function() {
$('#hide').css('display', 'none');
$('#show').show();
});
#hide {
display: none;
}
#show {
display: true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English">
<input class="translate" type="button" id="hu" value="Magyar">
<ul>
<li class="current">
<div id="show"><a href=index.html>Főoldal</a></div>
</li>
<li>
<div id="show"><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li>
<div id="show"><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li>
<div id="hide"><a href=index.html>Home</a></div>
</li>
<li>
<div id="hide"><a href=oneletrajz.html>About US</a></div>
</li>
<li>
<div id="hide"><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>

You have totally confused between the #hide, #show, etc. What you need is a class for each language and a flag (optional).
Have a language class en or es and have items on it.
Use .hide() and .show() for hiding and showing.
On loading, hide one of the languages.
Don't ever duplicate id values. It's a crime in HTML. Use classes instead.
Use the language classes on the <li> than the child.
$(function() {
$('.Magyar').hide();
$('#hu').click(function() {
$('.English').hide();
$('.Magyar').show();
});
$('#en').click(function() {
$('.English').show();
$('.Magyar').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English" />
<input class="translate" type="button" id="hu" value="Magyar" />
<ul>
<li class="current Magyar">
<div><a href=index.html>Főoldal</a></div>
</li>
<li class="Magyar">
<div><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li class="Magyar">
<div><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li class="current English">
<div><a href=index.html>Home</a></div>
</li>
<li class="English">
<div><a href=oneletrajz.html>About US</a></div>
</li>
<li class="English">
<div><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>

First change your names to something easy to understand at first sight.
Finally your code works but not the way you want. The JS will look for the first ID element (not all of them) because ID Elements are unique. So, I've changed your ID elements for classes and applied the class to the <li> items, otherwise the "dots" will still be visible.
$('#hu').click(function() {
$('.eng').css('display', 'none');
$('.hun').show();
});
$('#en').click(function() {
$('.hun').css('display', 'none');
$('.eng').show();
});
.hun {
display: none;
}
.eng {
display: true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English">
<input class="translate" type="button" id="hu" value="Magyar">
<ul>
<li class="eng">
<div><a href=index.html>Főoldal</a></div>
</li>
<li class="eng">
<div><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li class="eng">
<div><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li class="hun">
<div><a href=index.html>Home</a></div>
</li>
<li class="hun">
<div><a href=oneletrajz.html>About US</a></div>
</li>
<li class="hun">
<div><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>
Regarding the second part of your question, it all depends of the size of the website. If it's a small project then it's ok to do it this way.
If we are talking about thousands of pages like (Wikipedia) this isn't a good way. In this case you would need a centralized translation template.
For bigger sites, you could, for example use PHP to create HTML templates with language placeholders (check this pseudocode):
<p>{HOME_LINK}</p>
Then, use PHP to process the language selection (sending a request via JS/Query) and rendering the placeholder with the correct language from a file with the translations:
if selection == EN then :
// EN Translations
HOME_LINK {Home}
if selecction == UN then :
// UN Translations
HOME_LINK {Főoldal}

Related

Take text from several elements and add it to others, but dynamically with javascript or jquery

I've created this very simple structure just to describe what I want to do, let's say all the text in the name class is rendered, and I'm trying to find a way to make all the text in that class dynamically inserted into each #link, but without overwriting the name but concatenating, it would look like this test 02 Hulk and Test 02 Deadpool
jQuery('#link').append(jQuery('.name').text());
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name"> Hulk</a>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
<li class="second">
< a class="name"> Deadpool <a/>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
</ul>
</nav>
I created this structure as an example but it didn't work, because it takes the name Hulk and Deadpool and inserts everything together
The first thing you need to do is correct your HTML. Firstly you cannot have mulitiple elements in the DOM with the same id attribute. They need to be unique. In this case you are looking to group the elements so use a common class instead.
Secondly you cannot have a div as a child of a ul element, remove it.
Lastly, the correct closing tag for an a element is </a>, not <a/>.
Once that's been corrected the jQuery to do what you require will simply need to loop over the .link elements and append the text from their related a element. Try this:
jQuery($ => {
$('.link').each((i, el) => {
$(el).append(` ${$(el).closest('ul').prev('a').text()}`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name">Hulk</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
<li class="second">
<a class="name">Deadpool</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
</ul>
</nav>
Array.from($(".link")).forEach(function(elem, index){
$(elem).append($(".name").eq(index).text());
})
Just replace id with name attribute since W3C recommends creating a single element with an id.

Change content from menu

I have different titles on my left menu and I want to change the text by clicking per each title, Please let me know what function should I write on javascript and which Html tags should I use.
Here is My Titles Html script:
<div class="widget">
<ul class="feature-list">
<li>Транспорт на свадьбу</li>
<li>Развозка персонала</li>
<li>Туризм</li>
<li>Ретроавтомобили</li>
<li>Бизнес-поездки</li>
<li>Экскурсии</li>
</ul>
</div>
I believe if you would like to change the tags to be changed onclick you should add the tags You will need to change the http request to your requested link
<div class="menu">
<div id="nav">
<ul>
<li>
<font color="#000">ЛЕГКОВЫЕ АВТОМОБИЛИ</font>
</li>
<li>
ЛИМУЗИНЫ
</li>
<li>
МИКРОАВТОБУСЫ (4-20 МЕСТ)
</li>
<li>
АВТОБУСЫ (25-30 МЕСТ)
</li>
<li>
АВТОБУСЫ (45-50 МЕСТ
</li>
</ul>
</div>
</div>
Does this answer your question?

Always one selected on list <li>

I have an input and users list. This input is a search box, so every time I type on the input it changes the users list reactively. How do I achieve that there's always one selected on the users list preferably the first list item then if I hover to other the selected changes and leaves to where I last hovered on. This is my html code:
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
This needs javascript, cause I wanted to know which is selected. So I can get its data. Also can use up and down keys in changing selection. Doesn't have to be a code that works. Maybe just help me with the logic and give me some pseudocode.
Try using css :hover , :not()
ul li:hover {
background: grey;
}
ul:hover li:first-child:not(:hover) {
background: transparent;
}
ul li:nth-of-type(1) {
background: grey;
}
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text"/>
<div id="userList ">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
another approach js wise would be...
create a css class
.selected{
/* css for selected class */
}
On page load, add this to first-child
$("some-first-child").addClass("selected")
on selecting any other class, remove it from above li and add it to new li class.
To setup a default, you can search for this class in html body
In case $('body').hasClass doesnt return true, you can always add it back toh the first li child.
Jquery search
$("input").on('input', function() {
var val = $(this).val().toUpperCase();
$("#userList li").each(function() {
if ($(this).text().trim().toUpperCase().indexOf(val) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
You want like this.
<style>
.active{
background: gray;
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").mouseover(function(){
$("ul li").removeClass("active");
$(this).addClass('active');
});
});
</script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul style="width:100px;">
<li class="active">
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
with up and down key working.. I am working on this wait.

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}
Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)
This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

Why my self made drop down list doesn't work in IE 7

Code works perfectly in other browsers but not in IE7. Problem in IE7 is that the second level of the list(ul .opt_1) won't show when the first level is selected.
Here's the HTML part:
<input type="button" id="topic" value="please select a topic"/>
<div class="c"></div>
<ul id="opt_0">
<li class="opt_0">finance</li>
<ul class="opt_1">
<li>business</li>
<li>stock</li>
<li>company</li>
<li>startup</li>
</ul>
<li class="opt_0">IT</li>
<ul class="opt_1">
<li>internet</li>
<li>code</li>
<li>hardware</li>
</ul>
</ul>
<input type="hidden" name="topic"/>
and JS part:
$(function(){
$("#topic").click(function(){
$("#opt_0").slideDown();
})
$(".opt_0").click(function(){
$(".opt_0").removeClass("selected");
$(this).addClass("selected");
$(".opt_1").hide();
$(this).next(".opt_1").show();
})
$(".opt_1 li").click(function(){
$("#opt_0").slideUp();
$("#topic").val($(".selected").html()+">>"+$(this).html());
$("input[name=\"topic\"]").val($(".selected").html()+";"+$(this).html());
})
})
You can see JS fiddle here:http://jsfiddle.net/lornechang/4BmPb/
How do I make it compatible with IE7? Thanks.
Your html is not valid. I made the changes required to make it correct in this fiddle:
http://jsfiddle.net/4BmPb/1/
<input type="button" id="topic" value="please select a topic"/>
<div class="c"></div>
<ul id="opt_0">
<li class="opt_0">finance</li>
<li class="opt_1">
<ul>
<li>business</li>
<li>stock</li>
<li>company</li>
<li>startup</li>
</ul>
</li>
<li class="opt_0">IT</li>
<li class="opt_1">
<ul>
<li>internet</li>
<li>code</li>
<li>hardware</li>
</ul>
</li>
</ul>
<input type="hidden" name="topic"/>
A ul element can only contain li elements, not other ul elements.
As far as why it works in other browsers, other browsers are not as strict as IE is with html structure. I tested this in IE9 which presented the same problem, have not tested in IE7 but I suspect it will work too.

Categories

Resources