I am trying learn to make a simple quiz.So I got a script in StackOverflow.It works here http://jsfiddle.net/Zy4gW/ ,but not when I use it ,here is my code
<html>
<head>
<title>Learning how to make a quiz</title>
<script type="text/javascript">
$(function(){
$('#q-and-a li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300);
});
});
});
</script>
</head>
<body>
<ul id="q-and-a">
<li><a>Question One</a>
<div>Answer to Question One...</div>
</li>
<li><a>Question Two</a>
<div>Answer to Question Two...</div>
</li>
</ul>
<style>
ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; list-style: none; }
ul li a { color: blue; }
ul li div { display: none; }
</style>
</body>
</html>
Why doesn`t it run?
<!DOCTYPE html>
<html>
<head>
<title>Learning how to make a quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> //You had not imported this library which is required for running jQuery
<script type="text/javascript">
$(document).ready((function(){
$('#q-and-a li a').click(function(e){
$(this).next('div').slideToggle(300); //div is child of li not a sibling
});
}));
</script>
</head>
<body>
<ul id="q-and-a">
<li><a >Question One</a>
<div>Answer to Question One...</div>
</li>
<li><a >Question Two</a>
<div>Answer to Question Two...</div>
</li>
</ul>
<style>
ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; list-style: none; }
ul li a { color: blue; }
ul li div { display: none; }
</style>
</body>
</html>
Your mistakes were as follows:
1) You had not imported the library required for jQuery
2) The function you were using to access the div element
Actually div is a child element of li. You were accessing it as sibling of li.
3) No need of .each function to access li separately
Put this on top of your script [below the title tag]
Jquery library
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
You are using jQuery, but i can't see where you are loading the ressource.
Have a look at hosted libraries
You definitely want to make sure your resources are loaded properly, as noted here by others. Check your browser's dev tools to see if resources are loaded, and check the console to see if there are any errors.
I would also suggest adding a doctype to your file (at the very top, before the opening <html> tag:
<!DOCTYPE html>
The missing doctype might not be causing your issue - but then again, I've seen stranger things happen. Not to mention, it's best practice to always include this.
Related
I have been trying to incorporate a slicknav menu into my project for school, I'm not entirely new to coding and i believe my mistake is quite simple but after 3 hours of racking my brain i cant seem to find the solution to my problem, some help, insight or tips on how to fix it or perhaps improve my code would be greatly appreciated. (by the way i already have a functioning drop down menu for some things but I'd like to have a slicknav for mobile screens
html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape up!</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!--^^^TITLE LOGO^^^-->
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main_rwd.css" rel="stylesheet" type= "text/css">
<link href="styles/slicknav.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="js/jquery.slicknav.min.js"></script>
<!-- <script href="js/jquery.slicknav.min.js"></script>-->
<script type="text/javascript">
<script>
$(function(){
$('#nav_menu').slicknav();
});
</script>
</head>
<header>
<img src="images/shape_up_logo.png" alt="Shape up logo">
<!--^^^SITE LOGO^^^-->
<h1 id="logo">Shape Up!</h1>
<h3>Find the best fit for you!</h3>
</header>
<body>
<main>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Strength Training
<ul>
<li></li>
</ul>
</li>
<li>Cardio Exercises</li>
<li>Stress Relief
<ul>
<li>What is Stress?</li>
<li>5 Helpful Tips</li>
<li>Meditation</li>
<li>Vipassana</li>
</ul>
</li>
<li>Healthy Diets
<ul>
<li>Why a Healthy Diet?</li>
<li>Plan Your Meals</li>
<li>Count Your Calories
</li>
<li>Calculate Your BMI</li>
</ul>
</li>
</ul>
</nav>
And the next portion is the css code regarding the slicknav
slicknav_menu {
display:none;
}
#media only screen and (max-width: 900px) {
body {
box-shadow: none;
font-size: 90%;
}
}
/*
TABLET SIZE^^^
.slicknav_menu {
display:none;
}
*/
#media only screen and (max-width: 767px) {
#nav_menu {
display: none;
}
.js .slicknav_menu {
display: block;
}
}
I have commented some stuff out for trouble shooting reasons
any help would be appreciated as i probably missed a simple thing anyway
Your style rule:
.js .slicknav_menu {
display: block;
}
Is looking for a class, .js that does not exist in your document. The typical use of the .js class is to dynamically add it to the <body> tag with javascript so you can manage your site differently for users with and without javascript enabled.
Try removing .js from your style rule, or dynamically add .js with something like $(document).ready(function(){$(body).addClass('js')})
I FINALLY DID IT!
however I'm sorry to say i don't exactly know how i did it. I deleted some things here and there, i don't quite remember what i did exactly delete. though i will provide code for anybody that encounters a similar problem, i know have to work on getting it where i need it to be.
Main script section:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$(document).ready(function(){$(body).addClass('js')})
$('#nav_menu').slicknav();
});
</script>
and the css file:
.slicknav_menu {
display:none;
}
#media only screen and (max-width: 900px) {
body {
box-shadow: none;
font-size: 90%;
}
}
#media only screen and (max-width: 767px) {
#nav_menu {
display: none;
}
.slicknav_menu {
display: block;
position: inherit;
}
}
I got a problem with tag. I have list of clickable phone numbers on the page and I want to mark used urls.
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work.
Let me show the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click.
Is there any chance to fix this behavior?
Thank you!
Nothing will happen on desktop, because desktop browsers don't know what to do with tel:.
You could use something like jQuery to achieve this on desktop.
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
You have to assign class through jquery.
$('.phone').click(function () {
$(this).addClass("visited");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.visited {
color: red !important;
background-color: yellow;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="#">Call me</a>
<a class="phone" href="#">Calling you</a>
</body>
</html>
So manage with javascript session and additional css class will be handle your problem
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
You need to declare .phone first before .phone:visited in your css.
I was wondering how to make the individual menu items fade in with delay on page load.
I would like them to fade in not in a chronological order, so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...
How would such a jQuery or JavaScript code look and where in the code would I need to paste it?
Thanks a lot for help!
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function.
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>
You can use setTimeout and put it into a closure and work.
$(function () {
var currentTime = 0;
$("#item1, #item2, #item3")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
$(function () {
var currentTime = 0;
$("#item3, #item1, #item2")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
</script>
<style>
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
</style>
<title>My Menus</title>
</head>
<body>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
</body>
</html>
This can be achieved by following these steps:
1. Set the "display" property of the elements to "none" in CSS
2. Put your code in "$(document).ready(function(){ here })" after including the jQuery library
3. Set the delay(value) to the elements as needed for the order you want to show the elements
4. Call the fade function or any other effect or function for the elements
You can make the elements appear in any order you want, you just need to set the delay(value) accordingly. The later you want the elements to appear, the higher should you set this value.
In this example the elements appear in chronological order, just change the delay(value) to suit your needs. You can select the elements according to your needs. For example, here ID isn't used to select the elements, but can be used as well. This method works great too!
Remember to include the jQuery library first!
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li:nth-child(1)").fadeIn();
$("li:nth-child(2)").delay("1000").fadeIn();
$("li:nth-child(3)").delay("2000").fadeIn();
$("li:nth-child(4)").delay("3000").fadeIn();
$("li:nth-child(5)").delay("4000").fadeIn();
$("li:nth-child(6)").delay("5000").fadeIn();
$("li:nth-child(7)").delay("6000").fadeIn();
$("li:nth-child(8)").delay("7000").fadeIn();
$("li:nth-child(9)").delay("8000").fadeIn();
$("li:nth-child(10)").delay("9000").fadeIn();
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ul>
</body>
</html>
Assuming a list like this of unknown number of items
<div class="fadein-delay">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
...
</div>
you will a more modular script
$(function () {
$(".fadein-delay > div").each(function(index) {
console.log($(this).text());
$(this).delay(300*index).fadeIn(600);
});
});
and css that hides all items initially
.fadein-delay > div {
display: none;
}
Here is a working example https://codepen.io/giorgosk/pen/aVpXad
I'm trying to show a popup when the mouse is over "a" element.
The problem is that I want to keep the popup when the mouse is over the popup element but the popup disappear when the mouse is over it.
The popup is just under the <a> element (on the display).
This is my code
HTML:
<ul>
<li>
<a id="test">
<div>
Some text
</div>
<div id="popup">
<ul>
<li><a>text0</a>
</li>
<li><a>text1</a>
</li>
</ul>
</div>
</a>
</li>
<li> TEXT
</li>
</ul>
CSS:
#popup {
display:none;
}
#test:hover #popup {
display:block;
}
I tagged the question 'JAVASCRIPT / JQUERY' because if there is a solution with them, it would be welcome.
EDIT
THIS IS ACTUALLY MY CODE, and it doesn't works
Before your start coding take a look at jQueryUI Tooltip (http://jqueryui.com/tooltip/ ).
It does what you want with minimal programming requirements.
From the doku:
Customizable, themeable tooltips, replacing native tooltips.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>Tooltips can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
ThemeRoller
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
#popup {
display:none;
}
a:hover + #popup {
display:block;
}
Try this should work.
jsfiddle
If you really wanna make a nice popup use this:
http://getbootstrap.com/2.3.2/javascript.html#popovers
If you're not looking to use jQuery, you can make the div a child of the a tag and use some css trickery to make it all work (http://jsfiddle.net/TMBGm/):
<a>some text<div>popup text</div></a>
a {
position: relative;
}
a div {
display: none;
}
a:hover div {
display: block;
position: absolute;
}
The adjacent sibling selector is perfect for this example:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/G4hd9/
Article: http://css-tricks.com/child-and-sibling-selectors/
This will keep the popup active while the user is hovering it if the element is not related, otherwise if its a child of the element it won't lose focus.
#popup:hover {
display:block
}
I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something?
Here's the CSS:
body{
margin: 0;
padding: 0;
text-align: center;
background-color:#f0f2df;
}
#container{
border: solid 1px #f0f2df;
background-color:#f0f2df;
text-align: left;
margin: auto;
width: 939px;
height: 570px;
top:41px;
position:relative;
}
#contact_form{
display: none;
background-image:url(../images/bg.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.contact_close{
display:none;
background-image:url(../images/close.png);
width:17px;
height:17px;
position:absolute;
right:5px;
top:135px;
}
The HTML:
<!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" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/click.js'></script>
</head>
<body>
<div id="container">
<div class="button_contact"></div>
<div id="contact_form">
<div class="button_close"></div></div>
</div>
</body>
</html>
and the JavaScript
$(document).ready(function(){
$("button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
you need the "." before button_contact
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
jQuery also has a .toggle() function that allows you to pass multi-functions that are toggled between each other when the element/s are clicked.
http://api.jquery.com/toggle/ a nice function because you can add as many functions as you want.
$(document).ready(function(){
$(".button_contact").toggle(function() {
$("#contact_form").fadeIn("slow");
},
function() {
$("#contact_form").fadeOut("slow");
});
});
You forgot a . before the button close:
$(".button_contact")....
Should work.
The selector on your fadeIn button is a bit off. Your original code matches an element with a node name of button_contact not with a class of button_contact.
Try:
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$("button_contact").click(function() { should be
$(".button_contact").click(function() {
Try this:
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".button_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
I'm sorry but will this syntax work if the link being clicked is an ajax link corresponding to another DIV? I can't seem to get it to work!
<script type="text/javascript" src="js/jquery-ajaxLink.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".ajaxLink").ajaxLink();
$(".ajaxlink").click(function() {
$("#content").fadeIn("slow");
});
});
</script>
<ul id="mainNav">
<li> <a class="ajaxLink" href="test1.htm">Who We Are </a></li>
<li> <a class="ajaxLink" href="test2.htm">Benefits</a></li>
<li> <a class="ajaxLink" href="test2.htm">Commercial Terms</a></li>
<li> <a class="ajaxLink" href="test3.htm">Property Types</a></li>
<li> <a class="ajaxLink" href="test3.htm">Commercial Info</a></li>
</ul>
<div id="content"></div>