I have three columns within my webpage. On each column there are a group of three squares, the square represent a unique colour. So when the user clicks on red in column 1 the text within column 1 goes red, if blue it will go blue. If the user clicks on green within column 2 the text within column 2 will go green.
I am new to jQuery so I am not sure if I have done this right and would like to know if this is the best way of doing it.
What I want to know is there anyway of changing this so there is only one style called picker for all in each column. Also can I change the jQuery so it's not 3 seperate functions, is there a more cleaner way of doing this?
Thanks.
Yes! CSS selectors are all reusable! you shouldn't created multiple class' with the exact same attributes and values!
all the css classes you need .col, .wrapper, .picker
and then working with jQuery instead of using a div id when you want to use the code in mulitple places, work out where the element is relative to the element that fired the event or $(this)
check out the fiddle
http://jsfiddle.net/WJ5DZ/1/
You may try this way:
$(function () {
$('.picker').css('background-color', function () { //Setup the background color for each picker square.
return $(this).data('color'); //get its color from data attribute
}).click(function () { //Chain it through for the click event
$(this).closest('.content').css({ //get the parent content element where color needs to be applied
color: $(this).data('color') //set the color as that of the clicked picker.
});
});
});
Demo
In the markup provide a class called say content to identify its own parent content.
<div class='col2 content' id="test1"> <!-- You don't need id if you are using this for selcting.
Remove all the picker1, 2 css rules and have just the picker.
Using closest will ensure that even if you plan to add a wrapper to your picker still your actuall content div will be selected.
.closest()
.css(prop,func)
yes there is.. change all you class(picker1,picker2) to picker and remove the id (test,test1..)
try this
$('.picker').each(function(){
var myColor = $(this).data('color');
$(this).css({background: myColor })
});
$('.picker').click(function(){
var myColor = $(this).data('color');
$(this).parent().css({color: myColor});
});
NOTE: you don't need click event inside each loop
fiddle here
Related
I have created a drop-down using angularjs directive, the directive is working fine, right now I writing all the css within the directive itself, In one of the feature when the mouse hovers the drop-down list options it should change the background color to #27A1EC - blue, and text color to white, on mouse leave then the background color to be white and text color to be the actual color, everything is working fine but one issue I am facing is that since we don't have JQuery .find() option in JQLite I have tried using like as shown below
I have used angular.element(document.querySelector('#parent')) instead of elm.find('a').first(), I don't whether this is correct or not
elm.find("a").bind("mouseover", function() {
scope.actualColor = scope.textColor.color;
//elm.find('a').first().css('color', 'white').css('background-color', '#27A1EC');
angular.element(document.querySelector('#parent')).css('color', 'white').css('background-color', '#27A1EC');
});
elm.find("a").bind("mouseleave", function() {
//elm.find('a').first().css('color', scope.actualColor).css('background-color', 'white');
angular.element(document.querySelector('#parent')).css('color', scope.actualColor).css('background-color', 'white');
});
Now when I hover the mouse to Parent2 within the drop-down list the hover color changing is redirecting and is applying to Parent1
Can anyone please tell me some solution for this,
Plunker
In your case the problem is you have multiple elements with the id parent, so when using querySelector it will return the first element with the id parent.
You can use .eq(0) instead of first()
elm.find('a').eq(0).css('color', 'white');
But a better solution will be is to assign a class parent to the parent element instead of id like
<a class='parent' href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a>
then
angular.element(elm[0].querySelector('.parent')).css('color', scope.actualColor).css('background-color', 'white');
I have some contenteditable divs with the same class, the div is dynamically created so I don't know how many there are.
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
I want the text in the last one to be selected (like if you hold the left mouse button down over the text) with a button
The obvious way in jquery:
$(".scale1:last").click();
Doesn't work, it selects the hole page.
I also thought about ways in javascript like Selection.selectAllChildren and Selection.addRange() but i have no elegant way of knowing the last div
How to make text selection checkout here
To reach your goal - replace ID selection with following code:
var query = document.querySelectorAll(".scale1"),
text = query[query.length-1];
Try:
$('.scale1:last').text()
or
$('.scale1').last().text()
Either would work, even for dynamically added elements.
DEMO
What I'm really after is to detect when the cursor changes to type "text", that is, when I'm hover over a piece of text. I have tried looking at the element types I am hovering over, but this isn't too accurate because I don't know what they actually contain.
I understand that detecting the CSS cursor attribute is only possible if it has previously been assigned by me.
Is this possible at all? How would you go about doing this?
EDIT:
I do not want to check If I am currently over a specific element, I want to know if I am hover over any text within that element. A div could be 100% width of the browser, but with a shorter piece of text at the far left. I don't want to detect when hovering over just any part of an element.
No need to try to detect if the cursor changed.
You can simply detect if the mouse is hovering your text by using this kind of construct :
document.getElementById('myTextId').onmouseover = function() {
// do something like for example change the class of a div to change its color :
document.getElementById('myDivId').className = 'otherColor';
};
If you don't have an id but a class or a tag, you can replace getElementById by getElementsByClassName or getElementByTagName (which will return arrays on which you'll iterate).
If you want to restore the color when leaving the element, I suggest you bind the event onmouseout in the same way.
For example, if you want to do something on any paragraph, you may do that :
var paras = document.getElementByClassName('p');
for (var i=0; i<paras.length; i++) {
paras[i].onmouseover = function() {
// do something like for example change the class of a div to change its color :
document.getElementById('myDivId').className = 'otherColor';
};
}
I you plan to do a lot of things like this, I suggest you look at jquery and its tutorial.
One possible way is to find all the text nodes in your DOM and wrap them in a span with a certain class. Then you could select that class and do whatever you want with it:
// Wrap all text nodes in span tags with the class textNode
(function findTextNodes(current, callback) {
for(var i = current.childNodes.length; i--;){
var child = current.childNodes[i];
if(3 === child.nodeType)
callback(child);
findTextNodes(child, callback);
}
})(document.body, function(textNode){ // This callback musn't change the number of child nodes that the parent has. This one is safe:
$(textNode).replaceWith('<span class="textNode">' + textNode.nodeValue + '</span>');
});
// Do something on hover on those span tags
$('.textNode').hover(function(){
// Do whatever you want here
$(this).css('color', '#F00');
},function(){
// And here
$(this).css('color', '#000');
});
JSFiddle Demo
Obviously this will fill your DOM with a lot of span tags, and you only want to do this once on page load, because if you run it again it will double the number of spans. This could also do weird things if you have custom css applied to spans already.
If you're using jQuery (which you should, because jQuery is awesome), do this:
$("#myDiv").mouseover(function() {
$("#myDiv").css("background-color", "#FF0000");
});
I want to trigger a function if either the currently active element $(this) or another predefined element (e.g.: div#tooltip) blurs. However so far I've not found out how to do this. I've tried:
$(this).add('div#tooltip').live('blur', function(){
$('div#tooltip').hide();
});
Imagine that $(this) would be an input field, for example, and the predefined second element would be a tooltip div and that I would want the tooltip to hide if one of those blurs.
EDIT:
The div#tooltip contains an anchor, which should not make the div#tooltip hide if it's being clicked.
EDIT 2:
Okay, here is a more accurate explanation of my problem. I've got the $.fn.tooltip function which I apply to various text-inputs which have variable class names and id's. Therefore, this input can only be referred to as $(this) within the function.
Secondly I have the tooltip div, which is created by the function. This div goes by the ID #tooltip. This tooltip / div can contain some other elements such as anchors.
The tooltip is shown automatically when the input-field (this) is clicked. Once it's closed it won't be shown again, even if the input-field will be focused again.
What I'm trying to do is:
The tooltip must be removed when the text-input loses it's focus
EXCEPT if the cursor is within the tooltip / div or if an element within this div is being clicked.
Anyone?
Like this: http://jsfiddle.net/uu3zX/7/
HTML:
<input type="text" class="with-tooltip">
<span class="tooltip">?<a style="display:none" href="#">The tip</a></span>
JavaScript:
$('.with-tooltip').on('focus', function(){
$(this).next().children().show();
});
$('.with-tooltip').on('blur', function(){
$(this).next().children().hide();
});
$('.tooltip').hover(
function(){
$(this).children().show();
},
function(){
$(this).children().hide();
}
);
UPDATE
Added alternative solution to fit OP requriment to use this
Borrowing from IntoTheVoid's fiddle: You should wrap the input and the tooltip in a container div (or some other container element) to do this in one line:
$('.tooltip, input').on('mouseout', function(){
$(this).parent().children('.tooltip').hide();
}).on('focus mouseover', function(){
$(this).parent().children('.tooltip').show();
});
http://jsfiddle.net/mblase75/uu3zX/5/
Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.
So my first question:
http://jsfiddle.net/5pZ2v/3/
How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?
Maybe there already exists a function for this or plugin?
Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button
Use something like this:
$('div.profile').click(function(){
$(this).toggleClass('selected');
});
Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:
http://jsfiddle.net/Paulpro/apvqM/
Did you try .toggleClass()?
i.e. create a css class highlight and add
$("div").click(function () {
$(this).toggleClass("highlight");
});
HTH
Ivo Stoykov
PS: Look documentation here
You can use the click function of jQuery to mark/unmark a div.
$("div.profile").click(function () {
// if it's unmarked we mark
if(!$(this).hasClass('selected'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
You can then use each to get all the marked div :
$("div.selected").each(function () {
// do what you want
});
For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)
http://jsfiddle.net/vol7ron/5pZ2v/8/
First you need to give your DIVs an ID then look at my Fiddle.
$("div").click(function () {
$(this).toggleClass("highlight");
});
$('#save-button').click(function(){
$('#output').html(''); // clear the output div
// Loop through each selected div and output it's ID
$('div.highlight').each(function(){
$('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});