Why jQuery progress bar is not working? - javascript

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).

Related

Not able to fetch the anchor tag value using jquery

I have an .outerdiv in which dynamically html elements are added through script.
Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.
Here goes glitch link which i have tried
UPDATE
One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js.
UPDATE
As per suggestions i included my alert inside document.ready still not working
> this is a script.js code which i don't have control, i cant edit this.
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
The issue is with script's defer attribute:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:
<script src="/script.js"></script>
You can place the alert after the appending the link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js"></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
$(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
});
</script>
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You can try this:
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
alert($(".outdiv a").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
// alert($(".outdiv a").text());
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load.
So just put the alert in the document ready block.
You may use the alert function inside document ready in your dynamic files
$(document).ready(function(){
alert($(".outdiv a").text());
});
Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.
On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:
$(".outdiv").on('click', 'a', function() {
console.log('clicked');
// You can extract the text of the clicked anchor here
console.log($(this).text());
});
Use holdReady
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js"
alert($(".outdiv a").text());
$.holdReady( false );
});
});
$(document).ready(function(){
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script>
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {
alert($(".outdiv a").text());
$.holdReady( false );
});
});
</script>
</body>
</html>

Multiple jQuery plugins on multiple pages

My question may be very simple to most people on here. But i am very new to jQuery, and i am having a sort of difficulty with repetitiveness.
I have a custom script on a page which has a lot of text, that allows that text to be collapsed. This script is in jQuery. The page is in php.
I have multiple pages like this. I find myself having to place the code for the script documents on every page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
Is there a way that i can place it only on the index.php file and call the script function which is:
<script type="text/javascript">
$(document).ready(function(){
$('.article').readmore({maxHeight: 640});
});
</script>
I am not sure how your page loads but this is what you would have to do essentially:
index.php
<?php
require('header.php');
require('content.php');
require('footer.php');
?>
header.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
<link rel="stylesheet" href="/css/default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
</head>
<body>
content.php
<div id="content">
<!-- Do display code here -->
</div>
footer.php
<div id="footer">Footer Content</div>
</body>
</html>
If you have a new page, it would look something like this:
newpage.php
<?php
// Keep same header
require('header.php');
// New content page
require('newcontent.php');
// Same footer
require('footer.php');
?>

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.

window.onbeforeunload not working in second page

Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});

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