I have small problem with the following. This is ofc just a snippet of the whole code and it is usually run through a setInterval(time,function); command but I'd like to replace the auto-sliding pictures by having instead a "next" button, why can't I just use jQuery and stick it into a
$("#nextBtn").click(nextSlide);
command ? I get my button appearing but no event. Could it be that I'm putting the jQuery command in a JS
function onLoadWindow(e) {}
instead of jQuery's
$(document).ready(function() {})
I just finished learning the basics of JS recently and started jQ shortly after, so I'm still a beginner in both but with some prior programming experience with Java. I'm kinda new to mixing syntax's together. Thanks a bunch for the help! =)
EDIT : replaced code snippet with full code. I tried skimming it by taking out what wasn't needed like a couple tags and relevant styling. But now it seems I can't even get the div button to send text to console so Im pretty sure there's an obvious "noob" error somewhere, sorry for "wasting" people's time ..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Slideshow</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.slide {
height:200px;
width:320px;
position:absolute;
opacity:0;
}
img {
width:100%;
height:100%;
}
#slideshow {
position:relative;
}
.active {
opacity:1;
transition:opacity 1s;
}
#nextBtn {
display:block;
float:left;
height:25px;
width:40px;
background-color:black;
margin-top:210px;
}
</style>
<script type="text/javascript">
window.addEventListener("load",onLoadWindow);
var active_slide;
var slides;
function onLoadWindow(e) {
var slideShow=document.getElementById("slideshow");
slides=slideShow.getElementsByTagName("div");
active_slide=0;
slides[0].classList.add("active");
//setInterval(nextSlide,10000);
$("nextBtn").click(nextSlide);
}
function nextSlide () {
slides[active_slide].classList.remove("active");
active_slide++;
active_slide%=3;
slides[active_slide].classList.add("active");
}
</script>
</head>
<body>
<div id="slideshow">
<div class="slide">
<img src="IMG/bridge.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/leaf.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/road.jpg" alt="" title="" />
</div>
</div>
<div id="nextBtn"></div>
</body>
</html>
it was indeed just a missing hash symbol to correctly refer to the Id .. thanks to all and of course VeXii for pointing it out x)
Related
jQuery functions like .hide(),.fadeIn(),.fadeOut() are not properly working after giving the transition duration property.
example : hide(2000) then after 2 second it is hiding but the animation is not getting applied and it is the common problem i am having with all the jQuery functions
if i delete the transition-duration then all working with animation. Why this is happening? Someone explain it to me and also give solution to solve this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Opening Sequence </title>
<link rel="stylesheet" href="open.css">
<script src="jquery.js"></script>
<script src="open.js"></script>
</head>
<body>
<br><br>
<section id="container">
<p id="content"> This is cool </p>
</section>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
#container
{
width:600px;
height:600px;
margin:0 auto;
border:1px solid red;
line-height:500px;
}
#content
{
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
transition-duration:3s;
}
JS
$(document).ready(function()
{
//alert("Application has been started");
$i=0;
var ob=$('#content');
ob.slideUp(4000);
//ob.hide(2000);
});
problem is after 4 seconds it is hiding but not sliding up, in the sense not animating like hiding from the down to the top
Below code doesnt work on ipad: the page gies completely blank. Works fine on desktop browsers. If I remove the doctype, it works.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block {
background-color:red;
width:100px; height:100px; top:300px;
position:absolute;
}
</style>
</head>
<body>
<div id="skrollr-body">
<div id="block" data-0="left:0px" data-300="left:100px">test</div>
</div>
<script src="js/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
Strange .. using skrollr 0.6.17. Whats wrong ?
*-pike
html, body { height:100%; }
seems to fix it. hm .. is that a bug ? am i missing a lib ?
i have the following code using which i implement effects on an image using javascript.
the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.
now my problem is-- the code i got is for only single images.
when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.
i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.
i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.
my code is
<html>
<head>
<link href="css/overlaycss.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").mouseenter(function() {
$(".overlay").show();
});
$(".main").mouseleave(function() {
$(".overlay").hide();
});
$(".main").mouseenter(function() {
$(".overly").show();
});
$(".main").mouseleave(function() {
$(".overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<ul>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
</ul>
</body>
</html>
css is--
li{
position:relative;
float:left;
padding-left:5px;
}
.main {
width:200px;
height:200px;
}
.overlay
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;
}
.overly
{
position:absolute;
height:50px;
width:150px;
bottom:0;
right:0;
display:none;
}
For displaying hover images on individual images try this:-
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find(".overlay").show();
$(this).find(".overly").show();
});
$("ul li").mouseleave(function() {
$(this).find(".overlay").hide();
$(this).find(".overly").hide();
});
});
So after attending a local coding club meeting for the first time I became inspired to look into jQuery again and try and replicate something one of the speakers talked about. I have got the general idea of the problem done ok, it's just that I can't seem to make the image (that is being hovered over by the cursor) appear over the image that isn't been hovered over. I thought that adjusting the z-index would help negate this but nothing appears to be working.
I have uploaded the files etc to http://www.downloadthatmovie.com/jquery/, and here is the source code for the page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Animation 3</title>
<style type="text/css">
.imgOpa
{
height:200px;
width:200px;
opacity:0.5;
filter:alpha(opacity=50);
z-index:0;
}
article{
padding:20px;
}
img{
z-index:0;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
</head>
<body>
<article>
<p>
<img class="imgOpa" src="img/image1.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image2.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image3.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image4.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image5.jpg" alt="Image 1" />
</p>
</article>
<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
},
function() {
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
})
});
});
</script>
</body>
</html>
The way the images behave right now probably looks weird, but I'm just testing a few things out before I tackle a larger problem. As I said earlier, I am wanting the image that is being hovered over by the cursor to be above the other images. It has been 4 months since I last touched jQuery but have finally kicked myself awake and am re-acquainting myself with it.
Cheers everyone!
This SO thread pointed me to on this post on stacking context. Just add
.imgOpa
{
position: relative;
}
from the sitepoint z-index reference page: [z-index] specifies the stack level of a box whose position value is one of absolute, fixed, or relative.
this is my 1st time posting here, so thanks to everyone who can give me some advice!
<html>
<head>
<style>
</style>
<script src="jquery-1.5.2.js"></script>
</head>
<body>
<div
class="super"
style="
border: solid black 1px;
height:100px;
width:100px;
">
</div>
<div
class="super .eight"
style="
background: blue;
">
</div>
<script>
$(".super").click(function () {
$(this).addClass(" .eight");
});
</script>
</body>
</html>
So basically the problem is that I want to add for example a background or some other type of element onto class that is already defined as super. I am trying to use subclasses but it does not seem to be working.
Please ask me if there is anything unclear, I apologize if there is.
No dot (in the classname).
$(".super").click(function () { $(this).addClass("eight"); });
$(".super").click(function () { $(this).addClass("eight"); });