JQuery: How to change colors dynamically? - javascript

I'm using jumble.js to jumble colors of text, but finding difficulty in dynamically setting the colors from user input.
User selects colors using the spectrum.js color palette. I'm able to strip the rbg from rbg(xxx,xx,xx); to xxx,xx,xx. but unable to pass that into the jumble call method.
here is my code.
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");
colour1 = colour1.toRgbString();
colour1 = colour1.replace('rgb(', '');
colour1 = colour1.replace(')', '');
colour1 = colour1.replace(' ', '');
colour2 = colour2.toRgbString();
colour2 = colour2.replace('rgb(', '');
colour2 = colour2.replace(')', '');
colour2 = colour2.replace(' ', '');
var colour_1 = [colour1];
var colour_2 = [colour2];
$('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false);
});
Jumble plugin > https://github.com/vonKristoff/jumble

If I read the Spectrum API correctly, this should work with less string nonsense. And I was able to verify on the Spectrum website that the 'get' call can use toRgb().
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get").toRgb();
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get").toRgb();
$('#cypher-branding-main-edit-right-txt-text')
.jumble([colour1.r-0,colour1.g-0,colour1.b-0],[colour2.r-0,colour2.g-0,colour2.b-0],true,false);
});
Why is there a document listener for #cypher-branding-jumble-text, shouldent it just be $('#cypher-branding-jumble-text').click(...)?

this line has to be changed as color_1 = a.split(",") so it will really split into three values and create array. Same for color_2 also.

Nagappan's comment solved my issue very nicely.
Was meant to split the string. Modified code as below.
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");
colour1 = colour1.toRgbString();
colour1 = colour1.replace('rgb(', '');
colour1 = colour1.replace(')', '');
colour1 = colour1.replace(' ', '');
colour2 = colour2.toRgbString();
colour2 = colour2.replace('rgb(', '');
colour2 = colour2.replace(')', '');
colour2 = colour2.replace(' ', '');
//modified lines using split
var colour_1 = colour1.split(",");
var colour_2 = colour2.split(",");
$('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false);
});

Related

Javascript replace a string

I want to change this
[s=http://stackoverflow.com/questions/ask?title=Javascript%20replace%20a%20string]Text[/s]
into this
Text
using javascript
I have try this one.
<script>
var str = "[s=/site_menu.xhtml?get-d=4%2027&get-id=315&get-title=DanMachi%20Season%202&get-main=DanMachi]DanMachi Season 2[/s]";
var res = str.replace("[s=", '<a href="');
var ser = res.replace("[/s]", "</a>");
var serr = ser.replace("]", ':admin-hash-amp:">');
document.write(serr);
</script>
You may want to consider simply creating a function that would encapsulate all of this for you, especially if you plan on using in within multiple areas of your application:
function toHyperLink(input){
return input.replace('[s=','<a href="')
.replace(']','">')
.replace('[/s]','</a>');
}
Example
var input = '[s=http://stackoverflow.com/questions/ask?title=Javascript%20replace%20a%20string]Text[/s]';
console.log(`Input: ${input}`);
console.log(`Output: ${convertToHyperlink(input)}`);
function convertToHyperlink(input) {
return input.replace('[s=', '').replace('[/s]', '');
}
After you do your convert you should create an element instead of write that out.
var str = "[s=http://stackoverflow.com/questions/ask?title=Javascript%20replace%20a%20string]Text[/s]";
var res = str.replace("[s=", '<a href="');
var ser = res.replace("[/s]", "</a>");
var serr = ser.replace("]", '">');
var text = serr.slice(serr.indexOf(">") + 4, serr.indexOf("</a&gt"))
var href = serr.slice(serr.indexOf("href=\"") + 6, serr.indexOf("\"&gt"))
var link = document.createElement("a");
link.text = text;
link.href = href;
document.getElementById("myDIV").appendChild(link);
Try this
var str = "[s=http://stackoverflow.com/questions/ask?title=Javascript%20replace%20a%20string]Text[/s]";
var r = str.replace(/\[s=(.*?)\](.*?)(\[\/s\])/gi,"<a href='$1'>$2</a>");
document.write(r);
I guess you may also do like;
var str = "[s=http://stackoverflow.com/questions/ask?title=Javascript%20replace%20a%20string]Text[/s]",
res = str.replace(/\[s(.+)\](.+)\[\/s\]/, "<a href$1>$2</a>");
console.log(res);

Writing special characters in JavaScript

I am still studying, my iframe is not function as I want, can you provide some advice?
(function($){ function overlay($img, opts){ var floating = opts.float || 'left'; var rgba = opts.rgba || '236,240,241,0.8'; var color = opts.color || '#ffffff'; $img.wrap('
'); $wrap = $img.parent(); $wrap.css('float',floating); $overlay = $('
'); $overlay.addClass('overlay'); $overlay.css('background','rgba('+rgba+')'); $links = $('
'); $overlay.append($links); $facebook = $('
') $facebook.html(''); $links.append($facebook); $overlay.css('height',$img.attr('height'));
$overlay.css('width',$img.attr('width')); $links.css('margin-top', (parseFloat($img.attr('height'))/2.1)+'px'); $overlay.css('margin-top',$img.css('marginTop')); $overlay.css('margin-bottom',$img.css('marginBottom')); $overlay.css('margin-left',$img.css('marginLeft'));
$overlay.css('margin-right',$img.css('marginRight')); $overlay.css('padding-top',$img.css('paddingTop')); $overlay.css('padding-bottom',$img.css('paddingBottom')); $overlay.css('padding-left',$img.css('paddingLeft')); $overlay.css('padding-right',$img.css('paddingRight'));
//Add links $img.before($overlay); } $.fn.socialpic = function(opts){ var opts = opts || []; $(this).each(function(){ overlay($(this), opts); }); return this; } }(jQuery));
Try using the HTML entity code for the special character you want to write. In this case, &bullet;
I ready change spesial carater fungsion overlay only detect txt fungtion
$facebook.html('');

How to get the parameter value from URL in Jquery?

Hi all i have an url where i need to get an parameter from the url
var URL="http://localhost:17775/Students/199/Kishore"
//here from the url i need to get the value 199
this is what i had been trying but the value is null here
function getURLParameter(name) {
return parent.decodeURI((parent.RegExp(name + /([^\/]+)(?=\.\w+$)/).exec(parent.location.href) || [, null])[1]);
};
$(document).ready(function() {
getURLParameter("Students");
//i need to get the value 199 from the url
});
jQuery is not needed for this, though it could be used. There are lots of ways to skin this cat. Something like this should get you started in the right direction:
var URL="http://localhost:17775/Students/199/Kishore";
var splitURL = URL.split("/");
var studentValue = "";
for(var i = 0; i < splitURL.length; i++) {
if(splitURL[i] == "Students") {
studentValue = splitURL[i + 1];
break;
}
}
Here's a working fiddle.
Edit
Based on the comments, indicating that the position will always be the same, the extraction is as simple as:
var url = "http://localhost:17775/Students/199/Kishore";
var studentValue = url.split("/")[4];
This is what you're looking for since the URL parameter will keep changing:
http://jsbin.com/iliyut/2/
var URL="http://localhost:17775/Students/199/Kishore"
var number = getNumber('Students'); //199
var URL="http://localhost:17775/Teachers/234/Kumar"
var number = getNumber('Teachers'); //234
function getNumber(section) {
var re = new RegExp(section + "\/(.*)\/","gi");
var match = re.exec(URL);
return match[1];
}
I would do the following:
var url = "http://localhost:17775/Students/199/Kishore";
var studentValue = url.match('/Students/(\\d+)/')[1]; //199

JavaScript, advanced .replace()

function changeText(getString){
var smiles_from_to = new Array();
smiles_from_to[":)"] = "ab"; smiles_from_to[":-)"] = "ab";
smiles_from_to[":("] = "ac"; smiles_from_to[":-("] = "ac";
smiles_from_to["B)"] = "af"; smiles_from_to["B-)"] = "af";
smiles_from_to[";("] = "crygirl2"; smiles_from_to[";-("] = "crygirl2";
smiles_from_to[":-*"] = "aw"; smiles_from_to[":*"] = "aw";
smiles_from_to[":D"] = "ag"; smiles_from_to[":-D"] = "ag";
smiles_from_to["(devil)"] = "aq"; smiles_from_to["(wtf)"] = "ai";
smiles_from_to["(sos)"] = "bc"; smiles_from_to["(boom)"] = "bb";
smiles_from_to["(rofl)"] = "bj"; smiles_from_to["xD"] = "bj";
smiles_from_to["(music)"] = "ar"; smiles_from_to["(angel)"] = "aa";
smiles_from_to["(beer)"] = "az"; smiles_from_to["(omg)"] = "bu";
smiles_from_to["(dance)"] = "bo"; smiles_from_to["(idiot)"] = "bm";
smiles_from_to["(clap)"] = "bi"; smiles_from_to["(gotkiss)"] = "as";
var replaced = getString;
for(var key in smiles_from_to){
replaced = replaced.replace(key, "<img src='"+chrome.extension.getURL("images/"+smiles_from_to[key]+".gif")+"' />");
}
return replaced;
}
Hi everyone ,I need to optimize code for something more simple, so try to avoid for loop..
"var replaced" is a huge html code (content of div that contains 100 lines of messages with date, username, userinfo(tooltip), message,.....)
This code is a piece from my chrome extension. so i cant do it php side.
You can use a single giant regex, of the form /:\)|:\(|.../g, then pass a callbacka as the replacement that looks up the match in your lookup object.

Jquery finding patterns in string

I need to find path information from a string using jquery and push the results into an array.
The string output looks like;
"var rsr = Raphael('rsr', '270', '266');
var path_a = rsr.path('M144.869,199c0,7.659-5.479,13.139-13.14,
13.139 c-7.659,0-14.598-5.479-14.598-13.139s6.209-13.139,13.869-
13.139S144.869,191.341,144.869,199z'); path_a.attr({fill: 'non .... etc"
I need to retrieve every occurrence of the path information with in rsr.path() ;
How would i go about achieving this? using $.each on my string with a regex?
thanks cam
JavaScript will let you do this with a regular expression:
var s = " var rsr = Raphael('rsr', '270', '266'); var path_a = rsr.path('M144.869,199c0,7.659-5.479,13.139-13.14, 13.139 c-7.659,0-14.598-5.479-14.598-13.139s6.209-13.139,13.869- 13.139S144.869,191.341,144.869,199z'); path_a.attr({fill: 'non .... etc";
var regex = /M144\.869(.+?)869,199z/g;
var matches = regex.exec(s);
matches[0] then contains the capture group.
i found this worked..
$(document).ready(function(){
$('form.svg-convert').submit(function(event){
var content = $(this).find('textarea').val();
process(content);
event.preventDefault();
})
})
var process = function(c){
var content = c,
paths = [];
var contentSplit = content.split('path(');
contentSplit.shift();
$.each(contentSplit,function(i,v){
var path = v.split(')');
path = path[0];
paths.push(path);
});
}

Categories

Resources