If any of you guys can pull up the twitter.com web app on your iPhone's, you will notice how the address bar dissapears and becomes replaced with the Twitter header bar. You can scroll the content with elasticity but the Twitter header bar stays in place just like with a native app. How did these guys do it?
Update: Looks like they changed their web app. Before, it was kind of like Sencha. I am trying to create the effect without using the full library. Take a look at this:
http://cdn.sencha.io/touch/sencha-touch-2.1.0/examples/kitchensink/index.html
They didn't hide the address bar permanently. They are using Mobile Safari's behavior of scrolling down causes the address bar to scroll with the page. What they did was scroll the page down, probably using window.scrollBy so the address bar "disappears" (just like it does on any other page). If you fiddle with the page, you can scroll all the way back up to the top again.
Related
I have an animated Burger Menu in the mobile view, which slides from right to left into the screen.
With overflow-x: hidden the inactive Menu shouldnt be seen in the page.
In the normal view (smaller browser windows) it works.
But in the mobile view (on my phone or mobile view in browser), after first click on the burger menu, it allows me to scroll right to the space from the "hidden" menu background.
See screenshot
I have a live view of my page, so maybe its better for you to understand instead of posting the whole website code here. I didnt wanted to post only the footer code, as im not sure if maybe its related to something else in the body.
Live Site
add overflox-x: hidden to html
I want to go from homepage of cece.indiana.edu/index.html to cece.indiana.edu/request.html#speaker. Even though I have the id="speaker", my request is not redirected to the specific id "speaker". I can only get this to work when I am on the request page already. Why can't I get this simple thing to work? Also, I've searched and found answers but none have fixed the problem.
Relevant code/snippets:
<h2 id="speaker" name="speaker">Request a Speaker</h2>
URL: cece.indiana.edu/request.html#speaker
If I am on cece.indiana.edu/index.html: I will go to
Scroll onto Navigation bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the bottom of the request.html page. - this is not what I want to happen!
What I want it to do, but it is not happening: If I am on cece.indiana.edu/index.html (or any page)
Scroll onto Navigation Bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the H2 with the id "speaker".
This not working correctly in Chrome or Firefox, but it has worked in Safari when I've tried it. I want it to work on all browsers.
It's the JavaScript on your page. If all JS is disabled it works fine. There is JavaScript code messing with the page load and specifically with scrolling and animation, so it's not surprising that it's interfering. Your JS even has specific references to URLs that do or do not have #anchors in them.
In this case it seems you are being sent to the bottom of the page because the "smooth scrolling" code in your JS isn't taking into account that the page may already be scrolled part way. Some browsers will "remember" where you had scrolled to last time you loaded a page, so particularly if you use the back button and then click the navigation item again, you'll end up scrolled too far.
If you have the ability to change the JS, you can fix this by making sure the smooth scrolling code ends by checking to make sure it's actually in the right spot, maybe after a small delay.
im nearly ready to launch my website but i have a problem i cannot sort out.
ive built the whole website using wordpress and buddypress.
due to the picture in my header being very big and ending 450px down the page, you have to scroll down to access the buddypress menu in the relevant page (the one above the activity stream etc) which is exactly where i want it, removing my header is not an option, now the only problem i am having is that when i click the tabs in the buddypress menu say from activity stream to say my messages instead of the page laoding and taking me back to this section it takes me to the very top of my header so i have to re-scroll back down to the page i was after.
I need the page to stay at the same point after page reload so that the menus can be flicked through without having to scroll down to it again everytime a link is pressed. how do i achieve this? can you please help me sort this out….i have no problems adding or editing codes if i know what code needs changing and what to add to make it do this. thx
Im guessing that if you look in the url bar it is adding a # to the end of the url. You need to override the default click event on the a tag so that it doesnt jump you to the top. Im not sure how that will affect the stuff that is going on in the BuddyPress plugin.
I know this sounds petty, but whenever I switch from page to page, the facebook "like" button takes a little while to load. It looks ugly because once it DOES load, it pushes over the "follow" button on Twitter. The google custom search bar does the same thing usually, but faster.
I just want the search bar / facebook button / follow button to load quickly and NOT push each other around.
Here is the current website: http://www.blueskullgames.com
(if you click from page to page on the navbar you will see what I mean)
Any suggestions?
Side Note: I am using a single php custom header for all of my pages.
Thanks in advance!
The facebook button is in an iframe. Add a width to your CSS for the class fb-like. Make sure you do it so it can expand to 4 digits in the counter "balloon" For Rivals.com I did 132px width on the iframe so it does not show up and bully other tags around by displacing them.
I don't know if this is a browser issue but I am using Google Chrome. Now lets say I append a couple of table rows and suddenly a scroll bar appears for the table (I stated that after 500px, display a scroll bar in my css). Now if I try to use the scroll bar, it wouldn't move, I realize that if I change the zoom for the browser's web page, then use the scroll bar, then it scrolls.
Now everytime I append a row, I need to change the zoom and then change it back for then for me to able able to use the scroll bar.
Is this just a glitch from the browser or is it something I have done wrong?
In firefox it seems like the scroll bar works fine without any problems after appending a row.
The basic css for scroll table is below:
#details{
height:500px;
overflow:auto;
}
Thanks
Try to change overflow to scroll. Good way to test if something could potentially be wrong with your append.