JavaScript: JQuery UI Tabs won't load my other HTML pages - javascript

So problem is that i added Tabs from JQuery UI in my web, and now my tab which contains paragraphs loads fine but tabs on which i have linked to other html pages(which donot contain Tabs) , they wont load. here is the my .js file code and .html code:
$(function(){
$("#tabs").tabs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title id="myTitle">Persistant Programmer: Testing Website</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script17.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/excite-bike/jquery-ui.css" />
</head>
<body>
<div id="tabs">
<ul>
<li>About Me</li>
<li>Click-Picture Game</li>
<li>Feed the Cat Game</li>
</ul>
<div id="tabs-1">
<p>Hello there! Welcome to my Website. My name is Syed Hammad Jaffery, studying in FAST-NUCES. Purpose of this site is just a playground for my JavaScript Codes. JavaScript is something which is really basic need in today's world, there couldn't exist any web which only runs with HTML5 and CSS3. We need JavaScript to give some living feature to our webpages on which they can act and do stuff dynamically <br></br>I know this web is really newbie version and possibly not even shown on Search Engines but still Thanks for visiting.</p>
</div>
</div>
</body>
</html>
I have placed game.html in the same folder as my this html file and catGame.html in a folder named catgame which is present in the same directory as of my html file.
It's been one day i am stuck on it, and i am really new in JavaScript took some tutorials online. Tried everything as it is from here http://jqueryui.com/tabs/#ajax .
Thanks in Anticipation

As I know, it is not possible directly using jQuery UI tabs.
You can do it with some jQuery tricks as this answer

Related

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

javascript not pulling through - sticky bar

I'm using this:
http://codesandnotes.com/sticky-elements/ (see the jsfiddle)
but I'm having problems in getting it to work. The pink css pulls through but it doesn't stick/doesn't change to red.
I've changed the article to an aside in the html and js. I'm using wordpress. I've added the js to the js folder and called it in the header which is pulling into the correct template. I've added the css to the main style.css. The js and css files are in different locations- could this be what's stopping the js being called?
Any help would be much appreciated. Thanks
is it fixed?
Anyway!
First add css and jQuery Library link to your WordPress Header. Then add html codes from the jsfiddle. after all the things done.
include copied js script file from the jsfiddle to the bottom of the page. See below code will help you to understand. but it's in html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="copied_css_file_from_the_jsfiddle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- jQuery Library -->
</head>
<body>
<p>This is the proper way <small>How to use css js and html in correct way</small></p>
<!-- add the html code from the JSFIDDLE-->
<script type="text/javascript">
$( document ).ready(function() {
//Copy and paste the script from the JSFIDDLE
});
</script>
</body>
Contact me by searching yeshansachithak in any social network. Thanks

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Windows store app - jQuery error

I'm trying to import jQuery into blank javascript app, but keep getting same error: JavaScript runtime error: 'jQuery' is undefined. I don know the reason for this.
My whole procedure:
Create new Blank app project
Add existing item jquery-1.8.2-win8-1.0 in js folder
Drag and drop added item into default.html head
Add some jquery code in default.js
and now, i'm getting this error: JavaScript runtime error: '$' is undefined.
But if I delete added jQuery code(didn't notice before) it throw's me another error:JavaScript critical error at line 4, column 1 in ms-appx://8cce31f0-7793-41f7-875e-c41dd9ade2c7/js/jquery-1.8.2-win8-1.0.js.
I'm trying to get jquery to work for last several hours, but without success.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- jquery references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
jQuery code:
$("*").on("click", function () { });
Error's:
Video:
Error - jQuery
First of all, thank you for the video - this would have been nearly impossible to solve without it.
I noticed your jQuery file was 2.0mb; this didn't look right. And then the error message took us into its contents to point out a syntax error, where we saw a slew of HTML tags — you appear to have downloaded from the GitHub viewer page, rather than from the source file itself. You should instead download the RAW file.
Please note also that this is an older version of jQuery, and not a fully-supported version. I am the primary developer behind the appendTo repo, and am excited to announce that jQuery 2.0 (pre-release builds available) should work really well on its own in a Windows Store App.
I wrote about this recently over on nettuts: Building Windows Store Applications With jQuery 2.0
Try to put:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
after:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
This error is probably because you're not include jQuery library before writting jQuery code and make sure the path to your file is correct
Try rearranging the scripts you added. Include jQuery js file before your default.js file. Something like this:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
<script src="/js/default.js"></script>
Default.js tries to use jQuery which is not yet added. So rearranging might help.

How do I move a Javascript phrase (within the body) into the head instead

For example I have a code that drags in my twitter feed via a javascript file, I have pasted the links directly in the div I wish for it to appear however my page won't validate (obviously) but I can't figure out how to send it to appear in that div with the Javascript code hidden in the header.
Below shows the div I need the information in and the javascript files that call the information
Any help would be greatly appreciated !
<div id="twitter_update_list"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong></div>
The only reason that I can see for that not to validate is that the ampersands in the URI haven't been HTML encoded (i.e. as &).
<script> elements are allowed as child elements of <div> elements.
If you're using the JavaScript provided by Twitter then I don't think you can.
What you're after (if I understand correctly) is an external JavaScript file that you link to in the <head> of your page, that traverses the DOM on page-load, finds a div with an ID of "twitter_update_list" and inserts the content from Twitter.
While this functionality is quite easy to code, it would have to be within the JavaScript file itself. Since you're using Twitter's JavaScript then it's up to Twitter to provide this functionality within their JavaScript.
I think you'd have to look into writing your own JavaScript file that fetched your Twitter RSS feed and parsed it on your page.
You might want to look at Remy Sharp's solution - at a brief glance it looks to do what you want: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
<html>
<head>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
</head>
<body>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong>
<div id="twitter_update_list">Updates will go here!</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
</body>
</html>

Categories