I've read several articles about rounding div but all use the <b> tag with some CSS style to make it round.
I would like to work more on the div itself and to find a way how to make it round-corner state. Maybe working directly on DOM, who knows.
I am no expert in javascript. In fact I tend to use just open source when i use it at all but I believe there is a javacript script fro creating rounded corners for boxes? my question is: will this size to the size of someones monitor or viewport?The one i have found is as below. Can anyone tell me whether this script would. If not are there any orthers that do out there?
HTML Code:
function NiftyCheck() {
if(!document.getElementById || !document.createElement) {
return false;
[code]....
I am using Malsup's Rounded Corners plugin, which is amazing! I use Chrome and Firefox so it looks great. However mycolleague using IE, complained that the corners aren't round. So I looked and the corners are but the border is not (using the "keep" setting).
I saw that on ff/chrome you are using the border-radius which isn't supported by IE<9. Is there some other way to get the borders looking round on IE7,8 or do I just have to turn off the borders?
So, I wish make html input type text with rounded corners. I want make this with on JS.
View 1 Replies View RelatedI'm trying to animate a rounded border of a div. In this post someone posted an solution which works in Chrome and Safari (didn't test it yet in IE), but for sure doesn't work in FF:
Code:
$("selector")
.css({
WebkitBorderTopLeftRadius: 10,
[code]....
This is a Google Maps API V3 issue - but I'm posting it here, as I'm getting no help at the Google-forum and I expect a Javascript solution.
The puzzle:
I have defined a LatLng, like so:
Code:
var myLatLng = new google.maps.LatLng(61.4907009, 8.3708479);
For some reason, if I alert(myLatLng), I get this:
[Code]...
I'm looking for a jQuery plugin or pair of plugins that will apply both a rounded corner and a drop shadow to a DIV box without the use of corner/border images. I've actually found quite a few that do one or the other but they seem to be pretty outdated, not in itself a problem but mostly for lack of support. So far, the few that I've found will do rounded corners and a few will do drop shadows. Sometimes they fail to work with each other and sometimes they only work in FF or Safari and fail in IE. I'm coming up short on the magic combination.
This failure in IE kinda defeats the whole purpose of doing this with jQuery since I can already get FF and Safari do to both with only CSS3. Does anyone know of a great jQuery plugin or pair of plugins known to work in all browsers including the latest couple/few versions of IE?
I know CSS3 is at the stage now where we can use this feature comfortably across all modern browsers, but what else can be done via Javascript/Jquery to create our ever-so beautiful rounded corners ? Im trying to achieve a fairly consistent look "cosmetically" in all my sites going back as far as IE 7...For example my second site Ive built PAT Tester providing PAT Testing in Birmingham Worcester Bromsgrove Redditch Dudley Worcestershire West Midlands utilises CSS3 and looks ok in the modern browsers, but go back to IE8 and "yuck" its all squared out maaaan....!
View 1 Replies View Relatedrounding the quote up to two decimal places. I've seen a lot of codes and tried a bunch (math.round, tofixed, toprecision) but not exactly sure how to use them and where to put them. Calculator can be viewed here along with the code [URL]
View 3 Replies View RelatedI am developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don't want to use images. However, I don't think the curvy corners script is picking up the div item that I want to apply the corner to.
The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn't work properly in IE. Here's the HTML for the menu:
Code:
<div id="menu">
<ul>
<li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a [code].....
The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code.The class 'homefocus' seems to work when applied to the a tag on the home page but the other class 'home' which should work on hover won't work in IE.
My menu navigation(Home, Hosting Solution, etc..)
1. The submenu links need to be centered in the middle of the div instead of aligned to the left.
2. Can the submenu links have a rounded box appear under them, instead of being underlined links. Like these at the top: [url]
3: The top tab needs to stay gray/active/on when the mouse is moved down to the submenu or when it is the active button.
Here is the link of the site [url]
I am using the curvycorners.src.js script in order to achieve rounded corners in IE. If you go here: [URL] and then drag and resize your browser screen, you will see that the header and bottom section move out of alignment. When I remove the Curvy Corners script, the issue goes away. For some reason though it is only affecting the home-page of the site (not the sub-pages).
View 1 Replies View RelatedI am trying to have a container div generated by the DOM, holdeverything inside the body. I can't get it to hold the contents in the body.
<html><head>
<style type="text/css">
body {
text-align:center;
}
#container {
width:200px;
margin: 0 auto;
text-align:left;
border:solid 1px #000;
padding:5px;
}
</style>
<script type="text/javascript">
var d = document;
function insert(){
var box = d.createElement('div');
box.id = "container";
d.body.insertBefore(box, d.body.firstChild) // not what I want
// d.body.appendChild(box);
}
window.onload=insert;
</script>
</head>
<body>
This content should be centered and inside the div.
<h3>This text also.</h3>
</body>
</html>
My HTML is shown in an iframe. There is a link in the HTML that needs
the ID of the iframe to be used in the onclick event. How do I get it?
I tried accessing the target property, but it turns out to be
undefined. Also I do not know the frame number in the parent's frame
collection. SO I cannot do parent.frames[2].id.
Is there a way to determine if a div is outside of the containing div?ex.
<div id="container" style="overflow:hidden">
<div id ="row"></div>
</div>
[code]...
i want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically.
View 4 Replies View RelatedI want to do this with js and not with any html/css tables, image fills or whatever other trick, but I don't know how...
Say I have multiple DIV containers below each other, which contain multiple DIV boxes floating next to each other. None of the DIV elements have a fixed height:
<div id="container1">
<div id="box1">some text</div>
<div id="box2">some double more text</div>
<div id="box3">some other text</div>
[Code]....
I want for each container (separately) to have the contained box divs to fit the biggest one in height.
For example, in container1, if box2 contains more text than the others, I want box1 and box3 height to fit box2. And in container2, if box4 has more text than the others, I want box5 and box6 height to fit box4, etc.
In my dreamworld, the solution would be flexible and fully automated, which means, it would look for all container divs of class x or Id x and apply the same rule to all child divs.
I have heard of jquery "equalheights" plugin but I don't think it can do that ? or then I misunderstood something. Could I be using some "get element by class" function and then apply a style.height to the divs?
I am using the YUI library to do the following.I use YAHOO.util.Connect.asyncRequest to obtain some HTML from the server.I then use new YAHOO.widget.Dialog(...) passing it the ID of a dynamically created DIV and then loading it with the HTML obtained earlier.Now the HTML I receive has some javascript in it, and this works perfectly in Firefox. But in IE the javascript doesn't run. It doesn't seem to work in Chrome either guess I want to know if this is a known problem, or have I done something wrong. And if it is a known problem are there any workarounds?
View 2 Replies View RelatedIn prototype with ajax.updater you can chose to show errors in another div than the one you want "real" content in.
Code:
new Ajax.Updater({ success: 'items', failure: 'notice' }, 'ajax_req.php', {
parameters: { text: $F('text') },
insertion: Insertion.Bottom
});
But all information i print out from ajax_req.php gets in the items div. How can i print out errors from ajax_req.php into the notice div?
I have a drop area that should be pulling a value from a hidden input field when activated.For some reason, the code can see the image and set the new values but trying to get the value of the input field always comes back undefined. It's the $newSKU2 value that isn't getting set.
var $newpic2 = $('#2').find('img').attr('src');
var $newtitle2 = $('#2').find('img').attr('title');
var $newtext2 = $('#2').parent().parent().find('font').text();
[code]....
I was able to resize the images in the css with a width-max; 600px; but the container stay big. How can I resize it in lightbox.js?
Here is the code
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
[code]....
What can I add there to have a max container?
I'm looking for an API available to select all descendants of a container, I didn't find anything yet.
View 1 Replies View RelatedI'm having trouble wrapping two adjacent divs in one parent container. For example take the following html:<div>
<div class="line"> hi </div>
<divclass="line"> hi again </div>
<div class="line"> hi </div>
<divclass="line"> hi again </div>
</div>
I need every pair of ".line" divs to be wrapped in a parent div, so it will look like this:
<div>
<div class="new">
<div class="line"> hi </div>
<divclass="line"> hi again </div>
[Code].....
I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious.
I would like the display an image within a 100 x 100 pixel container.
If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container.
I want to avoid pixelation of the images as much as possible.
All images are external and not on the local server so I only have an image URL.
I would like to hide all images until they are resized appropriately.
Does anybody know of a piece of javascript code that can do something similar to this?
I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar.
Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe.
URL]
i am working with a simple jQuery tabbed container and am wondering how to make the main body of the container use a background image instead of a background color. Here is the code:
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>[code].....
But that obvioously does not work. what do I need to do to put a background image in there?
P.S. this code works other than that so you can throw it in a notepad doc to see the page in action.