I am trying to use the jquery custom scrollbar plugin.
My html:
<body>
<div style="height:10000px"></div>
</body>
javascript:
$("document").ready(function(){
$("body").customScrollbar();
});
Yes, I linked jquery, the js and css file.
When I load the page, it is blank. Without the javascript, it is fine.
The plugin can be found here:
http://plugins.jquery.com/custom-scrollbar/
You need to set the skin in the body and set width and height in pixels. Percentages or use of CSS3 calc doesn't works (if you set the width and height in body). Maybe you would have to modify the CSS to get better results.
<head>
<style type="text/css">
body{
width: 200px;
height: 200px;
}
</style>
</head>
<body class="modern-skin">
<div style="height:10000px">asdf SAS</div>
<script>
$(window).load(function(){
$("body").customScrollbar({updateOnWindowResize:true});
});
</script>
</body>
Look! it's just a band-aid.
If you need a better solution, I recommend you to implement this example from plugin website. Here's an example of how to adjust the scrollbar to the window size.
Related
Hey fellas and ladies,
I'm having an issue applying the following css rule.
$('#bam').css({"-webkit-overflow-scrolling": "touch"})
Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.
However if I do the the same syntax and change color it works.
As a use case im trying to fix an issue with an iphone iframe overflow problem see iframe size with CSS on iOS for my current issue and Im not in a position to use inline styles or external css.
Any ideas :)?
Added jsbin example.
https://jsbin.com/vizacezeva/edit?html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#bam').css({"overflow-scrolling": "touch"})
console.log('hi');
console.log($('#bam').css("overflow-scrolling"));
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="bam" style="width:100%; padding:0px;">
<iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;">
</iframe>
</div>
</body>
</html>
Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style.
/** style.css **/
.foo { -webkit-overflow-scrolling: touch; }
// app.js
$('#bam').addClass('foo');
I've been trying to figure out for the longest while why I couldn't get a table at 100% height although all it's parents were at 100%. Playing around I found it worked once I removed jQuery mobile from the site. After that I created a bare bones version of it and actually got the same results. I have no idea why this happens. Here's my code:
HTML:
<table class="container">
<tr style="height:15%;"><td>Menu Goes here</td></tr>
<tr style="height:85%;"><td>Content Goes here</td></tr>
</table>
CSS:
<link rel="stylesheet" type="text/css" href="boilerplate.css">
<link rel="stylesheet" type="text/css" href="jquery.mobile.custom.structure.min.css">
<style type="text/css">
body, html {
height:100%;
width:100%;
margin:0;
padding:0;
}
.container {
height:100%;
width:100%;
border:solid 2px red;
}
tr {
border:solid 2px blue;
}
</style>
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.mobile.custom.min.js"></script>
I'm using a custom jQuery Mobile build but I get the same results even when I use Google's CND.
Any idea why this happens and how to work around it?
EDIT:
http://ramiroproductions.businesscatalyst.com/test.html - barebones version
http://ramiroproductions.businesscatalyst.com/aboutus.html - actual site
Try using !important to make sure that any other css is not overriding the height property.
Also check by doing an inspect element to see if your css is applied or it is striked out.
Update:
For the height property to work correctly if given in percentage you have to make sure that its parent has been given a height. Jquery mobile is adding its own div wrapper on your html which is not having height 100%. see here for solution.
This question has been posted a lot of times, i have referred them but not working for me. I have an iframe which loads another wesite in it. I want that the height of the iframe must be change dynamically as per the height of the website page loading in it. No manual height settings. How can i do that?
<iframe src="http://www.w3schools.com/" width:150;></iframe>
Could anyone please fiddle and show me? Advance thanks for help. Fiddle link below:
[link] ( http://jsfiddle.net/vineetgnair/5p0pL5zu/ )
It's not easy to do in a cross-browser safe way as it may seem. You are better off using a JavaScript library that does it for you. I have used this one with success before.
you have an error in code that is
<iframe src="http://www.w3schools.com/" width=150;></iframe>
that is colon(:) has to replace equal(=)
if you want responsiveness make the width in percentage it gives you full responsive
<iframe src="http://www.w3schools.com/" width=100%;></iframe>
first you need to full height your iframe using some css technique given in the below css section. then take the height of that iframe(full height of given url in the src iframe), pass that height to iframe..
the css:
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
/*set your width here*/
height: 100%;
border: none;
}
</style>
the body section:
<iframe src="http://www.w3schools.com" frameborder="0" width="100%" id="frameid"> </iframe>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var theHeight = $('#frameid').height();
$('#frameid').attr('height', theHeight);
console.log(theHeight);
</script>
I was wondering what would be the best solution to move certain element of the responsive page, which is displayed in footer on live website, on top in source code only.
EXAMPLE
Like this site has h1 seo-block right after body tag in source code but on live website this content is displayed at the bottom. They use absolute positioning to fix this.
#subfooter{
width:100%;
position:absolute;
bottom:0;
left:0;
}
My question is how could I do this on responsive design because absolute positioning doesn't work best there unless we would use a lot of #media queries for this class only. Are there any other better css/js/jquery solutions for this?
You can't do so via CSS alone. You need to move the part in question using JavaScript.
jQuery example:
jQuery( 'body' ).append( jQuery( '#subfooter' ) );
If you are willing to live with the (currently) limited browser support, you can achieve this with the flexible box layout module.
(live demo)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox</title>
<style>
body {
display: flex;
flex-direction: column;
}
#source-top {
order: 2;
}
#source-bottom {
order: 1;
}
</style>
</head>
<body>
<div id="source-top">Source top</div>
<div id="source-bottom">Source bottom</div>
</body>
</html>
I am trying to make an animation that must only be shown within a specific margin. For example, I have a square div from left to right(100px to 500px) and top to bottom(100px and 500x). A picture is inside this square, the picture will animate from left to right. What I want is to progressively hide the picture when it reaches the square left corner until the picture is completely hidden. This is something similar to a sliding banner. I have tried by setting div margins, but did not work. I am using jquery, but I am open to other libraries. Any suggestion, page or anything will be helpful.
This is an example of what I am doing. The id=picture is sliding to 900px, but what I want is to progressively hide the picture once it has reached the 500px of the id=square.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<style>
body{ background-color:#94B8B8;}
</style>
</head>
<body><!--border-color:white-->
<div id="square" style = "width:500px;height:500px;background-color:blue;position:relative;">
<div id="picture" style = "width:100px;height:100px;background-color:white;position:relative;top:50px;left:50px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:"900px"},1000);
});
});
</script>
Thanks,
Joe|_
jsfiddle: http://jsfiddle.net/jZaxW/1/
You need to add overflow hidden to the square.
CSS:
body{ background-color:#94B8B8;}
#square{overflow:hidden;}
Also, you are loading your libraries in the wrong order. jQuery must be loaded before jQueryUI, although that isn't the issue at hand.
http://jsbin.com/unoqew/1/edit
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:350, opacity:0},1000);
});
});