Javascript place problem or another thing? - javascript

<%# 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.

Related

Why jQuery progress bar is not working?

This is a Google hosted jQuery script ..right?
So I do not need to download anything ..I guess.
but then when I load the page why do not it shows any thing
What is the trick am I missing here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script>
$(function () {
//call progress bar constructor
$("#container").progressbar({ value: 50 });
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
By any chance are you testing from your local machine with "file:" URLs?
If so, you can't use URLs in the form:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
because that is the equivalent of:
src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And thus your scripts won't be found.
During development, set them to http::
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And switch them back when you go to production (if you want).

Jquery jqte and document ready

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 !!!!!!

FancyBox Implementation Problems

I'm having some problems getting FancyBox to work...I figure its something pretty simple but I'm still a beginner with web design and the process is a little confusing to me right now. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- ******************* CSS ******************* -->
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- ******************* Javascript ******************* -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox();
});
</script>
</head>
<body>
<a class="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>
</body>
The error I'm getting is pretty popular on SO but I've looked for all the fixes mentioned and nothing has worked yet. This is what I'm getting:
Uncaught TypeError: Object #<Object> has no method 'fancybox'
Any help with this would be greatly appreciated! Thanks all!
You are loading fancybox twice (the normal source one and the packed one). Also remove the dot from your src attributes and make sure the file is where you say it is
So change this
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
To this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.js"></script>
or only this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
but not both
Try not including the fancybox js file twice on the same page.

Simple jQuery css background "chooser"

I wrote this very simple background chooser.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>jQuery Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#StyleContrast").click(function() {
$("link[media='screen']").attr("href", "Contrast.css");
});
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
});
</script>
</head>
<body>
<h1>Choose A Style:</h1>
<ul>
<li><a id="StyleContrast" href="#">Contrast</a></li>
<li><a id="StylePrint" href="#">Print</a></li>
<li><a id="StyleNormal" href="#">Normal</a></li>
</ul>
</body>
</html>
I have:
Normal.css
Print.css
Contrast.css
in the same folder with a very basic:
body {background-color:#000000;}
When I go to the URL it chooses Normal.css (as it should)
Then it changes to just fine to Print.css or Contrast.css (as it should)
But then it doesn't ´t go back (doesn't ´t choose) Normal.css again?
Can you help me spot what's wrong with the code?
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
Should be
$("#StyleNormal").click(function() {
$("link[media='screen']").attr("href", "Normal.css");
});
Also, I would update the version of jQuery you're using to 1.4.2
You used [#media='screen'] instead of just [media='screen']
In jQuery 1.4.2 (and I think in jQuery 1.3) # for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D
If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:
$(function(){
$(".switcher").click(function() {
$("link[media=screen]").attr("href", $(this).text() + ".css");
});
});

weird javascript/jquery behavior [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why don’t self-closing script tags work?
I had this bit of javascript code inside a <head> element.
<script src="jquery-1.3.2.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function() {
$("#welcome").addClass("centered");
$("#created").addClass("centered");
});
</script>
Which refused to work until I used an explicit end script element:
<script src="jquery-1.3.2.js" type="text/javascript"></script>
Why is there a difference?
EDIT: the entire header was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<title></title>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" href="css/blueprint/src/typography.css" />
<link rel="stylesheet" href="css/common.css" />
<script src="jquery-1.3.2.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function() {
$("#welcome").addClass("centered");
$("#created").addClass("centered");
});
</script>
</head>
I don't understand why the script element needs an explicit end element but the link element doesnt.
Yeah, you always need to end script elements like that. It doesn't support the XHTML format of ' />' to end the tag.
What is the doctype of your document? Technically minimized tags like your first example are an XML-only thing. In most cases HTML allow them, but the correct HTML is your second example.
Certain elements like script and iframe dont work correctly in all browsers unless you have a closing tag, even if there is no content inside. While I agree that this is stupid, its just one more of those inconsistencies that web developers need to be aware of.
I would imagine that once browser vendors implement actual XHTML (so we can send XHMTL as application/xhtml+xml not text/html) that at that point they would also fix inconsistencies like this. Or maybe I'm just an optimist.

Categories