Currently I output a text from my database with the following code:
if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }
I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:
<script>
var lengthText = 10;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('p').text(shortText);
$('p').hover(function () {
$(this).text(text);
}, function () {
$(this).text(shortText);
});
</script>
Now I do not like the style of the outcome and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?
I would really appreciate your any help.
Thanks,
Chris
Add your original text in title attribute of p tag which I hope you are already doing.
Add data-toggle="tooltip" data-placement="top" attributes to p tag
Ex
<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>
Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.
Ex
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
You can do this using tooltip of bootstrap
<button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom">
Tooltip on Bottom
$(function() {
var lengthText = 10;
var text = $('#test').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('#test').prop("title", text);
$('#test').text(shortText);
$('[data-toggle="tooltip"]').tooltip();
})
http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview
Try simple html tooltip using title.
if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }
You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script
$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);
// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
$('p').tooltip();
});
check more about boostrap tolltip here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp
Related
I have a textarea with this content :
[supreme] a test text or anything [/supreme]
I have a button too. I want to when button clicked , textarea selected and change caret position to this :
[supreme] a test text or anything <caret postion> [/supreme]
How can i do this with javascript or jquery ?
Thanks .
Here is a quick example. It could be done cleaner but it should get you started.
$(document).ready(function() {
$('.button').click(function(e) {
var $textArea = $('.textArea');
var prevValue = $textArea.val();
$textArea.focus().val('').val(prevValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textArea">a test text or anything</textarea>
<button class="button">
CLick Me
</button>
I've got links in one wrapper which have specific class. I know that i can change text with .text() in jQuery, but what if i have 2 or more texts in same class. How can I change them all at once ?
Change all to same new string.
$('.someClass').text('new text');
Loop over all in class and modify existing text for each element
$('.someClass').text(function(_, oldText){
return oldText + ' new text'
});
Hope, this will help to change multiple HTML elements with same class with jquery
$(function () {
$(".change-title").on("click", function (e) {
$('.change-text').text($(this).data("desc"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="change-text">
Change Text 1
</div>
<p class="change-text">Change Text 1</p>
button1
button 2
I have three content boxes that i want to show and hide using controls.
The HTML is as follows:
<div id="leermat1">
Content here
<a class="pag-next">Next</a>
<a class="pag-prev">Previous</a>
</div>
<div id="leermat2">
Content here
<a class="pag-next">Next</a>
<a class="pag-prev">Previous</a>
</div>
<div id="leermat3">
Content here
<a class="pag-next">Next</a>
<a class="pag-prev">Previous</a>
</div>
I have the two anchors pag-next and pag-prev that will control which of the content divs should be visible at any given point:
I want to write jquery such as, when #leermat1 'pag-next' is clicked, it hides #leermat1 and shows #leermat2. Then when #leermat1 is hidden and #leermat2 shows, when '.pag-next' is clicked, it hides #leermat2, and shows #leermat3.
Also the 'pag-prev' should work the same way.
I started with the following but dont know where to go from here.
$(document).ready(function() {
$('.pag-next').on('click',function() {
$('#leermat1').addClass('hide');
$('#leermat2').addClass('show');
});
});
One more thing is that the '.pag-next' should stop functioning after it has shown #leermat3.
You need this
$('[class^=pag-]').click(function() {
var elem = $('[id^=leermat]').filter(":visible"); // take the visible element
var num = Number(elem[0].id.match(/\d+$/)[0]); // take the number from it
var step = $(this).is('.pag-next') ? 1 : -1; // ternary operator
$('#leermat'+ (num + step)).show(); // show next or back
elem.hide(); // hide the visible element
});
Looks like in your anchor tag you have not given it a class.
Next
You then go on in your JQuery code to add a click function to a class which does not exist.
$('.pag-next').on('click',function()
Try adding class="pag-next" to your anchor tag.
This is what worked for me through a little trial and error. Although I am not sure if this is the most efficient solution.
$('#leermat1 .pag-next').on('click',function(){
$('#leermat1').addClass('hide');
$('#leermat1').removeClass('show');
$('#leermat3').addClass('hide');
$('#leermat3').remove('show');
$('#leermat2').addClass('show');
});
$('#leermat2 .pag-next').on('click',function(){
$('#leermat1').removeClass('show');
$('#leermat2').addClass('hide');
$('#leermat2').removeClass('show');
$('#leermat3').addClass('show');
});
$('#leermat2 .pag-prev').on('click',function(){
$('#leermat2').addClass('hide');
$('#leermat2').removeClass('show');
$('#leermat1').addClass('show');
$('#leermat3').removeClass('show');
});
$('#leermat3 .pag-prev').on('click',function(){
$('#leermat3').addClass('hide');
$('#leermat2').addClass('show');
$('#leermat1').addClass('hide');
$('#leermat3').removeClass('show');
$('#leermat1').removeClass('show');
});
I am using Ckeditor
View:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="~/Content/ckeditor/ckeditor.js"></script>
<input id="insertPattern" type="button" value="insert pattern" />
#Html.TextArea("editor", new { #class = "ckeditor", id = "aboutme" })
Javascript:
$(function () {
$('input#insertPattern').click(function () {
var txtarea = document.getElementById("aboutme");
var selection = txtarea.getSelection().getStartElement().getOuterHtml();
alert(selection);
}});
If i click to buton , i can not alert selection number of mouse click in Html.TextArea in Ckeditor.
Error:
In this part of javascript code
var selection = txtarea.getSelection().getStartElement().getOuterHtml();
I get below error,
uncaught typeerror undefined is not a function
Where i miss ? How can i get selection of mouse click ?
You are not working with the editor
CKEDITOR.instances["editorID"].getSelection().getStartElement().getOuterHtml();
From your comments, you want to use
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
Ultimately you want to insert text where exactly the mouse points right. This piece of code do that.
CKEDITOR.instances['aboutme'].insertText("insert some text into this string");
I have it now that my text are rotating, I want it such that when you hover and click one word(eg. chocolate, sugar or cocoa", it gives a sentence, click another word, another sentence. and then the rotating words continue rotating.
Any ideas? Any help is deeply appreciated. Thanks, guys:)
JS:
var words = [
'<span id="pasta">Penne</span>',
'<span id="meat">Italian Sausage</span>',
'<span id="oil">Olive Oil</span>',
'<span id="onion">Onion</span>'];
var index = 0;
$(document).ready(function rotate() {
document.getElementById('text').innerHTML =words[(index++)%(words.length)];
if($("#text").is(":hover")){
setTimeout(rotate, 500);
}
else{
setTimeout(rotate, 100);
}
})()
$(function(){
$('#pasta').on('click', function () {
$("<li>Cook 8 ounces of pasta, according to its package directions.</li>").appendTo('#steps');
$("#steps").html('<div id="text"></div>');
});
});
HTML:
<div id="steps">
<div id="text">
</div>
</div>
I'd say have the text in an anchor tag with href="#" and write a function that responds to the anchor's onclick. And change the text in that function and add the anchor tag ...
additionally style your anchor to look like plain text.