just a small tip on HTML page refreshing - html

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.

Related

disable click of main slideshow (div?) on front page in koken (repertoire theme)

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>

Back to Top Link with a slow animation (CSS only)

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.

How do I start a site at a specific anchor without having all links lead to this anchor?

Let me explain: I have a site, index.html
The site should start at a specific anchor, which is at the very bottom of the page. I did this using this code:
setTimeout("window.location.href='index.html#start'",0);
The problem is: I want to share a link to other people, e.g. index.html/#work
In this case, the site SHOULD NOT move to the #start anchor. But it does.
So here's my question: Is there a possibility that a site only scrolls to #start if the requested site is index.html and always remains like it is if the requested site has an anchor in it? (e.g. index.html/#anchor)
Thank you very much!
Sure:
if (window.location.hash === "") {
window.location.hash = "start"
}
There's no reason to wrap the hash change in a setTimeout, and instead of changing the href, just change hash, so that it will still work if you change the name of the file or move the code to a different file.
Also, remember to wrap the code in a window.onload, so the element that you're trying to jump to actually exists. (use window.onload = function() { /* code here */ })

chrome/opera anchor shift away after adding dom elements

Say I have a URL: http://rythmengine.org/doc/expression.md#transformer
Immediately after the page is loaded, the anchor is shown correctly, however I have a script to automatically add some iframes across the page, chrome/opera will later on shift away from the anchor #comment, firefox and IE (10) are all good.
Any idea how to fix it in Chrome/opera?
I do not know if I would implement this or not since the iframes do take a noticeable amount of time to load and the user might already be scrolling around the page and get jolted back to the hash element but here is a solution I came up with using jQuery.
Since the iframes are being replaced in the document after it initially loads you can use the .load() function which normally never fires if you just have it on the document.
Demo on this page and edit the fiddle here.
Just add this jQuery code into your script tag where you replace all of the pre code:
Code:
$('iframe').load(function() {
moveToHash();
});
// Scroll to the url hash element
function moveToHash()
{
var hashElem = $(window.location.hash);
// If the hash elment exists
if(hashElem.length)
{
window.scrollTo(hashElem.position().left, hashElem.position().top);
}
}
Edit: had a few mistakes and unnecessary in the code that are now fixed.
When every iframe ends loading tell the browser to go to that hash
$('iframe').load(function() {
document.location.href = document.location.hash;
});

website page to change on hover

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