My plan is to have a content DIV, and inside that div I will load content via AJAX. I want the already loaded page to slide to the left, fade in the loading page with the circle.gif, and then fade in the new content and so on for the rest of the pages.
I have this code, but it goes to the top not the left, there is no scrollLeft I think.
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
And there is this one:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
Use animate with left property like this:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).animate({'left' : 'show'});
});
You can also use right, margin-left, margin-right with show as value depending on your needs.
To hide them back with horizontal sliding, use hide value instead.
Make sure that elements are hidden first and have set appropriate CSS values for those properties.
Related
enter code here I have setup navigation links to smooth scroll to an anchor point on my page.
Unfortunately I always have to click twice on every link for the anchor to move.
I think the smooth scroll javascript I'm using is causing the problem. but I don't know anything about java script and I have just copy/pasted this code from somewhere.
I'd be appreciative if you could help me understand, which part of this code is causing the problem.
//Smooth Scroll for Page Anchor
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I created a Collapsible set using jQuery mobile . It is working fine but it is not smooth like Accordion in Jquery UI.
When i tap on header it expands with a jerk.
Is there any way to make it smooth?
Attach a click listener to collapsible's heading .ui-collapsible-heading-toggle. Once clicked, .slideDown() or .slideUp() based on whether the clicked collapsible is collapsed or expanded. When expanding a collapsible, other ones will be collapsed, i.e. only one collapsible should be expanded a time.
$(".ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).slideDown(300);
current.siblings(".ui-collapsible:not(.ui-collapsible-collapsed)").find(".ui-collapsible-content").slideUp(300);
} else {
$(".ui-collapsible-content", current).slideUp(300);
}
});
Demo
I find it a bit weird that the jQuery UI tabs don't have a built-in convenience method for making the tabs bookmarkable (change the URL hash). The following snippet kinda works for me
$("#tabs").tabs({
"activate": function(event, ui) {
window.location.hash = ui.newTab.context.hash;
}
});
The problem is, when the hash is appended to the URL, the page jumps to the corresponding anchor on the page. How can I prevent that from happening? All I want is for the URL address to change showing the currently selected tab, but not move the page vertically.
Update: Just to be clear, I am not wedded to my code above. I am just interested in being able to change the URL address bar with the selected tab's id so the user can bookmark or link the tab.
Replacing window.location.hash (which refreshes the page) with HTML5 history (which manipulates the URL address bar and the browser history stack without refreshing the page) did the trick for me. The following code worked for me
$("#tabs").tabs({
"activate": function(event, ui) {
var url = window.location;
window.history.pushState({
"html": "",
"pageTitle": title,
}, "", url.href.replace(url.hash, "") + ui.newTab.context.hash);
}
});
You could just store your current vertical scrolling distance to the page's top and reapply it afterwards, like this:
$("#tabs").tabs({
"activate": function(event, ui) {'use strict';
var scrollTop;
scrollTop = $(document).scrollTop();
window.location.hash = ui.newTab.context.hash;
$(document).scrollTop(scrollTop);
}
});
The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});
Structure of jQueryUI's Accordion is something like this,
<h2>title</h2><div>content</div>
for each item. What I am going to do is create accordion inside of my backbone view through looping, but backbone create div tag for each item so I have html code like this
<div><h2>title</h2><div>content</div></div>
This makes jQuery Accordion control does not work correctly, collapse and expand is not working.
I think this can be solved if I can set nothing on el or tagname, but I cannot find out.
Is there any way to solve this problem?
I think you'd be better off leaving the accordion to one view and then have a separate view inside each panel. After all, the <h2>s are controls for the accordion as-a-whole rather than for a specific panel.
You'd have some per-panel views like this:
var P = Backbone.View.extend({
render: function() {
// Add the panel's content to this.$el (which is a <div> by default).
return this;
}
});
And then an accordion view like this:
var A = Backbone.View.extend({
render: function() {
var panels = [ ... ];
for(var p, i = 0; i < panels.length; ++i) {
p = new P({ ... });
this.$el.append('<h3><a>' + panels[i] + '</a></h3>');
this.$el.append(p.render().el);
}
// The accordion wants to know the sizes of things so
// we let the DOM sort itself out before binding the
// accordion.
var _this = this;
setTimeout(function() { _this.$el.accordion() }, 0);
return this;
}
});
Then you can simply $('#something').append((new A).render().el) and it all works out nicely while leaving everything where it should be.
You could also add a title method to the P views and then A could ask the panel what its name/title/header should be so that all the per-panel information is nicely contained in the per-panel view.
Demo: http://jsfiddle.net/ambiguous/Y49W8/