1

Details

  • I have a dropdown-menu of countries
  • Each country have an id of it's name. Ex. Australia - id="Australia"
  • When I select on them, they will redirect/zoom-in to that country.
  • It's work so far, but it's a little hard to tell which country that I just clicked on.
  • So now, I want apply border to my class="country-name"
  • Here is my dropdown-list

enter image description here

As you can see I selected on Australia then my HTML should like this

<h5 id="Australiaia" class="country-name" >Australia</h5>

Then, my view should re-direct me to

enter image description here

Here is what I want to do , I want to put the border to Australia in the view.

JSFiddle

iori
  • 3,236
  • 12
  • 43
  • 78
  • 2
    Please show a couple of real option elements instead of PHP code. – Teemu Jan 12 '15 at 18:46
  • I am on it. Thank you. – iori Jan 12 '15 at 18:46
  • Do you want to style a particular element, or everything with that class? If the latter, just add some CSS to the page: http://stackoverflow.com/a/1720483/483371 – andytuba Jan 12 '15 at 18:48
  • 1
    Umh... Actually I can guess, now the problem is, that you're redirecting immediately when user selects something. – Teemu Jan 12 '15 at 18:48
  • @Teemu : You're right. I redirect right the way to the country name, and I want to style that country name.... – iori Jan 12 '15 at 18:50
  • You could add a hash or search string to the URL (the `id`, not class name), and then on that redirected page check the URL and highlight the element found from URL. – Teemu Jan 12 '15 at 18:52
  • Do you mind help me started - please ? – iori Jan 12 '15 at 18:54
  • Please keep the relevant code in the question. FF seems to hang on that CodePen page. – Teemu Jan 12 '15 at 19:08
  • [Answers at this post](http://stackoverflow.com/q/14348233/1169519) show how to read the hash on a new page. Before it you've to add the hash to the values of the options you have, like `value="http:///www.example.com/#elementID"`. If you've more than one country on the target page, you have to use the `id` of the target element, if you'd use the class name, all the countries would be highlighted. - We'd really appreciate the code instead of an image ; ). – Teemu Jan 12 '15 at 19:16
  • @Teemu : The code is here mate. [http://jsfiddle.net/9a3k74kd/](http://jsfiddle.net/9a3k74kd/) – iori Jan 12 '15 at 19:20

6 Answers6

2

Add a target-selector to your css:

.country-name:target { font-weight: bold; color: red; }
Moritz Friedrich
  • 1,371
  • 20
  • 38
  • Let me try. Thank you. – iori Jan 12 '15 at 19:25
  • If I want to make it look like a highlight, do you know how to do that ? – iori Jan 12 '15 at 19:35
  • What exactly do you mean by highlight? This is a regular selector, you can use any CSS on it. Though I would suggest adding the ID to the whole country container, that way, you could jump to the container and highlight it with a colored background or something. Like this: `
    `     – Moritz Friedrich Jan 12 '15 at 19:49
  • Yes, I think I should do that. You're right about that. adding `ID to the whole country container` – iori Jan 12 '15 at 19:50
  • That way, you can still style the `h5` by using `.country:target h5 { font-weight: bold; color: red; }` – Moritz Friedrich Jan 12 '15 at 19:56
1

Well for a start you could read the jQuery documentation. And this is what your code should look like.

$('.country_name').click(function () {

    $(this).toggleClass('yourclass');

    });
Michelangelo
  • 5,888
  • 5
  • 31
  • 50
0

Maybe you should learn how to post code, because including a jfiddle with every language under 'html' isn't exactly going to help anyone nor does anyone want to dig through all your lines trying to figure out what the hell you have going on, but with that said...I will tell you the basic steps of what you're going to be doing...

  1. Detect change of select, get this value.
  2. Find the h5 with that value, give it a class.
  3. Scroll to the id that is holding your country.
Waxi
  • 1,641
  • 2
  • 14
  • 20
0

There are a couple of things I noticed in your code.

First you should not have the id of an element, that's very bad practice.

Secondly, it's always a good idea to use a class on an element which you want to change or manipulate via jquery or javascript. It's much easier. As I noticed you didn't put on any of the parents wrapping your h5 tag

Anyways, here's one solution

Use a css class for your borders

.border-country{border:solid red 1px;}

AND Modify your jquery code 

var lastElem=null;
$('#state').on('change',function(event){
var state= $(this).val();
    // remove already existing borders on any country lists
    $(lastElem).parent().parent().removeClass('border-country');    

    // add your own class
    $(state).parent().parent().addClass('border-country');
    // save current element in your lastElem variable and you can remove border when firing the second or so on events
    lastElem=$(state);

});

I'm using the parent() function because of the second point I mentioned in my observations, you could avoid that by putting a mock class on your parent element wrapping the h5 tag.

If you had used a class we could have simply used 

$('yourclass').removeClass('.border-country'); 
$('yourclass').addClass('.border-country');

Hope this helps and this should work!

Thx

Faaiz Khan
  • 332
  • 1
  • 4
-1

You can either style your element in your CSS file: 

.country-name{color: red;}

Or, if you have to do it in jQuery, you can do something like this: 

$(document).ready(function(){
    $(".country-name").css("color", "red");
})
farjam
  • 2,089
  • 8
  • 40
  • 77
-1
 $('.country_name').on('click', function() {
      $(this).css('border', '1px solid red');
 }

for example.

vbotio
  • 1,566
  • 3
  • 26
  • 53