I am using: 'react-bootstrap'
handleMouseDown(e){
// HOW TO
}
<Navbar brand='React-Bootstrap' inverse toggleNavKey={0} onClick={this.handleMouseDown}>
<Nav right eventKey={0}> {/* This is the eventKey referenced */}
...
</div>
All works but the NavBar is not collapsing, du you know how to make it collapse when selected?
Thanks
I was able to solve this by wrapping the entire header in my own component and then maintaining state to hide or show the menu. Then you can just hook into the props of the navbar to show/hide and the onToggle lets you add your own function to set state with.
Example:
<Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} onToggle={() => this.toggleNav()}>
Hope this helps. If you need more sample code let me know.
Related
I would like to give users the ability to hide the filters sidebar so that it appears and disappears at the push of a button. Is this possible?
Thanks.
By default, this feature is not included in the PrestaShop, but you can create it.
Add the new button for example to the themes/classic/templates/catalog/_partials/category-header.tpl
<button class="btn" id="show_hide_filter">Show/hide filters</button>
and with manipulate the DOM with jQuery
document.addEventListener("DOMContentLoaded", function() {
$('#show_hide_filter').click(function () {
if($("#left-column").is(":visible")){
$("#left-column").hide();
$('#content-wrapper').addClass('col-lg-12');
}else{
$("#left-column").show();
$('#content-wrapper').removeClass('col-lg-12');
}
})
});
I'm new to React hooks here, I've a sidebar I want to update the selecetedIndex to the index selected for that ListItem i.e., when I select an item I want to update selectedIdx to index to show it selected. I'm doing something wrong.
<ListItem button key={index}
selected={selectedIdx===index} // to show selected need to update
onclick={setSelectedIdx(index)}
>
<ListItemIcon>{v.icon}</ListItemIcon>
<ListItemText primary={v.text} />
</ListItem>
let [selectedIdx,setSelectedIdx]=React.useState(0);
This way second try I did but not results:
<ListItem button key={index}
selected={selectedIdx===index}
onclick={handleSelectedIdx(index)}
>
<ListItemIcon>{v.icon}</ListItemIcon>
<ListItemText primary={v.text} />
</ListItem>
function handleSelectedIdx(i){
setSelectedIdx(i)}
I'm new I don't know how do we do this.setState in hooks. Both the ways it failed can anyone please let me know were I'm going wrong. Any help appreciated.
Updates: here I don't use:
{()=>{handleDrawerToggle}}
Still the following works why is that so? Can you please let us know?
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
/>
function handleDrawerToggle() {
setMobileOpen(!mobileOpen); }
const [mobileOpen, setMobileOpen] = React.useState(false);
The problem in you code is that you are not passing a function to onClick, rather a value returned by handleSelectedIdx/setSelectedIdx and since you set a state a re-render is triggered causing the function to execute again on the next render. React internally prevents this loop and warns you.
The solution is to write your onclick like
onClick={() => handleSelectedIdx(index)}
or even
onClick={() => setSelectedIdx(index)}
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I want to add some animation to existing script I have right now. This is simple "go to div" script which goes to specific Div when someone change the option in dropdown list, but it functions "onchange" instead of link click. Now I would like to add animation, some smooth scroll when it goes to that Div because right now it just snaps to it and customer could be disoriented, thinking what happened.
This is my script inside HEAD
<script type="text/javascript">
function mylinkfunction(e) {
window.location.hash="#reservation_summary";
}
</script>
And this is the trigger mylinkfunction(); in dropdown list, among other "onchange" triggers.
<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">
I've found few solutions but everything was made for onclick and when someone click on a link, tried to implement some of these but it didn't work for "onChange" trigger.
I would be very thankful for some help.
Add jQuery to your project (if you haven't already!) and use jQuery's .animate() function along with scrollTop to achieve the desired effect.
So the select will look something like what you already have:
<select onchange="mylinkfunction();">
<option value="one">Uno</option>
<option value="two">Dos</option>
<option value="three">Tres</option>
</select>
...And mylinkfunction() will look like this:
function mylinkfunction(e) {
$('html, body').animate({
scrollTop: $("#reservation_summary").offset().top
}, 2000);
}
As stated in the title i want to remove the mousewheel capability of the dijit.form.Slider since it sometimes triggers the slider when scrolling the page and the cursor hits the slider.
But it seems that the onmousewheel events are connected in the dojo source and we cannot replace or modify the dojo files.
Anyone knows a short solution (optimally a declarative one)?
Thanks
The quickest way to do this would be to clobber the _mouseWheeled method of the slider widget.
Declarative example:
<div dojoType="dijit.form.VerticalSlider" name="vertical1" id="slider2" ... >
<script type="dojo/method" event="_mouseWheeled"></script>
...
</div>
Programmatic example, single instance:
dijit.byId('mySlider')._mouseWheeled = function() {};
Programmatic, ALL instances:
dojo.extend(dijit.form.HorizontalSlider, {
_mouseWheeled: function() {}
});
(This will cover both Horizontal and Vertical sliders since VerticalSlider inherits from HorizontalSlider.)