My site was working extremely fine with jQuery Ui and all but suddenly I changed a color and it stopped! Any hints why this happened? I tried writing the JavaScript in the HTML file itself as well as linking as a separate .js file. Both did not seem to work.
MY HTML :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spree 2014 | BITS - Pilani, K. K. Birla Goa Campus Sports Festival</title>
<link rel="stylesheet" type="text/css" href="teaser.css" />
<LINK REL="SHORTCUT ICON" HREF="http://s9.postimg.org/jtx29pdbf/bits.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
</head>
<body>
<div id="sidebar">
<img src = "images/arrow.png" alt = "Click to open" id = "arrow">
</div>
<div id ="gallery" class = "hidden"><div class="text">Gallery</div></div>
<div id = "lookback" class = "hidden"><div class="text">Lookback</div></div>
<div id = "timer" class = "hidden"><div class="text">Timer</div></div>
<div id="social">
<img src="images/fb.png" alt = "Contact us on Facebook" id = "fb">
<img src="images/twitter.png" alt = "Stay tuned on twitter" id = "twitter">
</div>
<div id="tabs">
<ul>
<li>About</li>
<li>Sponsors</li>
<li>Contact</li>
<li>Subscribe</li>
</ul>
</div>
<div>
<div id="logo">
<img src="images/spreelogo.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="bits">
<img src="images/bits.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="man">
<img src="images/runningman.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
</body>
MY JS FILE:
$(document).ready(function(){
$("#bits").hide();
$("#lookback").hide();
$("#timer").hide();
$("#arrow").click(function(){
$("#sidebar").hide();
$("#gallery").show( "fold", 2000 );
$("#lookback").show( "fold", 2000 );
$("#timer").show( "fold", 2000 );
});
});
Problems like this can generally be easily solved using developer tools in the browser. My favorite is Firebug in Firefox, but each of the modern browsers has the capabilities you need.
This is likely caused by either a file not being found, or a JavaScript error. Enable debugging and load your page. Look at the network record for a 404, and at the console for a JS error. You can also examine your HTML to see if the DOM model is as you expect it to be. You can set a break point in your script to see if the code is being reached -- if not work your way backwards up the call stack to see where the logic is wrong, and step through the code.
If you can practice these skills, you can solve the vast majority of your bugs without needing help from others.
Your script tag importing jquery is missing an "http:" before the URL. That would break your Jquery-ui.
Change it to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The code seems fine.
Check your links properly; also if they are accessible from your browser.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
Related
Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.
I'm very new to this so forgive me if I don't properly state things. I started learning Selenium using the IDE record tool for Mozilla. It says you can play back the script in IE by setting up the stand alone server. That worked fine but when I play back, I get the message stated in the title along with a pop up with this very long message. Below is the message.
Every line in the script opens up a new browser window with the same message. Very frustrating. Can anyone tell me what I am doing wrong?
Received command response (!=OK/ERROR): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/assets/displayhelpservlet.css" media="all"/>
<script src="/assets/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/assets/displayhelpservlet.js" type="text/javascript"></script>
<script type="text/javascript">
var json = Object.freeze('{"version":"3.0.1","type":"Standalone","consoleLink":"/wd/hub"}');
</script>
</head>
<body>
<div id="content">
<div id="help-heading">
<h1><span id="logo"></span></h1>
<h2>Selenium <span class="se-type"></span> v.<span class="se-version"></span></h2>
</div>
<div id="content-body">
<p>
Whoops! The URL specified routes to this help page.
</p>
<p>
For more information about Selenium <span class="se-type"></span> please see the
<a class="se-docs">docs</a> and/or visit the <a class="se-wiki">wiki</a>.
<span id="console-item">
Or perhaps you are looking for the Selenium <span class="se-type"></span> <a class="se-console">console</a>.
</span>
</p>
<p>
Happy Testing!
</p>
</div>
<div>
<footer id="help-footer">
Selenium is made possible through the efforts of our open source community, contributions from
these people, and our
sponsors.
</footer>
</div>
</div>
</body>
</html>
Request Data: cmd=getNewBrowserSession&1=*webdriver&2=http%3A%2F%2Ftemplate.ppgtest.local%2FPortal%2FLogin&3=&4=webdriver.remote.sessionid%3D7d276ca5-a3c2-4527-b535-2e38958624ae
I'm quite new to coding and functions etc. I've decided to look for online exam papers so I can learn from them questions and one of them says...
Write the code to dynamically create a element with the name of the image file when the showpic unction is executed. For example if the name of the image file is images/image1.jpg then the dynamically created element should be images/image1.jpg
and the code i am looking at is...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<title>CI135</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>CI135</h1>
<h2>1: JavaScript image gallery</h2>
</header>
<ul id="images">
<li>
<a href="images/image1.jpg" title="Fruit">
<img src="images/image1.jpg" class="thumb" alt="Fruit" />
</a>
</li>
<li>
<a href="images/image2.jpg" title="Flowers">
<img src="images/image2.jpg" class="thumb" alt="Flowers"/>
</a>
</li>
</ul>
<figure>
<img id="place" src="images/image1.jpg" alt="Image of fruit" />
<figcaption id="description">Fruit</figcaption>
</figure>
<span id="placeholder"></span>
<footer>© CI135 teaching team, 2013-2014</footer>
</div>
</body>
</html>
We're definitely not a "gimme-codez" type of site, but we could get you going in the right direction.
HTML is not a "dynamic" language -- what you see in the code is how it evaluates. A table is a table, and it'll only have as many rows as you put in it, for example.
What the question is asking is to create a function, likely Javascript, that will allow you to pass a value, likely a file path, and have it render a span containing the image, with any values desired.
So, you'd be looking to do something along these lines:
<script type="text/javascript">
function createSpan(file) {
return '<span id="file"><img src="/path/to/'+file+'"></span>';
}
</script>
I highly recommend reading basic tutorials on Javascript to get yourself up to speed on it. In a nutshell, a function can be used to repeat tasks, returning outcomes you can use inside your code.
So here's my html code (Important part is in the triple quotations):
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
"""<script type="text/javascript" src="ToDoApp.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>"""
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list">
<ol></ol>
</div>
<div class = "counter">
<h4>Things to do:</h4>
</div>
<div class = "comment"></div>
</body>
</html>
and my .css connection is working perfectly, but my .js/jquery connection is just not functioning. I've tried looking up correct html syntax for including a link, and I tried alternating among a few different links to the jquery library. Is there something I'm missing here, have I put the link in the wrong place, or is the syntax funky? Thanks in advance for any help.
If your ToDoApp.js relies on jQuery then you will need to change the order of your code.
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ToDoApp.js"></script>
Otherewise, the code that you have supplied shows not reliance on jQuery.
The best way I have found to debug issues with JS or CSS files not being included, is to monitor the network traffic with your browsers Debugging tools.. In IE, press F12, and then click on the Network tab. Click 'Start Capturing' and re-navigate to the page.
If a 404 is returned, the path is probably wrong.. From here, you can look at the path the application actually tried to request its file from.
Other errors require different investigations. If you don't even see the file show up in the requests list, then check the Console tab to see if the browser has logged any messages that may pertain to the situation. As per Jeff's answer, if the problem is that something in your ToDoApp.js relies on jQuery, then you will see messages in the console that point to that issue, such as $ is undefined.
I'm trying to implement Coin Slider (http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/) on my website. However, I can't get it to work. Firefox error console brings up '$ is not defined'.
I only really know HTML and CSS and thought this would just be a case of copying and pasting code. If it's something simple to fix that would be great, but I may have bitten off more than I can chew!
Thanks for any help.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<!-- Begin Content -->
<div id="content">
<div id='coin-slider'>
<a href="" target="">
<img src='../portfoliopages/Funpets/splashpresliced.jpg' >
<span>
Description for img01
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/eggprespliced.jpg' >
<span>
Description for imgN
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/baby.jpg' >
<span>
Description for img01
</span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 550,
height: 220,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true });
});
</script
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- Begin Footer --></div> </div>
<!-- End Footer -->
</body>
</html>
That means the jQuery variable $ is not defined. I guess you just copypasted without downloading jQuery.
This particular piece of code requires you to have downloaded jQuery, named the file jquery-1.4.2.js and locatde it in the same place as this file. You should get the coin-slider.min.js there as well. You can probably find it attached to the tutorial.
The error $ is not defined is typical when the page cannot find jQuery or jQuery is being referenced before it's loaded. In your instance jQuery is being loaded first so I'd assume your path to jQuery is wrong. Double check the path to jquery and that you can browse to the jquery JS file jquery-1.4.2.js
Make sure you have no 404 errors while loading the page. Enable FireBug in firefox and go the the Net setting, reload the page and check your http responses (Or any other Debugger/Inspect tool)
You can try replacing your script source to full URLs to test if your code is working :
For Jquery : http://workshop.rs/projects/coin-slider/jquery-1.4.2.min.js
For Coin Slider : http://workshop.rs/projects/coin-slider/coin-slider.min.js
I got the full urls from the Coin Slider example/demo page. You can open the links and download it to your local machine.