Is it possible to set body background image as a link? So when somebody click on anywhere outside the content area, it will go to another website.
Something like this http://jsfiddle.net/xzuEA/2/ , you just need to add background block with onclick event
<div id="fakebody">
</div>
html, body {
width:100%;
height:100%;
}
div#fakebody {
width:100%;
height:100%;
background:red;
}
$(function() {
$("#fakebody").click(function() {
window.location = "http://www.google.com/";
});
});
Can be done in html/css only:
<body>
<!-- YOUR WEBSITES HTML -->
</body>
CSS:
#background {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:0; // NOTE: YOUR OTHER ELEMENTS MUST BE ABOVE z-index: 0 TO MAKE IT A BACKGROUND
background:url(your/path/to/background-image.png);
}
Related
How to add content that already exists on another #div:before
because the existing div will I set as a fixed position
#text-1{
width:100%;
text-align:center;
/* visibility:hidden; */
/* position:fixed; */
}
#text-2 {
width:100%;
text-align:center;
}
#text-2:before {
content:"Equal to the contents of #text-1";
width:100%;
text-align:center;
color:#ff0000;
position:absolute;
width:100%;
left:50%;
background-color:#e3e3e3;
border-top:1px solid #999999;
margin-left:-50%;
margin-top:18px;
font-style:italic;
}
<div id="text-1">Content Text-1</div>
<div id="text-2">Content Text-2</div>
You need to use jquery for this. First include jquery library in your html file if it is not there and then add below javascript code inside your head tag:
<script type="text/javascript">
$(document).ready(function(){
var contents = $("#text-1").html();
$("#text-2").html(contents);
});
</script>
Things I'm trying to accomplish:
Images go to the next one based on scroll.
The images will cycle through, and when they are all done the view will proceed to the bottom section. A problem with what I have right now is that, when I scroll, the view doesn't stay on the image, but moves on to the rest of the page--so even if the image changes, the image is no longer in the viewport.
fadeIn when it goes to the next image (or use another animation).
When scrolling up, it goes back up the image sequence.
If there is a jQuery plugin that does this, please feel free to refer.
jsfiddle: http://jsfiddle.net/jzhang172/gcSe8/145/
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
} else if ($(document).scrollTop() > 110) {
$(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
}
.img-container img{
height:100%;
width:auto;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Try this:
$(document).ready(function () {
var images_index = 0;
var act_cycle = 0;
var n_cycles = 5;
var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
$(window).on('DOMMouseScroll mousewheel', function (e) {
if ($(".img-container").is(':hover')){
if (e.originalEvent.wheelDelta < 0) {
if(images_index < images.length-1){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if(++act_cycle % n_cycles == 0){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
}
}
}
else {
if(images_index > 0){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if (--act_cycle == -n_cycles){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
}
}
}
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
z-index: 1;
}
.img-container img{
height:100%;
width:auto;
z-index: 1;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Explanation:
Images go to the next one based on scroll.
To solve this I just put in an array all the images, changing the src depending on the index of the array that I'm updating depending on the scroll direction (see wheelDelta)
The images will cycle through, and when they are all done the view
will proceed to the bottom section. A problem with what I have right
now is that, when I scroll, the view doesn't stay on the image, but
moves on to the rest of the page--so even if the image changes, the
image is no longer in the viewport.
To prevent the normal scroll I used the DOMMouseScroll and mousewheel events, then preventDefault and stopPropagation and I only fire this logic if the img-container is hover.
fadeIn when it goes to the next image (or use another animation).
I just first fadeOut, the change src and finally fadeIn
When scrolling up, it goes back up the image sequence.
Solved with the array of images.
In adition, I add some z-index, because of the behavior of the jQuerys fadeIn/Out and a scrollTop to fix the view on the image when is changing
UPDATE: If you want to change the image in a certain numbers of 'cycles' you can add a var to control it (here is n_cycles, change his value to change the number of cycles you want wait until image changes, I set it to 5 as you say in comments).
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}