Implementing pre-made rotating banner into website - javascript

I'm trying to implement the rotating jQuery banner found here:
http://visitmix.com/labs/glimmer/samples/sequence.html
onto my site. All of the code is laid out, and you'd think it would be idiot proof, but I don't have a firm grasp on how to connect languages to one another.
I'm pretty good now with PHP, CSS and HTML but javaSCRIPT and me just don't seem to click.
I copied the HTML over into my file at the appropriate location, copied the CSS, and copied the function into my js/scripts.js file.
This is what my scripts.js file looks like:
var site = function() {
this.navLi = $('#nav li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
// Enables the slidedown menu, and adds support for IE6
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
// mouseover
$(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
}, function() {
// mouseout
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
jQuery(function($) {
var timer;
function button1_click(event)
{
$(".slide").css("visibility","hidden");
$("#image1").css("visibility","visible");
$("#image1").css("opacity","0");
$("#image1").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image1").animate({"opacity":1},300, "linear", null);
$("#button1").addClass("active");
clearTimeout(timer);
timer = setTimeout(eval("button2_click"),"3000");
$("#image1").animate({"opacity":1},300, "linear", null);
}
function button2_click(event)
{
$(".slide").css("visibility","hidden");
$("#image2").css("visibility","visible");
$("#image2").css("opacity","0");
$("#image2").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image2").animate({"opacity":1},300, "linear", null);
$("#button2").addClass("active");
clearTimeout(timer);
timer = setTimeout(eval("button3_click"),"3000");
$("#image2").animate({"opacity":1},300, "linear", null);
}
function button3_click(event)
{
$(".slide").css("visibility","hidden");
$("#image3").css("visibility","visible");
$("#image3").css("opacity","0");
$("#image3").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image3").animate({"opacity":1},300, "linear", null);
$("#button3").addClass("active");
clearTimeout(timer);
timer = setTimeout(eval("button1_click"),"3000");
$("#image3").animate({"opacity":1},300, "linear", null);
}
function OnLoad(event)
{
clearTimeout(timer);
timer = setTimeout(eval("button2_click"),"3000");
}
$('#button1').bind('click', button1_click);
$('#button2').bind('click', button2_click);
$('#button3').bind('click', button3_click);
OnLoad();
});
I thought I had connected my scripts.js file to my HTML file by writing
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/scripts.js"></script>
But when the page is loaded, the buttons don't seem to rotate between the three images.
Can somebody spot my error(s), or tell me how to go about doing this?
EDIT: here is my CSS code for the portion that relates to the banner:
/* ROTATING BANNER CSS */
.slideshow {
position:relative;
padding:0;
margin-left: 12.5%;
margin-right: 12.5%;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
width: 1000px;
height: 250px;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:260px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:10;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:30px;
height:30px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
Here is my 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,300italic' rel='stylesheet' type='text/css'>
<title>filler.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body style="background-image: url('images/bg.jpg')">
<br />
<div class="slideshow">
<ul class="buttons">
<li class="active" id="button1">1</li>
<li id="button2">2</li>
<li id="button3">3</li>
</ul>
<ul class="slides">
<li style="visibility:visible" class="slide" id="image1">
<img alt="warframebuilds" src="images/bannerimg1.png" /></li>
<li class="slide" id="image2">
<img alt="create build" src="images/bannerimg2.png" /></li>
<li class="slide" id="image3">
<img alt="forums" src="images/bannerimg3.png" /></li>
</ul>
</div>
Thanks so much!

You may have to swap two lines:
jQuery(function($) { // short for jQuery(document).ready(function ($) {
new site();
var timer;
// ...
In your code, the new site() was outside of the ready event. So in case you had your code at the beginning of your HTML, these elements were not (yet) ready and thus your code didn't work.
Note on using setTimeout: your example source did some ugly things, with unneeded eval and implicit string to number conversion. Just do
timer = setTimeout(button2_click, 3000);

Related

HTML - div is not clickable

I am trying to create my onepager site and I am not able to click my header
And i want that the is on the right side not under the logo
$(function () {
$('a[href*=#]').stop().click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var UD_HASH = this.hash;
var UD_ZIEL = $(this.hash);
if (UD_ZIEL.length) {
var UD_ABSTAND_TOP = UD_ZIEL.offset().top;
$('html,body').animate({
scrollTop: UD_ABSTAND_TOP
}, 1000, function () {
window.location.hash = UD_HASH;
});
return false;
}
}
});
});
body,html {
width:100%;
height:100%;
margin:0;
padding:0;
}
.ud_scroll {
width:100%;
height:100%;
float:right;
position:relative;
}
div#header {
position: fixed;
left:20px;
top: 10px;
width: 100%;
}
a {
color:black;
opacity:0.5;
text-decoration:none;
text-align:center;
vertical-align:top;
line-height: 100px;
}
a:hover {
opacity:1;
}
nav {
}
nav ul {
margin:0;
padding:0;
font-family: 'Roboto Slab', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrumplex - Home</title>
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="files/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="files/scroll.js"></script>
</head>
<div id="header">
<a href="#">
<img src="files/img/logo.png" alt="Scrumplex">
Scrumplex
</a>
<nav>
<ul>
Hello!
Who am I?
Downloads
Copyright
About
</ul>
</nav>
</div>
<section id="Hello" class="ud_scroll"><h2>Hi</h2></section>
<section id="WhoAmI" class="ud_scroll"><h2>WhoAmI</h2></section>
<section id="dl" class="ud_scroll"><h2>dl</h2></section>
<section id="cc" class="ud_scroll"><h2>cc</h2></section>
<section id="about" class="ud_scroll"><h2>About!</h2></section>
</body>
</html>
My Header is not clickable i dont know why
ps: i'm new to css and html
The problem you have there is that the <section id="hello"> is over all the links because the class .ud_scroll has height:100%. So instead of clicking the links, you are clicking the section. Try making it smaller, or removing the height value.
Next time you can use one of the firefox developer features: The inspector. You can open your page, and click ctrl + shift + I, and try to click on the link. You will see something like this:
Thats telling you that the section, with id hello, with class ud_scroll is over everything else. Since the "Hi" is inside that section, you can click and select it, but anything that is below it is unclicable.

How to display a specific image on clicking a specific list_item in jquery?

I have designed through an image slider . This slider slides through the images well automatically. But I want a specific image also to be displayed when clicking a specific list item just in the below div( the so called round buttons).
That is when even the slider is displaying the 5th image in the queue if I press upon the 2nd list item 2nd image of that sequence should be displayed and again after this slider should normally continue. Again I click back 1,it should display 1st image and again slider rolls on normally.
how to do that ?
Here is my code snippet .
Where am i making it wrong?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#my_image_slider>#1").show("fade", 1000);
$("#my_image_slider>#1").delay(3500)
.hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length; //total number of images
var count = 2;
setInterval(function () {
$(("#my_image_slider #") + count)
.show("slide", {direction: 'right'}, 1000);
$(("#my_image_slider #") + count).delay(3500)
.hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
} else {
count = count + 1;
}
}, 5300);
$(".Round_Buttons li").click(function () {
var id_temp = this.id.charAt(0);
$("my_image_slider #id_temp").show("fade", 1000);
});
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons">1</li>
<li id="2_Round_Buttons">2</li>
<li id="3_Round_Buttons">3</li>
<li id="4_Round_Buttons">4</li>
<li id="5_Round_Buttons">5</li>
</ul>
</div>
</body>
</html>
You don't need to manually show the target image on round button click
Just reset your count variable to that value and let the setInterval function show it.
$(".Round_Buttons li").click(function () {
count = this.id.charAt(0);
});
id_temp is a variable. So you wan to concatenate with the selectory
$(".Round_Buttons li").click(function () {
var id_temp = this.id.charAt(0);
$("my_image_slider #"+id_temp).show("fade", 1000);
});

hide divs and highlighting selected thumbnail to active

I'm creating a team members page and I used this thread to help me out a little.
Fade Out/Fade In of List Items
I have everything working as I want except I can't figure out how to make the other people in
my gallery stay active (red border) and hide the other description of the team members on page load. ( On page load scroll down to see what I mean. )
Here is the code I'm working with.
HTML
<div class="grid_6">
<div id="staffDirectory">
<ul class="team list-image clearfix">
<li class="selectedMember">
<img src="images/team/head1.jpg" class="max-img headshots" />
</li>
<li><img src="images/team/head2.jpg" class="max-img headshots" /></li>
<li><img src="images/team/head3.jpg" class="max-img headshots" /></li>
...
</ul>
</div>
</div><!--End 6-->
<div class="grid_6">
<div id="staffMember">
<ul>
<li class="staffSelected">
<div class="box white-bg">
<img src="images/team/head1.jpg" class="headshots-red" />
<h2 class="red3-tx bold">John Doe 1</h2>
<h3 class="blue4-tx" style="font-weight:400; font-style:italic;">Position: Manager</h3>
<p class="blue3-tx">text</p>
</div>
</li>
...
</ul>
</div>
CSS
#staffDirectory ul li
{
opacity: 0.9;
}
#staffDirectory li:hover{
opacity: 1;
}
.selectedMember {
opacity: 1.0 !important;
}
.staffSelected {
display: inherit;
}
#staffMember li:not(.staffSelected) {
display: none;
}
.team li{
display:inline-block;
float:left;
margin-bottom: 10px;
margin-right: 8%;
width:28%;
cursor: pointer;
}
.headshots{
border:5px solid #034A68;
}
.headshots:hover{
border:5px solid #981B1E;
}
.headshots:active{
border:5px solid #981B1E;
}
.headshots-red{
border:5px solid #981B1E;
margin-bottom:25px;
height: auto;
width: 98%;
}
JS
<script>
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
var newMember = null;
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500);
setTimeout(function() {
$(newMember).fadeIn(500).addClass('staffSelected');
}, 500);
});
});
</script>
Sorry for the code dumb, just not sure where the problem is.
Any help would be appreciated.
Thank you.
EDIT!!! WORKING VERSION
Here is the completed working version of this employee gallery. Thank you to the people that helped me out. Hope someone else can find this useful.
http://codepen.io/daugaard47/pen/ctHru
First off all: Red border.
CSS
.selectedMember>img {
border-color: #981B1E;
}
Second: Hide unselected team members
CSS
#staffMember li {
display:none;
}
#staffMember li.staffSelected {
display:inherit;
}
Note that you created the second #staffMember with the 'staffSelected' class. Only the first one has to have it..
EDIT
Try this JS script:
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
$('.staffSelected').fadeOut(500);
$('.selectedMember').removeClass('selectedMember');
$(this).addClass('selectedMember');
setTimeout(function() {
$('.staffSelected').removeClass('staffSelected');
$("#staffMember ul li:eq("+index+")").fadeIn(500).addClass('staffSelected');
}, 500);
});
});
Try simulating a click event on the first element of the directory after you define the click handler:
$(document).ready(function() {
$("#staffDirectory ul li").click(function() {
var index = $("#staffDirectory ul li").index(this),
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500, function () {
$(this).removeClass('staffSelected');
$(newMember).fadeIn(500).addClass('staffSelected');
});
});
$("#staffDirectory ul li:first-child").click();
});

Clone and insertAfter only once

I want to clone the first-child button from #navCotainer and insert it after the last button.
Now the Problem is: The script kind of inserts the first child 3 times. what do I have to do to get ir right? And also, what am I doing wrong?
of course a link to the fiddle http://jsfiddle.net/ygjDR/ and the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span class="moveNav8 left8">left</span>
<div id="navContainer" style="width: 100%; overflow-y: auto;">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
<script type="text/javascript">
$(document).on('click','.moveNav8', function() {
if($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000, function() {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
});
}
});
</script>
<style type="text/css">
.button {
position: relative; float: left;
width:100px;
height:50px;
background-color:green;
margin-right:10px;
}
.moveNav8 {
position:absolute;
top:100px;
left:0px;
background-color:red;
width:40px;
height:40px;
}
.moveNav8.right8 {
left:100px;
}
</style>
Try this:
http://jsfiddle.net/gtttG/
You need to add a check for $(".button:animated").length === 0.
Animation callback is invoked for every item, appending a button 4 times. Instead execute callback only once after the last animation using deferred pattern:
$(document).on('click', '.moveNav8', function () {
if ($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000).promise().done(function () {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
})
}
});
http://jsfiddle.net/ygjDR/3/

Changing Page With Jquery

So I'm trying to use hashes to animate from page to page. The first page that loads (home) fades in and out perfectly, but the page I'm trying to get to, test (look at hash stuff), won't animate/load at all. Why is this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Jack Cook</title>
<style>
#navbar ul {
list-style-type: none;
display: block;
text-align: center;
}
#navbar ul li {
display: inline-block;
}
#navbar img {
width: 64px;
height: 64px;
padding: 0 10px 0 10px;
}
#navbar a img:hover {
opacity: 0.4;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
pages = {
"home": ["Home", "This is my homepage!", "<p>Homepage</p>"],
"test": ["Test", "This is a testing page", "<p>Testing</p>"]
};
page = window.location.hash != "" ? window.location.hash.substr(3) : "home";
update(page);
$(document).on("click", "a", function() {
if ($(this).attr("href").substr(0, 4) != "http") {
event.preventDefault();
window.location.hash = "!/" + $(this).attr("href");
}
});
$(window).on("hashchange", function () {
$("body").fadeOut(1000, function () {
update(window.location.hash);
});
});
});
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page][2]);
$("body").fadeIn(2000);
}
</script>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
</ul>
</div>
<div id="content"></div>
</body>
</html>
window.location.hash will be '#!/test'
Try this:
var page = window.location.hash.replace('#!/', '');
update(page);
Looks like you need to alter page passed into update to take out the extra characters. When utilizing square bracket notation, the property you are trying to reference must be exactly the string that defines it. As it stands currently, you are trying to get a property called ["#!/"] and it doesn't exist.
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page.replace("#!/", "")][1]);
$("body").fadeIn(2000);
}
jsFiddle example

Categories

Resources