I am trying to use codaslider plugin and it does not work for me. I think I am doing everyhtings right but still its not working. Can someone help me finding out what am I making mistake. Here is my code below. The problem is it does not slide from one panel to antoher. I already went through the documentation but I do not know what is the mistake i am making here.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#codaslider5').codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
<style>
#nav { width: 500px; background: blue; height: 50px; }
ul { list-style: none; margin: 0; }
#mainWrapper #nav ul li { float: left; margin-right: 40px; }
#slider { width: 500px; background: red; overflow: hidden; }
.codaslider { width: 1500px; background: greenyellow; }
.panel { width: 500px; height: 100px; float: left; }
.panel1 { background: green; }
.panel2 { background: lightblue; }
.panel3 { background: yellow; }
</style>
<title>title</title>
</head>
<body>
<div id="mainWrapper">
<div id="nav">
<ul>
<li class="tab1">Panel 1</li>
<li class="tab2">Panel 2</li>
<li class="tab3">Panel 3</li>
</ul>
</div>
<div id="slider">
<div class="codaslider" id="codaslider5">
<div class="panel panel1">
<h2>Panel 1</h2>
<p>This is panel 1</p>
</div>
<div class="panel panel2">
<h2>Panel 2</h2>
<p>This is panel 2</p>
</div>
<div class="panel panel3">
<h2>Panel 3</h2>
<p>This is panel 3</p>
</div>
</div>
</div>
</div>
</body>
Well, I must have been messing around with this for the past hour or so, wondering why it didn't work because like you because it all looked like it should be fine.
I think I found the solution. It seems to be that codaSlider is picky about the names you give to your slider objects - they must contain dashes and must be in sequential order.
Your slider is named '#codaslider5', you need to change this to '#coda-slider-1' (if you use 2, 3...n it doesn't work - presumably it expects you to actually have sliders 1, 2, 3, 4 if you want to use an ID of 5).
Here we go:
Change:
$('#codaslider5').codaSlider({
to
$('#coda-slider-1').codaSlider({
Next, change:
<div id="nav">
to
<div id="coda-nav-1">
Next, change:
<div class="codaslider" id="codaslider5">
to
<div class="coda-slider" id="coda-slider-1">
Or for lazyness here is the fixed file, and the diff.
This will mess with your CSS so you'll have to fix it. But hopefully this gets you back on track.
Related
I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>
I have a page with 4 tiles that display 2 options when a mouse hovers over it: New Form and Form List
However, I want these two options hidden unless the user is currently hovered over the tile. This is working fine but it does it 2 or 3 times after the first hover event. Basically, on page load, the 2 options are hidden and the tiles are displayed. Once I hover into the first tile, the two options then get displayed using the .show() method. If my mouse leaves the tile, the .hide() method is called hiding the two options.
However, if I hover my mouse back into the same tile, it executes both .hide() and .show() 2 times and sometimes even more than that. I'm assuming I'm doing something stupid but can't find any help on the web. JSFiddle can be found here: http://jsfiddle.net/n97M8/
CODE:
<!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>
<style type="text/css">
.container
{
height: 150px;
text-align:center;
}
.FormTiles
{
position: relative;
text-align: center;
vertical-align: middle;
float:left;
width: 150px;
height: 0px;
margin-left: auto;
margin-right: auto;
background-color: green;
color: white;
display: inline;
font-family: Verdana;
font-size:small;
margin-right: 5px;
padding-bottom: 150px;
}
#optionsContainer, #optionsContainer1, #optionsContainer2, #optionsContainer3
{
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
background-color: gray;
padding-top: 3px;
padding-bottom: 3px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="FormTiles" id="workForInspector">Work For Inspector Form
<div id="optionsContainer">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form2">Form 2
<div id="optionsContainer1">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form3">Form 3
<div id="optionsContainer2">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form4">Form 4
<div id="optionsContainer3">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#workForInspector").hover(function () {
$("#optionsContainer").show("fast");
});
$("#workForInspector").mouseout(function () {
$("#optionsContainer").hide("fast");
});
});
</script>
</body>
</html>
Use jQuery's .stop() function to stop the queueing of mouse movements:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
jsFiddle example
i am a new learner of javascript. so the first i don't want to use jquery to get the tab. the following is my code. but it doesn't work.how to correct my code. thank you.
.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}
<script type="text/javascript">
function clicker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");
for(var i=0;i<lier.length;i++){
for(j=0;j<diver.length;j++){
if(i==j)
diver[j].style.display=block;
}else{
diver[j].style.display=none;
}
}
}
}
</script>
</head>
<body >
<ul>
<li onclick="clicker()" class="li01">one</li>
<li onclick="clicker()" class="li02">two</li>
<li onclick="clicker()" class="li03">three</li>
<div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>
i want to when click one then show content one.all the content are hidden. two then show content two...
See, for your question of implementing tabs, I can suggest you to do in a better way. The same clicker function can take an argument of the ID of the DIV and you can pass it when you are calling it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tabs</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
</style>
</head>
<body>
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
<div id="t1">content one</div>
<div id="t2">content two</div>
<div id="t3">content three</div>
</div>
<script type="text/javascript">
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
clicker(1);
</script>
</body>
</html>
Working
Instead of finding the index of the element occurrence, we can give a Unique ID to each. Then, functions support arguments, and that is what javascripts are for. Pass that argument and set the style using .style.display of the element.
We don't need to position the tabs as absolute, because it is not going to be hanging. And, you can set the margins using display: inline-block instead of float: left.
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
You can rewrite the clicker() script this way:
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
So that, you can pass the ID of the DIV tag as a parameter. By modifying the style properties of the element, you can either hide or show.
You can call this in the <li> using the same onclick function but just passing another extra parameter:
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
Check out demo at: http://jsbin.com/welcome/22513
I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
You can use a div element and float it left with CSS.
HTML:
<div id="nav">
<ul>
<li>A Link</li>
<li>Another Link</li>
</ul>
</div>
<div id="content">
<p> Here's some stuff </p>
</div>
CSS:
#nav {
width: 20%;
float: left;
background-color: gray;
}
#content {
width: 80%;
}
I would also run through the HTML and CSS tutorials at HTML Dog. It will make your life so much easier.
Listamatic has various examples of how to style a list of links
HTML :
<!Doctype html>
<html projectReviver="leftmenu.html">
<head>
<title>My Left Menu</title>
<link rel="StyleSheet" href="design.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div id="main">
<ul>
<li>First page</li>
<li>2<sup>nd</sup>page</li>
</ul>
</div>
</nav>
</body>
</html>
design.css :
#mainu ul {
list-style: none;
background-color: red;
}
#nav {
width: 20%;
float: left;
background-color: red;
}
#content {
list-style: none;
}