Nivo slider - replacing the bullet text 1,2,3 with words - javascript

I am using the Nivo slider on my site and wondered if it was possible to change the numbered bullet points (i.e. 1,2,3) to words by changing the javascript / adding some css?
I think it has something to do with this part of the code...
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
It would be great if i could have the words and style them using css.
I'm using the controlNav as buttons instead of bullets.
Please let me know if you need more info.
Thanks - really hoping someone can help me on this!

You could consider using CSS selectors to target the anchor by its rel attribute (which, for these anchors, appears to be the numeric one-based index). See CSS - style a link based on its "rel" attribute? for details on this topic.
An example of how you could achieve this using purely CSS would be:
a.nivo-control[rel='1'] { content: 'One!'; }
Of course, for this to work, you'd need to know in advance approximately how many slides you have.
If you prefer jQuery (which you already have since it's a prerequisite for using Nivo), you could do something like:
jQuery("a.nivo-control[rel='1']").html("One!");
(edit: The rationale here is that, rather than having to alter the base code for Nivo Slider, you can come by after the fact and make this modification; thus, when you update the plugin in the future your changes will hopefully work out of the box.)

I'm not familiar with the Nivo slider, but from what I can tell, the text is created in your last line of code:
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
this to be exact: >'+ (i + 1) +'<
In order to create text instead of a number, you would have to create this inside your else-clause:
//REST OF YOUR CODE...
} else {
var bulletText = '';
switch (i) {
case 0: bulletText='one'; break; //change this value to your desired word
case 1: bulletText='two'; break;
case 2: bulletText='three'; break;
//etc...
default: alert('bullet does not exist: '+i);
}
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><span class="bulletTxt">'+bulletText+'</span></a>');
}
In your CSS, you can style the text by adding
.bulletTxt {
//css rules here...
}
Only problem (maybe) is that the switch could be a long list, depending on how many bullet points there are.

Related

jQuery - dynamically create classes to match existing classes

I have 3 divs
<div class="box opacity1 red"></div>
<div class="box opacity.5 green"></div>
<div class="box opacity0 blue"></div>
I want to have jQuery look at the page, see these classes and then create three different classes.
opacity1{
opacity: 1
}
opacity.5{
opacity: 0.5
}
opacity0{
opacity: 0
}
So when a user adds a class, eg "opacity75" to an element. I want the jQuery script to find "opacity" and then find what number is attached to it, then use that number to create a matching css class eg. opacity75{opacity:0.75}
I have very little knowledge of JS. I need some help to start me off in the right direction.
This can save having loads of CSS classes.
var stylestring = "<style type=\"text/css\">";
$("div").each(function() {
$.each($(this).attr("class").split(" "), function () {
var class = this + " {";
//add style to string
class += "}";
stylestring += class;
});
});
stylestring += "</style>";
$(document.body).prepend($(stylestring));
This would be my approach to iterate through all classes used in divs all over the page and create the class, but you would need some kind of rule to build the style out of the actual class name at the point of //add style to string
I'm not sure how it is even possible to create CSS classes in jQuery but here is a piece of code that'll do what you're expecting
Edit
$(function() {
$('.opacity').each(function() {
$(this).css('opacity', $(this).data('opacity'));
});
});
And add data-opacity="XX" to your <div> tags.
JSFiddle
1) yor example, its not best way to set css via js
2) i think task is to set some styles to elements, so its not necessarily to create classes.
jquery can set styles to elements via .css("property","value") method
3) example of code, which might work
// get all elements which contains 'opacity' in class name
var opacityElems = $( "div[class*='opacity']" );
var elemClassName;
var elemOpacityValue;
// cycle through all this elements
opacityElems.each(function(i,elem) {
// write the class name of the current element as a string
elemClassName = $(elem).attr('class');
// remove first 7 simbols, so only last numbers left
elemOpacityValue = elemClassName.substring(7, elemClassName.length);
// because obtained in the previous one step is a string, then give her number
// ie "0.12" to 0.12
elemOpacityValue *= 1;
// set style to element
$(elem).css("opacity",elemOpacityValue);
})
p.s. i am sorry for the mistakes - English is not the native language

Matching proper colors of a div

I'm making a very simple minigame which idea is to pick the proper color of the figure you've seen for about a second or two by clicking one of the four divs with the id's circle1, circle2 etc. with the specific colors:
var odpowiedz_kolor = $('<div class="label id="gra">Jaki kolor miał następujący kształt?</br></br><ul class="inline">'+
'<div class="odpowiedz_pojemnik" id="' + wylosowane[losowa_z_wylosowanych_figur].figura + '"> </div></br></br>'+
'<ul class="inline">'+
'<li><div class="kolo" id="kolo1"> </div></li>'+
'<li><div class="kolo" id="kolo2"> </div></li>'+
'<li><div class="kolo" id="kolo3"> </div></li>'+
'<li><div class="kolo" id="kolo4"> </div></li>'+
'</ul></div>');
I've cut out the unnecessary code...
$('#kolo1').css('background-color', wylosowane[0].kolor);
$('#kolo2').css('background-color', wylosowane[1].kolor);
$('#kolo3').css('background-color', wylosowane[2].kolor);
$('#kolo4').css('background-color', wylosowane[3].kolor);
$(".kolo").on('click', function(){
var color = $('.kolo').find('#kolo').css('background-color');
I've set the colors as seen above. Now's the question how to retrieve the according colors 'cause I'm stuck on the click handler. I'd appreciate even the ugly but working solutions.
The scenario is:
you see 4 different figures with different colors for a couple of seconds
you now have to decide which one was it (if pick good/bad then...)
Thank you in advance.
You probably want to know the color of the figure that you just clicked, so I suggest you made this :
$(".kolo").on('click', function(){
var color = $(this).css('background-color');
}
JsFiddle : http://jsfiddle.net/F3HB5/
EDIT :
Based on your code, I have updated your jsFiddle to this one : http://jsfiddle.net/8LFR7/3/.
There were 2 main errors :
when you want to target an id, you have to put a # before the id -> $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color').
As you remove your figure before the test, you have to capture the color BEFORE you remove it and save it in some variable : here I have put it at the beginning of the setTimeout block : var targetColor = $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color');
Firstly a friendly advice, whichever native language you belong to, please use English for your code.
Now your solution: Well you need to match the background-color for the clicked circle with the triangle, so you can do the following to achieve this:
$(".kolo").on('click', function(event){
var id = event.target.id; // For the id, but that does not matter, you can get it using the class also or this
if($(id).css('background-color') == $('.odpowiedz_pojemnik').css('background-color')){
alert('Good!');
}
else{
alert('Bad!');
}
}

Cloud tags sorting and positioning in a fixed-width div

I have a div with a fixed width which contains 'tags' like the stackoverflow-tags.
Now, what's disturbing me, is that the Hallo Tag is in the last line, but it would fit in the first line. Like this:
The order of the elements is irrelevant. So, reordering would be an option.
Question: How can i achieve this? I'm currently using a <ul><li></li></ul> construct.
The nicest way would be a CSS-Way, but i guess it's up to JS to solve this problem.
Any ideas would be appreciated :)
UPDATE
JSFiddle: http://jsfiddle.net/CLj2q/
Got it: The jsFiddle is here
$(function() {
$('.as-close').click(function(e) { $(this).parent().remove(); });
DoTagSort();
});
function DoTagSort() {
var TheItems = [], TheHTML = '';
var TheLinks = $('.as-selections').find('li').each(function () {
TheItems.push($(this).text().slice(1));
});
TheItems.sort(function(a, b) { return b.length - a.length; });
var TheTag = '<li class="as-selection-item"><a class="as-close">×</a>';
while(TheItems.length > 1) {
TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
TheHTML = TheHTML + TheTag + TheItems[TheItems.length - 1] + '</li>';
TheItems.splice(0, 1);
TheItems.splice(TheItems.length - 1, 1);
}
if (TheItems.length) {
TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
}
$('.as-selections').html(TheHTML);
}
Assuming that the container for the tags is a set-width, and the tags themselves aren't (ie: they inherit their width from their contents, rather than us being able to give them a set-width) there's not a huge amount that you can do from the CSS perspective without breaking and re-ordering the flow of the markup.
If the markup is being generated server-side I'm sure you could calculate widths and re-order prior to pushing the markup into the view. If not, you're a bit stuck without using JavaScript.
Given that the order requirement appears to be purely appearance-based (ie: not functional), there's no harm in enhancing the standard float view that you've displayed in your screenshot with JavaScript. This means that JS-enabled visitors will get an 'enhanced' view (with the elements ordered nicely), whilst non-JS users would still have a fully-functional tag cloud, albeit in a slightly less-organised fashion.
jQuery Masonry or Isotope would probably do would do exactly what you need.
This is off the shelve solution. And a bit of a cheat with Masonry (notice the columnWidth: 1).
$('.as-selections').masonry({
itemSelector: '.as-selection-item'
, columnWidth: 1 });
http://jsfiddle.net/D5ud7/1/
I guess you could find more appropriate library for this or better html form for masonry to crunch.

how might I disable a div when the data inside it reaches 0 possibly using an if else?

I have a snippet of javascript that displays the amount of sessions available for an event
for ( var j in data.events[i].sessions ) {
first_session_id = !first_session_id ? data.events[i].sessions[j].id : first_session_id;
session_html +=
'<li id="session_row_'+ data.events[i].sessions[j].id +'">'+ data.events[i].sessions[j].time+
'<div class="right">'+ data.events[i].sessions[j].available +' sessions remaining</div></li>';
}
at the moment when the sessions become empty or are all booked the value -1 is displayed. What I would like to do is add an if else statement that basically disables or blacks out the .right when we get to 0?
Can anyone advise me on how this might be done?
Regards
Kyle
Unless I'm missing something, you already wrote the pseudocode:
if (data.events[i].sessions[j].available===0) { $('div.right').hide(); }
if you're using jQuery (which you should :0) then http://api.jquery.com/hide/ will do the trick, and show to revert.
If jQuery is not an option, you have to do something like this:
document.getElementById("idElement").setAttribute("class", "hide");
And then in your CSS do a .hide { display: none;}
You then also have to cater for showing this again (I think). So on anything else than 0, do the same as above, but use e.g. .show { display:block; }

jQuery determine if selected element's CSS has certain property via identifying attribute

I have a UL list inside that UL list is a handful of LI's that all have "rel" attributes as identifying tokens as the ID/Class tags have been used for other reasons. Anyway this is what I am attempting currently
if($('#column1').find('li:[rel='+theElements[i]+']').css({'opacity':0})){hideit = true;}else{hideit = false;}
Which finds the right column, but then turns around and hides the whole column. I definately feel as though I am approaching this the wrong way. I tried .is(':visible') but I don't think that worked properly for me. Anyone have an Idea?
What I am doing based on the "hideit =" part is building a JSON string to control the layout and save things for a later date for my users.
You are setting the opacity instead of reading it. Do this:
if($('#column1').find('li:[rel='+theElements[i]+']').css('opacity') == 0) {
hideit = true;
} else {
hideit = false;
}
Sounds like you're looking for something like:
$(theElements).each(function()
{
var elem = $('#column1').find('li:[rel=' + this + ']');
if(elem.css('opacity') === 0)
elem.hide();
});

Categories