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.
Related
I have a div that contains a header. In this header I will write characteristics of the object I am clicking on in the page. The initial on-click trigger works fine and processes the post request to a local flask server and displays the plot in the div using plotly.js. The problem comes in when the div is collapsed by clicking on the header and then trying to click on an object in the page. The desired outcome for this second on-click event is for the data inside the 'plot data' div to update, and causing the header to expand if it is minimized. However, the observed behavior is that if you click on an object, triggering an on-click event while the div is hidden, it results in the following error in the dev console.
Cannot read properties of null (reading 'innerText')
referencing this line:
console.log(document.getElementById("header symbol").innerText)
The relevant code here is below:
Jquery for expanding and closing the div
$(".header").click(function () {
const $header = $(this);
//getting the next element
var $content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(200, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
console.log(document.getElementById("header symbol").innerText);
$header.text(function () {
//change text based on condition
return $content.is(":visible")
? `▼ ${clickedBranchName} -- ${clickedBranchFromBus} ⟶ ${clickedBranchToBus}`
: `▲ ${clickedBranchName} -- ${clickedBranchFromBus} ⟶ ${clickedBranchToBus}`;
});
});
});
Plotting the data into the 'plot data' div:
function plotFlow(info) {
console.log(info.object.properties.name);
const dates = topoData.data.datetime;
const flows = topoData.data.flow;
var trace1 = { x: dates, y: flows, mode: "lines", type: "scatter" };
var data = [trace1];
var layout = {
plot_bgcolor: "rgba(128,128,128,1)",
paper_bgcolor: "rgba(128,128,128,1)",
height: 350,
xaxis: {
tickmode: "auto",
nticks: 36,
},
};
var plot_div = document.getElementById("plot_data");
// plot_div.replaceChildren();
console.log(document.getElementById("header symbol").innerText);
document.getElementById(
"header symbol"
).innerText = `▼ ${clickedBranchName} -- ${clickedBranchFromBus} ⟶ ${clickedBranchToBus}`;
console.log(document.getElementById("header symbol").innerText);
Plotly.newPlot(plot_div, data, layout);
}
And finally,. index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<title> WHO!?!?</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
font-family: sans-serif;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container {
position: absolute;
margin: 0;
bottom: 0px;
width: 100%;
border:1px solid #d3d3d3;
z-index: 999;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="plot_div" class="container">
<div class="header">
<span id="header symbol">▲</span>
</div>
<div id="plot_data"></div>
</div>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
App.renderToDOM(document.getElementById("app"));
</script>
</html>
So for anyone who may run into this rather niche error, I replace the ? : if statement in the jquery with an actual if else statement and it is behaving as expected.
I am making a website where a video has to be shown, this video to hide the recommended videos and prevent the URL from being obtained, I established a layer in front of the video, then I put a div in front of the iframe so that it would not let interact with the video interface.
The problem I have is that when testing with FIREFOX it works correctly, when testing with Google Chrome, it does not work for me, the screen remains plastered, That is, when displaying the page, the embedded video has a layer as an image and a button, I do this with PlayerState.UNSTARTED, and adding the corresponding class to show me said image, playerWrap.classList.add ("ended") ;.
I have no error in the console.
However, if I try the same with Google Chrome, when displaying the page, the embedded video only keeps the image layer, it does not let me click to play video.
any idea why this happens?
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="imgs/icon/favicon.ico">
<style>
.hytPlayerWrap{
display:inline-block;
position:relative
}
.hytPlayerWrap.unstarted::after{
content:"";position:absolute;
top:0;
left:0;
bottom:0;
right:0;
cursor:pointer;
background-repeat:no-repeat;
background-position:center;
background-size:64px 64px;
background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
}
.hytPlayerWrap.ended::after{
content:"";position:absolute;
top:0;
left:0;
bottom:0;
right:0;
cursor:pointer;
background-repeat:no-repeat;
background-position:center;
background-size:64px 64px;
background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
}
.hytPlayerWrap.paused::after{
content:"";
position:absolute;
top:70px;
left:0;
bottom:50px;
right:0;
cursor:pointer;
background-repeat:no-repeat;
background-position:center;
background-size:40px 40px;
background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}
.hytPlayerWrap.ended iframe,
.hytPlayerWrap.paused iframe{
visibility: hidden;
background-repeat: no-repeat;
}
.hytPlayerWrap {
background-position: center;
background-repeat: no-repeat;
}
.yt-cover{
position: absolute;
top: 0;
bottom:0;
right:0;
left:0;
z-index:1000;
}
</style>
<title>Congreso Intessrnacional 2021</title>
</head>
<body id="plenario">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<br><br><br><br>
<div class="row">
<div class="col-2"> </div>
<div class="col-8 text-center">
<div class="hytPlayerWrapOuter" >
<div class="hytPlayerWrap" style="background-image:url(imgs/intro22.png)">
<iframe id="yt-frame" width="605" height="340" src="https://www.youtube.com/embed/6XYzWjixpwE?rel=0&autoplay=1&mute=0&control=1&enablejsapi=1&autoplay=0&fs=0&rel=0&modestbranding=1&showinfo=0&iv_load_policy=3&modestbranding=1&nologo=1" frameborder="0" ></iframe>
<div class="yt-cover"></div>
</div>
</div>
</div>
</div>
<div class="col-2"> </div>
</div>
</div>
<div class="seccion-regresar-plenario">
<a class="boton-regresar-plenario" href="salones.php"></a>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/utiles.js"></script>
<script>
"use strict";
document.addEventListener('DOMContentLoaded', function () {
if (window.hideYTActivated) return;
let onYouTubeIframeAPIReadyCallbacks = [];
for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
let playerFrame = playerWrap.querySelector("iframe");
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let onPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.UNSTARTED) {
playerWrap.classList.add("ended");
}
else if(event.data == YT.PlayerState.ENDED) {
playerWrap.classList.add("ended");
} else if (event.data == YT.PlayerState.PAUSED) {
playerWrap.classList.add("paused");
} else if (event.data == YT.PlayerState.PLAYING) {
playerWrap.classList.remove("ended");
playerWrap.classList.remove("paused");
}
};
let player;
onYouTubeIframeAPIReadyCallbacks.push(function () {
player = new YT.Player(playerFrame, {events: {'onStateChange': onPlayerStateChange}});
});
playerWrap.addEventListener("click", function () {
let playerState = player.getPlayerState();
if (playerState == YT.PlayerState.UNSTARTED) {
player.playVideo();
}
else if(playerState == YT.PlayerState.ENDED) {
player.seekTo(0);
} else if (playerState == YT.PlayerState.PAUSED) {
player.playVideo();
}
});
}
window.onYouTubeIframeAPIReady = function () {
for (let callback of onYouTubeIframeAPIReadyCallbacks) {
callback();
}
};
window.hideYTActivated = true;
});
</script>
</body>
</html>
I have a list of li elements with one class in my HTML. I want to grab them all and place them in an array and then find out how many have I grabbed. However, whenever I try to output the .length property of the array that the document.getElementsByClassName is in, it is just resulting to 0. Here's my code:
function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');
console.log(clickInfo.length);
}
activateFeedMain();
Here's the HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta id="refresh" http-equiv="refresh" content="300">
<title>News and Events</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/hfreplacement.js"></script>
<script type="text/javascript" src="scripts/news.js"></script>
<style type="text/css">
#content-col1 ul {list-style-type: none;}
#content-col1 ul li {background-color: #66FFCC; border-radius: 5px; padding: 12px; margin-bottom: 8px;}
#content-col1 ul li:hover {background-color: #FFFFCC;}
.description {font-weight: bold; font-style: italic;}
.date, .type, .approval {font-size: 12pt; padding-right: 25px; padding-left: 18px; display: inline-block; border-right: 1px solid black;}
.date {padding-left: 0px;}
.approval {border: none;}
.invisible {display: none;}
#content-col1 ul a:hover {text-decoration: none;}
#content-col1 ul a {text-decoration: none; cursor: pointer;}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div id="content-col1">
<p class="note">Refresh for updates</p>
<script>newsContent();</script>
</div>
<div id="content-col2">
<h1>Latest</h1>
<ul>
</ul>
</div>
</div>
<div id="foot"></div>
<script type="text/javascript">
function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');
console.log(clickInfo.length);
}
activateFeedMain();
</script>
</body>
</html>
The ScriptnewsContent(); installs all the lis in the ul. On a side note, when I use console.log(clickInfo) it is giving me the list of array. Something has to do with the .length property...
Also, when I try to use console.log(clickInfo[1]);, it's giving me undefined...
Working fiddle
The reason that you're having this issue is because your newsContent function is dynamically creating creating the content on the page asynchronously, in parallel with your activateFeedMain function. Since they're being called at the same time, the elements from your newsContent function haven't been created at the time that activateFeedMain is being called.
You can solve this issue by giving newsContent a callback function that will be executed when it's finished running.
function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');
console.log(clickInfo.length);
}
// Call activateFeedMain() once newsContent has finished
newsContent(activateFeedMain);
And where you define newsContent, design it to take a callback like so:
function newsContent(callback){
...
// When this function is done
if(typeof callback === 'function'){
callback();
}
}
I've a panel with a copy link inside, when I click to open my panel a display:none is added automatically
to solve that i added this line on my jquery part: showme.style.display = "none"; now we can open the panel perfectly but it's impossible to close it after
someone have a solution ?
here is my link WITHOUT showme.style.display = "none";:
here is my link and here is my code WITH showme.style.display = "none";:
<!DOCTYPE HTML><!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
div#panel1 {
display: block;
background-color:#eee;
visibility: hidden;
}
.flip1 {
display: block;
background-color:#eee;
}
#check {
visibility: hidden;
width:12px; height:12px;
}
span#copy-callbacks, span#copy-callbacks2 {
float: none; cursor:pointer;
}
.zclip {
border:1px solid red;
position:relative;
display:inherit;
}
div#zclip-ZeroClipboardMovie_1.zclip {
position: relative;
margin-top:-18px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("span#copy-callbacks").zclip({
path:"ZeroClipboard.swf",
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#copy-callbacks').css('display','none');
},
afterCopy:function(){
$('#copy-callbacks').css('display','block');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function () {
$(this).css({"color":"#e0ccb4"});
},
function () {
$(this).css({"color":"#000"});
}
);
$(".flip1").click(function(){
$("#panel1").slideToggle("fast");
});
});
function newwindow() {
var showme = document.getElementById("panel1");
showme.style.visibility = "visible";
showme.style.display = "none";
}
</script>
</head>
<body>
<div style="margin-top:150px;" onclick="newwindow()" class="flip1">Click to slide the first panel down or up</div>
<div style="display: block; padding-bottom:80px;" id="panel1">
<span id="copy-callbacks"> Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
You don't need newwindow()
For #panel1 : in document-level style, remove visibility and display.
For #panel1 : in inline style, make display : none
I am talking about the first link.
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);