0

I have a search button, in which I want to change the icon as well as the color of the border at the same time when it is being clicked on: 

$(function () {
    $("#search").click(function () {
        $("#search").css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" })
    });

    $("#search").click(function () {
        $("#search").replaceWith($('<img>', { src: 'Icons/magnifier.png' }))
    });
});

Right now, my two functions work individually, but when I combine the two, like in my example, only the last one fires.

Is there a way in which I can combine the two functions, so that both the border and the image changes when I click on it?

CSS for the box: 

.topnav img {
    border: 2px ridge #7ab5dc;
    position: relative;
    height: 20px;
    width: 20px;
    float: right;
    margin-top:15px;
    margin-right:20px;
    padding:3px;
    border-radius: 5px;
}

HTML 

       <div class="topnav">
            <img id="search" class="search" src="Icons/magnifier2.png" />
        </div>
Improve this question

5 Answers 5

Reset to default
4

This is happening because the second time you declare $("#search").click(function () { ... you are overwriting the first function. So, just put everything you want to happen in the same .click function

You'll also need semicolons after each line.

As per @jbehrens94's note about the ID being lost, here is my final code

$("#search").click(function () {
    $(this).replaceWith($('<img id="search">', { src: 'Icons/magnifier.png' })).css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

$(function () { $("#search").click(function () { $("#search").css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" }); $("#search").replaceWith($('<img>', { src: 'Icons/magnifier.png' })); }); }) Right now my function is as follows. however it still doing the same?
Ah, I glanced over the fact that you are using replaceWith. Try putting that line before the css line. I'll update my answer
is it however incorrect to use replaceWith? - next step is to give it a slide out function with a textbox, so that people can make searches. if you catch my drift.
It should be fine, but replaceWith basically removes the element and inserts the new content that you are specifying. This means that it was erasing the changes that you were making to the CSS
still the same issue though. as @jbehrens94 mentions, would it be that i should chain them?
|
1

1) When you call .replaceWith($("<img>"), ...), you don't keep the id of search to your image.

Update: .replaceWith($("<img id='search'>"), ...)

2) Before I edited my answer, I already gave you this advice.

$(function(){

  var search = $('#search');

  search.click(function(){
    search.replaceWith(...).css(...);
  });

});

That way, your code will only reach into the DOM once to fetch your HTML. This is for a great performance and it also makes sure you are using the element you intended to.

3) You also asked about fading in/out. You can use jQuery's fadeIn(duration, completeCallback) and fadeOut(duration, completeCallback) functions. Duration is in milliseconds and the callback is an anonymous function, but you could also call another function.

$("#search").fadeIn(400, function(){ alert("Faded in"); });

Improve this answer

17 Comments

Thank you for your answer Whats the pros for declaring a variable? wouldnt that most likely be convenient if i do a conditional expression or a loop?
The benefit of using the variable is that your code only reaches into the HTML one time instead of multiple times. That means that your code is more efficient and also more reliable, because when you reference a variable, you can be certain the DOM won't be updated or changed and causing your selector to fail.
Tried chaining them, however no impact, still the same issue. Can it be that the issue occurs because i did a CSS on it in my stylesheet?
You can try commenting out your stylesheet CSS for that element and try running the jQuery. Did you also try chaining with a variable DOM element, might also help?
If i comment it out all the properties (with, height border) will be lost, there must be a way to do it even with a css set onload. to be honest, i'm trying to learn Jquery on my own, and im not sure that i can do it correctly.
|
0

@Jeppe I have just tried in different way

.topnav img{
    border: 2px ridge #7ab5dc;
    position: relative;
    height: 20px;
    width: 20px;
    float:right;
    margin-top:15px;
    margin-right:20px;
    padding:3px;
    border-radius: 5px;

}

.border-change{
    border: 2px ridge #000000 !important; 

}

Your Html

<div class="topnav">
            <img id="search" class="search" src="Icons/magnifier2.jpg" />
        </div>

New One line jquery

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$("#search").click(function () {
     $("#search").addClass("border-change").attr("src","Icons/magnifier.jpg");
    });
Improve this answer

Comments

0

There was alot of posts in this thread, and i just want to post the code that is working for me, to the users who might have the same problem: 

    $(function () {
        var search = $("#search");

        search.click(function () {
            search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
        });
        $('html').click(function (e) {
            if (e.target.id != 'search') {
                $("#search").attr("src", "Icons/magnifier2.png");
                $("#search").removeAttr('style');;
            }
        });
    })
Improve this answer

1 Comment

The .removeAttr in the end, removes any stored CSS code, so that the hover effects etc. still can be applied after the function has fiered.
-1

You Can just Include to actions in single code like this

$("#search").click(function () {

    $("#search").css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" }).replaceWith($('<img>', { src: 'Icons/magnifier.png' }));
});

or may be use

$("#search").click(function () {

    $("#search").css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" }).html($('<img>', { src: 'Icons/magnifier.png' }));
});
Improve this answer

1 Comment

Neither of them work, it still only changes the magnifing glass.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.