I have my code working tho what i would like it's to customize the text link so it should be a picture.
Example the "View" text link will be /pics/icon.png and "Edit", /pics/icon2.png
Here it's my code:
var $container = $( "#daif_results" );
$container.empty();
$.each( items, function() {
var str = '<li>' + this.label + ' - <a href="' + daif_consts.home_url + '?p=' + this.value +
'">View</a> - Edit</li>';
$container.append( str );
});
I couldn't run your code, but I believe you are trying to add images to one of your lists. I think you could use CSS to achieve that, like this example.
I also found a javascript example here.
I think you could create an image element:
img = document.createElement('img');
img.src = "http://sourcetoimage";
And then append it to your list:
li.appendChild(img);
Here's a JFiddle.
Related
I require a way of outputting images into a live preview div, directly as
a user inputs letters. For example, if the user inputs the letter 'k', an
image tied to the 'k' letter is displayed. However, currently only the
letters pre-entered on the page loading display the images, not
characters inputted from a textarea field, as you can see in this [demo]
(http://jsfiddle.net/jLzsrygv/8/).
The method I use of converting characters to images is as follows:
$('#target').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
$(this).html(html);
});
What I've tried
I have tried changing the allowed tags of the textarea field to allow img
tags and then controlling this (invisible) textarea with a master
textarea, but to no avail as the k does not convert itself to the img tag
in the original textarea field.
Since directly inserting img tags are the only thing that seem to work for me, the only way I see it possible with my very limited knowledge of the
language is for the second text area in real-time to replace letters
typed into the master text area (e.g 'K' is replaced by ) I have experimented with text replacements but I feel I
may be going wrong with textContent, as opposed to a value or innerHTML. This is as far as I've gotten.
Would appreciate any help.
The only thing you are not doing is calling the .each() methods when there is a keyup. Thus, the .each() are only called once then the JavaScript is loaded. Put them inside functions and call the functions upon keyup.
$(document).ready(function(){
change1();
change2();
$('#someTextBox').keyup(function(){
$('#target').html($(this).val());
change1();
$('#target2').html($(this).val());
change2();
});
});
function change1() {
$('#target').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
$(this).html(html);
});
}
function change2() {
$('#target2').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
//console.log(html);
$(this).html(html);
});
}
Fiddle: http://jsfiddle.net/jLzsrygv/21/
I am trying to insert a img into a div, but it should be a different img depending on the div value, which is dynamically populating
So if value is test insert image test.jpg, if the value is blabla insert image blabla.jpg and so on (i got about 25 div values)
I got it working only for the first one now and it is only populating one img everywhere if i use
var divText = $('div').first().text();
My names vars and the img names jpg are exactly the same
Probably need to loop it somehow, some help will be appreciate
My code so far is
HTML
<div>test</div>
<div>blabla</div>
<div>dasdad</div>
<div>khjkhjk</div>
jQuery
var name = 'test';
var name1 = "blabla";
var imgPath = "folder/images/";
var divText = $('div').text();
if (divText === name) {
$('div').prepend('<img src="' + imgPath + 'test' + '.jpg"/>');
}
if (divText === name1) {
$('div').prepend('<img src="' + imgPath + 'blabla' + '.jpg"/>');
}
Here is my fiddle - http://jsfiddle.net/6da9jvr7/
The easiest way to do this is with jquery's each.
$('div').each(function(){
var $div = $(this);
$div.prepend(<img src="' + imgPath + $div.text() + '.jpg"/>');
});
When you call $('div').each(), jquery first selects every div in the document. It then loops over the divs and calls the callback you specify. "this" is bound to the current div in the loop, so when we call $(this) we're "wrapping" that div with jquery, which allows us to use functions like .text and .prepend.
Try to use each loop for this
$.each($('div'), function() {
var img_name = $(this).text();
$(this).prepend('<img src="' + imgPath + img_name + '.jpg"/>');
});
I made a couple assumptions in this demo (added the foo class to the divs, etc)
I believe all you need is this:
var imgPath = "folder/images/";
$('div.foo').each(function(index, element){
var divText = $(element).text();
$('div').prepend('<img src="' + imgPath + divText + '.jpg"/>');
});
You could identify the divs another way by adding a class for example:
<div class="dynamic-image">test</div>
<div class="dynamic-image">blabla</div>
Now you can just search all divs with the dynamic-image class, and fetch the image based on content, like so:
var path = 'path/to/images';
$('.dynamic-image').each(function(i, e) {
var $e = $(e),
img = new Image();
img.src = path + '/' + $e.text() + '.jpg';
$e.prepend(img);
});
For the looping part, you can do something like this. Note that you want to use innerHTML and not text. Also, keeping in mind that $('div') returns an array of divs (which I set to the variable divs).
var divs = $('div');
for (var i = 0; i < divs.length; i++) {
alert(divs[i] + " " + divs[i].innerHTML);
}
To explain this shortly, I have an mouseenter Jquery event firing up an AJAX call. And a Jquery UI tooltip.
$(function()
{
$(document).tooltip({track:true});
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Here is the call:
function AJAXValidation(section)
{
var request = $.ajax(
{
url: "ProcessJRT.php",
type: "POST",
contentType:"application/x-www-form-urlencoded;charset=UTF-8",
data:
{
validate:section
}
});
request.done(
function(message)
{
var div = document.createElement('div');
$(div).html(message);
$(div).children().each
(
function(i)
{
var title = '';
if($('#' + $(this).attr('id')).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '\r\n';
$('#' + $(this).id).attr('title', title);
}
);
});
}
What it does now is it take the <div>s from message and it place them in a parent <div>. (In my code the div already exist, I changed that part so the question would stay as short as possible).
I then take the text from those <div> and I want to place them in the corresponding <input/> title attribute.
Everything work just perfect here exepte this stupid little thing:
I am unable to add a LN or a CR in the title so all the texts from the divs would be on separate line...
I have tried adding a </br> inside the attribute like this:
function(i)
{
var title = '';
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).attr('id')).attr('title');
}
title += $(this).html() + '</br>';//<---See I added a BR here
$('#' + $(this).id).attr('title', title);
}
But it display the </br> as normal text. I than tried String.fromCharCode(13) but did'nt work, I tried jus '\n' or '\r\n' and still does work.
Can someone point out were I am derping on this one??
Thanks!
EDIT:
Changed the $('#' + $(this).attr('id')) to $('#' + $(this).id).
You can't format the title attribute in that way, it doesn't work, and will be different across different browsers.
Try the jquery plugin qTip to achieve what you want. (looks good too!)
http://craigsworks.com/projects/qtip/
Alternatively, you can cheat by using etc, to push the text to the next line. but this is flaky at best.
Here is how I resolve my problem with the idea that #crush gave me:
First:
I removed the tooltip initialization from the function that fire the event :
$(function()
{
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Next:
I changed the "done" function so I would initialise a new tooltip each time with html content (FYI JQuery tooltip can format HTML)
Here what it look like now:
function(message)
{
var div = document.createElement('div');
$(div).html(message);
var title = '';
$(div).children().each
(
function(i)
{
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '</br>';
$(document).tooltip({content:title, items:('#' + $(this).id)});
}
);
}
First time posting = )
I have been searching for a little while and have tried many ('refresh').trigger , ('create') and markup answers other members have suggested or I have seen on other posts. I am pretty new to JS JQM but I am having troubles having my dynamically added buttons viewed with the CSS properties. I have tried other solutions posted on similar questions such as:
How to add dynamic jquery button?
Jquery Dynamically generated buttons no css
A few other posts too.
Sorry in advance if already answered, I could not find a solution.
Here is my code:
The Reason I made the button a variable was because of another form post suggested it then refreshing that way...
$( '#csvButton' ).on( 'click', function() {
$('#viewData').empty();
$('#testView').empty();
$.ajax( {
url: 'xhr/data.csv',
type: 'GET',
dataType: 'text',
success:function ( result ) {
//console.log(result);
var lines = result.split("\n");
//console.log(lines);
var dataRow = lines[0];
var dataCol = dataRow.split(",");
for (var lineNum = 1; lineNum < lines.length; lineNum++) {
var row = lines[lineNum];
var columns = row.split(",");
var thisButton = $("<a>").attr("href", "#").attr("data-role", "button").attr("data-theme", columns[1]).attr("data-icon", columns[2]).text(columns[0]);
thisButton.appendTo('#testView');
$('<ul>' + '<li><b>' + dataCol[0] + " " + columns[0] + '</b></li>' +
'<li>'+ dataCol[1] + " " + columns[1] + '</li>' +
'<li>'+ dataCol[2] + " " + columns[2] + '</li>' + '</ul>'
).appendTo('#testView');
}
}
});
});
return false;
});
I am having trouble with thisButton displaying properly with CSS properties. I am made it a link with data-role="button" and trying it as a
my CSV has button name "Settings", button theme "a", and button icon "gear" data.
Any help would be great. #testView was a temp I created to test ideas to get CSS properties to work.
Thanks in advance!
Well you're working on dynamic buttons so it seems it would be better if you set css to a class and then add class to button dynamicaly.
Try add class to your css code with parameters you need and then in your code put somewhere
$("#testView").addClass("name of your class");
I'm sorry but i can test this solution right away so i'm not sure if its working as you wish.
Good Luck :)
You can remove or put CSS properties with this:
E.g.:
$("#testView").class('display', 'none');
Look at this Porperty CSS documentation
I have to develop a small application for school and I first designed in photoshop a bit and "converted" it into html. That went all fine. I created a custom dropdown with javascript and it worked smoothly. I've just tried implementing CodeIgniter into the design but the javascript started running twice.
I've tried comparing the code of the plain html version with the codeigniter result but I can't seem to find any difference.
Can any of you maybe help me?
Here's the CodeIgniter result:
http://intellia.itforit.net/index.htm
As asked by Krof Drakula here are the most important pieces of code:
The actual jquery plugin: (styleForm.js)
;(function($){
$.fn.styleForm = function() {
var form = this;
/* Select */
$('select', this).each(function(){
var div = '<div class="styledSelect"><ul>';
var first = false;
$('option', this).each(function(){
var cssclass = "";
if(!first) {
first = true;
cssclass = 'class="first"'
}
div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
});
div += '</ul></div>';
$(this).hide();
$(this).after(div);
});
$('.styledSelect ul').toggle(function(){
$('li:not(.first)', this).show("fast");
}, function(){
$('li:not(.first)', this).hide("fast");
});
$('.styledSelect ul li:not(.first):not(.selected)').click(function(){
var id = $(this).attr('id');
var content = $(this).text();
$('.styledSelect ul li.first').attr('id', id).text(content);
$('.styledSelect ul li').css({'font-weight': 'normal'});
$(this).css({'font-weight': 'bold'});
/* SELECT in Select form item */
var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
selected.setAttribute("selected", "selected");
//$(form).submit();
});
};
})( jQuery );
And here's where it gets launched: (canvasDrawing.js)
$(document).ready(function(){
$('form').styleForm();
//Unimportant canvas stuff
});
Thanx in advance,
Duckness
The problem is that your canvasDrawing.js, in the "unimportant canvas stuff", causes a javascript error. If the canvas it describes actually exists, your styleForm stuff only runs once. So add this to your HTML:
<canvas id="floorplan"></canvas>
And magic will happen. Or, in your canvasDrawing file, add clause like this right after styleForm:
var canvas = document.getElementById('floorplan');
if (!canvas)
return;
I'm not actually all that clear why having an error in that function causes it to run twice, but it's definitely the problem. See it: your code + a canvas element = working.