CODEWITHSUNDEEP
javascriptjquerycss
user5406531
user5406531

Reputation:

Jquery make two functions run together

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>

Upvotes: 0

Views: 71

Answers (5)

user5406531
user5406531

Reputation:

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');;
            }
        });
    })

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 31

@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");
    });

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 31

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' }));
});

Upvotes: -1

Andrew Brooke
Andrew Brooke

Reputation: 12153

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" });
});

Upvotes: 4

jbehrens94
jbehrens94

Reputation: 2396

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"); });

Upvotes: 1

Related Questions