Make body background image act as link - javascript

I've read many things online but I haven't found a way to make it work..
What I want:
I have a body background image and I was asked to make it a link as an advertisement.. The problem is that whatever I tried makes the whole page a link, whereas I want only the background of the webpage to act as a link. Is it possible,through html and css? Or even with use of javascript? Any solution is accepted... I'm stuck..Thanks in advance!

You can't have the background image be the link. You can use JS to catch all clicks that are on the body, but not on one of its children
// This is not cross browser, that would be a separate question
document.body.onclick = function(e) {
if (e.target === document.body) {
window.location = "link.html"
}
}
You can use jQuery for a cross browser version
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
If you want to give the background the cursor appearance, you can apply the following CSS
body {
background-image: url(http://www.blutest.com/sites/default/files/butterfly2_large_0.jpg);
cursor: pointer;
}
body, html {
width: 100%;
height: 100%;
}
body * {
cursor: default;
}
​
See it in action here

Using jQuery you can detect if the event was on the body directly:
$('body').on('click', function(e) {
if( e.target != this ) return;
window.location = 'http://google.com';
});

DON'T.
This is an extremely annoying and universally hated practice. Users should be able to click on "the white" (*) without surprising effects.
I actually found your question while googling for ways to block this nasty "human exploit", and I vow to forever boycott any vendor that advertises this way.
(*) Of course the metaphorical notion of "the white" includes any area outside the main layout (or below the content of a sidebar if the sidebar is shorter than the main column) regardless of whether this area is white, solid color, or has a background image.

Nope here
keep a page division inside the body dvision
add onclick to body and onclick to page too,
in the page on click add event.stopPropagation()

Related

how to move the screen without a click to the bottom of the page using JavaScript?

I am trying to create a website using JavaScript. I need to programm it in such a way, that when you open the website, you directly get to the bottom of the page (without clicking anything). That means, the page moves itself automatically downwards.
How can I get this done?
Use window.scrollTo() function
window.scrollTo(0,document.body.scrollHeight);
Here's a good answer:
how to automatically scroll down a html page?
Including a live demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
Html:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
Enjoy :)
Call This function on a component or page that you want the particular behaviour. This function will scroll to the bottom of the page. There won't be any scrolling effect without the css for smooth scroll. I have shown how to specify the css for the scrolling effect below, incase you require the scroll behaviour.
function scrollToPageBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
If you require the scroll behaviour:
Here, I'm specifying the scroll behaviour on the root itself. You can target specific containers as per your requirement
*{
scroll-behavior: smooth;
}
P.S: This question has many answers already posted but I am sharing
this because no one talks about the css scroll behaviour which some
users may require. This answer is specific to the question where the
OP wants to scroll to the bottom of the page without any user action
when a page or component is opened or rendered but also specifyiuing the CSS for scroll behaviour if a user requires it.

Why does changing the body's background color change the entire page's background?

I logged the height and padding values using this code:
jQuery( document ).ready( function() {
console.log( jQuery('body').css('height') );
console.log( jQuery('body').css('padding-top') );
console.log( jQuery('body').css('padding-bottom'));
}); //end ready
This outputs:
20px
0px
0px
If the height of the body is only 20 pixels, why does the entire background of the browser change black when I use this CSS:
body {
background: black;
}
I'm using Chrome as my browser. If you're curious as to how I ran into this question, I ran into a problem of adding a click event to the body that didn't ever seem to fire due to the body's default height.
A long time ago there was something called document.bgcolor, or something like that, that would let you set the background of the document itself, but that was deprecated.
Instead it was decided that setting document.body.style.backgroundColor, or in other words setting the background of the body, would also set the background color for the document automagically, as the document object has no style property, but it's still visible when the body/html elements does not completely cover the document, that's why the entire page goes black even if the body element does not cover the entire document.
The element contains all the contents of an HTML document, such
as text, hyperlinks, images, tables, lists, etc.
Says the definition at w3schools. Having in mind this definition, if the <html> element doesn't the style of <body> is considered representation of the document's style. Our little investigation from the comments proves this.
Edit:
Didn't see the comment from the question. The link by tliokos mentions the same.
If you really want a click event on a full-sized body, try this:
body{
background-color: black;
min-height: 100%;
padding: 0;
margin: 0;
}
Firstly you have to understand what is the body, and bare in mind the body is everything you see when page loads so in order to divide your page add a div or table and change its background.

Adding CSS when you access a URL with a specific ID in it

I have a page with multiple headers, which all have there own ID. The idea is when you click on a specific link, it takes you to the page with the headers and will scroll down to the appropriate header. However on some of the pages, there isn't enough content for the page to scroll down and for the header to site at the top of the page. So I want to highlight the header that the content references, so it's clear which content the link represents.
So the link would be something like
http://website.com/test#headerOne
http://website.com/test#headerTwo
Then once you've accessed the URL http://website.com/test#headerOne it would drop you down to on the page. But the page isn't long enough for the header to sit at the top of the page. So i want to be able to add a background colour to the header.
Updated HTML:
<h3> Header One </h3>
<a name="headerOne"></a>
<p>Content here</p>
I'm persuming some Jquery would need doing but not sure where to start with it. I was thinking of detecting the URL and then doing an if else statement, but this seems like a long winded approach.
Any help would be much appreciated.
Thanks
Use :target:
/* I'm obviously assuming you're using h2 elements for headers,
but adjust to taste */
h2:target {
background-color: #ffa;
}
Or, if you need to support older browsers without :target support:
var el = document.getElementById(document.location.hash);
el.style.backgroundColor = '#ffa';
And, with a function:
function hashChanged(){
var el = document.getElementById(document.location.hash);
el.style.backgroundColor = '#ffa';
}
document.addEventListener('hashChange', hashChanged, false);
Or, to use classes (as suggested by #Fabrizio, which I should have thought of myself):
function hashChanged(){
var el = document.getElementById(document.location.hash),
highlight = 'headerHighlight';
document.querySelector('.' + highlight).classList.remove(highlight)
el.classList.add(highlight);
}
document.addEventListener('hashChange', hashChanged, false);
And use CSS to define the particulars of the class:
.headerHighlight {
background-color: #ffa;
}
So I want to highlight the header...
Use :target pseudoclass : http://css-tricks.com/on-target/
Just an example (with a smooth animation):
h2 {
background: none;
transition: background 3s linear 0;
}
h2:target {
background: #000;
}

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

How to hide a div if it overlaps another div

Is this CSS or javascript? I just need the div to change to display:none if it comes within say 20px of another div. Thanks
Try this
https://github.com/brandonaaron/jquery-overlaps
//Listen to the event that will be triggered on window resize:
window.onresize = function(event)
{
// test if one element overlaps another
if($('#div1').overlaps('#div2'))
{
//Do stuff, like hide one of the overlapping divs
$('#div1').hide();
}
}
Based on your comment:
Yes it is so that if the user makes their browser window small my site
does not look crowded
Instead of answering the question you asked, Here's an answer to the question you didn't ask:
How to resize/position/cssify page elements based on browser size?
There is a new-ish application of css and javascript called Responsive Web Design. Responsive Design allows you to specify different css rules to apply based on different elements. For a great example of this technique, resize your browser around on The Boston Globe's website. They just integrated this technique sometime this week.
Here's an example of the css that would implement this:
#media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
example from http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
Here is a boilerplate to get you going.
You can add an event handler that gets fired when the window is resized. You could do this with javascript or jquery. jquery makes it easy:
window.onresize = function(event) {
var h=$(window).height();
var w=$(window).width();
if(h<400 && w < 300){
//hide divs
$('#yourdivid1').hide();
}
}
Hope this helps

Categories