Develop Reference

How to show the icon of only active box by clicking on this box

Please see image, I'll have to show the arrow icon by clicking on the box, I have tried but right now it's showing in all boxes.
How do I make it individually shown for each box?
This is my code
$('.date-box').click(function(){
$('.date-box').removeClass('active-item');
$(this).addClass('active-item');
$('.next-icon').show();
});

You need to specify that you only want to show the icon in the box that is currently clicked, like you did with the active-class.
Example: $('.next-icon', this).show();

$('.next-icon').show() will show all elements that have the class next-icon. You need to specify in what scope do you want to find that class.
Try using this if next-icon class lies within date-box
$('.date-box').click(function(){
$('.date-box').removeClass('active-item');
$(this).addClass('active-item');
// Hiding all and showing just the current one
$('.next-icon').hide();
$(this).find('.next-icon').show();
});

Spotfire button change color when clicked / selected

I am trying to make the buttons created in Spotfire to change color or fade when they are clicked. Basically we want the buttons to show they are marked when selected.
What is the best way to do this?
Thank you for your time.

If you're editing the HTML around a button, it looks like you can make it bold or change the size of the text, though you can't change the color (Or, oddly enough, underline or italicize the text in the button).
So copy the html code for the text area into a string, and on your script for the button click, add the following general setup.
Example Initial HTML:
<p><SpotfireControl id="724c2b260722473caecaef18a2b3b695" />
</p>
Example Code (vTextArea is a parameter of Type Visualization referencing the text area your button is in):
from Spotfire.Dxp.Application.Visuals import VisualContent
from System import Guid
page = Application.Document.ActivePageReference
fullhtml = '<p><font size="3"><b><SpotfireControl id="724c2b260722473caecaef18a2b3b695" /></b></font></p>'
ta=vTextArea.As[VisualContent]()
ta.HtmlContent=fullhtml
I know this doesn't do exactly what you were asking for, but it does succeed in showing the user which button they've clicked.

I need to change a javascript code

I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.

You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle

You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>

Bootstrap collapse section and expand another with one button

I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.

You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/

Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});

How to use an Image-map with an image-sprite?

So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.

Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent

Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.

You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.