We Keep Coding

Changing child div background by binding Jquery with knockout

I would like to change the child's div background by clicking the parent div with the right mouse button. I have the following code:
<div data-bind=" event: { contextmenu: function(){$(this).children().css('background-color', 'red'); myfunction(); } }">
<div> Something </div>
</div>
My function just runs fine but id doesn't do anything with the child div. Can anybody help me?

You need to use:
$($element).children()...
See: http://knockoutjs.com/documentation/binding-context.html

Toggle class of search input on hover of another element

Hi I want to add a class to the search box when I hover over the i element then remove the classes added when I hover out.
<li><input id="search" type="text" class="search-box-hidden" placeholder="Enter Your Keywords..."> <i class="fa fa-search-plus fa-lg"></i></li>
$(document).ready(function(){
$(".fa.fa-search-plus.fa-lg").hover(
function(){ $(".search-box-hidden").toggleClass("search-box-shown") });
});
I edited my code. Basically when I hover over the icon from Font Awesome, it triggers the class that shows the search box and when I over out the search box will go back to the hidden class.
LIKE SO:
http://s27.postimg.org/pq2zeetw3/preview.jpg
With this code, it still does not work.
Thanks!

Firstly, you're missing . to target class fa, it should be:
$(".fa.fa-search-plus.fa-lg").hover(
// ^ here ----
Secondly, if you want to only target the input which is the previous sibling of your icon, then use:
$(".fa.fa-search-plus.fa-lg").hover(
function () {
$(this).prev().addClass("search-box")
},
function () {
$(this).prev().removeClass("search-box")
})
or you can use toggleClass() instead of add and remove here:
$("fa.fa-search-plus.fa-lg").hover(function() {
$(this).prev().toggleClass('search-box');
});

<script>
$(document).ready(function(){
$("#ElementToTriggerHover").hover(function(){
$("#ElementToSwitchClass").toggleClass("TheClassYouWantToToggle");
});
});
</script>

first, you have added three classes to your < i > not to input box and
second you are using all them at once seem to represent a hierarchy, so I think using any one of them would be enough.
also Instead of add and then removing in row, use toggleClass.
html :
<li>
<input id="search" type="text" class="hidden" placeholder="Enter Your
Keywords...">
<i class="fa fa-search-plus fa-lg"></i>
</li>
js:
$(".fa-search-plus").hover(
function(){ $(".hidden").toggleClass("search-box") });
OR
just simply use css :hover selecter as
.fa-search-plus:hover{
background-color:yellow;
}

You can do this with CSS.
I made a simple Fiddle using hover and transition.
Take a look. Maybe it helps.

Your query is missing a . at the beginning. Make sure you are doing it after DOM load and that you are loading jQuery on the page properly.
$(function() {
$(".fa.fa-search-plus.fa-lg").hover(
function(){
$(".hidden").addClass("search-box");
},
function(){
$(".hidden").removeClass("search-box");
}
);
});
EDIT:
Mockup, but with animation (not show/hide):
http://jsfiddle.net/v4FSh/

Divs to change multiple color when click

I'm trying to get other divs to light up when one is clicked. For instance, when you click on the first div, I want that to change color as well as the 3rd.
What I have so far is this: http://jsfiddle.net/r5WWQ/147/
<div class="place"></div>
<div class="place2"></div>
<div class="place3"></div>
Any help would be appreciated!

Simply toggle all the colors when you click on one of the div's:
$("div").click(function () {
$(".place").toggleClass("green");
$(".place2").toggleClass("orange yellow");
$(".place3").toggleClass("yellow");
});
http://jsfiddle.net/r5WWQ/148/
You can manipulate this so that only the third and first would light up when clicking one of them:
$(".place, .place3").click(function () {
$(".place").toggleClass("green");
$(".place3").toggleClass("yellow");
});

jQuery toggle more button toggle multiple divs

I've written jquery for a toggle button...
$(document).ready(function(){
/* Needs to be re-written for multiple questions */
$(".full_question").hide();
$('.question a').after('<a class="show_full_question" href="#">more</a>');
$('.show_full_question').click(function() {
var el = this;
$(".full_question").toggle(function() {
$(el).text($(el).text() == 'less' ? 'more' : 'less');
$(el).toggleClass("hide_full_question");
});
});
});
it toggles between the full question width and partial width. But when clicked it toggles for all questions on the page. How would I get it toggle only one?
I know it has something to do with $(this) but not sure where it goes... I don't mind changing the html if necessary.
The html is...
<h3 class="question">
<a href="#">What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
<span class="full_question"> circumference of the earth? I really don't know!</span>
</a>
</h3>

The problem is $(".full_question").toggle(), will toggle all elements with the full_question class. You need to somehow link the current element being clicked with the proper full_question.
Since you have one full_question and one show_full_question button under the same parent you can use jQuery to get the parent and find the question to toggle:
$(this).parent().find(".full_question").toggle()
If you are certain that HTML structure won't change you can also do:
$(this.previousSibling.childNodes[1]).toggle()
Here's a jsfiddle example.

jquery specific show buttons on hover

I have an application creating a bunch of divs through a loop.
Each div has the class "product"
so it looks like
<div class="product">
!.....stuff here ....!
<div class="show_on_hover">...buttons here... </div>
</div>
so there are about 12 of these same divs per page.
I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.
$('.product').hover(function() {
$(.show_on_hover).show();
},
function () {
$(.show_on_hover).hide();
}
);
That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.
Thanks!

find will find your .show_on_hover divs inside the hovered .product. Try this:
$('.product').hover(function() {
$(this).find('.show_on_hover').show();
},
function () {
$(this).find('.show_on_hover').hide();
}
);

Try
$('.show_on_hover', this).show()/.hide()
Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.