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>
Related
I have a fixed size div in which dynamically div will come using ng-repeat. The insider div in such a way like if only one div come then it should take size(height and width) 100%. If 2 then 25%.Here is a screenshot I pest.Please have a look. Thanks in advance.
CSS
.big{
height: 300px;
width: 300px;
overflow: auto;
background: #DAE8ED;
}
.small{
float:left;
background: #EDDFDA;
}
Controller,
app.controller('Ctrl', function($scope){
$scope.numbers = [1,2,3,4,5,6,7];
var width = 300/Math.ceil(Math.sqrt($scope.numbers.length)) + 'px';
$scope.customStyle={'height':width, 'width':width};
});
HTML,
<body ng-controller='Ctrl'>
<div class='big'>
<div class='small' ng-repeat="n in numbers" ng-style='customStyle'></div>
</div>
You can try to add a ng-class and change class depending of your number of div
First create your different css class with a container.
CSS
.container{
width:400px;
height:400px;
border:solid 1px black;
}
/* use for all child */
.child{
display:inline-table;
}
/*For 2x2 */
.deux{
background-color:red;
width:50%;
height:50%;
}
/* 3x3 */
.trois{
background-color:blue;
width:33.3%;
height:33.3%;
}
/* 4x4 */
.quatre{
background-color:yellow;
width:25%;
height:25%;
}
HTML
<div class="container">
<div ng-repeat="x in i" class="child" ng-class="{'deux':(i.length<=4),'trois':(i.length>4 && i.length<=9),'quatre':(i.length>9)}">
{{x}}
</div>
</div>
You can try to change the array in my example :
JSFiddle Example
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'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="..."
I'm trying to make an image appear when you roll over text on the bottom right side of the screen. How do I get it down there for all screen widths and heights?
you can use fixed positioning on the image and assign the left,top, right or bottom attributes to suit your needs see: http://www.w3schools.com/css/css_positioning.asp for an example
This'll work:
<style type="text/css">
img.floating {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<img class="floating" src="url to image" />
:hover doesn't work for IE6 unless it's being used on a link. Use this.
<style type="text/css">
#myFavoriteFooterImage {
bottom:0px;
right:0px;
position:fixed;
display:none;
}
</style>
<script type="javascript">
document.getElementById("mousyTextFunTime").onmouseover = function(){
document.getElementById("myFavoriteFooterImage").style.display = "";
};
document.getElementById("mousyTextFunTime").onmouseout = function(){
document.getElementById("myFavoriteFooterImage").style.display = "none";
};
</script>
<div id="mousyTextFunTime">Text to mouse over</div>
<img id="myFavoriteFooterImage" />
Create a CSS style for :hover on the text.
<style type="text/css">
#bottom { display:none; }
#text:hover #bottom {
display:block;
position:absolute;
left:0; // how far from the left
bottom:0;
}
</style>
<div id="text>TEXT</div>
<img src="bottomimage.jpg" id="bottom">
I have the following Jquery/JavaScript snippet I'm working on.
Basically it's a Object Orientated image slider. See the code on JSBin: http://jsbin.com/eloduj/3/edit#html,live
The problem is that when I click the slider navigation controls it only slides once in each direction! How can I get this to work properly as there are 4 image DIVs?
Any help would be appreciated greatly, Thank you
ANSWER (After some help from rdcmk) Sharing is caring
JS
var cn = {
hero : function(r,rc,lx,rx){
rc=$(rc),rcw=rc.width(),rca=rc.size(),rw=rcw*rca;$(r).css({'width':rw});
$(lx).click(function(){n=$(r).position().left-rcw; $(r).animate({left:(n<-rw+rcw?0:n)+'px'},500);});
$(rx).click(function(){n=$(r).position().left+rcw; $(r).animate({left:(n>0?-rw+rcw:n)+'px'},500);});
}
}
$(function(){
cn.hero('#reel', '#reel div', '#reel-left', '#reel-right');
});
HTML & CSS
* { padding:0; margin:0; outline:none; font-family:Arial, Helvetica, sans-serif; }
#wrap { width:1024px; margin:0 auto; }
#hero { border:1px dashed lime; position:relative; width:1022px; height:304px; overflow:hidden }
#hero #reel { border:1px dashed red; position:absolute; height:302px; left:0; }
#hero #reel div { width: 1018px; height:300px; float:left; }
#reel-controls { position: absolute; z-index:10; }
<div id="hero">
<div id="reel">
<div id="pic1" style="background-color:#C3F"></div>
<div id="pic2" style="background-color:#0F9"></div>
<div id="pic3" style="background-color:#999"></div>
<div id="pic3" style="background-color:#6CC"></div>
</div>
<div id="reel-controls">
<span id="reel-left">left</span>
<span id="reel-right">right</span>
</div>
</div>
I think I got it: http://jsbin.com/eloduj/14/edit#html,live
the answer is quite simple. You are currently doing something equivalent to x=3 while you want x=x+3..
do something like this (pseudo-code)
$(leftCtrl).click(function(){
var currentLeft = $(reel).offset().left;
$(reel).animate({ left: currentLeft-reelChildWidth }, 500 );
});
$(rightCtrl).click(function(){
var currentlLeft = $(reel).offset().left;
$(reel).animate({ left: currentLleft+reelChildWidth }, 500 );
let me know if this is good enough or if you need a running example.