|
JavaScript - Curvy Corners Not Rendering
Hi everyone,
I've downloaded the curvy corners codes from the following address: http://www.curvycorners.net/downloads/ The instructions in the curvycorners.src.js file say that all i need to do is add the following piece of code which I've inserted into the head section: <script type="text/javaScript" src="js/curvycorners.src.js"></script> <style type="text/css"> <!-- p.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; CCborderRadius: 25px; } --> </style> However, it's not rendering in opera and internet explorer. I wondered if someone could tell me where I'm going wrong? The is the xhtml I'm targeting: Code: <div id="content_wrapper">
<div class="accomm">
<h3 id="accomm"><a href="#" title="Quality accommodation"> Quality accommodation</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="about.php">Learn more...</a></p>
<p id="fees"><a href="fees.php">Fee structure</a></p>
</div>
<div class="local">
<h3 id="local_area"><a href="#" title="Our local area"> Our local area</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="local_area.php">Learn more...</a></p>
<p id="directory"><a href="directory.php">Hospital directory</a></p>
</div>
<div class="welcome">
<h3 id="packages"><a href="#" title="Welcome packages">Welcome packages</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="welcome_packs.php">Learn more...</a></p>
<p id="map"><a href="location_map.php">Find us on the map</a></p>
</div>
</div>
</div>
Really appreciate any help. Similar TutorialsI am using curvy corners, and it is working fine, as long as I only want one rounded box... I want (at least) two, and I am having trouble adding a second <div id> to the script. I'm not able to decipher much of javascript, and the explanation that came with the code isn't clear enough for me. Can anyone help? Here's the code... Code: <script type="text/JavaScript">
window.onload = function() {
var settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true
}
var divObj1 = document.getElementById("container");
var divObj2 = document.getElementById("login");
curvyCorners(settings, divObj1, divObj2);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="login">
<img src="images/fcbdivcmyk_small.png" /><br /><br />
BLAH BLAH BLAH
</div> <!-- This is the end of #login -->
<div id="banner">
This is the text to the right.
</div> <!-- This is the end of #banner -->
</div> <!-- This is the end of #container -->
Hey Guys, I'm working on a site and it needed borders with opacity, and since you can do it with CSS I done it With jQuery. But now I would like to round the corners of it, I did try border-radius, but it's only effecting the containing div not the borders(see below). Is there a solution to this? Here's the small snippet of JS: PHP Code: $('.mainContent').border({ width: 6, color: 'white', alpha: .4 }); Surprisingly, this jQuery plugin nearly works in IE6. You can see the error that is produced at the bottom of the article corner. (I'm tackling the other issues... .png later) link: http://www.happydogwebproductions.com/nerdery/ Any clue on how to fix this? Hi All, I'm building a featured content slider using AnythingSlider. It works fine in FF, Safari, Chrome, and IE8, but in IE7 it will not show the navigation buttons. Take a look at the site here. The navigation buttons are added by the script in a ul called thumbNav. This ul either doesn't load or can't be seen in IE7. Any help would be greatly appreciated as I've got to have this ready for the client by tonight. If any other info is necessary let me know and I'll provide it. Thanks very much, Mike Hi there, I am presently banging my head against the wall, while working on an html5 game remake of a classic online game I have struck a problem, that should be a simple figure out and is crushing my brain. I need to produce a 2000x2000 tile map and render it to screen, add objects, remove objects, pick objects, all fine no problem, code for said has been dealt with. What I need to do is pre-render a 2000x2000 map as a base for my tile/object map to go on so to speak. Although I should be able to figure this quickly my brain keeps freezing. What I am after here is theory help really, although any code snippets are welcome. I have a javascript-run rotating (as in rotating through a series of content, not rotating in a circle) div. Each content div has an image and a bit of text. The title text - bold arial - is really messy, as though it's a badly pixelated image - smudged, almost. the rest of the text - smaller and not bold - isn't bad, but still doesn't match text outwith these divs. it's fine in firefox, chrome, and even IE6!! Does anyone know what's happening in IE7? What I am trying to achieve is when the Input Box value is increased or decreased using the up/down arrows that the new value will be writen to the Canvas, though the code I have works it dosent render properly. I also have a Span Tag absouletly positioned within the canvas which works perfectly but I'd like the Canvas text to work instead. Not sure if it's possible. Code:
<!doctype html>
<html>
<head>
<title></title>
<!------------------------------------- STYLE ------------------------------------->
<style type="text/css">
canvas {
background:#222;
}
#length{
position:absolute;
left:10px;
top:10px;
width:150px;
}
#text_in_canvas{
position:absolute;
left:500px;
top:100px;
width:400px;
font-style: normal;
font-size: 25px;
color: red;
}
</style>
<!------------------------------------- CODE ------------------------------------->
<script type="text/javascript">
var fps = 100;
function draw_canvas() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");//returns drawing functions to allow the user to draw on the canvas.
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
//
var startPosX = (300); // Start Position from X axis
var startPosY = (height - 50); // Start Position from Y axis
//
var length = document.getElementById("length").value; //Get's value from Text Input Box
var text = "This is the number from Input Box: " + length;
document.getElementById("text_in_canvas").innerHTML= text;
//LEFT BLOCK
context.beginPath();
context.rect(0, 0, 250, height); //position & size of left block
context.fillStyle = 'black'; //background colour
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'red';
context.stroke();
context.closePath();
//TEXT
context.font = 'bold 28px sans-serif'; // set text font
context.textAlign = 'center';
context.fillStyle = '#FFFFFF'; // set text color
context.fillText(text, 548, 50);
}
</script>
</head>
<body onload="draw_canvas()">
<!-- CANVAS STARTS HERE -->
<div id="" style="width:1000px;height:600;margin:auto;position:relative;">
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #000000;"></canvas>
<!-- FORM BEGINS HERE -->
<form id="my_form">
<label for="length">Outside too Outside Wallplate Measurement (millimeters):</label>
<input type="number" id="length" name="length" step="1" min="0" max="" placeholder="" oninput="JavaScript: draw_canvas()">
</form>
<span id="text_in_canvas"></span>
<!-- FORM END's HERE -->
</div>
<!-- CANVAS END's HERE -->
</body>
</html>
I need to render a tree in freemarker. I am not sure about what technology should be used. I was thinking Jquerys jsTree plugin. My requirements - 1. Tree control -Name and instead of Icon ,i want customized letters(A,B,C) that represents type of element. 2.I dont want dotted lines connecting root and children like folder tree. 3.collapsable. Please suggest what and how can i do .? Hi all, I'm encountering a strange rendering issue with a chunk of code I'm developing. I'm building an object that will construct a drop down-esque menu. The menu has a function (addEntry) to add additional menu items to itself. When the user hovers over a menu entry - I add a class to the element to change the look (basically highlight it). However, when the mose moves over - some strange rendering occurrs and I can't quite seem to figure it out. Please have a look at the following fiddle, and click the link to open the menu. Edit fiddle - JSFiddle I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows: Main html page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css"/>
<link href="../css/default.css" rel="stylesheet" type="text/css"/>
<title>Default</title>
</head>
<body>
<div class="navigation" id="nav_div">
<iframe name="nav_frame" onload="loadNav()"></iframe>
</div>
<script type="text/javascript" language="javascript">
<!--
function loadNav()
{
nav_frame.location="../static_partials/navigation.htm";
}
//-->
</script>
</body>
</html>
And the code of navigation.htm is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" language="javascript">
<!--
function iframeLoad()
{
parent.document.getElementById("nav_div").innerHTML = document.getElementById("navigation_divs").innerHTML;
}
//-->
</script>
<title>Navigation Partial</title>
</head>
<body onload="iframeLoad()">
<div id="navigation_divs">
</div>
</body>
</html>
The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception. The exception states the following: Code: Permission denied for <file://> to get property Window.document from <file://>. Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language. Hi there, I am having a problem with IE rendering the font of my website poorly, but only when the javascript code is allowed... The website is he www.thelivingsacred.co.uk And as you can see, there is a huge difference between IE8's rendering of the site once the scripts are allowed, and before, as well as a difference between IE8 and Firefox. Please could someone explain what's going on? My javascript quits working when I am rendering the html? (It works perfectly fine if the page is opened from http address directly). I did some research and concluded that "JavaScript is executed on page load", so when I render my html, my JavaScript functions are not automatically called. My question is how should I call the javascript functions manually? verify.html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <Title>form</Title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="xupload.css"> </HEAD> <BODY> <form id="myform" enctype="multipart/form-data" action="/cgi-bin/upload.cgi" method="post" onSubmit="return StartUpload(this);"> <DIV id="div1"> <b><font id='x_max_files'>?</font> files <font id='x_max_size'>?</font> Mb total maximum</b> <div id="upload_input"><input id="my_file_element" type="file" name="file_1" size=58></div> <div id="files_list"></div> <p align=center><input type="submit" value="Upload Files" class="myForm" id="submit_btn"></p> </DIV> </form> <iframe src="javascript:false;" name="xupload" style="position:absolute;left:-9999px;"></iframe> <script type="text/javascript"> //Specify your form ID var x_form_id = 'myform'; var x_mode = 1; var x_tmpl_name = ''; </script> <script src="xupload.js" type="text/javascript"></script> </BODY> </HTML> config file: Code: htmlverify = "../verify.html" Perl: Code: if(my $verifypage = $g->{CV}{htmlverify}) {
# passing variables
xxxxx
....
# render the page:
send_header();
$p->pf($verifypage);
}
|
|||||||