I am a beginner in website design. I would like to have a dynamic height of content. So I do something like this:
<div style="position:relative;width:100%;height:100%;" id="content">
....
</div>
<div style="position:relative;width:2000px;height:498px;">
<?php include('footer.php'); ?>
</div>
However the div of footer does not detect the height of content. What should I do? Thanks.
you can use JQuery for passing height to an element
$(document).ready(function() {
var hgt = $(window).height();
$("#content").css({"height" : hgt });
});
You have defined the height of the content as 100% so that is probably why it does not detect the height of content as content would try to fit to 100% height
try using
<div style="position:absolute;bottom:0px;width:2000px;height:498px;">
I don't have any idea of doing that using css, and I don't think css would detect the dieght of screen or something.
$(document).ready(function() {
var sch=screen.height;
d = document.getElementById('content');
d.style.height=screen.height;
});
This should work. using jQuery
Hey use this link to align your CSS. Make Changes what Ryan Fait Said.
http://ryanfait.com/sticky-footer/
You can find the CSS here,
http://ryanfait.com/sticky-footer/layout.css
and here is how you use it,
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Related
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.
It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.
Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.
Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.
The code I'm using there:
<div class="fbheader">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
<fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->
Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.
I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx
Simply include this in your stylesheet:
#fb-root > div { left:0 }
It's a bug with facebook. Why don't you just update your fbheader class as follows:
.fbheader {
overflow:hidden;
}
That should solve your issue ..
Good luck..
I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:
#fb_like .fb_reset {
/* fix for Facebook bug which causes horizontal scrollbars in browser */
display: none;
}
I fixed the issue using #fb-root { display: none; }
You could try alter the width of fbheader class in css file, or even better, the parent element.
Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.
Another tip is to reposition the button, or set the margins and padding narrow.
My solution is to apply this to the parent container:
.my-parent-wrapper {
display: inline-block;
overflow: hidden;
}
skipping overflow rule will work too
I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.
I'm changing my background-image css property using Mootools:
$(document.body).setStyle('background-image','url(' + pBackground + ')');
And it's its working, but how can a make one fade effect between picture change?
Thanks,
Pedro
You can't fade a background specifically... you have to fade the element that has the background.
For your situation, I would suggest using a <div> that encompasses everything in the <body> of your HTML, ie:
<html>
<body>
<div id="main">
</div>
</body>
You could then set the background-image property of the #main div, and do something like this:
function backgroundChange(pBackground)
{
var m = $('main');
var fx = new Fx.Tween(m,{
duration: 1500,
onComplete: function(){
m.setStyle('background-image','url(' + pBackground + ')');
m.fade('in');
}
});
fx.start('opacity',1,0);
}
Just as a caution, any child elements of that div will also fade, so if you want the background to fade while elements over it remain opaque, you will need to absolutely position any child elements.
Absolutely positioning all elements brings other problems with it when you have variable length content, but there are ways around that too.
Not sure of what i am saying, BUT since it's not a part of the html document, it's not an 'element' so javascript should not be able to work on it.
But, just an idea, and depending on how your site looks, you could try to set an opacity, to simulate an opacity on the body, which can lead to the effect you want..