I'm trying using jQuery Spinner but, i would like to overrides the HTML result.
Basically change the follow button html structure:
<a class="ui-spinner-button ...>
<span class="ui-button-text">
<span class="ui-icon ui-icon-triangle-1-n">?</span>
</span>
</a>
by:
<button type="button" class="ui-spinner-up" tabindex="-1"></button>
Have any way to do it, without change the original script (jquery.spinner.js)?
Regards,
Giolvani
I know this question has been answered already, but if anyone is interesed you can override the _buttonHtml class (which renders the buttons) using the widget factory now. It's fairly simple to do.
You can do this by using the following syntax:
//Overriding the default buttons with our own classes
$.widget("ui.spinner", $.ui.spinner, {
_buttonHtml: function () {
return "" +
"<button type='button' class='ui-spinner-up' tabindex='-1'></button>";
}
});
//To call it, we simply instantiate like normal:
$("#myElement").spinner();
As always, you could instantiate with any options you would normally pass just fine
$("#myElement").spinner({min: '1', max: '10', numberFormat: 'n0'});
To call a custom namespace, you would use this:
$.widget("custom.myExtension", $.ui.spinner, {
red: function() {
this.element.css( "color", "red" );
}
});
//Instantiate it like so:
$("myElement").myExtension("red");
Easy breezy. In this example, I am overriding the default behavior for the jQuery UI spinner. The first argument is your custom name. The documentation suggests you name it in the custom namespace. So something like "custom.myButton" (whatever you like) would be acceptable here. The second argument is the base widget you are trying to overwrite. In our case, it is the ui.spinner. Then you provide the overridden method; if you look at the source code for the spinner, you can see that this method currently exists within the source, and we are simply overriding the default behavior.
As you can see in the second example, I extended the ui.spinner with my own namespace. Hope this helps anyone in the same boat.
Sources:
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
http://api.jqueryui.com/spinner/#method-_buttonHtml
$("#spin")
.spinner() //init the spinner
.parent() //grab the spinner wrapper
.find(".ui-spinner-button") //grab each button
.empty() //remove their children
.append("<div>Custom HTML</div>"); //add custom html
Or this: http://jsfiddle.net/smwMv/
$("#spin")
.spinner()
.parent()
.find(".ui-spinner-button")
.replaceWith(function(){
return $("<input>", {
type:'button',
'class':this.className, // preserve classNames
tabindex:-1
});
});
I don't exactly follow what HTML changes you want to make, but you can access the spinner's HTML with <spinner>.parent().find(...).
As an example, here's a fiddle that shows changing the up arrow to have an ugly red border: http://jsfiddle.net/W7ayu/
Excerpt:
$("#spin")
.spinner()
.parent()
.find(".ui-spinner-up")
.css("border", "solid 1px red");
It also shows the outputted HTML.
Related
I'm trying to change the attribute of an object with removeAttribute to take away the hidden status of it but so far nothing seems to work.
My code seems to have no effect. Am I doing something wrong?
function changePage() {
document.getElementById.("p2");
p2.removeAtribute.("hidden") ;
}
I've also tried it all on one line as well like so
function changePage() {
document.getElementById.("p2").p2.removeAtribute.("hidden") ;
}
I've never seen the use of dots before opening parentheses.
E.g.
document.getElementById.("p2").p2.removeAtribute.("hidden") should be document.getElementById("p2").removeAtribute("hidden")
(You are also referencing the element by id after you just retrieved it, which is unnecessary.)
Your first example didn't work because you retrieved the element and did nothing with it, then tried to access a p2 variable that wasn't declared. Again, you also have the . before parentheses.
Here's the js example:
function changeVisibility()
{
var p2 = document.getElementById('p2');
switch (p2.style.visibility)
{
case 'hidden':
document.getElementById('p2').style.visibility = 'visible';
break;
case 'visible':
document.getElementById('p2').style.visibility = 'hidden';
break;
}
}
<div id="p2" style="visibility:hidden">
test
</div>
<br />
<button onclick="changeVisibility()">
change visibility with basic js
</button>
And here's the jQuery example:
function changePage()
{
$('#p2').toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p2" style="display:none">
test
</div>
<br />
<button onclick="changePage()">
change visibility with basic js
</button>
The basic JS version uses the visibility style, and you can see that it doesn't collapse the element, it only makes it invisible.
jQuery has a nice built-in .toggle function that changes the display of the element. If it is hidden, it collapses the element. When the element is displayed, it is re-assigned whatever the display style is for that element. Building that in basic js would take a lot more work, as you are then tracking state (if you want to make the method reusable). You can make jQuery work similarly to the basic js version if you use the css properties, but toggle is quite nice and simple.
Your main issue is that you were mixing the getting of the element with methods that are only available on jQuery objects. I suggest reading the jQuery tutorials for basic accessors, which can get elements by id, class name, etc.
I have a button in a table that is cloning the current row and then clearing some of the values (which works without issue). However, one of the cells has a link that has an onclick event with some parameters
<td class="srcbtn"><a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>
I'm able to grab the button
if ($(this).hasClass( "srcbtn" ) ) {
var btn = $(this).find('.grid_button')[0];
console.log(btn);
}
Which gives:
<a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a>
What I need to do however is either remove one of the parameters in the onclick or even just change the parameter name, but the other parameters need to be remain. The function itself creates an iframe in a Literal control and builds the URL with the parameters, the function and parameter name is created dynamically from some database values, so I can't just clear and recreate it.
In this case, the &RID=4e60fd3d-1ab4-e711-80ec-0050568a179a needs to either be stripped out or even just replace the &RID= to &XRID= or similar so the code further along doesn't see a RID parameter passed.
I thought I could use .replace('&RID=', '&XRID=') but get an error that replace is not a function. So then I tried .text thinking I could use the replace on the text, but the text returns blank.
It'd be helpful if someone could show me how to modify the text of the onclick.
thanks
It will be much better for you to use so called "live" events from jQuery and HTML5 data- attributes. In this case your HTML code may look something like this:
<td class="srcbtn"><a class="grid_button" data-target="#MyLiteral" data-study="ABC" data-surid="3" data-sid="ABC01" data-lang="en-US" data-rid="4e60fd3d-1ab4-e711-80ec-0050568a179a"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>
and then into your script you may use something like:
$('table').on('click', '.grid_button', function (ev) {
ev.preventDefault();
var $e = $(this);
functionName($e.data('target'), $.param({
STUDY: $e.data('study'),
SURID: $e.data('surid'),
SID: $e.data('sid'),
LANG: $e.data('lang'),
RID: $e.data('rid')
}))
});
I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.
This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery
However, the suggested solution works just once. That is, I cannot use it in my switch statement like this:
switch(element.id)
{
case "t1":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_1);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
break;
case "t2":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_2);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
...
}
What happens is that the data-text attribute is set according to whichever case happens first and doesn't change afterwards.
How can I change data-text attribute of a Tweet Button as many times as I need?
Update: here's the page I'm working on: http://zhilkin.com/socio/en/
The Traits table can be safely ignored. What I want to do with the Sociotypes table is that when you click on a type, the data-text of the Tweet Button below the description on the right should be changed accordingly.
Right now it works like this: if I hover on or click "Don Quixote", then data-text is set to "... Don Quixote ...", and it stays the same if I click "Dumas" later. And vice versa: if I hover on or click "Dumas", then data-text is set to "... Dumas ..." and doesn't change if I click "Don Quixote". (Other types are empty at the moment.)
So, the Tweet Button is only changed the first time I run the script, but I need it to be updated as many times as the type changes.
I struggled with this for a couple of hours this morning, but finally got it working! The problem is essentially that you can only include the twitter widgets.js script once in the page, and that script evaluates the data-text attribute on load. Therefore, in your example, you dynamically set the data-text attribute before loading the script, which will work as expected. However, you can then make no further updates as the script has already run.
I saw this article suggesting you can call twttr.widgets.load() again at runtime to re-evaluate and re-render the buttons, however that didn't work for me. This is because that function re-evaluates <a> tags, not <iframe> tags!
So the solution, as pointed out here, is to completely remove the rendered <iframe> from the DOM, then make a new <a> element with all the appropriate attributes before calling twttr.widgets.load() to finally re-evaluate it and turn it into an <iframe>.
Please see this fiddle for a working example!
You can also use Twitter's createShareButton API call:
function callAsRequired(){
var nodeID = 'YourTwitterNodeID'
//Remove existing share button, if it exists.
var myNode = document.getElementById(nodeID);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
//Create button and customise
twttr.widgets.createShareButton(
'http://your.custom.url.here/',
document.getElementById(nodeID),
{
count: 'none',
text: 'Your custom tweet here'
});
}
since you are using each loop you can use if statements instead:
$(document).ready(function(){
$('a[data-text]').each(function(){
if (theCase == 1) {
$(this).attr('data-text', Text_Variant_1);
}
else if (theCase == 2) { ... }
})
});
i have below function which is being used to initialize a widget.
jQuery.fn.initPortlet = function( parent_component ,header , component ){
var o = $(this[0])
this.addClass("ui-widget ui-widget-content ui-corner-all")
.find(header)
.addClass("headertitle")
.addClass("align_center")
.addClass("defaultheadercolor")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.end()
.find(component);
};
what it does is append a minus icon at the top left corner of the widget.
i have some ajax call because of that this function get called multiple time and append a minus icon multiple times.
i am tring to re-write this function in such a way, so that how many time it's get called, append only one minus icon into header.
i tried fallowing approach but it didn't work.
var $minusthick = $('span.ui-icon ui-icon-minusthick');
$('div.div_header').find($minusthick).remove().prepend('<span class="ui-icon ui-icon-minusthick"></span>').end();
what i am tring is remove all span with class name span.ui-icon ui-icon-minusthick and finally append a minus icon, but it's not worked for me.
Edit
i am calling this function in this way-
$('.div_portlet').initPortlet('.div_portlet','.div_header','.div_content')
$('.div_portlet_inner').initPortlet('.div_portlet_inner','.div_header_inner','.div_content_inner');
html corresponding to this is-
html:
<div class="div_portlet" id="LINEITEM_HEADER" >
<div class="div_header"><%=hu.getFrameURL(82,83)%> Line Item Header Information</div>
<div class="div_content" id="LINEITEM_HEADER_CONTENT">
</div>
</div>
for second call html will remain same just classes will get change from div_portlet to div_portlet_inner, in the same way for other class.
i have written this function in a js file.
any help or suggestion so that i can achieve my goal will be highly appreciated.
Please guys help me out i got stuck at this point.
Thanks in advance!!!!!
Not sure what variable o is being used for - but the general point of my alteration below is to check to see if the class has been applied already, using the jQuery hasClass() function.
jQuery.fn.initPortlet = function( parent_component ,header , component ){
var o = $(this[0])
if (!this.hasClass('ui-widget'))
{
this.addClass("ui-widget ui-widget-content ui-corner-all")
.find(header)
.addClass("headertitle")
.addClass("align_center")
.addClass("defaultheadercolor")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.end()
.find(component);
}
};
ʞɔɐɯɹoↃɔW sǝɯɐſ gave a good solution to this problem, but here is an explanation why your attempt didn't work:
The first part of the selector 'span.ui-icon ui-icon-minusthick' is looking for a span with class ui-icon, as you intended, but the second part looks for an element of type <ui-icon-minusthick> which obviously doesn't exist. To select an element with multiple class names, add them all to the same selector just like you would in CSS:
$('span.ui-icon.ui-icon-minusthick')
Of course, the rest of you code would be a no-op since find($minusthick) will do nothing and therefore the rest of the jQuery chain will have no context in which to operate. This would (I think) work as you expected:
$('div.div_header').find('span.ui-icon.ui-icon-minusthick').remove().end().prepend('<span class="ui-icon ui-icon-minusthick"></span>');
The extra end() call returns the jQuery object to the first selector, in this case div.div_header and there is no need for the final end().