Does anyone know how I would generate random div widths?
They would need to be between 150px and 300px.
The height of the div is not important as the content I'm going to put inside should automatically stretch them.
Thanks!
Currently using this code
<head>
<script type='text/javascript'>
$(document).ready(function(){
var x = Math.floor((Math.random()*150)+150);
$('#stat').width(x+'px');
});
</script>
</head>
<body>
<div id="stat" style="float:left; background-color: red;">hello</div>
</body>
using javascript's random() and some jquery you can do something like this:
$(document).ready(function(){
var x = Math.floor((Math.random()*150)+150);
$('div').width(x+'px');
});
<div>hello</div>
Related
I have an iframe on a page that will display an image file I am hosting.
I can make the iframe responive so that it get's larger or smaller depending on window size but am looking to have the actual image in the iframe scale to fit the iframe as opposed to having the scroll bars appear when the iframe gets smaller than the image. Is there a way to do this?
Below is the code I am working with where http://example.net/picture.jpg is the hosted image.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/picture.jpg'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
Somehow a second scrollbar appears in my development page
http://topdodavatel.cz/defakto/produkty/stoly/
Do you have any idea why this happens? I believe the content should automatically fit into the page and only one scrollbar would be necessary.
Here is how the problem looks like
remove the
overflow-x: hidden;
in your body, html CSS.
Should be fine after this.
Try this code. iframe height set based on content height. so scroll not show
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
I add dynamic text to a tab(jquery ui tab) using a function based on onchange event of a combo box. The script works. The problem is it grows horizontal only. I don't need horizontal growth. Even though I have defined the max width, it doesn't concern it and grow horizontally.
I need to grow it vertically. that means to start appending to a new line when it reaches to the maximum width limit of the conatiner
from jquery UI(you can down load this)
<div id="myTabs">
<ul>
<li><span style="background:#85E085; color:#000; padding-top:0px; padding-bottom:0px;">OK</span></li>
<li><span style="background:#FFD6AD; color:#000; padding-top:0px; padding-bottom:0px;">Not Sure</span></li>
<li><span style="background:#FFB2B2; color:#000; padding-top:0px; padding-bottom:0px;">Too Difficult</span></li>
</ul>
<div id="a" style="padding-top:0; margin-top:0; max-width:200px;" >
</div>
<div id="b"></div>
<div id="c"></div>
</div>
<!--<script src="development-bundle/jquery-1.4.4.js"></script>-->
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.tabs.js"></script>
<script>
(function($){
$("#myTabs").tabs();
})(jQuery);
</script>
===========================================================
the script i wrote
newlink = document.createElement('a');
newlink.innerHTML = idname;
newlink.setAttribute('title', 'dsdsd');
newlink.setAttribute('href', '#'+idname);
newlink.setAttribute('class', 'k');
$("#a").append(newlink);
$(".k").css("padding-left","5px")
Try to put the css property white-space: normal in divs that have max-width. This will make the div respect the line breaks.
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
/* #box {position:absolute;top:0;right:0;} */
/* #box {position:absolute;top:0;left:0;} */
/* #box {float:right;} */
#box {float:left;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
</body>
</html>
Uncomment the first float left id with the float right one and you will see. I left my tried solutions commented out as well.
You should have a full repro from a copy and paste.
I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.
I'd love for someone to prove me wrong though.
Here's a javascript solution that works:
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
#box {position:absolute;top:0;left:0;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
<script type="text/javascript">
function layout() {
if( typeof( window.innerWidth ) == 'number' )
this.screenWidth = window.innerWidth;
else //patch for IE
this.screenWidth = document.body.clientWidth;
this.el = document.getElementById('box')
if (this.el.offsetWidth > this.screenWidth)
window.scroll(this.el.offsetWidth,0);
else
this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
}
function eventListener(el,action,func) {
if (el) {
if (el.addEventListener)
el.addEventListener(action, func, false);
else if (el.attachEvent)
el.attachEvent('on' + action, func);
}
}
eventListener(window,'resize',layout);
layout();
</script>
</body>
</html>
I had (what I think may be) a similar issue where I wanted to right-align a canvas element that is wider then the div that holds it. The div is about 300px, the canvas element about 1000px.
Using float: right, the canvas was right aligned but the scrollbars on the div disappeared.
I solved this with jQuery using scrollLeft() to set the initial scroll based on the div and canvas widths, similar to:
$("#div").scrollLeft(canvas.width() - div.width() )
I had this problem. I solved it by making the inner contents display:inline-block, then the outer container text-align:right. The inner content gets 'floated' right (as if it was inline text) but the scrollbar still remains. You have to reset the text-align on the inner content or all its content gets aligned right too.
If your inner content doesn't like being inline-block, then you're stuck with other solutions.
I want to embed a swf over a html page, like a floating video watching panel. I already have a swf file which will automatically adjust its size according to the browser size, and the swf file is partially transparent. I thought I can just add a div tag, make the position absolute and change z-index bigger, but that doesn't work because the swf just replaced everything that's on the page.
Here's what I did
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="header"></div>
<div id="shell">
things in my html
</div>
</body>
#header {
position:absolute;
z-index:100;
}
Any idea? Thanks.
Once you get your sizing to work properly you will need to set the wmode to transparent to be able to see what's behind the flash, if you don't it's background will be opaque.
This is a quick copypaste from the swfobject docs, but it should get the point across:
<script type="text/javascript">
var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
I believe the problem with this is that the CSS doesn't work well with <object /> tags. The swfobject.embedSWF turns the <div id="header"></div> into an <object /> tag with a bunch of attributes that might be effecting the CSS. If you create a wrapper DIV around the header DIV and apply the CSS to the wrapper DIV, everything works better. You also need to add 100% width and height in the CSS. Here's the revised source:
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="wrapper">
<div id="header"></div>
</div>
<div id="shell">
things in my html
</div>
</body>
#wrapper {
position:absolute;
z-index:100;
width:100%;
height:100%;
}