I want to implement navigation in a website using the middle button function of scrolling ("clicking" (please re-read clicking) the middle button and roaming around the borders) but I would like this to happen instantly without the need for user input. Something of the kind:
$(element).mouseover(function(){
roamAround(); //I've tried SIMULATING (NOT <--- DETECTING)
//a middle-click from the mouse but failed
});
I am currently using google-chrome and at this stage of development I am not really concerned about cross-browsing this function. If it should work on chrome then it's fine.
What would be the best way to do this using native functions or emulation? Thank you very much!
EDIT: I don't want to DETECT user input, please re-read the question :)
Sounds like you want, like Deryck said, infinite scrolling. There's a jQuery plugin jScroll that does a simpler version for vertical content that can either be auto-loaded or loaded by a button press. You can view the code on Github to see how to do something similar, i.e. your roamAround function could mimic the _load function found there.
Related
Has anyone ever experienced any specific problems relating to the use of jQuery, Ajax events and iOS?
I'm working as a web analyst and on our site we are having issues with iOS in the checkout, we are using jQuery and Ajax events to handle the shopping basket in the background, carry the product information from page to page etc and I'm just taking a stab in the dark because I'm pretty sure it's not the html or css that is causing the issue.
The continue buttons that take you to the next page in the checkout use this href:
Continue
From a little research I found out that a # href just takes the scroll position back to the top, and this does occur on iOS, the html seems to be working, but then the jQuery is supposed to kick in when it detects a click of a href with this class, but it doesn't, scroll position goes back to the top and then nothing happens.
Look I know it's really difficult to make any suggestions without seeing any code, I'm just taking a stab here in the hope someone might go "Oh yeah it could be this".
Try changing href="#" with href="javascript:void(0);"
Add event binding code inside document ready function like this
$(document).ready(function(){
//Event binding code
});
I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.
Short version: Can't get this, or anything similar, to work
$("#Container3").scrollTop(0);
Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.
Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.
This is what my jquery request looks like
$(document).on("click",".NavRowButton",function(event){
$("#Container3").scrollTop(0);
var $targetButtonId=$(event.target).attr("id");
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
$("#Container3").find(".WindowBorder").css("top","0");
});
#Container3 has the scroll bar and is the immediate parent of #Content.
This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
var $currentScroll=$(event.target).scrollTop();
console.log($currentScroll);
var $targetId=$(event.target).attr("id");
console.log($targetId);
}
},true);
Thanks in advance.
Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.
Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.
They now look like this(also had to add a condition to limit load events):
global variable:
$DivTestVar="";
click:
$(document).on("click",".NavRowButton",function(event){
var $targetButtonId=event.target.id;
if($targetButtonId != $("#DisplayContentName").html()){
$($DivTestVar).scrollTop(0);
console.log($($DivTestVar).get());
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html($targetButtonId);
$("#Container3").find(".WindowBorder").css("top","0");
};
});
scroll debugging:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
$DivTestVar=event.target;
var $currentScroll=$($DivTestVar).scrollTop();
console.log($currentScroll);
var $targetId=event.target.id;
console.log($targetId);
}
},true);
If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.
Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have come across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.
Did you try the pure JS version ?
document.getElementById('Container').scrollTop = 0
You have two possibilities, as far as I know.
1-Scroll the whole page until it reached the top of your #Content div position with jQuery.
2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle.net/zkp07abu/).
I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..
I'm creating an iphone (web)app.
If user slides tumb left it has to show the settings panel, after modifying settings, user drags thumb to the right and the normal app screen comes back.
However I took as basis some carrousel code which needs (minimal) 3 pages, I only want 2 pages.
Current state:
http://jsfiddle.net/U92wt/
I can't remove the red page without breaking everything....
Edit:
More information about code used here.
I tried cruising through your code but I couldn't identify exactly what the issue was. It's a good idea and I felt like playing around with it so I wrote an implementation that is capable of only two panels that you're welcome to use if you wish.
http://www.netortech.com/plugins/swiper.htm
If you like it please give me a vote on the jQuery website!
http://plugins.jquery.com/project/CarouselSwiper
I want to create an in-window pop up that darkens the entire window with a semi-transparent black overlay and there is a popup in the middle that warns the user about something. I have seen something like this on att web site
http://www.att.com/wireless/iphone/?wtSlotClick=1-003G93!CIWM01-3-1&rel=nofollow
and if you click on the order now button it will give a pop up and darkens the entire window. I know very little of javascript (close to 0) and I am currently using Rails to find the answer. Does anyone know a quick way for me to achieving this effect?
If you are using prototype and don't want to roll your own, check out the excellent http://www.nickstakenburg.com/projects/lightview/. note that it will cost you 50 bucks, but its probably the nicest implementation I have seen
If you don't mind including jquery, I usually use http://defunkt.github.com/facebox/ when I need similar functionality.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
That are called lightboxes, and can be done using only CSS (but if you want it activated onclick then javascript is required).