Go to top of page - html

I created an icon at the side of my page that can be clicked to go back to the top of the page.
I thought this would be fairly simple, like so:
#back_to_top{
position:fixed;
right:0px;
bottom:80px;
padding:10px;
background-color:#fff;
opacity:0.5;
border-radius:10px 0px 0px 10px;
cursor:pointer;
}
#back_to_top img{
width:50px;
height:50px;
}
#content{
height:9999px;
}
<a id="top_of_page"></a>
<div id="content">loads of content</div>
<div id="back_to_top">
<a href="#top_of_page">
<img src="media/top.png">
</a>
</div>
However, when I click the icon it actually moves down the page by the same amount of pixels each time.
I have no other anchors or anything else with a similar ID.
My anchor tag is the first tag in my body.
my 'loads of content' is all generated dynamically from php.
I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.

Adding an a element with href="#" should do the trick.
Here you have an example of it working:
<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
To the moon!

I prefer to use the Javascript window.scrollTo method. Passing in 0,0 will scroll the page to the top left corner instantly.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord - Pixels along horizontal axis
y-coord - Pixels along vertical axis
This method allows you to scroll to any point on the page.

Depending on whether you want to use a link tag <a> or a <button> tag you have two simple approaches.
For a link tag:
<a href='#'>To Top</a>
is all you need.
For a button tag:
<button onclick="window.scrollTo(0,0)>To Top</button>
Both of these work well.

Related

How to fix the anchor and h1 in css?

I have an html with markup,
<a class="home-link" href="index.html" rel="home">
<h1 class="site-title">John Arellano's Personal Website</h1>
</a>
I have a problem in Styling this Site-title. My Cursor allow me to Click to
the link even it is in the blank space.
Can anyone help me fix this using CSS? Because I can't change the HTML Document. So I am hoping to fix it with CSS Only.
I can still click the link.. If the width is 200px; i can still click in the position greater than 200px;
you can do this with css as follows:
<style>
a:link{display:inline-block;}
</style>
block element can not be placed inside the inline element, this is a mistake! it should look like this:
<h1 class="site-title"><a class="home-link" href="index.html" rel="home">John Arellano's Personal Website</a></h1>
You need to change the html code like this:
<h1>Site name</h1>
Instead try this. Probably you have indentation in your css. Try use that:
a.home-link{
text-indent:0;
display:block;
cursor:pointer;
height:80px; /*adjust your height */
width:80px; /*adjust your width */
}

Overlaying text on the upper right corner of a background image

I am wondering how is it possible to achieve notification count as we see in linked (as shown in image below)
I have tried implementing a similar solutions, using a Span which has a background image and then using tag along with it.
Roughly,
<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>
this is no where near to what is there on linkedin's site.
Is there a cooked solution already available for it? Or any Ideas how it can be achieved?
Take a look at this: http://jsfiddle.net/D3VVv/1/
From this post: How can i overlay an 10x10px image on top of another image?
If you make the div that contains the message icon as big as the message icon + the notification icon, then you can position the notification icon in the top right corner of that div using absolute positioning. As is shown in the fiddle.
There are a few ways, here is an example of absolute positioning:
http://jsfiddle.net/e2Zs4/
HTML
<div class="con">
<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />
<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />
</div>
CSS
.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }

Clickable divs beneath transparent div

Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.
<style type="text/css">
#holder{
width:200px;
height:200px;
}
.clickMe {
width:100px;
height:100px;
cursor:pointer;
background-color:red;
border:1px solid black;
float:left;
margin:-1px;
padding:0;
}
.hidey {
position:absolute;
top:0;
left:0;
z-index:50;
height:50%;
width:50%;
opacity:.25;
background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
</div>
Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).
Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.
See this answer for details:
Trigger a button click with JavaScript on the Enter key in a text box
Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.
See the second answer here for how to do that.
How do I get the absolute position of a mouse click from an onClick event on the body?
EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.
Let me suggest the simple old school method rather than going to any length to make this work.
Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.
I.E. rather than this:
<div class="wrapper">
<div class="clickMe">
...
</div>
<div class="clickMe">
...
</div>
</div>
Use this:
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.

How to make this box work with <a href>

My Code:
<a id="entire" href="/check-appointment.php">
<div id="check_box">
<div id="check_content">
<a id="boxis" href="/check-appointment.php">I am a sales rep</a>
<br> making a request on behalf of the client.
</div>
</div>
</a>
CSS:
#check_box {
width:423px;
height:250px;
margin-left:100px;
margin-top:10px;
}
#check_content {
font-weight:bold;
font-size:37px;
}
Problem:
I am unable to make the work with the I am trying to get that entire div to be part of the
How can i make it work?
If you have an HTML5 DocType it should work, anything before that won't allow inline elements a to wrap block level elements div.
Even if you use an anchor unless you do some z-indexing then your inner link likely won't be seen how you are expecting...since it's the same link it shouldn't be a problem, but that then becomes repetitive.

HTML Div tag not showing in Mozilla FireFox

I have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.