Expand current Javascript text box content change - javascript

At the moment I have a javascript/jquery snippet that changes text in a text box depending on which icon/image is currently hovered over. It currently uses the ID tag name as the display string. How can I get it to display some other text (based on same image hover) - i.e. instead of using the ID string like "idOne" I can use another string like "This is the text to be displayed" for that particular ID element (.attr('id'))
As you can gather I'm pretty new to this! Will appreciate any guidance.
Thanks
jQuery(document).ready(function($) {
var text=$('#explain-text').text();
$('#idOne,#idTwo,#OidThree,#idFour,#idFive').hover(function() {
$('#explain-text').text($(this).attr('id'));
},function(){
$('#explain-text').text(text);
});
});

You can add other attribute in your img tag like this:
<img id="one" src="images.png" alt="Smiley face" info="This is the text to be displayed" >
And then, in your JS file, get its value as below:
$('#explain-text').val($(this).attr("info"));

Related

how to wrap all matches of given string with html tag and append it to a template of a directive

Let's suppose I have a string like this:
Some text 321-ABC some text some text some text 761-DAW some text 612-AOS some text some text 733-OQA
It is passed to the directive scope. Now I want to display whole text with matches for /\d\d\d-\X\X\X/ wrapped with
<span ng-click=someFunction(matchedString)>matchedString</span>
How can I do this? What's the best practice?
Let' say your text is stored in text, and your div containing the text is called container.
The code of your container should be
<div ng-model="container" ng-bind-html="parsedText"></div>
Now in your code
$scope.processText = function() {
$scope.parsedText = $scope.text.replace(/([0-9]{3}-[A-Z]{3})/g, '$1');
};
This piece of code will replace every one of your codes with a link that you can click.
(I'm more of an Angular than AngularJS guy, so replace the link with whatever allows you to do what you want)

JQuery $(this).find("#id").text("text") not changing text

I'm looping through all elements of a certain class on a page and editing the text of an tag in that class with a certain id. I'm referencing the element with $(this).find('#time') and trying to change the text of that object using $(this).find('#time').text("test"), but the the text of the element isn't changing and I can't figure out why.
EDIT:
$('.box').each(function(i, obj){} This is what the loop is, the odd thing is that when i simply reference the text with $(this).find('#time').text() i receive the correct output. But the text won't change when using .text().
Here is the code im using to change the object text:
var time = response.substring(7, 15);
var user = response.substring(16, response.length);
$(this).find('#time').text(time);
$(this).find('#name').text(response.substring(user));
Game Page
<div class="box">
<h1>${{ game_object.amount }}</h1>
<h2 id="time">{{ game_object.start_time}}</h2>
<p id="name">{{ game_object.current_top_user }}</p>
CLICK NOW
</div>
Try to use .html
$(this).find('#time').html("test")
or maybe this can help you:
$('body').find('#time').text('test');
Because the ID of an element must to be unique

Emoji into textarea with javascript

I tried to insert Emojis into a textarea, but it didn't work. The emojis did not display.
<span class="text">',params.text.replace(/:(\w+):/g,'<img src="emo/emojis/smile.png" alt="smile"/>'),'</span>
What could be causing this?
Thanks for the help
A simple textarea cannot show images as is intended to hold plain text only, use a div instead. I've posted a JSFiddle link below to give you an example.
If you must allow user input in the div then set the contenteditable property to true.
<div id="someDiv" onclick="showImage();" contenteditable="true">Click Me!</div>
<script>
function showImage()
{
return document.getElementById("someDiv").innerHTML = "<img src='http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png' height='250' width='250' />";
}
</script>
The link below shows you a div with the contenteditable property set to true that means the user can type.
If you click the div it should put an image in the div.
http://jsfiddle.net/05dLkuc0/

Change Dynamic Link Text In Javascript

I currently have a slideshow run with HTMl CSS and JS at the moment for the navigation buttons below the slideshow it is just placing numbers instead of text. Is there a way to grab the images title and use it or custom text for each slide link. Below i included the Javascript that makes the navigation buttons and adds the text. If you need anything else just let me know.
If i can just specify text in this JS file that would work too.
Also if it may help im using Kickstart HTML Template.
Link to view it http://bliskdesigns.com/clients/timbr/
var items = $(this).find('li');
wrap.append('<ul class="slideshow-buttons"></ul>');
items.each(function(index){
wrap.find('.slideshow-buttons')
.append('<li>'+(index+2)+'</li>');
});
It's difficult to give you a concise answer with what you've provided, however:
Assuming that in the code you've provided:
items is an array containing each slide in your slideshow;
That each element in items contains an img;
That the text that you want to appear in the slideshow nav is the title attribute of each img;
That the unordered list being built by wrap is the navigation;
That the text you want to change is the numeral within the anchor of each item injected into wrap.
Here's a potential answer:
// put all slides into 'items'
var items = $(this).find('li');
// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');
// loop over each item
items.each(function(index){
// grab the title attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('title');
// push a new <li> into 'wrap'
wrap.find('.slideshow-buttons').append('<li>'+titleText+'</li>');
});
This should just be a direct replacement for wherever in your project the code you've included above came from.
As I say: I can't promise that this will work without a lot more information, but in theory it will. Make sure that each of your images has a title:
<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >
Alternatively, you can use the text in the image's alt tag instead by changing this line from above:
// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');
In the list items you can add the text that you want to display instead of numbers, as shown below.
<li data-displayText="Timber Mart"> <img src="http://i.imgur.com/4XKIENA.png" width="920" /> </li>
Then in above code you can use the text instead of index, as shown below.
wrap.find('.slideshow-buttons')
.append('<li>'+$(items[index]).attr("data-displayText")+'</li>');

on dom ready change html source using js

I'm stuck with tinymce align problem. When I align text content to image let say left content preview look ok but on rendering content I'm getting source like this
<p>
<img width="205" height="154" alt="" src="/Content/uploads/images/mypic.jpg" left;"="">
</p>
now I want to change this snippet left;"=" to align="left"using javascript so when user loads page and when js recognize snippet left;"=" to automatically change to valid align property align="left".
How to do that?
I haven't seen anything like this left;"=" generated automatically. I'm not sure why it is generated, but you can remove the left attribute and add align attribute to your image.
Better try like this,
$(document).ready(function(){
if($('img').attr("left")) {
$(this).removeAttr( 'left');
$(this).attr("align","left");
}
)};
When I test this, you end up with an empty left;" attribute on the image, so you can do this:
if ($('img').attr('left;"') !== undefined) {
$('img').attr('align', 'left');
}

Categories