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
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 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.
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.
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)