I have a header on my page, and block with boxes. That boxes represents my projects. When I click on one of them it is suppose to change my header background.
<div class="row">
<div class="job-one one-half column" onclick="headerProjBackground()">
<p>First</p>
</div>
<div class="job-two one-half column" onclick="headerProjBackground()">
<p>Second</p>
</div>
</div>
And my function:
function headerProjBackground(){
if($(this).hasClass('job-one')){
console.log('Hi!');
$('header').css('background-image': 'url(css/images/first-thing.png)');
}
if($(this).hasClass('job-one')){
console.log('Hello!');
$('header').css('background-image': 'url(css/images/second-thing.png)');
}
}
But it is not working. It can't understand my (this). There are no errors in the console. So this is logical mistake.
Onlcick attribute in Javascript by default Runs under Window, that means "this" object in the the function will always be window and as it doesn't have any class associated with it, so it will always give false in both if statement.
Refer below updated code snippet -
$('.jSelector').click(function(){
if($(this).hasClass('job-one')){
console.log('First Clicked!');
}
if($(this).hasClass('job-two')){
console.log('Second Clicked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="job-one one-half column jSelector">
<p>First</p>
</div>
<div class="job-two one-half column jSelector">
<p>Second</p>
</div>
</div>
Hope this helps!!
Outside of the onclick attribute, this is no longer defined. You can fix this in (at least) two ways.
Alt 1: Pass this as a parameter:
<div class="job-one one-half column" onclick="headerProjBackground(this)">
function headerProjBackground(clicked) {
//Replace this with clicked in the code of the function.
Alt 2: Do the event binding with jQuery instead of with HTML attributes:
<div class="job-one one-half column backgroundchanger">
$(".backgroundchanger").click(function() {
//Put the same code as for headerProjBackground() in your question.
//Here you can use the this keyword.
});
And some further thoughts: The way you have coded this is not very good if you want it compact (and clear). So lets try to improve it some! If you go with Alt 2 you could use a custom data- attribute to shorten the code:
<div class="one-half column" data-background="css/images/first-thing.png">
//If something that has the data-background attribute is clicked.
$('[data-background]').click(function() {
//Get the value from the data-background attribute, and use that as background image.
var background = $(this).attr('data-background');
$('header').css('background-image': 'url(' + background + ')');
});
Or, if you use Alt 1, you could just pass the desired background url as a parameter instead of this.
You can remove the onclick attribute on your divs and add the following, also the .css method has two parameters with comma between them.
<script type="text/javascript">
// once the dom is ready
$(document).ready(function() {
// check if any of the divs with column class is clicked
$('.column').click(function() {
// trigger the function and pass the (this) which is the object for the div clicked
headerProjBackground(this);
});
});
// element passed will be worked on in the function
function headerProjBackground(element){
if($(element).hasClass('job-one')){
console.log('Hi!');
$('header').css('background', '#000');
}
if($(element).hasClass('job-two')){
console.log('Hello!');
$('header').css('background', '#DDD');
}
}
</script>
Related
console.log($('.divs').click(<function>))
This shows an array of divs.
Does the click method return the object it acts on?
It is just something basic - maybe someone can say more.
That $() returns the array of elements with that selector makes natural sense. But $(<selector>).click(<function definition>) - just defines what should happen on each element of $(<selector>) when it is clicked - why does it also "return" the array of elements?
Here is also a fiddle for the above http://jsfiddle.net/jy7kpL6f/
or here - HTML/CSS/jQuery
var addclass = 'color';
var $cols = $('.divs').click(function(e) {
$cols.removeClass(addclass);
$(this).addClass(addclass);
});
var $cols2 = $('.divs');
console.log($('.divs').click(function(e) {
$cols.removeClass(addclass);
$(this).addClass(addclass);
}));
.color {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
1st Div
</div>
<div class="divs">
2nd Div
</div>
<div class="divs">
3rd Div
</div>
<div class="divs">
4th Div
</div>
click() returns all selected elements like many other jQuery functions.
This can be handy to chain functions like this:
$(".divs")
.click(callback1)
.hover(callback2)
...etc
Yes, it does. It returns the elements due to something called chaining. It enables such calls as:
$('div').addClass('on').removeClass('off');
I'm trying to make a text editable on clicking it. Below is the code I'm trying. When the title is clicked it shows an input box and button to save it.
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
I have changed other properties like color or changing the text of the elements and its working, but it is not applying the display property or .show()/.hide() function on the title or edit elements.
Below is my jQuery
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(){
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
$(title).show();
$(edit).hide();
}
function editTitle(){
$('.title-edit', this).show();
$('.title', this).hide();
}
Here's the jsfiddle
https://jsfiddle.net/ywezpag7/
I've added
$(title).html('abcd');
to the end to show that other properties/functions are working, but just not the display.
For checking the html change on title element you will have to check the source through developer tools cause the title element is hidden.
Where am I going wrong?
Your problem is in the function saveTitle. The first line must stop the event propagation otherwise after this function the editTitle function is called.
The snippet:
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(e){
// this line
e.stopPropagation();
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
title.show();
edit.hide();
title.text($('.title-edit input').val());
}
function editTitle(e){
$('.title-edit', this).show();
$('.title', this).hide();
}
.title-edit{
display:none
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
The issue as mentioned already is that your click events are fighting. In your code, the title-edit class is within the block, so when you click on the save button it triggers events for both clicks.
The easiest and, imho, cleanest way to resolve this is to switch your click event to be called on .title, and .title-edit button. You can also simplify the code beyond what you've got there.
$(function(){
$('.title').click(editTitle);
$('.title-edit button').click(saveTitle);
});
function saveTitle(){
$('.title').show();
$('.title-edit').hide();
$(title).html('abcd');
}
function editTitle(){
$('.title-edit').show();
$('.title').hide();
}
https://jsfiddle.net/ywezpag7/7/
I tried debug your code, and I had seen, that then you click to "Save" button, handled both functions, saveTitle() and editTitle(), and in that order. Therefore, the elements initially hidden, and then shown.
I have an HTML page that lays out div components and every div component call a function and pass this as an object. The div looks like this:
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
# this is the div that will flash on double click
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
What's really happening here is that there are multiple divs like that with different id. When I click double click on the div its calls the flashAndMessage() with argument this which results in my div to blink and flash using JQuery fadeIn() and fadeOut().
Details aside, the actual problem is that I have polling implemented that re-renders the HTML including all the divs. So basically the flashing and blinking is lost once the page updates.
I have tried global variables that store the this object before the page reloads and tries to pass the variables to jQuery find() function so that flashAndMessage() could be re-applied.
However it is not working for me. Here are my functions:
function unblink(selector) {
$(selector).stop()
$(selector).fadeIn({opacity: 1})
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
var pullReqURL = $(selector).find('.hypLink').attr('href')
blinkList.push(selector) # this is where the `div` is stored before the page reloads
blink(selector)
}
Note: The blinkList is a global array that is defined on top of everything else. I have a loop that runs after the divs are reloaded and I do see those divs that I stored in the list. However, when I iterate through that list and pass the obj to the flashAndMessage(), it does not work. It feels like the object is not the same when re-drawn or it loses some identity.
Code snippet not work because of restrictions, but code is tested and functional.
function unblink(selector) {
$(selector).stop();
$(selector).fadeIn({opacity: 1});
sessionStorage.href = "";
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
sessionStorage.href = $(selector).find('.hypLink').attr('href');
blink(selector);
}
if (sessionStorage.href) {
flashAndMessage($("a[href='"+sessionStorage.href+"']").parent().parent());
}
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Assuming you have a parent to <div id="pull-requests-view"> that is not getting reloaded with your polling code, you should use event delegation (and not inline event handlers).
<div id="parent-id-that-isnt-updated">
<div id="pull-requests-view">
...
</div>
</div>
You can attach your event listeners to the parent that doesn't update and have it only trigger when the clicked element matches the selector:
var $staticParent = $('#parent-id-that-isnt-updated');
$staticParent.on('dblclick', '.green', function() {
flashAndMessage(this);
});
$staticParent.on('click', '.green', function() {
unblink(this);
});
Is there any jQuery event that fires when a class is added to some object, which can tell me what is the element's content?
let me explain using an example.
Let's say I have a series of divs, all having the same class but different content.
<div class="block">content a</div>
<div class="block">content b</div>
<div class="block">content c</div>
<div class="block">content d</div>
At some moment, one of them will get an additional class, let's say selected:
<div class="block">content a</div>
<div class="block">content b</div>
<div class="block selected">content c</div>
<div class="block">content d</div>
I can't know whitch one id the selected one. So I want to run a function when one of these items gets the selected class and I want that function to receive the content of the selected element.
$('.block').on('event?', function(content){
//content is equal to "content c"
});
Is there something like that available in jQuery? Can I create one?
I have a plugin for you.
Insert this into you script:
//#Author Karl-André Gagnon
$.hook = function(){
var arg = Array.prototype.slice.call(arguments)
$.each(arg, function(){
var fn = this
if(!$.fn['hooked'+fn]){
$.fn['hooked'+fn] = $.fn[fn];
$.fn[fn] = (function(){
this['hooked'+fn].apply(this, arguments);
this.trigger(fn, arguments);
})
}
})
}
Then activate it like that:
$.hook('addClass');
This will add an "event launcher" on add class.
Then bind it on you block :
$('.block').on('addClass', function(e,a){ //e == events a == first arguments when calling addClass()
if(a === "selected"){//Just a validation
//Your code
}
})
You can get its text using this:
$('element').text();
This will provide you with the text of the element!
For you, this would be
$('.selected').text();
Now you can show it as an alert, or write it somewhere or use it as a variable! It will have the value of
content c
Or what ever the value the element would provide you with!
For more: http://api.jquery.com/text/
function test(someClass){
var content;
if($('.block').hasClass(someClass)) {
content = $('.' + someClass).html();
}
}
Then you call the function with the class of your wish as a parameter: test('classname');
For example I have simple html.
<body>
<div class="a">
<div class="child"></div> <!-- div element I click -->
<div class="childINeedToSelect"></div> <!-- div element I need to be selected -->
<div class="child"></div>
</div>
<div class="a">
<div class="child"></div>
<div class="childINeedToSelect"></div>
<div class="child"></div>
</div>
</body>
When I click on top first child class div I need to change, for example, border ONLY of the first childINeedToSelect class div. They have the same parent - a class div, but the difficult is that there are more than just one element with class a. I've already tried:
$(document).ready(function () {
var child = $('.child');
child.bind('click', function() {
detectElement($(this));
});
});
var belt;
function detectElement(arrow) {
belt = arrow.parent('.a').children('childINeedToSelect').eq(1);
belt.css("background-color", "red");
}
As you see I'm trying to send $(this) as parameter to detectElement() to determine which div was clicked. But my target div background doesn't change, and when I try to use element belt later, after it was detected by detectElement() function, Opera javascript debugger gives me error
Unhandled Error: Cannot convert 'belt.css('marginLeft')' to object
in line
var currentMargin = parseInt(belt.css('marginLeft').toString().replace('px', ''));
but this line of code worked perfectly, before calling detectElement() function; What am I doing wrong? How should I select element I need?
I'd suggest:
function detectElement(arrow) {
arrow.parent().find('.childINeedToSelect').css('background-color','red');
}
$(document).ready(function(){
$('.child').click(function(){
detectElement($(this));
});
});
JS Fiddle demo.
Or you could use the nextAll() method to find the sibling childINeedToSelect:
function detectElement(arrow) {
arrow.nextAll('.childINeedToSelect').css('background-color','red');
}
JS Fiddle demo.
And if you should have multiple .child and childINeedToSelect elements, you can pass the :first selector into the nextAll() method:
function detectElement(arrow) {
arrow.nextAll('.childINeedToSelect:first').css('background-color','red');
}
JS Fiddle demo.
I'm unsure why you were using bind(), but on the off-chance that you might be trying to account for dynamically-added elements (added after the event-handlers are bound to the various DOM nodes/jQuery objects), you could instead use on():
$('.a').on('click','.child', function(){
detectElement($(this));
});
JS Fiddle demo.
References:
find().
:first selector.
nextAll().
on().
parent().
Try this fiddle
$(document).ready(function () {
var child = $('.child');
child.bind('click', function() {
detectElement($(this));
});
});
var belt;
function detectElement(arrow) {
belt = arrow.siblings('.childINeedToSelect').eq(0);
belt.css("background-color", "red");
}
Try something like
jQuery('.a').children().first().click(function(){
jQuery('.childINeedToSelect').attr('background-color','red');
)}