Jump to content

JavaScript to highlight the selected Button... need help


HITESH SAHOO

Recommended Posts

Hi All,

So here's the scenario :

I have two buttons ON and OFF which are connected to their relevant Bookmarks. So, for people to know what they have selected I need to highlight the ON or OFF button something like below screenshot, which I have achieved with below mentioned code. But the problem that I am facing is : Suppose I selectOFF and OFF is being highlighted, then when I move to Page1(First page) and return back to Page 2, the highlighted area changes back to ON which is incorrect. Highlightedbutton should remain the same(OFF) even if I navigate the page.

From my below code of "//Highlight default buttons" i have used ON as default highlighted button, but how to make default highlighted button specific to what I choose even if I navigate pages. Please help me. If there is any other way to achieve this rather than JavaScript, please let me know.Thank you in advance.

 

 

.on{

background-color: #ABFF16;

box-shadow: rgba(45, 163, 215, 0.5) 0 0px 0px 0px,

inset rgb(45,163, 215) 0 -2px 0px,

rgb(45,163, 215) 0 0px 7px;

}

 

 

 

 

 

 

 

 

$("#dayBtns input").click(function(){

$("#dayBtns input").removeClass("on")

$(this).addClass("on")

})

//highlight default buttons

$("#dayBtns input:first").addClass("on") // This section needs to be change according to buttons(highlighted) I choose, but for now i am using ON as default highlighted button.

Link to comment
Share on other sites

  • 4 weeks later...

Can you something as below,

1. Create an Input Field Spotfire property control as below

2. In your JavaScript, in the button click function save the input field value to the value of the button click

$("#selection input").val($(this).val()).blur();3. Now when you navigate between pages, since the JavaScripts execute again, you can write a $(document).ready() which is execute when you navigate back to the page, in this function you can read the value of the Input Property control and based on the Hightlight your button.

4. You can also set the display to none for the input property control so that only your buttons are visible

Link to comment
Share on other sites

  • 1 year later...

Hello Shandilya Peddi,

 

Can you please give me an example for step 3 of your reply

 

Everything else is perfect so far, I have created the input field which reads the selection, inserted the script in my Java, but i have still to make it execute again. Below an example of my script, for now it will highlight the button selection, but not keep it while switching between pages.

 

java_button.gif

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...