I'm absolutely stuck here and hoping someone here will have the answer.
ok - The end goal is to be redirected to another page and be placed at the beginning of a certain DIV. I'm using an anchor tag which points to a DIV with an ID attached to it.
My code works for all browsers EXCEPT for Firefox??
Link on page one:
<a href="/home/services#design">
<%= image_tag "Read_More_Button.png", :alt => "", :style =>
"position:relative; left:-10px"%>
-close a tag
Div with content on page 2:
<div id='design' class='left clear_right '>
more <div>'s nested and a unordered list. black as well.
-close div tag
The route in my config/routes.rb:
get "home/services" => "home#services"
To see how this is currently working please see online version link:
[website_link] http://mearsinteriors.co.uk/ "click here for website"
Click on the "read more" button for Design or fitout and you'll see that you aren't taken to the top of either div but the route/url in the address bar is correctly pointing to this location? This only happens in Firefox, I have tried in safe mode and disabled all add ons and still nothing.
any adice or direction would be greatly appreciated. thanks
This was the Jquery cycle library I was using. Each image's container was still being spaced out over the page. so even though the images weren't visible the divs were still there. Hence the reason the page scroll to the exact position no mater the anchor being directed to.
Related
I am unsure what is going. I have two footers. One footer is a sidebar, and my other footer is a regular footer on the bottom of the page. My anchor tag in my bottom footer, that links to my about page, takes me to the bottom of the page instead of starting at the top, and my anchor tag in my sidebar footer takes me to the middle of the page! Other Anchor Links are taking me also to the middle or random parts of the pages when loaded.
I am not using anything special with the anchor. I don't think...
Here is my anchor for both footers:
<a href="/about" class="a-color">
<small>About</small>
</a>
My pages are loaded with ng-view. I am not using $anchorScroll
ngView retains the scroll position when you navigate from one page to another. once view loaded then can use $anchorScroll to change viewport or can add autoscroll="true" to ng-view element
<div class="ng-view" autoscroll="true"></div>
Use this code. It will always takes page to top on window load.
$(window).load(function(){
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
});
Seemingly, your browser has an issue. 1. Which browser you are facing this on? 2. Did you try on any other browser? 3. Is this code running fine on any other machine?4. Did you clear cache/cookies and tried again?
Workaround:
Definitely not the perfect solution but as a workaround, try the below code and see if this works out for you:
<a href="/about#top" class="a-color">
<small>About</small>
</a>
as per my understanding you don't want page to reload after user clicks on any link on your page, you only want some area should get refreshed right ?
In that case you can use templates, configure route according to states and by click on link you can change template by $state.go.
I always see websites that has a link that says #top or #bottom that takes you to the top or bottom of the page. Can someone please tell me how I can use it on my website. I already tried saying <a href="#top"> or <a href="#bottom"> but it did not work.
This depends on what exactly you would like to be treated as top and bottom. To link to the very start of the page, you can use the URL #, as in Start of page. To link to some specific element near the start, assign an id attribute to it, e.g. <h1 id="top">Main heading</h1>, and use that attribute value in a link, e.g. Start of page.
The bottom is a bit more tricky, since there is no predefined URL for it, and although you can use the id technique, the URL will refer to the start of the element. You could deal with this using an empty element at the very end of document body:
Last piece of real content.
<div id="bottom"></div>
</body>
</html>
Then you would use e.g. End of page.
However, normally links to start of page are worse than useless, and links to end of page are no better. Every browser provides a simple way of getting to the start or to the end of any page.
Hashing with an id will take you to the equivalent element with the id on the page.
So if you have a div like so:
<div id="top"></div>
and an anchor as such:
Go to top div
Clicking the anchor will take you to that divs place in the DOM.
Quite simple if a user is at the bottom of the page show them
Go to the top
Or if they are at the top of the page show them
Go to bottom
I have a Rails 3.1 app with HAML and I'm trying to set up the homepage with links to other sites. My Haml code looks like this:
.home-container
%section.news
%a{:href => "http://www.google.com"} Google
The page is the home page that gets yielded to the application and there's a sidebar partial that gets rendered after it that has a Twitter feed. I have tried a ton of syntaxs for links including regular html and all I get is the text, the link is not actually clickable so nothing happens when I click it. I have tested it in both Firefox and Chrome and I can see in the inspector that it's an actual link although I can inspect the element directly, I have to open up the body, divs, etc. Google search is coming up completely fruitless.
I have no idea what's going on and what other possible information would be relevant. Let me know if any more details are needed.
So with some help from a friend, the problem was the CSS. Specifically the content of the home-container was given a z-index of -1 with the header and picture getting a z-index of 1 and 2 without any relative positioning. So the content was getting put behind the header content so I couldn't click on any of the links. After removing the z-index of -1 from the content, it now works and I can click the link. To add the z-index back, I made the content 1 and the header 2 and added, position: relative; to the css of both.
try
.home-container
%section.news
%= link_to 'Google', "http://www.google.com"
Right...
I am working on a client's website and so far most of it is working well.. until today...
The URL: http://www.chris-loweth.co.uk/shoaib-hassan-photography/site_demo_1/
When the page displays it is jumping to a H1 on the page that is half way down the page...
There are a few <a href="#"> links for dummy content but these shouldn't be working like scroll anchors... and there's definitely not an anchor in the div that the browser seems to be scrolling down to...
Spent hours on this and wondered if some fresh eyes might help...
I've tried to validate the markup but as this is a test site some of the div IDs duplicate so validation fails.
Thank you guys n gals!
I don't think it's jumping to the H1. I think it's this line near the top of your tools.js file that is doing it:
$('input[type="text"]:first').focus();
It is scrolling to put this in view, and depending on your browser size, this could well put the H1 above at the top of the window.
The problem is caused by this line in the javascript file:
// Set focus to event title on page load
$('input[type="text"]:first').focus();
The first input field is way down on the page. Setting the focus to it is causing the browser to scroll to the input field instead of remaining at the top of the page.
I am currently using the following code to link to a new location on my document:
<ol>
<li>How to load a file</li>
</ol>
<h3>
<a name="1.1">Loading Page</a></h3>
The code is working fine although the link is not bringing the "Loading Page" section to the TOP of the page. Rather, the 'Loading Page' Section of my document is ending up in the middle of my page. I am not sure how else to explain this, but hopefully someone will understand what it is that I am asking.
Thank you,
Evan
Is your "Loading Page" near the bottom of your page? If so, it's possible that your page isn't tall enough, or rather, doesn't have enough content below "Loading Page", to bring the "Loading Page" section to the very top.
Is the scrollbar at the very bottom of the window after clicking on the link? There may not be enough content after "Loading Page" to allow it to appear at the top of the window.
Testing your code in Safari the "Loading page" element IS jumped to, and so the text is rendered at the top. However, I would advise using the id attribute instead of the name attribute for better cross-browser support.
It could be that there is no more room to scroll like #jason or #josh-rosen says. OR if you're just talking about a small amount of space it could be because your H3 has a lot of top margin. I sometimes put empty a tags slightly above the target content.
Change 1.1 to 1_1
Change <a name="1_1"> to <a id="1_1">
(1.1 wont work < HTML5)