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.
Related
I working on divide and merge jquery UI tabs. My Fiddle is
MyCode:
$("#content_2").tabs();
$("#content_3").tabs();
var originalState = $("#content_2").clone();
$('#but').click(function(i) {
$('#content_2 > ul li a').each(function(i) {
$(this).hide();
var spanVal = $(this).attr('href');
var valueText = $(this).text();
$(spanVal).hide();
$('#content_2').prepend($('<div id="content_' + i + '"><ul><li class="ui-widget _lngTrans_Translatable">' + valueText + '</li></ul><span id="' + spanVal + '">' + $(spanVal).text() + '</span></div>'));
$("#content_" + i).tabs();
});
});
$('#but1').click(function() {
$("#content_2").replaceWith(originalState);
$("#content_2").tabs();
$("#content_3").tabs();
});
Here I have two buttons 'divide' and 'merge' If I click divide the tabs separated with its contents.If I click Merge The tabs should come to original form.
The problem is first time its working fine but the second time when I click merge the orignalstate changing and goes weird.
Please anyone help me to create this feature in Jquery UI tabs.
If you need more information comment me.
Thanks in Advance.
Just Change your function
$('#but1').click(function () {
$("#content_2").replaceWith(originalState);
originalState = $("#content_2").clone();
$("#content_2").tabs();
$("#content_3").tabs();
});
Here is Updated Fiddle Link
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.
I'm having issues moving through a sequence of Hidden Divs that will eventually turn into Tables on another page that I am working on and the issue that I am running into is that the jQuery Javascript code does not seem to be responding to calls.
My JS Fiddle Example:
http://jsfiddle.net/qwertycody/QUprb/3/
My Actual Applied Work:
http://www.voyagersclan.com/scripts/pokemon/poke_pc.php
<script type="text/javascript" src="jquery.js"></script>
<script>
var currentID = 1;
$(function() {
$('#left').on('click', function(){
var currentDiv = '#' + currentID;
$('currentDiv').hide(500);
currentID = currentID - 1;
currentDiv = '#' + currentID;
$('currentDiv').show(500);
})
});
$(function() {
$('#right').on('click', function(){
var currentDiv = '#' + currentID;
$('currentDiv').hide(500);
currentID = currentID + 1;
currentDiv = '#' + currentID;
$('currentDiv').show(500);
})
});
</script>
Above is a code sample of my Javascript that doesn't seem to work correctly.
The overall goal of this is to be able to move through dynamically generated Tables with Individually Assigned Divs that can freely be Shown and Hidden at the press of a button.
Your answer is very close! The problem is that your selector is using a string, instead of the variable you intialized!
var currentDiv = '#' + currentID;
$(currentDiv).hide(500); // works!
$('currentDiv').hide(500); // gets an element of type "currentDiv"
Look at this updated JSFiddle.
I also added some bounds checks into your event handlers. This way you can only scroll through the available tables (1-4).
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