Jquery jqte and document ready - javascript

I've tried many different places for the script with $('#editable').jqte(); inside.
Sometimes the editor shows up, sometime it does not, it seems non-deterministic.
It's like my document is not ready when I call the jqte() function.
<!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" />
<meta name="keywords" content="Parcours, technique, sujets, peinture figurative, couleurs, émotion." />
<title>Creating Page</title>
<link href="/bundles/usersite/css/homepage.css" type="text/css" rel="stylesheet" />
<script src="/bundles/usersite/js/jquery.js" type="text/javascript"></script>
<link href="/bundles/usersite/css/jquery-te.css" type="text/css" rel="stylesheet" />
<script>
$(document).ready
(
function()
{
$('#editable').jqte();
}
);
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="mainContent">
<div id="editable">
</div>
</div>
</div>
</body>
</html>
EDIT:
Due to my twig template the below is missing in some cases (like the above one):
<script src="{{ asset('bundles/usersite/js/jquery-te.js') }}" type="text/javascript"></script>
works better with javascript linked !!!!!!

Related

what should be the order of tags .aspx page?

I have a test.aspx page.
The html code is
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head> ...
But when I am executing this page, it is throwing the following error.
can't execute code from a freed script.
When I search in google, I got the answer as Meta tag should be after script tag.
Is it recommended to put script tags after meta tag in .aspx page.
The correct syntax is
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
</head>
<body>
</body>
</html>
Or You can put the script tag inside the body after the closing of form tag.
You should do some reading on basic HTML structure http://www.w3schools.com/html/
Your script tags need to be inside the <HTML> element. Ideally at the end of the body tag...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<form id="myForm" runat="server">
<!-- you html elements -->
</form>
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
</body>
</html>
The doctype is important to get the page to render in standards mode. However with the (almost) release of HTML5 you should be using it as it provides many more elements to take advantage of. Example below..
<!doctype html>
<html lang="en">
<head runat="server">
<title>test Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
</head>
<body>
<form id="myForm" runat="server">
<!-- you html elements -->
</form>
<script src="scripts/test.js"></script>
<script src="scripts/abc.js"></script>
</body>
</html>
meta script title should be inside the head tag. You can also load the scripts in the end of the body to increase page loading performance.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
</body>
</html>

jquery.min.js Failed to load resource

Why this link doesn`t work?
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<!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 name="Description" content=" [wstaw tu opis strony] ">
<meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
<meta name="Author" content=" [dane autora] ">
<title>[tytuł strony] </title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".animat_kon").click(function () {
$(".animat_text").slideToggle("slow");
});
});
</script>
</head>
error example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you did not included http://
whenever you are downloading from the server directly then usehttp://
Change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
into
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You missed the http:. You can skip the http: to let your browser automatically choose between HTTPS and HTTP. But in your case the debugging tool seems not to understand this syntax.
Find more information here: Can I change all my http:// links to just //?
The link must start with http://
Please change your script src to:
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
script src should start with http://

How to access class name by javaScript

I want to access class"pdocCover" for set width and height of body by javaScript . How should I do?.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by PubliForge, $Date: 2012/02/03 12:17:54 $ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<title>Couverture</title>
<link rel="StyleSheet" href="Css/reset.css" type="text/css"/>
<link rel="StyleSheet" href="Css/publidoc.css" type="text/css"/>
<link rel="StyleSheet" href="Css/main.css" type="text/css"/>
</head>
<body class="pdocCover">
<div>
<img src="Images/9782919504060.png" alt="Couverture"/>
</div>
</body>
</html>
By using jQuery
$(".pdocCover").css("height","500px");
$(".pdocCover").css("width","500px");
By using JavaScript
document.getElementsByClassName('pdocCover').style.height="500px;"
document.getElementsByClassName('pdocCover').style.width="500px;"
To achieve what you specifically described:
document.getElementsByClassName('pdocCover')[0].width = '100px'
... but that probably isn't what you want. For one you can access the body more quickly and clearly by doing:
document.getElementsByTagName('body')[0]
and this will not change the width or height of the window itself if that is what you are attempting to do. Unless you create a new window with window.open you do not have control of the window size.
document.getElementByClassName("Classname") should return array of object who have class "classname". choose your one by selecting the index: [0] the first element, [1] the second etc.

Why doesn't this external JavaScript load?

I've been futzing with this for hours trying to figure out why codemirror.js won't load in any browser other than Firefox. Any ideas?
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script src="CodeMirror/js/codemirror.js"></script>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { $('#container-1').tabs(); });
</script>
<style type="text/css"> /* (some css) */ </style>
</head><body>
<!-- (some stuff) -->
</body></html>
CodeMirror/js/codemirror.js
alert("LOL");
I tried the code in Firefox 3.6.3, Internet Explorer 8, Opera 10.53 and Safari 4.0.5, and it works just fine.
Note that the address to the script is relative, so if your page is at www.mydomain.com/content/pages/page.html, it will load the script from www.mydomain.com/content/pages/CodeMirror/js/codemirror.js, not www.mydomain.com/CodeMirror/js/codemirror.js.
One thing that you can improve is to add the type attribute to the tag:
<script src="CodeMirror/js/codemirror.js" type="text/javascript"></script>

Javascript place problem or another thing?

<%# Page Language="C#" AutoEventWireup="true" CodeFile="Urunler.aspx.cs" Inherits="Urunler" %>
<!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 runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link href="rss/example_ticker.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script src="rss/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="rss/jquery.vticker.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
...
...
...
<td style="background-color: #808080">
<script type="text/javascript">
$(document).ready(function () {
$('#ticker1').rssfeed('http://www.xxxxxxx.com/map.asp').ajaxStop(function () {
$('#ticker1 div.rssBody').vTicker({ showItems: 3 });
});
});
</script>
<div id="ticker1" >
</div>
I have two scripts: lightbox and rss. Lightbox script works very well in mywebform1 but rss feed doesn't work. How can I solve that?
PS: on the other hand, my another webpage(mywebform2) in the same website has only rss feed and works very well.
You are likely experiencing conflict between the jQuery and Prototype frameworks you loaded.
Either choose which one you want to use (arguably the better solution), or consult this documentation for how to use both together.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
You're probably running into issues because you're using both Prototype and jQuery on the same page. It's highly unlikely that this is the best thing to do. I'd recommend just using jQuery and getting rid of Prototype and Scriptaculous ... there are plenty of ways to get what you need done in jQuery alone.

Categories