I have set up a slider with jquery ui. I want the handle of the slider to be hidden initially and only show up, after the user clicks on the slider. I managed to hide the handle by setting display to none in the ui-slider-handle class. However, I am not able to change it back later on.
Consider the following code snippet, based on https://api.jqueryui.com/slider/ example.
$(function() {
$("#slider").slider({
start: function() {
$(".ui-slider-handle", this).show();
}
});
var sw = $("#slider").slider("widget");
$(".ui-slider-handle", sw).hide();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>
Yes, you can hide the handle with CSS, to make it appear again would just mean over riding the CSS with an element style:
$(".ui-slider-handle").css("display", "block");
The example above is a bit more specific, yet essentially does the same thing. Once the Slider is initialized, you can call the widget method to access the various elements. We can use .hide() on the handle. When the User clicks on the Slider, this triggers the start event and we can .show() the handle at that time.
If you have multiple sliders, the ui-slider-handle class might be too ambiguous, so using the selector context will help.
Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).
See More:
https://api.jqueryui.com/slider/#method-widget
https://api.jqueryui.com/slider/#event-start
https://api.jquery.com/show/
https://api.jquery.com/hide/
https://api.jquery.com/jquery/#selector-context
Related
I have some AJAX loading in my app, and I thought it would be nice to have a loading icon, since there's a little delay. I grabbed some code from http://tobiasahlin.com/spinkit. The loading and hiding works fine, except that I have a logo in the header, which is a link to the root:
<%= link_to "#{app_name}", root_url, id: "logo" %>
Clicking the link takes you to the root, but the loading icon is visible. But if you reload the page, the icon is hidden, as desired. So there's something different about clicking the link.
The view:
<div class="spinner">
The CSS does not set the hidden attribute. If I set it, the spinner is always hidden.
The jQuery:
$( document ).ready(function() {
// hide spinner
$(".spinner").hide();
// show spinner on AJAX start
$(document).ajaxStart(function(){
$(".spinner").show();
});
// hide spinner on AJAX stop
$(document).ajaxStop(function(){
$(".spinner").hide();
});
});
I tried adding an onclick even to the logo. That fires first, then the page loads with the spinner visible. Any ideas what's wrong?
Terry, this is an accompaniment to the comment which helped you.
There are several things to fix:
You should keep your CSS hidden, using JQuery to make it visible.
You're currently hiding your spinner on DOM load with JQuery.
Although this will work, it adds unnecessary overhead to your application. Instead, you'll be much better to show the spinner when Ajax runs:
#app/assets/stylesheets/application.css
.spinner {
display: none; /* Use this instead of inline styles */
}
You should bind your spinner to on-page elements
You're currently binding the spinner to ajaxStart & ajaxStop. These are global functions, fired EVERY time Ajax runs.
This may work in a simple application, is bad practice in a more complicated system.
I would do the following:
#app/assets/javascripts/application.js
spinner = function(){
$(".spinner").toggle();
}
$(document).on("ajax:beforeSend", function(){
spinner();
}).on("ajax:complete", function(){
spinner();
});
$(document).on("click", ".element", function(){
spinner();
$.ajax({
...
});
This uses the ajax:beforeSend event handler from Rails UJS (every time you call remote: true, this will fire).
It also allows you to use the spinner function for any other event/element in your app.
I have a slideshow plugin called flexslider which is only displayed after the page has fully loaded and all images have been downloaded.
I also have an anchor tag on this page which is being invoked before the page has fully loaded.
This is causing the anchor tag to be in the wrong place as the page height has changed to accommodate the slideshow.
You can see what I mean here: http://ypc.org.au/ministries/form#transform2015
I've duplicated the page and removed the slideshow and it seems to work but I need it working with the slideshow:
http://ypc.org.au/ministries/form2#transform2015
Can someone suggest how I could make the anchor tag load only after the page has fully loaded? Or is there something simple I am missing?
Thanks!
Edit:
I think this might be how flexslider is loading the page:
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
This is probably your solution. Use this jQuery code.
<script type="text/javascript">
$(window).load(function() {
$(".your-anchor-tag").fadeOut();
});
</script>
I had the same problem, because i was using a slideshow, and because of other responsive elements so i can't determine the height of the images for example.
You can use a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also (if you have a sticky menu bar you can make this space bigger).
$(document).ready(function() {
if(window.location.hash) {
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 20
}, 500);
}
});
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:
http://jsbin.com/ehidef/1
As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:
main window:
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<!-- include jQuery and jQuery UI and the like -->
<script type="text/javascript">
jQuery(function($){
// This will take parent frame if in iframe, own body elsehow
var el=top.document.body
// Instructs jQuery UI to show things on that previous element
$('input').autocomplete({appendTo:el});
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.
As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.
IMPORTANT:
This will only work if both, parent and child are in the same domain [see: SOP]
UPDATE
After finishing doing this same thing, i came up with this solution for styling and position:
var files=[ // UI styles to be loaded on top frame
"css/ui-lightness/jquery-ui-1.10.3.custom.css",
"css/ui-lightness/custom.css"
]
// Create link tag and append to top frame head
for (var a in files) {
var style=$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: files[a]
});
$(top.document).find('head').append(style);
}
// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
return window.frameElement==this
});
$('input').each(function(){ // Cicle inputs to use with ui autocomplete
// set position to left + input offset 2 is a fix for borders on input
var pos= "left+"+($(this).offset().left+2)+
// and to top + input position + height to have it on the bottom
" top+"+($(this).offset().top+$(this).outerHeight()+1);
// Autocomplete
$(this).autocomplete({
appendTo:top.document.body, // put it on top window's body
position:{
at: pos, // at calculated position
of:parentIframe // from parent iframe
}
})
});
Once again, there may be voids, so fill up with relevant code at will
I would like to add an animation to collapsible set with jQuery Mobile.
Let me show a simple example of this:
<div id="tiles" data-role="collapsible-set" data-iconpos="right">
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>
jQuery Mobile handles this perfectly and shows me collapsible set of 3 items. What I want is ANIMATION, however I seem not to find anything in the docs.
I haven't tested yet how simple CSS animation(animating height property) would work, however is there a jQuery Mobile way of doing it like turning some internal flag ?
EDIT
I have tested out a simple jQuery animate method and it actually works. Just in case anyone else needs this. It runs smoothly even on my 528MHz Android phone on a default browser. A snippet I have added is really simple:
$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
$(this).next().css('height', '0').animate({
height: '100px'
});
});
Here ya go:
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
$(this).find('p').slideToggle(500);
return false;
});
I liked the idea you were going for so I played around with it a bit. This hooks into the way jQuery Mobile controls collapsible widgets so it's a bit less hacky then binding to the heading element.
The return false; stops the default behavior and the other line toggles the content in/out of view using the jQuery slideUp/slideDown animations. You could also use .fadeToggle() or roll your own animations. If you check event.type you can animate based on the event fired.
Here is a demo: http://jsfiddle.net/VtVFB/
Please note that in jQuery Mobile 1.4 and up you need to bind to the collapsibleexpand and collapsiblecollapse events instead of expand and collapse. So the complete code becomes
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
$(this).find('p').slideToggle(500);
return false;
});
The code is not entirely right.
It overrides the default jquery mobile implementation of the expand collapse events,
but does not handle the change of the expand collapse icons.
A better code will be:
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
$(this).next('p').slideToggle(500);
return false;
});
The accepted answer doesnt account for that it doesnt change the collapsible cursor because of return false, so this is my answer working:
In my Project it was the contents relative to the [date-role="collapsible"] are $(this).find('>*:not(h3)')
/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
$(this).find('>*:not(h3)').each(function() {
if (!$(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
}).on('collapse', function (event) {
$(this).find('>*:not(h3)').each(function() {
if ($(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
});