Below is my code that has three images aligned horizontally next to each other. Upon clicking each image I've added some simple action to remove the other images but image 2 and image 3 if clicked will still remain in their present area as opposed to Left Aligned like image 1. Is there a way I can Left Align image 2 or 3 if they are clicked? Many thanks
<div style="width:510px; height:105px; padding:5px;">
<img alt="Passenger Vehicle" id="V1" src="http://hou-agsprd02/images/basictruck.gif" onclick="Vehicle1()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Water Vehicle" id="V2" src="http://hou-agsprd02/images/WaterTruck.gif" onclick="Vehicle2()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Rig Transport Vehicle" id="V3" src="http://hou-agsprd02/images/GasTruck.gif" onclick="Vehicle3()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
</div>
Here is my code in another function that hides images 2 and 3 if image 1 is clicked, sorry for leaving that out.
document.getElementById('V2').style.visibility = 'hidden';
document.getElementById('V3').style.visibility = 'hidden';
You're setting the visibility to hidden, which essentially hides the block, but still takes up space in the layout.
What you want to do is remove the space where the block once was, by setting the display attribute to none.
Based on your javascript code, you can do it by changing your code to this:
document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';
After doing this, you'll notice that the block will be removed, and the elements around it will collapse into the areas where the hidden blocks once were.
What is your Javascript code?? If you are just making the image hidden, it is still there. You will need to actually remove the image from the page, then the images will fill it's place since they are floating left.
Related
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
I am very new to web scripting. I have to cover up this defect asap that's why I am using patches instead of some permanent fix .
I got a defect that a tab get selected only when the lettering of it get selected.
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0px;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%'>Search</span>
</div>
There is an issue with z-index but fixing that create some further issues. So I got that the div is get selected when span is selected.
So how can I make whole span cover that div.
Update (from comment)
ok i will try to make it more clear to you as you can see there is an onclick event in that div so whenever you should click on that div some thing need to be loaded. but that tab got selected only when mouse cursor is taken over Search ie we can click only when mouse is on lettering
add display:inline-block; to the <span>
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;left:0px;background-color:transparent;width:75px;border:1px solid blue;' >
<span style='text-align:left;width:100%;border:1px solid red;display:inline-block;'>Search</span>
</div>
I have added border:1px solid red; and border:1px solid blue; for reference
Demo: http://jsfiddle.net/dfJFV/
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%;display:block;'>Search</span>
</div>
add display: block to the <span>
I've set a thumbnail to have a max-width and max-height and need to set up some kind of onmouseover setup to where when they hover over the image, it shows them a bigger image.
I cannot use links to do this.
Any ideas?
html
<img src="imageurl" class="s3_right" style="max-width: 400px;">
I tried using the code below; however, it messes up because I have a max-width/max-height.
html
<img src="image url" class="s3_right" onmouseover='Big(this);' onmouseout='Small(this);' style="max-width: 400px;">
javascript
<script language=javascript>
<!--
function Big(me)
{
me.width *= 2;
me.height *= 2;
}
function Small(me)
{
me.width /= 2;
me.height /= 2;
}
-->
</script>
There is also the problem that maybe x2 will be larger than the actual image. I don't need the code to expand the image larger than the actual image is. So I would really just need the code to set a new max-width and max-height or popup the image off the page with a max-width and max-height (like, not actually change the layout because the image thumbnails are displaying with text wrapped around them.)
Is it a possibility to just spoof an absolute positioned duplicate, along with the thumbnail, nested inside a wrapping div assigned a relative position?
<style type="text/css">
.meDiv
{
position:relative;
border:1px solid black;
width:200px;
height:100px;
}
.meSmall
{
display:block;
width:100%;
height:100%;
}
.meBig
{
z-index:10;
position:absolute;
left:0px;
top:0px;
display:none;
width:800px;
height:350px;
}
</style>
<div class="meDiv">
<img class="meSmall" src="imageURL" onmouseover="Big();" />
<img id="bigOne" class="meBig" src="imageURL" onclick="Small();" onmouseout="Small();" />
</div>
<script language="javascript">
function Big() {
document.getElementById('bigOne').style.display = "block";
}
function Small() {
document.getElementById('bigOne').style.display = "none";
}
</script>
Obviously the code given won't directly plug into your scenario or win any awards, but it's just to give an idea of the concept.
Using this you could apply whatever size restrictions you want to the wrapping div and/or thumbnail (bugs with max-width/max-height permitting) without affecting the large image or dislodging any wrapped text. You could also use the characteristics of the thumbnail to determine traits of the large image if you need to by employing a bit of JavaScript black voodoo magic (I'm a jQuery fan myself).
I have a "div" with style: overflow-y: scroll; overflow-x: auto;
I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine.
Is there any solutions for this?
EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.
I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.
Wrap everything in a containing div that is positioned relatively on the page:
<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
<br />
<img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
<br />
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
<br />[scrolling content]<br />
</div>
<br />
</div>
Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
Try float:left or float:right with margin
I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.
And a simple solution is using float.
my old code was-
position:absolute; right:10px;
and I replaced with the following and it worked-
float:right; margin-right:10px;
You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...
Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.
You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.
Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:
<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>
<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>
Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com
For a good tutorial on DIV positioning with CSS go to:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Cheers
The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.
want to know Simply the javascript to overlay a div on centre of the page.
Just want to use plain java script to show and hide a div on the center of the page with "Please wait..." message and disable the background. Also this div shoud show on top of the other content of the page.
My div looks like this
<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>
On click of a button , I want to show the div content center aligned on the page.
I do not want to use jquery,extjs,,etc to achieve this.
I have seen a few examples on the web with lot of other features added to a modal popup, just looking for something simple and clean.The bare minimum JS required to do this.
The div you want to display needs to have an ID:
<div id="loaderdiv">
Then in your javascript, you display this div with the following code:
document.getElementById("loaderdiv").style.display = '';
Thats the bare minimum you'll need.
Centering the image can be done using CSS:
<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">
<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
example.com<br />
</div><!--overlay_msg-->
<div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
</div><!--my_overlay-->
<script type="text/javascript">
function showMyOverlay()
{
document.getElementById('my_overlay').style.visibility='visible';
document.getElementById('overlay_msg').style.visibility='visible';
}
function hideMyOverlay()
{
document.getElementById('my_overlay').style.visibility='hidden';
document.getElementById('overlay_msg').style.visibility='hidden';
}
</script>