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"
Related
A plea to all wiki gurus - can anyone help me create a link to another page in the same wiki when the wiki page is constructed in html?
Alittle background & context: I decided to get a bit arty in my mediawiki and made a simple landing page constructed using CSS and div elements to sit on a mediawiki page. After a little fettling, I managed to get the HTML rendered correctly and the page looks very nice!
Now I wish to use the div elements (lets call them 'buttons') as links to other mediawiki pages within the same wiki. (the actual 'buttons' are made up of several elements wrapped in a containing div element)
The actual html for a 'button' looks like this:
<div class="cf-box"><div class="cf-box-title">Button Title</div><div class="cf-button-icon"></div><div class="cf-box-text">Description of the information the button links to</div></div>
Using HTML, this would be a simple process of wrapping the containing element (cf-box) in a link and all is good in the world. I assumed that you would be able to do something similar in mediawiki such as..
[[Some Page|<div class="container"><div class="button"><div class="text"></div></div></div>]]
but when I try this, the outer 'container' opening and closing div elements are stripped out and displayed on the page as text leaving the internal div elements orphaned rendering garbage on the page. The link does work though!
Thanks to anyone who takes a look!
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
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.
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'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.