I wonder how can i get a rounded corner div in IE with borders?
According to jquery plugin jquery.corner.js the job it would be very simple to achieve!
But, I can't make a rounded corner div "with border" working in internet explorer greater than 5...
The following code serves only for testing purposes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>somepage</title>
<script type="text/javascript" src="classes/jquery.js"></script>
<script type="text/javascript" src="classes/jquery.corner.js"></script>
<script type="text/javascript">
$("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px");
</script>
<style type="text/css">
.demo{
height: 34px;
width: 450px;
background: blue;
}
</style>
</head>
<body bgcolor="green">
<div id="teste" class="demo">
</div>
</body>
</html>
What am I doing wrong?
Many thanks, as always.
Have you tried CSS3PIE yet?
I would recommend that you go with a CSS way to do it.
You go here and select the colors for your corner.
http://www.spiffycorners.com/
Once done this will give you the css you need to put and sample code how to use it.
It should work very nicely in all browsers. I used it. No images required.
This is sample styles:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>
This is how to use it:
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
Happy styling!!
Related
When i grab object and try to drop in div it doesn't work,no errors in console nothing,logically i have everything done well and i realize what i am doing but in this case i'm stuck.
being a beginner surely is tough,i'm pretty sure i have done some silly mistake in my code.i did easily dropping 1 instance of object in div,but dropping multiple instances sure is another hardcore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.objects{
display:inline-block;
background-color:#FFF3CC;
border:#DFBC6A 1px solid;
width:50px;
height:50px;
margin:10px;
padding:8px;
font-size:18px;
text-align: center;
box-shadow:2px 2px 2px #999;
cursor:move;
}
#drop_zone{
background-color:#EEE;
border:#999 1px solid;
width:280px;
height:200px;
padding:8px;
font-size:18px;
}
</style>
<script type="text/javascript">
function _(id){
return document.getElementById(id);
}
var droppedIn=false;
function drag_enter(event){
_('app_status').innerHTML="You are Dragging over the"+event.target.getAttribute('id');
}
function drag_leave(event){
_('app_status').innerHTML="You Left The "+event.target.getAttribute('id');
}
function drag_start(event) {
_('app_status').innerHTML="You are Dragging"+event.target.getAttribute('id');
event.dataTransfer.dropEffect="move";
event.dataTransfer.setData("text",event.target.getAttribute('id'));
}
function drag_drop(event){
event.preventDefault();
var data=event.dataTransfer.getData("text");
event.target.appendChild(_(data));
droppedIn=true;
}
function drag_end(event){
if(droppedIn=false){
_('app_status').innerHTML="You let the"+event.target.getAttribute('id')+"go";
}
droppedIn=false;
}
</script>
<h2 id="app_status">App Status....</h2>
<h1>Drop Zone</h1>
<div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" draggable="true"></div>
<div id="object1" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object2" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object3" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)"></div>
<hr>
<button onclick="readDropZone()">GetObjectData</button>
</body>
</html>
I have a some simple HTML with a call to the TextFill jQuery library to auto-fit some text to the available space in my layout.
The layout is fine when on-screen, but when printed out it appears the page is resized and the JavaScript needs to be re-executed accordingly.
Can I rely on $(window).resize() to be called when this happens?
Interestingly the body width is fixed at 700px, but it still seems to be being resized?
The div for the text is set to 50%, and I have two of these divs next to eachother:
<div style="display:table; width:100%; border:1px solid black; border-right:none; border-bottom:none;">
<div style="display:table-row;">
<div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
<div class="text_two_by_two text" style="padding-bottom:10px;">
<span style="font-size: 47px;">some pockets</span>
</div>
<div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
<img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_pockets.jpg">
</div>
<div style="border-bottom:solid 1px black;" class="write_two_by_two"> </div>
</div>
<div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
<div class="text_two_by_two text" style="padding-bottom:10px;">
<span style="font-size: 46px;">some earrings</span>
</div>
<div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
<img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_earrings.jpg">
</div>
<div style="border-bottom:solid 1px black;" class="write_two_by_two"> </div>
</div>
</div>
</div>
</div>
The CSS:
.td_two_by_two {
width:50%;
}
.text_two_by_two {
height:100px;
}
.image_two_by_two {
height:180px;
}
.write_two_by_two {
height:50px;
}
The Javascript:
$(document).ready(function() {
$('body').imagesLoaded(function() {
$('.text').textfill({maxFontPixels:100, changeLineHeight:true});
});
});
The quick answer is no...
You really should rely on CSS for your print to work the way you want it to. I do not have a great answer as to the WHY it doesn't, but we do know CSS works so please attempt to rely on that. It is possible that you may find a full CSS solution to your site as well.
use
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I used few -webkit- properties in my project for making the rounded tab box, animation and rotation stuff. However, I could implement javascript to get the task done. Since -webkit- offers very simple code formate and avoid a lot of coding, I got loved to use it. Now, while opening the page in chorome works fine, but other web browser like IE, Mozila can't detect it. It doesn't make any round-shaped box or any animation. How to fix that within my existing html and css code?
.PHP class:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<header id="top_header" >
<h1>Welcome to my world!</h1>
<div id="style_slogan">
<h1 id="header_slogan"><i>Raise your hand, Make A change</i></h1>
</div>
</header>
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li><div id="rollover_box_home"><p id="text_shadow_home">HOME</p></div></li>
<li><div id="rollover_box_who_im">WHO I'M</div></li>
<li><div id="rollover_box_gallery">GALLERY</div></li>
<li><div id="rollover_box_diary">MY DIARY</div></li>
<li><div id="rollover_box_blog">FATAH'S BLOG</div></li>
<li><div id="rollover_box_contact">CONTACT ME</div></li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding
text and paragraph will be added here-->
<div id="all_contents">
<div id="home">
<p>You are very welcome to my personal homepage. This is my very first creation over the web.
</p>
</div>
<div id="who_im">
<p>
my name is jabir and i was living in a small village.</b>
</p>
</div>
<div id="gallery">
<p> It's Gallery.</p>
</div>
<div id="diary">
<p> It's diary.</p>
</div>
<div id="blog">
<p> It's my blog.</p>
</div>
<div id="contact">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>
.CSS class:
/*#import url('http://getbootstrap.com/dist/css/bootstrap.css');*/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
font-size:27px;
}
#header_slogan{
font-size:22px;
color:#CCFF00;
font: bold 22px Century Gothic;
}
#rollover_box_home{
display:block;
border:3px solid blue;
background:orange;
/*background:-webkit-radial-gradient(center, circle, red 0%, orange 50%);*/
/*background:-webkit-linear-gradient(top, black, white);*/
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_home:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_who_im{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_who_im:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_gallery{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_gallery:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_diary{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_diary:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_blog{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_blog:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_contact{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_contact:hover{
-webkit-transform:rotate(7deg);
}
#text_shadow_home{
text-shadow:rgb(110,110,110) 3px 3px 5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
background-color:#003300;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:black;
color:white;
border:3px solid #FF0000 ;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
background:#996600
}
#the_footer{
color:black;
text-align:center;
padding:20px;
border-top: 2px solid red;
background-color:gray;
}
#all_contents >div {
display:none;
}
#all_contents{
background-color:#00FFFF;
border:10px solid #0000FF;
padding:8px;
-webkit-border-radius:20px;
-webkit-transition:-webkit-transform 2s;
}
#all_contents:hover{
-webkit-transform:rotate(90deg);
}
#home{
font-size:20px;
}
#who_im{
font-size:20px;
}
.JS file:
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
-foo- are prefixes used on CSS properties when they are experimental (subject to change and not intended for production use).
Take the prefix off to use the standard version of the property.
Consider duplicating the property with various prefixes (-webkit-, -moz-, -o-, -ms-) if you want to risk using the experimental implementations that the browser vendors don't consider read for prime time.
Because -webkit- is meant to be worked only on chrome and safari. In your code you have,
-webkit-transform:scale(1.1);
you need to add to it,
transform:scale(1.1); //standard one
-webkit-transform:scale(1.1); // for chrome && safari
-moz-transform:scale(1.1); //for mozilla
-o-transform:scale(1.1); // for opera
-ms-transform:scale(1.1);; //for Internet explorer
like so, you need to add to all the places wherever you have added -webkit-. Do not forget to add the standard properties as well.
Yes -webkit- works on webkit browser (chrome including safari) only.
You need the following vendor prefixes:
-webkit- /* for chrome */
-moz- /* for firefox */
-o- /* for opera */
-ms- /* for ie */
So, you should use like this:
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1); /*standard way*/
WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?
Every browser is backed by a rendering engine to draw the HTML/CSS web page.
IE → Trident
Firefox/Seamonkey → Gecko
Opera → Presto
Safari/Chrome → WebKit.
See Comparison of web browser engines for a list of comparison in different areas.
The ultimate question... is WebKit supported by IE?
Not natively.
You need a webkit browser to use -webkit- CSS
http://caniuse.com/ is a good reference for CSS, if they need a prefix or not:
http://caniuse.com/border-radius
http://caniuse.com/css-transitions
http://caniuse.com/css-boxshadow
http://caniuse.com/css-animation
I'm working on a small project for a friend. I recently learned jQuery on Codecademy, and this is my first time incorporating it in to a web page. However, it doesn't work and I'm not sure why. Also, if someone could direct me on how to center the text boxes, and so on, to look like the image linked below, please let me know.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script> type="text/javascript" src="script.js"</script>
<script></script>
</head>
<body>
<div id="content">
<form>
DNA: <input type="text" name="dna" placeholder="DNA"><br>
mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
</form>
<button id="button" type="button">Tanslate</button>
</div>
</body>
</html>
Here is my stylesheet.css:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#content {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#button{
opacity: 0.7;
display: inline-block;
height:25px;
width:300px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 30px auto;
}
input[type="text"] {
display:/*block;*/ inline-block;
height:20px;
padding:4px 6px;
margin-bottom:10px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
Here is the script.js:
$(document).ready(function() {
$('#button').mouseenter(function() {
$('#button').fadeTo('slow', 1);
});
$('#button').mouseleave(function() {
$('#button').fadeTo('slow', 0.7);
});
});
You need to include jQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
Include the link to the jQuery library:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Make sure to do this before you call any .js files.
You're closing your script tag too early
<script> type="text/javascript" src="script.js"</script>
Should be
<script type="text/javascript" src="script.js"></script>
This center alignment of text boxes you can do through css. If you want to use jQuery then download that and include on your page or add directly <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>. And then you are ready to use jQuery. What you want to do if you let us know then we can suggest something.
When you first click the answer text area, it will pop up a message box
Your Answer
Thanks for contributing an answer to Stack Overflow!
Please make sure you answer the question; this is a Q&A site, not a discussion forum.
Provide details and share your research. Avoid statements based solely on opinion;
only make statements you can back up with an appropriate reference, or
personal experiences.
I am struggling to implement this in my own system. I have checked the jQuery slideUp function, but it slides the text message box down not up.
Does any one know how to implement it?
I am assuming that it uses JavaScript animation.
I'm not sure exactly what you want, is this it?
I think you want to use .slideToggle()
HTML
<textarea></textarea>
<div class="msg">
谢谢你!!
</div>
jQuery
$(".msg").slideToggle();
$("textarea").focus(function(){
$(".msg").slideToggle();
});
$("textarea").blur(function(){
$(".msg").slideToggle();
});
What do you want to appear and when?
Suppose your textarea is like this
<textarea id='answer'></textarea>
SO you can use
$('textarea#answer').bind('click', function() {alert('Thanks')})
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.div1 {
width:400px;
height:100px;
border: 1px solid #777777;
}
.div2 {
width:400px;
height:100px;
border: 1px solid #777777;
overflow:hidden;
}
.help {
background-color:#fefae2;
border: 1px solid #f3eed5;
width:400px;
height:100px;
margin-top:100px;
}
.info-ok{
font-size: 13px;
color:#1087a4;
float:right;
margin-top:5px;
margin-right:5px;
}
.info-head{
font-size: 15px;
font-weight: bold;
margin-top:15px;
margin-right:5px;
}
</style>
</head>
<script type="text/javascript">
function popdown(){
$(".help").animate({
marginTop:"100px",
}, 1000 );
}
function popup(){
$(".help").animate({
marginTop:"0px",
}, 1000 );
}
</script>
<body>
<div class="div1">a</div>
<div class="div2">
<div class="help">
<a class="info-ok" onclick="popdown()">ok</a>
<p class="info-head">您的答案</p>
<p>感谢您对StackPointer做的贡献</p>
<p>请确保您回答这个问题,这是一个问答网站，而不是一个论坛</p>
<p></p>
</div>
</div>
<div class="div3">c</div>
<textarea onclick="popup()"></textarea>
</body>
</html>