I have a simple
Back to Top
and this puts me to the top of the page immediately. But I want it to go to the top of the page slowly with just CSS.
Is this possible?
Thanks in Advance.
Edit:
Okay, for anyone with the same problem. It did it with this JQuery:
// #btt is ID of the Back to Top Link
$("#btt").click(function () {
//html and body is used because of Browser compatibilit
$("html, body").animate({scrollTop: 0}, 1000);
});
You can't activate actions like scrolling with pure CSS, sorry. You'll need some jQuery in there.
What you CAN do is trick the user in thinking the page has scrolled by moving elements around with CSS on :hover, but that's a really bad practice, and would require much more coding that a simple jQuery function.
Related
I don't know CSS or html very well, only a little. All I want is for the slideshow on the front page of my website to not be click-able. I want it to be there to view but I don't want people to be able to click it (which leads to it's album view.) In the back page of koken, there is a Custom CSS area to add extra code to change the theme.
Is there something I can put there to stop the main slideshow from being click-able? I need to know specifically what to put.
I think the div is either "home-slideshow" or div.pulse-main-container.
I tried
div.pulse-main-container.click(function () {
return false;
});
but I don't think that's how you even write it out. I don't know what to put, that's why I need someone to spell it out for me.
I use "inspect element" with my browser to look at the code, but it's all gobble-de-gook to me. This doesn't seem like a hard thing to fix but for the life of me I can't figure it out!
$('.home-slideshow').css({
'pointer-events':'none'
});
put this somewhere in your html. (maybe right before the end of your body tag).
<script>
$(window).load(function(){
$('.pulse-main-container').click(function(){
return false;
});
});
</script>
All i would like to know is if there is a html line i could add that when i refresh my html css webpage in browser it scrolls to the very top ? Is this possible?
I have looked online but cannot describe in a short way what i really want, so therefor haven't yet found a solution.
So all i would like is when i refresh my page in browser it scrolls to the very top then reloads the page.
I havent posted my CSS or html code as i do not feel this would be nessesary for this sort of question as i believe it is just a simple line of HTML that i dont know,
Thank you for your help.
You can try this:
document.documentElement.onscroll = document.body.onscroll = function() {
this.scrollTop = 0;
this.onscroll = null;
}
or else you need to go with jQuery:
$(function() {
$('body').scrollTop(0);
});
I think there are no other option.
I feel like this is a stupid question but here goes. Is it possible to have a page change upon hover of menu button? for example if i point my mouse at the about us menu button it would change the page automatically without having to click on? wordpress, html, etc...
Thank in advance.
While this isn't natural as far as user experience, you can easily accomplish it with Javascript. For example -
document.getElementById('myButton').onmouseover = function() {
window.location.href = 'http://www.google.com/';
};
JSFiddle Example
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
Ive seen sites where things like a login box will apprear, and the rest of the page will fade, buit the box stays the same.
How is this done?
Can someone please give me an example?
Thanks!
Check link text
And add following code on head section for faded background
<script language="Javascript">
$(document).ready(function() {
$.facebox.settings.opacity = 0.2
});
</script>
You can use any of the jquery lightbox /modal scripts to achieve the effect. There's lot of scripts that do what you are trying to achieve. My personal recommendations would be SimpleModal (if you need something just for a login window) or ColorBox (if you need multiple overlays and require a lot of customization)