I am using anchor tags with div id's assigned to them so the user is moved around the page.
Now my problem is when the user clicks the button, they are successfully transferred but I'm trying to make it so that div its brought to appears at the top of the page, not middle... you can see my progress and what i've tried by visiting the link i'm working on, all code is visible there.. you can see what I mean by clicking the home button.
http://eclipse-developers.com/v2/eclipse-developers.com/
This is because there is no enough space at the bottom of the page. try adding some br at the bottom of the page.
Related
Site description
I have a page where a list of 10 div are showing at once while 100 are in the source document. On the bottom is a button that - if clicked - hides these 10 div and shows the next 10 div. The button itself is a styled link with href="#top" where the id belongs to my navbar on top.
Problem
If I use Chrome it doesn't jump to top every time I click on the button. Sometime it jumps and sometimes it just show the new divs without the jump to top.
What works
If I use Firefox there's no problem.
Question
How can I figure out where's the problem - I mean, could there be an error somewhere else in my code that leads to this behaviour (no jump to #top) - or is there an alternative way to tell the users browser to jump to top that I should or could use?
Instead of using anchors and links to them (because your anchors might change positions, or work different between browsers), you should use Javascript, using the window.scrollTo() function:
HTML
<button onclick="scrollToTop()">Go to Top</button>
Javascript
function scrollToTop(){
window.scrollTo(0, 0);
}
Note that scrollTo() takes two parameters; the top and left position to scroll to. Also scrollTo() is not animated, it will scroll instantly to the position that you set.
I'm trying to make a kind of menu: a global div, inside 5 pictures to click and when you click on one, the content appear below, but all in the same area. Here is a picture (the content is hidden when no pictures are clicked).
http://img844.imageshack.us/img844/6359/divy.jpg
Here is what I've done, but without success:
http://jsfiddle.net/zL7Gn/
See code in jsfiddle
My problem is when you click on a picture, the content appear but all the other pictures are moved on the right...
Thanks a lot
I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery