I'm new in html and css and javascript I want to build my first onepage website and I'm using skrollr library but I don't know why I can not use it in true way I have 2 div in my index file and styles in css file, when I write something on second div it does not show and its hide behind the first div here is my code in jsfiddle
<div id="please-scroll" data-0="opacity: 1;" data-800="opacity: 0;">
please scroll to see Dinosaurs life story
</div>
<div id="next_generation" data-800="opacity:1;" data-1000="opacity: 0;">
please scroll moreeeeeeeeeeeeeeeeee
</div>
and here is my css
html, body {
margin:0;
padding:0;
height: 4500px;
width:100%;
}
#please-scroll{
position:absolute;
display:block;
height:100%;
width:100%;
background-color:red;
text-align: center;
z-index:100;
}
#next_generation{
height:100%;
width:100%;
background-color:yellow;
text-align: center;
}
for tag div should be:
div class="..."
not
div id="..."
Related
Currently I have this piece of code running a canvas animation that shows subtle stars moving and sparkling. Currently the canvas is it's own element but I'm wanting to move it to be a background element on a parent div. Can anybody show me how to do this. JS fiddle attached here - https://jsfiddle.net/83aahcng/
<div id="container">
<canvas id="pixie"></canvas>
</div>
I would just put a div over pixie like this... div over pixie.
HTML:
<div id="container">
<div id="over_stuff">
Here's some stuff over #pixie!
</div>
<canvas id="pixie"></canvas>
</div>
CSS:
#container {
overflow:hidden;
position:relative;
z-index: 1;
}
#pixie {
z-index:0;
background:#010222;
background:
}
#over_stuff{
color:white;
position:absolute;
top:0px;
left:0px;
z-index:5;
padding:10px;
}
Is there is something I'm not understanding? This seems way too simple
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I am trying to display single image on a web page so that :
If the image is smaller than screen of the user. Full Image is shown
Otherwise if the image is larger than user's screen then it should fit screen and once image is clicked only then full size is shown .
Here is my html
<html>
<body>
<div class="img">
<img src="imagepathhere.jpg" />
</div>
</body>
</html>
Here is the css that I have tried but I guess it is not possible by just only using css:
<style>
html,body{
min-width:100%;
margin:0px;
padding:0px;
}
.img {
padding:0px;
width:auto;
text-align:center;
margin:auto;
}
.img img {
max-width:100%;
}
</style>
What would be best way to do it?
Ahmar.
Toggle max-width:100% on click
The easiest way to do this is to add this property to a class instead of applying it to the tag name
.img .shrinkToFit {
max-width:100%;
}
And then use JQuery to toggle it on click
$(".img").on("click", function() {
$(this).find("img").toggleClass("shrinkToFit");
});
Example: http://jsfiddle.net/TrevinAvery/anryho0o/
Here's a solution that confines the image as you described, but to it's parent div, rather than the entire screen (to make it easier to use as an example). It uses the css :not() selector which may not have full browser support.
http://codepen.io/sean9999/pen/LlCJa/
"use strict";
$('#toggleimage a').on('click',function(){
$('.img img').prop('src', $(this).data('imgSrc') );
});
$('.img img').on('click',function(){
$(this).toggleClass('fullsize');
});
html,body{
min-width:100%;
margin:0px;
padding:0px;
background-color: silver;
}
.img {
padding:0px;
width: 450px;
height: 450px;
background-color: white;
text-align:center;
margin:auto;
border: 1px dotted gray;
}
.img img:not(.fullsize) {
max-width:100%;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="toggleimage">
<li><a href="#" data-img-src="http://nerdhow.files.wordpress.com/2008/02/mushroombgbig.png">load big image</li>
<li>load small image</li>
</ul>
<div class="img">
<img src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" />
</div>
I have a range of buttons which I would like to space evenly across my nav bar. I could get the size of each button and work it out but I wonder is there a way of working this out automatically and setting these widths at as the page loads.
At the minute I have 5 buttons and an input field and would like to make these span a 800px div.
HTML:
<div class="nav">
<div class="nav_btn">HOME</div>
<div class="nav_btn">NEW IN</div>
<div class="nav_btn_drop_down">CLOTHING</div>
<div class="nav_btn_drop_down">ACCESSORIES</div>
<div class="nav_btn_drop_down">SHOP BY BRAND</div>
<div class="nav_btn"><form action="" method="POST"><input type="text" placeholder="Search..." /></form></div>
</div>
CSS:
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
}
You can use this trick using display:table-cell instead of float:
.nav_btn, .nav_btn_drop_down{
display:table-cell;
width:1%;
white-space:nowrap;
text-align:center;
}
Check this demo http://jsfiddle.net/xveV4/10/
I think padding would solve your problem:
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
padding: 10px;
}
Fiddle
Yes it is possible. You could always use percentages for the width of each nav_btn/nav_btn_drop_down.
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
box-sizing:border-box;
width:16.667%
}
Each item in your nav is itemcount/100 in width ~= 16.667%
See fiddle here:
http://jsfiddle.net/t9t2D/
I am trying to drag an element from a container which is an overflow:hidden div. While dragging , the element goes behind the container (looks as if it's behind the screen).The draggable elements should be dragged outside of their container and remain visible once they are outside.
LINK TO THE FIDDLE
Please note that
1)I cannot use the appendTo inside the draggable(Because it'll cause me issues elsewhere)
2)I cannot use helper:clone again for the same reason.
The complete code follows.
HTML
<div id='outer_container'>
<div id = 'inner_container'>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
</div>
</div>
CSS
#outer_container
{
background:#ededed;
position:absolute;
top:100px;
left:40px;
width:400px;
height:100px;
overflow:hidden;
}
#inner_container
{
position:absolute;
width:2000px;
height:100px;
top:0px;
left:0px;
background:#ededed;
}
.draggable_element
{
position:relative;
width:90px;
height:80px;
top:10px;
left:20px;
margin-right:50px;
background:#ff9600;
float:left;
}
SCRIPT
$('.draggable_element').draggable();
I am hoping that somebody can point me in the right direction.Thanks!