I have an alert is it´s showed in the navbar. What I would like is achieve an effect where the alert arrive form the left of the navbar, and when I close, instead of fade out just disappear from the right.
I dont know if that´s an effect that bootstrap can provide by the css framework.
Here is my current code
the html:
<div id="msgbox_success" class="alert alert-success alert-position hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<spring:message code='msg.saved'/>
</div>
and here my js
function showMessageBoxSuccess() {
console.log("Displaying msgbox_success");
if ($("#msgbox_success").is(":visible")) {
$("#msgbox_success").hide();
}
$("#msgbox_success").removeClass("hidden");
$("#msgbox_success").show();
$("#msgbox_success").delay(callbackAction.SUCCESS_TIMEOUT).fadeOut();
}
Like I said I would like to have an animation instead use show, to show the alert from the left. And when I click in close another animation instead hide, to hide the alert moving it to the right.
Regards.
I wanted to give this another shot. I setup a JSFiddle example that I think is similar to what you want. It has JS and CSS that will get the job done. In the example, I have a button that triggers the alert to come in from the left. Then, clicking the close button in the alert will send the alert offscreen to the right.
$("#theButton").click(function(){
$("#msgbox_success").removeClass("hidden").attr("aria-hidden", false);
$("#msgbox_success").animate({left: '75%'}, "slow");
});
$(".close").click(function(){
$("#msgbox_success").animate({left: '150%'}, "slow");
var adjustMsgBox = function(){
$("#msgbox_success").addClass("hidden").attr("aria-hidden", true);
};
setTimeout(adjustMsgBox, 2000);
});
There might be a better way to do this, but I think this will point you in the right direction. The messageContainer will be your navbar, so adjust CSS accordingly. Hope this is more of what you are after.
There is a Bootstrap plugin that you could maybe take advantage of called Bootstrap Notify (formerly Bootstrap Growl). Another idea is Bootbox.js, but that is more modal driven. Hope this helps.
Related
Say I have an element with the following structure:
<Link to={`/games/${game.id}`}>
<GameInfo/>
<CustomButton/>
</Link>
Is it possible for the button inside the link to behave independently from the link beneath without using the z-index css property? I'd like to do this while keeping the current behaviour in which hovering the button triggers both the hover effect for the button and for the link below.
Right now, if I click on the Add to Library button, the game gets added to the library but the Link below also gets triggered and the game profile page is open, which is not intended.
The only solution I can think of so far is something like this:
<div> // <= move link hover effects here
<Link to={`/games/${game.id}`}>
<GameInfo/>
</Link>
<CustomButton/>
</div>
But it's not ideal, because I would still like the area around the button to be part of the Link (so hover and the link itself work in the areas shown below).
Is z-index the only solution?
You can make use of preventDefault and stopPropagation to achieve this inside button click use like this below
<Link to="/game">
<div>
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
//function to do your stuff
}}
>
Click Me
</button>
</div>
</Link>
You can check the demo here
https://codesandbox.io/s/adoring-sun-dwnde?fontsize=14&hidenavigation=1&theme=dark
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.
I have an image that I will use as the button. I need some code that will make the page scroll smoothly down 400px every time the image is clicked.
I think JQuery or Javascript would do the trick, I am not really sure because I do not know them.
It would be even better in fact, if instead of button, I could just have a keyboard shortcut. Just like Google on Google+, "J" and "K" are used to move up and down the posts. This is exactly what I am trying to achieve. Every post in my site will be the same height so that might make it easier to code.
Just bind an animate function to the click event of your image or button and let it animate the scrollTop property with 400.
For example, place this button on your page:
<input type="button" value="Scroll" id="scroll" />
And use this piece of JavaScript:
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
Just make sure jQuery is loaded and it will work.
Load jQuery by adding this just before the body end tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And the best way to include the JavaScript snippet is to place the following between the script rule above and the body end tag.
<script type="text/javascript">
$(document).ready(function() {
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
});
</script>
I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.
I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them
<input type="button" value="Proceed">
<input type="button" value="Cancel">
Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.
Your "button":
<a class="button" id="yourButton">Button</a>
Some very basic CSS to toggle the background and text color on touch:
a.button {
color:#fff;
border:0px;
padding:5px;
background:#000;
}
a.button-active {
background:#fff;
color:#000;
}
And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:
x$('.button').on('touchstart', function(e) {
x$(e.currentTarget).addClass('button-active');
} );
x$('.button').on('touchend', function(e) {
x$(e.currentTarget).removeClass('button-active');
} );
This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.
Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.
Here's a page showing the button glow effect (when pressed).
Update:
Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)
I have a Jquery Mobile controlgroup with two buttons:
<div data-role="controlgroup" data-type="horizontal" class="headerMenu iconposSwitcher">
EAN
Style
</div>
On larger screens (PC, iPad) I want the text to show ~ data-iconpos="left".
On smaller screens (Mobile, Smartphone) there is little space, so I don't want to display the text ~ data-iconpos="notext"
I can use the "refresh" function on select-menus. Is there a similar way to refresh controlgroups or button elements?
I tried it like this, changes iconpos, but does not rebuild the button.
if ($('body').width() < 275)
{
$(".iconposSwitcher a").attr('data-iconpos','notext');
$('.headerMenu').controlgroup('refresh', true);
}
Thanks for hints & Rgs
EDIT:
This works:
$(".iconposSwitcher a").removeClass('ui-btn-icon-left').addClass('ui-btn-icon-notext');
Easier than thought...
EDIT:
For div elements (controlgroup with input):
$(".iconposSwitcher-div a").attr('data-iconpos','notext').removeClass('ui-btn-icon-left ui-btn-icon-right').addClass('ui-btn-icon-notext');
maybe its too late but for those who come here with same question:
You can use .trigger('create') on any Element to trigger 'Create' event to do JQM magic on elements.
I've solved it this way:
$button = [YOUR CONTROLGROUP DIV]
$button.find('a').button();
$button.controlgroup();
For buttons, use the buttonMarkup() method instead of controlgroup()
In general, I prefer the usage of the page() method, see this post
Jquery Mobile: updating a form more than once
What works for me is calling controlgroup() twice; once to initialize, next to refresh, eg:
// refresh group
$('#checkboxes').controlgroup().controlgroup('refresh');