I have a product with multiple color variation.
What I am trying to do is to only show the photos of the selected color on thumbnail. For example, for the same chair, there are blue, black, red and green color variations. When the red one is selected, the other photos of other colors will disappear in the thumbnail.
I made it working the desktop version using css, however, on the mobile version, I have not had any luck with the slider, I think I should try to match the selected color with the color attribute, and remove the data-slick-index attribute of the unselected ones so they will not appear on the thumbnail, but I am not sure why my codes are giving me errors.
$(funcion() {
$('li.product-single__thumbnails-item').each(function(){
var $mobilemodelselected = document.getElementById("FeaturedImage-product-template");
var $mobilemodelcolor = $mobilemodelselected.getAttribute("color-option");
var $mobilecolorcheck = $(this).attr('color-option');
if ($mobilemodelcolor != $mobilecolorcheck) {
$('li.product-single__thumbnails-item').removeAttribute('data-slick-index');
}
});
});
Related
Well I have been working with some vehicle route timelines in which I show a timeline of vehicles using a range slider the problem is first I only need to manage the move and stop vehicle cases only in which I'm using this react-timeline-range-slider package which I totally change its CSS its only show one color but I change the disabled color to red to show that vehicle is stopped the problem is now I need to deal with idle and Overspeed case also, So I need to make the custom range slider with dynamic multiple background color
<TimeRange
error={error}
step={60000}
selectedInterval={selectedInterval}
timelineInterval={[startTime, endTime]}
// onUpdateCallback={this.errorHandler}
onChangeCallback={this.onChangeCallback}
onUpdateCallback={this.onUpdateCallback}
disabledIntervals={stopIntervals ?? disabledIntervals}
ticksNumber={6}
formatTick={(ms) => {
return moment(new Date(ms)).format('hh:mm a');
}}
/>
style.css
.react_time_range__track__disabled {
background: #dc3939 !important;
}
related to this question but it's in jquery and I need dynamic background color in this its static
colors Related question
Something like this but with a more dynamic multiple background colors
I have a container with a light blue background on my page and I would like for the background to get sequentially darker with each click. At this point, I'm happily setting my array of colors manually (we'll leave that question for another day) but I'm unable to get the background color to change or iterate over the array like I would like.
Currently, I'm getting alerts that there was an error in parsing my background color. I've tried setting background-color for .content in the css document and removing it, but neither way works (except if I remove it, then there's no background color at all)
Here's a rough sense of the code I have so far. I built it based on this jsfiddle from another thread, though it does not match entirely: http://jsfiddle.net/arunpjohny/3eGM5/
$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#the text in this div also changes on click, so here's my animation for that.
#This is working fine, but I figured I'd include it just to be safe
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Is there an obvious solution to this that I'm missing? I'm still pretty new to jQuery and putting everything together, so any advice or any direction you can point me in would be greatly appreciated!
Your color isn't being animated because you need to use the jQuery Color plugin to animate colors.
So you'd need to include the jquery color plugin in your markup and then change your animate code to look similar to this.
$("#block").animate({
backgroundColor: $.Color(blues[counter++])
}, 1500 );
Ive got a slider with 3 circles at the bottom, when picture is displayed, the correct circle background must be turned to green, correlating to the correct image. Ive got it working, but when user clicks on a new circle, to change image, the old background color remains in place and does not disappear, as you can see from the picture example.
In the above example, the page loaded with the middel image highlighted, when user clicked the right circle the image changed, and highlighted the right circle (as it should) BUT the middle buttons highlight color remained in place...What am I missing here? Code follows:
$(document).ready(function(){
$("a").click(function(){
$("iLink").removeClass()
$(this).addClass("over")
}) ;
});
.over {
background:#008000;
}
<img id="i1" src="images/dot.png"/>
<img id="i2" src="images/dot.png" />
<img id="i3" src="images/dot.png" />
what is iLink?
$("iLink").removeClass()
change to
$('a').removeClass()
why need different class?
select that id and associate condition which one id is going to be selected than use css property of jquery or css function.
Change
$("iLink").removeClass()
to
$("a[class^='iLink']").removeClass()
because the a tags contains different classes but they all start with same name iLink
I am a javascript beginner. I am working in indesign CS6. I have assigned paragraph and character styles to all the fonts being used throughout my document. Using character styles I have changed the color of some type to be purple. The purple text is being used to call specific attention to that text. However I want to be able to toggle on and off the purple text. When I toggle off the purple I want the text to change to gray. I do need to be able to change it back to purple as well. Is there anyway to do this using script?
Thank you!
You can create a dedicated swatch and change its color components to fit your taste.
All references e.g. from within styles will follow.
// assuming the swatch is already created
var swatch = app.activeDocument.swatches.itemByName("purple");
swatch.properties = {model:1886548851, space:1129142603, colorValue:[0, 0, 0, 30]};
The following script changes the internal color setting of the specified character style, from a 'purple'-named swatch to a 'grey'-names swatch, and vice-versa.
var myDoc = app.activeDocument;
var charStyle = myDoc.characterStyles.item('My Character Style');
var purple = myDoc.colors.item('purple');
var grey = myDoc.colors.item('grey');
if (charStyle.fillColor == purple)
charStyle.fillColor = grey;
else charStyle.fillColor = purple;
If it's set to Purple then it changes to Grey, and if it's set to Grey it changes to Purple.
(change the swatch names and character style to suit your needs)
you can try this :
http://forum.jquery.com/topic/toggle-change-row-color
try to create a class for your "purple text" , and add/remove the class to change the colors.
there is a similar question at this link :
How do you toggle links to stay a certain color until clicked again
I've been given a design to build that uses a tabbed navigation structure, which I've built thus far using jQuery UI's tabs plugin.
So far, so good. Alas, I'm trying to style the tabbed element itself such that the currently selected tab (li.ui-tabs-selected) has a white background and the two other tabs have a green background -- but, and here's the sticky part, each has a different shade of green.
Put another way:
I have three list elements, all with class .ui-state-default. The selected one is given the extra class .ui-tabs-selected and is white; the unselected ones are two shades of green, with the lighter shade always further to the left, and no two tabs the same colour (i.e., one each of white, dark green and light green), regardless of which is selected. How do I make the non-selected tabs two different colours when they both have the same classes?
Thanks!
So, what you need is this:
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs ul li').each(function(count) {
$(this)
.removeClass('tab0 tab1 tab2 tab3 tab4')
.addClass('tab' + abs(ui.index - count));
}
});
The class tab0 is for the selected tab, tab1 for the one next to it, and so on.
What this does is every time a tab is selected, remove all classes from the li and add one based on the (ui.index - count). This is 0 if ui.index = count (the selected tab is the one we are currently handling), 1 if the distance is 1, and so on.