I have a simple JQuery thing that activates when the page is ready. Two strings would slide down at different times.
The problem is that in the first string, only the first half of the word slides down but the second half is delayed for a split second.
Can someone tell me why?
Here is my code:
<!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>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
background-color:#007B4C;
width:1280px;
height:70px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}
.body{
width:1267px;
position:relative;
left:-12px;
height:1010px;
background-color:#EDF0F5;
top:25px;
z-index:9;
}
.footer{
background-color:#007B4C;
width:1267px;
position:relative;
left:-12px;
height:200px;
top:25px;
z-index:9;
}
.message{
font-family:"MS PGothic";
width:1200px;
font-size:40px;
text-align:center;
position:relative;
left:50px;
color:#333333;
top:200px;
display:none;
}
.congratulations{
position:relative;
font-family:"MS PGothic";
width:300px;
left:450px;
top:200px;
color:#333333;
font-size:60px;
display:none;
}
</style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
$(".congratulations").slideDown(400);
$(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>
It is because the h1 element containing your string "Congratulations!" is smaller than it's rendered text and jQuery apparently applies the animation on the h1 element at first, which crops just a fraction of the string.
Either remove width property of .congratulations class or make it wider than the text.
I suggest you to use "inspect elemnt" tool in your browser to debug strange things like this.
The reason for CONGRATULATIONS to cut out while sliding is because of the width given for .congratulations in CSS.
The first half that slides will be equal to the width that is set. Reducing would keep the first part smaller and increasing would keep it larger.
Keeping the width:100% is the solution to your problem.
hi the problem comes from css class .congratulations
increase to width:500px //this will fix the problem with half word slide
This is pretty wild, slideDown is sliding down only the portion you specified in the width, 300px. The rest is displayed after the slideDown finishes.
Remove width from congratulations CSS class.
Related
I'm trying to figure out how to create up to 4 vertical stripes on the background of a DIV. Each stripe is 4 pixels wide and is the same h=height as the div. Also I need to have the stripes be dynamic. There could be any number of the 4 stripes visible at runtime based on some data in an object.
Here's an image of the general idea.
I've been trying to implement this with css and sass as well as javascript but not making progress. Any help would be greatly appreciated.
Thanks
If I am correctly understanding your question, box-shadow might help you solve this problem. Here is what I have tried,
Initialize a div with some height and width
Now we have psuedo elements :before and :after use it to create strips, i.e 2 strips will appear.
Now, box-shadow comes into picture for every strip you can n number of strips using box-shadow .
Here is my attempt.
.progress{
width:140px;
height:40px;
background-color:white;
border:2px solid black;
}
.progress::after{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:red;
box-shadow:4px 0 lightgreen
}
.progress::before{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:blue;
left:18px;
box-shadow:4px 0 pink
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Hope it helps you.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I am using Fluid web design taking widths in "Percentages". I also reset all Margins and Paddings to default 0px. There is no border in any div. Still, why be default these are not aligned in same line???
Example:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>
</body>
</html>
Please, someone help me out. How in world is this not aligned in same line. But if I reduce % of any of these to go below 100% (like 98% or less), then these get aligned. But, if there is no margin, no padding. Why is this gap of width required?
You need to add HTML comments between your divs to cancel the whitespace interpreted by the browser :
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>
Weird space that inline-blocks give.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You can have those three divs in one row to avoid any hacks/tricks.
https://jsfiddle.net/dghkcg04/
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
The browser interprete de div like a white space so doing this to get it:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
</body>
</html>
I need the image to fit the 50% of the screen height of the device and not 50% of the current screen size (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.
The image is very large and I am looking to crop it, and not resize it. Here is what I done so far:
home.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img class="image" src="myimage.jpg" alt="">
</body>
</html>
home.css:
html, body {
margin:0;
border:0;
padding:0;
}
img.image {
width:100%;
}
I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!
Consider using the css clip property.
Combining clip with a little JavaScript to get the screen size may just be the right solution.
to crop the image, you will need a container with overflow:hidden.
DEMO/example :
html, body {
height:100%;
margin:0;
}
.crop50h {
height:50%;
overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
text-align:center;
}
.crop50h img {
/* width:100%; ? */
margin:0 -100%;
min-width:100%;
}
Wit html basis :
<div class="crop50h">
<img src="http://lorempixel.com/1200/1200/"/>
</div>
If I've read your question correctly, I believe you're asking to set the image to be 50% of the desktop window, not the browser window.
In that case you can use window.screen.availHeight in Javascript to get the available height:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";
I have an 'Export Text/PDF to Excel' functionality in my webapp. I display the original report in the same domain to be exported to excel in an iFrame inside a jsp(parent doc)
<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>
In the existing page, I ask the users to click the positions/points inside the iFrame for column splitting i.e., the text between 2 selected split points form a column in the resultant excel sheet and I record the positions using jQuery's event.pageX. NOW WHERE I NEED HELP is that I want the selected positions to be highlighted by vertical, colored thin lines as a column marker from the top edge to the bottom edge of the iFrame
This is what I want:
Click to view the resultant jsp page
Some one please help!!!
Ended up positioning the elements over each other, the text file was a random file I selected from google. You will have to track the clicks but the hard part is done an the code could be a little cleaner but it answers your problem I hope.
Answer requires jQuery
Live demo: http://jsfiddle.net/3aQC4/1/
<html><head>
<style>
#con, .line{
display:block;
position:absolute;
top:0;
left:0;
height:300px;
width:600px;
border:1px solid black;
z-index:10;
background-color:transparent;
}
.line{
border:none;
border-right:1px solid black;
z-index:5;
}
iframe {
position:absolute;
top:0;
left:0;
z-index:1;
height:300px;
width:600px;
}
</style>
</head>
<body>
<div id="con"></div>
<iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>
<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>
</body>
</html>
I have a sequence of position absolute div, say
<div>...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
I wrote a simple slide code using jQuery
currentDiv.fadeOut('slow');
nextDiv.fadeIn('slow');
It works perfectly in FF/Chrome/Safari/IE7/IE8, but not in IE6. I found in IE6, fadeOut and fadeIn not occur simultaneously as in other browsers, fadeIn always begin after fadeOut is completed. any ideas?
I just tried this example and both a fadeIn and fadeOut work at the same time in IE6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div#one").fadeOut("slow");
$("div#two").fadeIn("slow");
});
});
</script>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; display:block;}
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
I modified the example from: http://docs.jquery.com/Effects/animate#paramsoptions
I've noticed before that setting the styles display to none in the actual div instead of in the css file or via jquery can sometimes cause issues. Try just giving each div a class of displaynone instead of setting their style tag. Hopefully this helps and good luck!
Have you checked this site:
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
?
Here is a goog Plugin for jQuery:
http://malsup.com/jquery/cycle/
Have you tried writing your own animation to achieve the fades, rather than using the defaults supplied. I don't know that it will be any better, but it might be worth a try.
http://docs.jquery.com/Effects/animate