Dear Sirs,
Happy new year,
Is it possible to make a button perform double function on a click (like open a page and hiding or closing a content box) when the button is clicked ?
I have already achieved the 1st function (opening a page) by linking it to the page address using button settings but I need it also to close the content box which the button is clicked.
Best Regards
Ahmed
You can have an onclick event handler for the button which does both things:
export function button_onClick(event) {
$("#box").hide(); // first close box
wixLocation.to("/site-page"); // then can redirect to other page
}
Thanks for your reply, will try it
@ahmedfghamry Just make sure that the button isn’t linked to the new page. Do the redirection in code using wix-location.to() .
@yisrael-wix will do thanks
@yisrael-wix Hi, so if I have the following menu buttons and boxes :
Brands ; #button 2, #box 1 ,
Men : #button3 , #box2
Women: #button18, #box3
Exclusive :#button48 , #box9
kids: #button50, #box8
and I need a code to do the following :
When I hover on a button I need the box of this button to open and all other boxes to close
for example when I hover on button 2 I need box 1 to open and boxes 2, 3, 9 and 8 to close
I will use the code with other buttons to close other boxes alternativelly
So the code should be :
export function button_onHover(#button2) {
$(“#box2,3,9,8”).hide(); // first close box
$(“#box1”).open(); // opens box1 ;
}
Is this correct ?
Nope you need to have each one as a separate element, plus you would need to use MouseIn and MouseOut.
Although note that onMouse won’t work with mobile devices obviously, so you can either remove the function for mobile devices or change it to onClick only.
The other option is to make your code up so that the onMouse functions are written for desktop only with the if else part of the code applying to mobile only. See the last two links below for more info about code that only runs on mobile or desktop.
So, back to the code for all your elements, each one will have to be written in the code like this:
export function button2_onMouseIn() { //You will need to make sure that onMouseIn event is on in the properties panel for this to work
//or
$w("#button2").onMouseIn( () => { //This does the onMouseIn inside the code so no need to set it up in the properties panel for the element
$w("#box1").show();
$w("#box2").hide();
$w("#box3").hide();
$w("#box8").hide();
$w("#box9").hide();
}
//Need onMouseOut to tell page what to do when mouse is moved off the button.....
export function button2_onMouseOut() {
//or
$w("#button2").onMouseOut( () => {
$w("#box1").hide();
$w("#box2").show();
$w("#box3").show();
$w("#box8").show();
$w("#box9").show();
}
//rest of code to enter
As you will have a lot of code to add for this to work, an easier option if it is possible on your page, is to put everything in a strip or a container, so that you only have to hide or show the strip and not every element on the page.
You might have already done this with the boxes, however it is much easier having everything grouped so that you only have to close one strip or container etc instead of everything.
Plus, you could always look at changing the boxes and putting them as separate lightboxes instead so that they show up when the button is hovered over or clicked instead. That way you have less on your page and you can position the lightboxes to show up in a certain area of the screen too.
Take a look at this page for example:
https://www.wix.com/code/home/example/Hide-and-Show-Elements#
Plus also the API’s for the others, like Yisrael has already posted above for the wixLocation.
https://www.wix.com/code/reference/wix-window.lightbox.html
HiddenMixin - Velo API Reference - Wix.com
ClickableMixin - Velo API Reference - Wix.com
https://www.wix.com/code/reference/$w.Button.html
Velo: Reacting to User Actions Using Events | Help Center | Wix.com
Velo: Writing Code That Only Runs on Mobile Devices | Help Center | Wix.com //Note that this code for run on mobile device does only work properly on the live site, it might not show correctly on preview, however it does work when site is live.
https://www.wix.com/code/home/forum/community-discussion/need-to-remove-mousein-event-from-mobile-mode
What if I want this to link to an external page instead?
As stated in the wix-location.to() API :
http(s)://: An external web address.
Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .
This is an old post and is being closed.