I have two icons (Bootstraps Glyphicon) which are places as
1 : Menu Which as left of screen
2 : Gift which is at the right of the screen.
When Clicked on Menu the toggle appears from Left to Right. This works fine.
But when the Gift is clicked it appears in some weird position as shown in the image with the name Suraj Palwe This is at left part of the image. I want this to appear from right of the screen to moving towards the left as per the width of div.
This is the image how it looks.
JSfiddle
This is the what I have written in my code
style
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
}
in html body
<div class="slide_birthday_click">
<table class="table">
<tr>
<td>Suraj Palwe</td>
</tr>
</table>
</div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>
The Jquery Part
$("#today_birthdays").click(function(){
$(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
});
I want that Block Which contains the word Suraj Palwe to right of the screen as it toggles from right to left.
I am not getting where I am doing wrong in my code. Thanks in advance!
Try with:
$("#today_birthdays").delay(200).show("slide", { direction: "right" }, 1500);
Okay This is how I solved my problem. One thing was missing in it!
Just added right:0; to the css file
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
right: 0;
}
Thanks to all!
This is the link to JS Fiddle Answer
Related
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
Fiddle: https://jsfiddle.net/st8q8z5g/5/
Partial CSS:
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Tahoma;
font-size: 11px;
}
b.title {
color: #FFFFFF;
clear: both;
display:inline-block;
padding: 0 0 5px 0;
font-size: 12px;
text-transform: capitalize;
}
b.message {
color: #EDEDED;
clear: both;
display:block;
}
I am running into two issues:
Why does the text alert get cut off if the screen is less than 820px?
(Would like the DIV to expand to show the alert automatically without
setting a height)
When pressing the "Pause" button the "Play" button is displayed but
it loses the CSS for the WIDTH and MARGIN. (The "Play" button does
not stretch and does not have the margin like the "Pause" button) [FIXED]
How can I fix the above issues.
I guess you can do a workaround where you can manually set the height of the blue container divs.
You can change the html like this:
HTML
<div class="blue-container" style="position: relative; overflow: hidden; width: 98%; padding: 1%; background: #0070C6;">
<div style="overflow: hidden; clear: both; text-align: left; position: absolute; right: 2%; top: 8%; z-index: 9999999; color: #FFF;">
<span id="msgCurr">1</span>/<span id="msgOf"></span>
</div>
<div class="light-blue-container" style="position: relative; overflow: hidden; width: 100%; margin: 0 auto; background: #009DF5;">
<div class="section group brClear">
<div class="col span_short vertAlignT span_pad_all">
Previous
Play
Pause
Next
</div>
<div class="col span_long vertAlignT span_pad_all alertHolder">
<div class="msgAlert">
<b class="title">The title alert goes here #1</b>
<b class="message">The alert message will go here 1...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #2</b>
<b class="message">The alert message will go here 2...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #3</b>
<b class="message">The alert message will go here 3...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #4</b>
<b class="message">The alert message will go here 4...</b>
</div>
</div>
</div>
</div>
</div>
And in the css, what you can do is, using a media query, keep it like this:
CSS
#media only screen and (max-width: 820px) {
.light-blue-container{
height:100%
}
.blue-container{
height:21em
}
...
Here is fiddle:
JS fiddle : https://jsfiddle.net/st8q8z5g/9/
As you are keeping the msgAlert div position to absolute, it fixes the fade problems, but when you change the screen size, it would need to act as if its position is relative but should also have the fade smoothness, which i think might be difficult to achieve. So instead of that, just change the containers height and set it manually when the screen size is less than 820px. But if you are unwilling to compromise the dynamic height, you can achieve it using jquery or javascript. But I think for now this should solve your problem.
Why does the text alert get cut off if the screen is less than 820px? (Would like the DIV to expand to show the alert automatically without setting a height)
The .msgAlert has position: absolute and the absolutely positioned elements do not take any height in the viewport. Removing position: absolute from there works:
.msgAlert {
/* position: absolute; */
display: none;
clear: both;
overflow: hidden;
}
When pressing the "Pause" button the "Play" button is displayed but it loses the CSS for the WIDTH and MARGIN. (The "Play" button does not stretch and does not have the margin like the "Pause" button)
The #playAlert has display: inline set very hard, even though if you change, it doesn't. It has to be block.
You can fix it using:
$('#playAlert').css("display", "block").hide();
If I remove position: absolute the message jumps as it fades out and then in...
Give a min-height for the container so that it doesn't jump. :)
The "Play" button isn't the same width if I use your fiddle :/
I left this for you to figure out intentionally. But you made to answer this. Here's the solution:
$('#playAlert').css("display", "inline-block").hide();
Working Fiddle: https://jsfiddle.net/e34pzhu3/
I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:
It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.
I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.