I have very little javascript knowledge, so it seems a very basic question, but could not find a way to do that.
I have a 1024*768 fixed area like this:
alt text http://img260.imageshack.us/img260/4618/myimage.png
There will be a javascript button on the right side of the "Section A". When I click that button, Section A will be automatically resized and it will be something like this:
alt text http://img705.imageshack.us/img705/92/myimage1.png
So, Section A will overlap with Section B, and it will be same size with Section C (And i know the size of Section C). How can I automatically resize that area with overlap function? I am looking a plugin for Jquery, but could not find that. There is a resizable function in Jquery, but it does not help me. Could you help me out? (If you just give me a link that is related with this feature, that would be enough too)
edit: For extra note, Section A is a flash object, so it will enlarge and overlap with Section B when I click to that button.
Thanks,
The jQuery hide() effect would be useful here. If both Section A & Section B have a float: left Section A should expand to fill the area when Section B is hidden.
http://docs.jquery.com/Effects/hide
Have you tried the animate function?
http://docs.jquery.com/Effects/animate
Could have Section B hide with a slide or have Section A overlap it like you mentioned just need to set the positioning, z-index, etc. properly.
something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terminal</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#but').click(function (e) {
$('#a').removeClass('big').addClass('normal');
$('#b').hide();
e.preventDefault();
});
});
</script>
<style type="text/css">
.height {
height: 100px;
border: 1px solid black;
}
.big {
width: 198px;
float: left;
}
.small {
width: 100px;
float: left;
}
.normal {
width: 300px;
clear: both;
}
</style>
</head>
<body>
<div>button</div>
<div id="a" class="height big">a</div>
<div id="b" class="height small">b</div>
<div class="height normal">c</div>
</body>
</html>
Related
I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.
I am trying to write a canvas graph application by using HTML5 and JavaScript. The main element in this app is a box that the user is able to write a long text in it and the size of the box should adjust while writing the text. I realized that the best way is to use the textarea tag while the user wants to write in it and when the user loses the focus(blur event) on the textarea it will change to a label with the same value in the textarea. You can see the related code below:
<!DOCTYPE html public "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TB/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Editable Label</title>
<!--<link rel="stylesheet" href="box.css">-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txt').blur(function () {
if ($('#txt').val().trim() != '') {
$('#txt').hide();
$('#lbl').html($('#txt').val());
$('#txt').val('');
}
});
$('#lbl').click(function () {
if ($('#lbl').html().trim() != '') {
$('#txt').show();
$('#txt').val($('#lbl').html());
$('#lbl').html('');
}
});
});
</script>
</head>
<body>
<div id="container" align="center" style="width:1300px; height:700px; position:relative;">
<canvas id="myCanvas" width="1300px" height="700px" style="border: 1px solid #323232;" ></canvas>
<span id="lbl" style="color: #ff0000; font-size: 14px; font-weight: bold; position:absolute; top:200px; left:170px;"></span>
<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px;"></textarea>
</div>
</body>
</html>
I could make the textbox appear in multi-line by using textarea tag instead of the input tag but the problem is that I don't know how to make the label to appear in multi-line. I searched a lot and already used white-space:normal; and display:inline-block; and width: 20px; in styling the label but it didn't work. I am wondering if I need to adjust the label size (width and height) by using Jquery. If yes, how exactly do I have to do that?
Note that since the user is entering unknown amount of words I cannot use line breaking tags.
Any help will be highly appreciated.
I think what you want is
overflow:hidden; or overflow:visible;
so:
<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px; overflow:hidden;"></textarea>
It would be easier to read your code if you used CSS though.
I'm not really sure what you're trying to do then, width:220px; made the text break for me. This also worked, and I believe it better matches what I think you're trying to do:
#lbl{
max-width:220px;
height:auto;
}
Im attempting to make a navigation bar with Jquery. the idea is that you click on the navigation button and several links(in the form of divs) will slide out. However, i am unable to get the initial click action to work. Currently im just trying to move the #Home button to the left 100px after you click the #clickme button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src = "jquery-2.0.1.js"></script>
<script>
$("#clickme").click(function(){
$("#Home").animate({left: 100} , "fast");
});
</script>
<style type="text/css">
#Nav {
position:absolute;
width:200px;
height:115px;
z-index:1;
top: 268px;
left: 530px;
background-color: blue;
}
.Button{
position:absolute;
width:200px;
height:115px;
z-index:0;
background-color:#693;
}
</style>
</head>
<body>
<div id="Nav">
<div id="Home" Class = "Button">Home</div>
<div id="About" Class = "Button">About The Internship</div>
<div id="Meet" Class = "Button">Meet the Interns</div>
<div id="Request" Class = "Button">Request an Intern</div>
<div id="clickme" Class = "Button">Navigation</div>
</div>
</body>
</html>
You have to wait 'till your dom is ready + you've the wrong selector.
.ID is for Classes (css)
#ID is for actual ID's
$(function(){
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,"fast");
});
})
This should work..
In addition to stackErr's answer:
'fast' should be passed as a string.
fiddle: http://jsfiddle.net/jonigiuro/xt57a/
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
}
the problem seems to be with the selector. id must be used with # not with .
try
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,fast);
});
you can place this code at the bottom before </body> using scripts at the bottom of the page makes page faster & executes when dom is ready. otherwise wrap the codde with $(function())
Your id selector is incorrect.
Your code should be:
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
});
this shouldnt matter but script tag should have the type attribute since you are not using HTML5:
<script type="text/javascript" src="jquery-2.0.1.js"></script>
On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});​
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>
I'm really stuck with trying to keep div blocks centered with the exception of the last row.
Someone else already created this fiddle that kind of demonstrates my question. You can see how the blocks in the result panel stay centered even when the window is resized. I would like to have similar behavior BUT if the last row contains less blocks than the rows above, then that last row should not get centered but left aligned.
Here is the fiddle:
http://jsfiddle.net/zbbHc/1/
Someone might ask why I don't just use float:left. The problem with that is that I couldn't find a way of centering my blocks using that method without also specifying a fixed width for my wrapper. I'm trying to keep everything as liquid as possible.
Try this fiddle http://jsfiddle.net/zbbHc/45/
Not sure, but I think this is the maximum we can do using CSS alone.
Update: (THis will not work in all cases, check the code below which work in all cases [I guess])
HTML
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB hide"></div>
<div class="iB hide"></div>
</div>
CSS​
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
​
Here is the quick and dirty method using jQuery. This will add invisible elements automatically
Fiddle here http://jsfiddle.net/fD6fn/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
​
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
itemWidth = "200",
count = "",
itemCount = 7;
count = $wrapper.width()/itemWidth;
// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}
function addInvisibleElements()
{
// Delete invisible items
$("#wrapper .iB.hide").remove();
var c = findHiddenElementCount();
for(var i = 0; i < c;i++)
{
$("#wrapper").append('<div class="iB hide"></div>');
}
}
$(window).bind("resize",addInvisibleElements); // resize handler
$(document).ready(addInvisibleElements); // take care during page load
</script>
</body>
</html>
Why don't you use percentage? http://jsfiddle.net/zbbHc/38/ that's how most of fluid layouts usually work
When you say 'if' the last row has fewer blocks do you mean that it's dynamic content? If you know it will have one then you can just position it relatively to the value of half its own width(and any margins etc)
.iB:last-child{
position:relative;
left:-100px;
background:blue;
}
http://jsfiddle.net/zbbHc/54/
It may be possible to do this with a table (though I tend to try to avoid tables). Table-cells' dimensions are determined by their contents (of course, you can add your own, or max/min dimensions). You could have a table with one column and (although it's not best practice) embed divs into the table (each div being a block).
The width of the table would be fluid because it would be based on the width of the widest cell (thus, the blocks will line up nicely and will look very neat), and you could hard-code or script (of course, I suggest scripting) a style/method to check if the last row contains less blocks, and if it does to set the text-align to left for that cell, only.
This solution could probably use some improvement, but it may be a good start, depending on what your going to use this for.