I wrote an HTML page which is being viewed primarily on the iPad. Basically it's an FAQ list with a hover effect on each question. To initiate the hover effect on the ipad I had to put a dummy link like this.
The question?
Here is the problem which is valid for every browser: When the list is so long that you have to scroll down and when you click on a link at the bottom of the page, it jumps back to the top while initiating the hover effect. I made a fiddle for demonstrating purpose:
http://jsfiddle.net/SWXHR/1/
When scrolling down and clicking on the last link, the page will jump to the top.
Question: How can I prevent the page from jumping to the top when using a dummy link?
Add this to your links:
The question?
Or if you're doing it through JQuery:
$('a[href="#"]').click(function(event){
event.preventDefault();
});
You can use The question it will do nothing (empty javascript command) and your scroll will stay in place ;)
add to the anchor tag
onclick="return false;"
This will stop it
If all you want is the hover effect, you do not need to use a at all.
You can use spans, and substitute the CSS to target spans instead of anchors: http://jsfiddle.net/SWXHR/6/
If you want the cursor to be like the cursor for anchors, you can do that with css - cursor: pointer;
Just replace the single '#' with a double '##'.
The question?
Related
I have an anchor tag within a button tag description in HTML as below:
<button type="submit" onClick="handleSubmit()">Desc....
Click here for more details
</button>
Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.
I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!
But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.
How can I fix this? Any help would be much appreciated, thank you.
I don't quite understand if you intend to use the function inside the onClick in any situation.
You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:
onClick="window.location.href='link'"
Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.
First, I was wondering why I need to add cursor:pointer; for a hover effect on elements like <button>, <label>, checkbox, and radio?
Second, why do <a> tags have this by default?
Please take a look at these answered similar questions
Why don't HTML elements have a CSS cursor pointer by default?
Default cursor on mouse over of a button is not a hand pointer
This comes from historical perspective of web page usage. Labels are meant to be read-only. buttons, checkboxes and radios are visibly clickable by default. So, where-ever any one sees them on page, they know it can be clicked or checked. An anchor tag may hide between other text on the page, and may get hidden from view by styling, so a hover pointer over that (if they have a url to point to) will signify that this is click-able part of text, and will help in page navigation.
You can check these details in many more answers here.
https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default
and the conceptual details of mouse pointers here
Is there a way to use something similar to pointer-events: none to disable only the hyperlink and not the mouseover text?
For example, suppose I have:
link text
Then the link is disabled, but the mouseover text is also disabled. I want to know how to just disable the link, while keeping the mouseover text active.
You can replicate this using Javascript, just simply take out the style and add onclick.
link text
EXAMPLE
I would not suggest doing this, instead, I would suggest styling a <span> to look like a link, with a title to get the tooltip effect you are after.
Here is an example of this
Like this. Javascript will stop the link working when you click it. However the title is still shown when hovering over it
link text
This is not really very good coding though. If you don't want a link, then don't have one. If you want he effect of basically a tooltip then create a tooltip instead.
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.