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.
Related
I have a Drupal 6 website and would like to place a contact button image on the right-hand middle side of the website. The idea is that when the user scrolls down the page, the button remains in its position. What's the easiest way of implementing that? If possible please provide procedures as I'm not very skilled with HTML.
If button is suppose to always stay in one place then you don't need JS at all. Just set it's position to fixed and it will always stay at one place. You need that button on every page put it's code page.tpl.php template file...
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 have a long page, where near the bottom I have a "post on facebook" button. when the user clicks this the FB.UI dialog from the facebook javascript sdk pops-up. This is all working fine except that the page scrolls back to the top of the page where the dialog is showing.
i have the set just under the tag as facebook recommends. I've tried moving this to the part of the page where i need it but the page keeps scrolling back to the top
Any idea how i can get the facbook dialog to show where the current page scroll position is?
You'll want to use the position:fixed; attribute within the element that contains the Facebook dialogue. Check out this link for further information and examples.
Okay, so - weird problem. Basically, I've created a PHP slideshow framework for my site which loads a whole new page each time somebody clicks to the next image. For a more "fluid" experience, I made the next/previous picture links load the next page so that the picture is at the top of the window (I put <a name='slide'></a> right above the slideshow image, and I link to that). However, when I do so, the page title disappears behind my banner at the top. They say a picture is worth a thousand words, so observe: This page looks fine, but click to go the next picture (broken page) and the album title (2010-05) disappears. If you remove #slide from the end of the broken page link, it works fine again. Any suggestions on why this is happening, or how to avoid it?
TIA! :)
In the page:
<a name='slide'></a>
...this an in-page bookmark. The #slide on the URL forces the page to scroll to this point.
If you want the page to load with it scrolled to the top every time, drop in this script:
<script type="text/javascript">
window.scrollTo(0,0)
</script>
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).