I've created a custom style for TinyMCE, which simply wraps some selected content within a div when selected:
ed.focus();
ed.selection.setContent('<div class="sideContent" role="complimentary">' + ed.selection.getContent() + '</div>');
ed.undoManager.add();
However, once this style has been selected, it can't be removed. Is there a way of making it so that when the button is clicked for a second time, the outer divs are removed?
Thanks in advance.
Related
I'm looping through a set of anchor tags and want to set a custom content tooltip that you can click into for each anchor.
However, just adding a simple text to each anchor tooltip content is not showing up at all. What am I doing wrong?
// attch is an array of anchor links
c$.each(attch, (i, a) => {
c$(a).tooltip({
content: "test"
});
});
Fixed it. Just need to add the anchor to the items attr of the tooltip.
I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
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
I am trying to append text to a div which has been dynamically created. Within this div there are 2 child divs, one for title and one for the body.
This main div is droppable, however I want that when the item is dropped, the text enters into the child div "body".
I currently have the following code which appends the text to the main div.
$($(this)).append(draggableText + '<br>');
The name of the child div is #catPileBoxBody
However there are 3 of these which have been dynamically created. So is there a way of inserting the text into something like:
$($(this."CHILD called #catPileBoxBody")).append(draggableText + '<br>');
Any help would be massively appreciated! I have been stumped on this for AGES!
$(this).find("#catPileBoxBody").append(draggableText + '<br>');
But as you should have only one element with a given ID, you should be able to simply do
$("#catPileBoxBody").append(draggableText + '<br>');
The fact that the divs have been created dynamically changes nothing.
You can append it in the following manner
Edited:
$(this).find('div.yourClass').append(draggableText + '<br>');
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/